プログラマーへの道 #22 の補足説明
こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。
let を const に変更
以前の動画で説明していますが、let と const の説明は以下です。 再代入しない変数は const で定義します。
Array.from() について
配列はメソッドとして foreach(), filter() などの配列操作をする際に便利なメソッドを持っています。 getElementsByTagName() で取得するHTMLの要素は配列のように見えますが、配列ではないので、それらのメソッドを利用することができません。 そこで配列のようなものを配列に変換するために Array.from() を利用しています。
Array.from() - JavaScript | MDN
チェックボックスの状態
チェックボックスはHTMLのinputタグで type="checkbox" にすることで生成することができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/checkbox
チェックボックスがチェックされているかどうかは checked プロパティにて確認することができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/checkbox#additional_attributes
今回はJavaScriptで動的にチェックボックスにチェックを付けましたが、 HTML上でチェックボックスをチェックした状態にする書き方は以下になります。 checked というのが一番最後についていますね。
<input type="checkbox" name="vehicle3" value="Boat" checked>
なので、JavaScript でも checked というプロパティをtrueにすることでチェックを付けることができます。 JavaScript のHTML要素のプログラミングはこのようにHTMLの各属性と連動していることが多いので、 慣れてくると「なんとなくこうすればよさそうかな」というのは分かってきます。
checked と似たようなものとして disabled という属性もあります。
<input type="text" placeholder="郵便番号" disabled>
:disabled - CSS: カスケーディングスタイルシート | MDN
filter() の戻り値について
JavaScript の filter() は特定条件に一致した要素を集めた新規の配列を生成するメソッドです。 その名の通り、元の配列の要素をフィルタしているわけです。 戻り値として false を返すと、フィルタされて新規の配列の要素にはなりません。
