f@ctor

JavaScript関連のことを調べてみた2022年12月24日

JavaScript関連のことを調べてみた2022年12月24日
目次

GitHub の Issues を Markdown 形式で出力する

# 背景

私は手元の Markdown ファイルにタスクを書き出すことが多いのですが、その際に GitHub の Issues をタスクとして持ってきたいことがしばしばありました。数が少なければ普通にコピペで十分なのですが、多かったりすると大変です。

ということで楽にできる方法を考えました。

# 手順

1. GitHub の Issues を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248726/158f1e21-6e5a-8f7c-d81f-04b57b348153.png)
2. 開発者ツールを開き、コンソールで下記コードを実行する
“`javascript
console.log(Array.from(document.getElementsByClassName(‘h4’)).reduce((carry, e) => e.href ? carry + ‘- [‘ + e.innerText + ‘](‘ + e.href + ‘)\n’ :

元記事を表示

コードネームについて

## はじめに
オフィスで雑談するネタがないなー、と悩んでいるあなた！
コードネームの話で盛り上がってみませんか？
IT業界であれば、使用技術のバージョンのコードネームの話は結構盛り上がるのでおすすめです！

この記事では、PHPやJavaSceipt関連のコードネームについて、ご紹介します。

## 対象者
この記事は下記のような人を対象にしています。

– 駆け出しエンジニア
– プログラミング初学者
– 職場の雑談ネタに困ってる人

## 結論
IT業界なら、コードネームの話は絶対盛り上がる！

## MacOSのコードネーム
まずはみんな使ってるMacOSのコードネームについてです。
10.0~10.8まではネコ科の動物の名前。
10.9以降は唐突にカリフォルニアの地名シリーズに変更。ネコ科はネタ切れだったのか…
猫がいる会社に所属している身としては残念です。
ちなみに、10.9以降のデフォルト壁紙はそれぞれの地名をイメージしたものになっているので要チェックです！

| バージョン | コードネーム | 読み方 |意味|リリース|
|—|–

元記事を表示

2022 VIVA JS World Cup 開幕!! 〜 Vue 3で作るサッカーゲーム 〜

本記事は[Cocone Advent Calendar 2022](https://qiita.com/advent-calendar/2022/cocone)の24日目の記事となります。

## こんにちは

メリークリスマス!!

こんにちは。ココネ株式会社 CTOの髙山です。

[Cocone Advent Calendar 2022](https://qiita.com/advent-calendar/2022/cocone)の一日目の記事を投稿したのですが、

https://qiita.com/panicdragon/items/aa9d0c946b1637f22da8

その後、 @maruc さんから **「えぇ、もう書かないんですかぁ〜」** と、煽られたのでもう一記事投稿する事になりました。

いやぁ、しかし先週の日曜日は、 M1グランプリやワールドカップやらで何かと忙しかったですね。

しかし、色々感動しましたね。特にワールドカップの決勝はすんごい試合でしたね。

歴史的な試合ですね。あれは。

日本戦も凄かったですねぁ。前評判は良くなかった日本ですが、いざ本番

元記事を表示

Vue Flow触ってみた

# はじめに

組織図のようなものを作成できるツールを探していたところ、
[Vue Flow](https://vueflow.dev/)を発見。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/bf123cbe-42f0-61f6-d073-f56bee77f86f.png)

早速使ってみました。

# 導入

vue-flowの本体と、各コンポーネントを必要に応じてインストール

“`bash
// vue-flow本体
yarn add @vue-flow/core
// 各コンポーネント
yarn add @vue-flow/background @vue-flow/controls @vue-flow/core @vue-flow/minimap @vue-flow/node-toolbar
“`

# 用語

## Nodeとは

こいつのこと。
![image.png](https://qiita-image-store.s3.ap-northeast

元記事を表示

[Day24] ドキュメントとリソースの読み込み

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 2.2.1 ページのライフサイクル: DOMContentLoaded, load, beforeunload, unload
### 知らない単語
– ハンドラとは
– コンピュータプログラムやその一部分で、何らかの処理要求が発生したときに起動されるもの

– トリガとは
– きっかけになる出来事が起こったら自動的に特定の処理を起動するソフトウェアの仕組み

### 学んだこと
HTML ページのライフサイクルは、3つのイベントを持つ

DOMCon

元記事を表示

クリスマスにちなんだブラウザゲームを作ってみた(その2)

# はじめに
昨年に引き続き、クリスマスにちなんだゲームを作ってみました。
PCとスマートフォンで遊べます。
昨年のものは[こちら](https://qiita.com/noji505/items/6af1f143e2246e4cbbd1)

すぐに遊んでみたい方は[こちら](#ゲーム)

# ゲーム説明
ゲームのイメージはこのようになります
01.png

* 画面中央下のサンタを操作し、プレゼントを上の人の所に運びます
* 頭上にそれぞれ欲しいプレゼントが表示されており、同じ色のプレゼントを渡す(※)とスコアがアップします
* 3つ全て運ぶと再度プレゼントが出現するのでそれを繰り返します
※プレゼントを持った順番通りに渡さないとダメです

# 力を入れた点など

元記事を表示

【X】XMLHttpRequestを何も考えずに使いたい

外部ファイルを持ってきたいとき〜！！

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

## 結論

これをベースにすればだいたいなんとかなる

“`js
let url = “https://example.com/”
let xhr = new XMLHttpRequest();
xhr.open(“GET”, url);
xhr.responseType = “document”; // text, arraybuffer, blob, document, jsonが使用可能。jsonのresponseは自動パースされる
xhr.send();

xhr.onload = () => {
if (xhr.status != 200) {
console.log(“取得に失敗”);
} else {
/* やるべき処理 */
/* xhr.responseにレスポンス文が入ってます */
}
};
“`

## better

Fe

元記事を表示

WKWebView からPythonista3 でJavaScript とお戯れあそばせ

この記事は、[Pythonista3 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pythonista3) の24日目の記事です。

https://qiita.com/advent-calendar/2022/pythonista3

一方的な偏った目線で、Pythonista3 を紹介していきます。

ほぼ毎日iPhone（Pythonista3）で、コーディングをしている者です。よろしくお願いします。

以下、私の2022年12月時点の環境です。

“`sysInfo.log
— SYSTEM INFORMATION —
* Pythonista 3.3 (330025), Default interpreter 3.6.1
* iOS 16.1.1, model iPhone12,1, resolution (portrait) 828.0 x 1792.0 @ 2.0
“`

他の環境(iPad や端末の種類、iOS のバージョン違い)では、意図としない挙動(エラーになる)なる場合もあり

元記事を表示

Node.js ってなんだ？

「Node.js って結局なに？」
って急に聞かれても答えられない気がします。

私は Node.js = JavaScript をサーバーで動かす環境、くらいの認識だったのですが、きちんと調べてみると間違っていたのでまとめていきます。

## Node.js とは

[公式ドキュメント](https://nodejs.dev/en/learn/) には以下のようなことが書かれていました。

– JavaScript の実行環境
– 拡張性の高いネットワークアプリケーションを構築できる
– Google Chrome のコアとなっている、（高速に動作する） V8 エンジンをブラウザの外で動かすことで高いパフォーマンスを実現している
– ほとんどの種類のプロジェクトに対応できる
– クロスプラットフォーム
– オープンソース
– スレッドを複数立ち上げることが重大なバグの原因となるため、シングルプロセスであり、非同期処理に対応
– JavaScript を書いていた人にとっては別言語を勉強せずにサーバーサイドの開発ができるメリットがある
– ブラウザのアップデートを待たずに新しい ECM

元記事を表示

【CSS】ポケモンカードのレアリティを忠実に再現したサイトが凄すぎた。

## はじめに
![画面収録 2022-12-17 22.32.18_4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/14cb49b0-71f1-252c-e765-f3abe461b09c.gif)

https://deck-24abcd.netlify.app/?ref=sidebar

みなさんは、ポケモンカードのレアリティを忠実に再現したサイトをご存知ですか？
SNSなどでも色々と話題になっているサイトです。　

私がこのサイトを初めて見た時、ポケモンカードのレアリティの表現のクオリティの高さとシンプルなHTML/CSS/JavaScriptで作られていることにとっても感動しました。

そこでこの記事では、
どのようにこのポケモンカードのレアリティを表現しているかをか、
マウスホバーに合わせて、どのように3Dに動いているのかを解説していこうと思います。

## レアリティ表現について
![image1.png](https://qiita-image-store.s3.ap-n

元記事を表示

C3に入って

### この記事はC3 Advent Calendar 2022 24日目の記事です

こんにちは！今日はクリスマスイブですね?
皆さんいかがお過ごしでしょうか？

本日はC3入りたて2か月目Hackお勉強中?の　なか　がお送り致します．
~~去年は卒論のデータまとめで萎えスマスでしたが今年はゆっくりできそうでうれしいです~~

今回はC3に入った経緯と入ってやってきたことについてさらっと書いていきます

## 1.C3に入る前の私
もともといた高専は卒業し，今年から九工大に編入学しました．

###### 余談ですが，編入生は専門に強いイメージが多いらしいです．

しかし私はむしろプログラムが苦手な方でした．

##### そんな時秋初めの実験の日に同じグループになった人から話しかけられました．
C3に興味ないですか？と言われたのですが
「プログラム得意じゃないですし，あまりITでも開発に関わらないところに就職するつもりなので・・」
とお断りをしました．

するとその人は
#### 「情報系の技術者として企業に入るのにプログラムできなくてどうするの？」
と問いかけてきました．
こ

元記事を表示

MapLibre GL JSで地理院標高タイルを利用するためのモジュールを公開しました

:::note info
これは [MIERUNE AdventCalendar 2022](https://qiita.com/advent-calendar/2022/mierune)　24日目の記事です。
昨日は @sorami さんによる [国土地理院「地名集日本」を餅から米](https://qiita.com/sorami/items/804dcaa90091f3f3445b) でした。
:::

## TL;DR

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/a8945daf-1d3f-801b-d40f-8e06ccfa1af4.png)*（こいついつも富士山の3D地図作ってんな…）*

MapLibre GL JSで地理院標高タイルを扱えるようにする`maplibre-gl-gsi-terrain`を公開しました

https://github.com/Kanahiro/maplibre-gl-gsi-terrain

https://kanah

元記事を表示

JavaScriptのvar, let, constの違い

||let|var|const|
|:-:|:-:|:-:|:-:|
|再宣言|不可能|可能|不可能|
|再代入|可能|可能|不可能|
|スコープ|ブロックスコープ|関数スコープ|ブロックスコープ|
|繰り返し構文|可能|可能|不可能|

##### 参考サイト
https://techplay.jp/column/1619

元記事を表示

【2022年】JavaScript データ型を MDN 読んで全部まとめる【オブジェクト編】

この記事は [プリミティブ編](https://qiita.com/kotaro-caffeinism/items/f5a8980db3d184c1e844) の続きです。 そちらでは JavaScript のデータの性質についてもまとめているのでよければご覧ください。

https://qiita.com/kotaro-caffeinism/items/f5a8980db3d184c1e844

## オブジェクトに属するデータ型たち

オブジェクトに分類されるのは以下です。

– Object
– Date
– Function
– インデックス付きコレクション
– Array
– 型付き配列
– キー付きコレクション
– Map
– WeakMap
– Set
– WeakSet

## Object

> JavaScript では、オブジェクトはプロパティの集合として見ることができます。
（中略）
プロパティは追加したり削除したりすることができます。プロパティの値は、他のオブジェクトを含むあ

元記事を表示

ReactHooksについてまとめる（Other Hooks useId）

# 概要
ReactHooksのOther Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回はuseId編です。

## useId
useIdは、アクセシビリティ属性に渡す一意のIDを生成するためのReact Hookです。

> リスト内のキーを生成するために useId を呼び出さないでください。キーはあなたのデータから生成されるべきです。

### アクセシビリティ属性のためのユニークなIDを生成する
例えば、`aria-describeby`のような2つのタグが関連していることを示すための属性があります。通常のhtmlでは以下のように指定して使用します。

“`html

The password should contain at least 18 characters

元記事を表示

web-ifcでIFCファイルを読み込む

# はじめに

[前回の記事](https://qiita.com/kiyuka/items/00434f1b8e0b38c621fb)ではIFCファイルのテキストを見て手作業で解読しました。まあなんというかとてもめんどくさい作業でした。~~もうやりたくないです。~~
そんなわけで今回はJavaScriptライブラリの [IFC.js](https://ifcjs.github.io/info/) を使って解読していきたいと思います。

# IFC.js とは

IFC.jsが何かというと、[公式ドキュメント](https://ifcjs.github.io/info/ja/docs/Introduction)より

> IFC.jsは、IFCファイルの読み書きを非常に簡単に行うことができるJavaScriptライブラリです。

とのことです。わざわざ手作業でIFCファイルを読み解く必要はないってことですね！やったー！！

# web-ifcでファイルを読み込む

IFC.jsは `web-ifc`, `web-ifc-three`, `web-ifc-viewer` の3つのレイヤー

元記事を表示

ビット全探索について

今日は学んだについてメモしていこうと思います。
先日書いた記事ではなにかゲームを作ろうとしていましたが、
今日はビット全探索について学んだことを自分なりにまとめて
見ようと思います。あまり難しい事は言わないようにします。
~~てゆうか自分があまりわからない。~~
# ビット全探索とは
まずビット全探索とは何かについて簡単に説明します。
名前の通り２進数を使って０が「使わない」１が「使う」として、
部分集合を列挙して探索するものである。
# 例題を見ていきましょう
[ALDS_5_A – 総当たり](https://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=ALDS1_5_A&lang=ja)　

JavaScriptでの答え。
“`javascript:js.js
let N = Number(lines[0]);
let S = lines[1].split(” “).map(Number);
let p = Number(lines[2]);
let m = lines[3].split(“

元記事を表示

彼女の怒りを早急に鎮火。むしろ怒りを遊びに転換したい。〜obnizで早押しゲームつくり〜

# 続・彼女のブチギレ案件

どうもこんにちは。
以前、トイレの蓋を閉め忘れて彼女にブチギレられたので、obnizでアラート機能をつくった者です。

https://qiita.com/atoms50/items/81a401fa705937746900

その後、トイレの蓋の閉め忘れはなくなり、トイレ文脈で彼女にキレられることはなくなりました。
一方で、これは根本的な解決ではありません。
彼女がブチギレる火種は生活の中に溢れているのです。
最近だと、こんな事象が発生し、ブチギレられてしまいました。
– 氷結とスルメイカの食べ残しを机に放置してブチギレられたり
– プレゼントでもらった財布をタクシーに置き忘れてブチギレられたり

毎度毎度、事象に対して対策をあてていってもキリがありません。
なので、今回は彼女のブチギレに対して根本的な解決をはかりました。

# 彼女の怒りの鎮火作業は「業務」
僕にとって、彼女の怒りを鎮火する行為は「業務」です。
鎮火作業において最も重要なことは、炎上する前に、火種を消すことです。
炎上してしまったら最後、取り返しがつかないことになってしまうからです。

元記事を表示

JavaScript をかじったことがある人のための JavaScript 「再」入門

## [JavaScript 「再」入門 – MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Overview)

を読みましょう。(出オチ)

JavaScriptの仕様策定にも大きな影響力を持ったMozillaの開発者向けWebサイト『MDN』が公開してくれています。
これ以上に出自の信頼性が高く、なおかつコンパクトに特徴がまとまっている再入門記事はありません。

## 参考リンク

[JavaScript 「再」入門 – MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Overview)

元記事を表示

GAS × Slack Bot で全社ウォーキング大会 444 名のふりかえりをパーソナライズした分析情報で応援した話（実装サンプル付き）

本記事は株式会社 [Works Human Intelligence](https://www.works-hi.co.jp/) の [アドベントカレンダー](https://qiita.com/advent-calendar/2022/advent-works-hi) の 22 日目の記事となります。

昨日は @shishi_doooo さんの記事「[そうだ、100 万件データ作ろう](https://qiita.com/shishi_doooo/items/2e820d93fd83b66163ae)」でした。
よろしければ、ぜひ他の記事もご覧になっていってください。

## はじめに

アドカレのテーマが `「Develop fun!」を体現する！ Works Human Intelligence Advent Calendar 2022` なのですが、当社には Value には **Work fun!** という行動理念

元記事を表示

OTHERカテゴリの最新記事