2021-08-25

プログラマーへの道 #26 の補足説明

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

Twitter Bootstrap の日本語サイトについて
Twitter Bootstrap の導入
モーダルの表示について
textarea のHTML
フレームワークの習得には時間がかかる

Twitter Bootstrap の日本語サイトについて

以下が日本語に翻訳されているサイトのURLです。

ただ、Twitter Bootstrap に限らず、海外の英語のドキュメントは一部が日本語に対応していなかったり、最新の内容が日本語として反映されていなかったりするので、英語のドキュメントを参考にするのがおすすめです。衣亥栖ティオも基本的には英語のドキュメントを参照しています。

Twitter Bootstrap の導入

以下のテンプレートをコピペするだけです。

Introduction · Bootstrap v5.1

動画ではすでにHTMLやscriptタグを書いていたので、テンプレートをコピペしたあとにそれらを移植しています。

Twitter Bootstrap に限らず、技術の使い方は公式ドキュメントで提供されていることが多いので、まずは公式ドキュメントを探すのがおすすめです。公式ドキュメントの "Getting Started" や "Usage" などを見ると導入方法や簡単な使い方の説明が載っています。

モーダルの表示について

ドキュメントは以下です。

Modal · Bootstrap v5.1

動画中でコピペしたモーダルのHTMLは以下です。

Modal · Bootstrap v5.1

実はモーダルにもいくつか種類があるので、好みのモーダルを選ぶことができます。

Modal · Bootstrap v5.1

JavaScript でモーダルを表示するための説明は以下に載っています。

Modal · Bootstrap v5.1

まずはモーダルのHTML要素を取得する必要があるので、以下をコピペしました。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Modal · Bootstrap v5.1

しかし、このコードは修正する必要があります。

まずは bootstrap.Modal() の第2引数である options という引数を削除しました。これはオプションなので、なくても動くと思ったからです。必要に応じてあとで設定する予定です。

次に getElementById() で指定しているidをモーダルのHTML要素のidと一致させる必要があります。動画中ではHTMLのidが "exampleModal" だったので、それを指定するように修正しました。最終的に以下のようなコードになりました。

const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))

モーダルを表示させるには myModal という変数に対して何かしらのメソッドを実行する必要があります。ドキュメントを見てみると show() というメソッドがあったので、これを実行したところ、モーダルが表示されるようになりました。

const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()

Modal · Bootstrap v5.1

プログラミングではドキュメントから必要な情報を見つける能力が必須になるので、いろんな技術を使って、たくさんドキュメントを読んで、見つける能力を向上させるとよいと思います。

textarea のHTML

以下をコピペするだけです。

Floating labels · Bootstrap v5.1

検索対象のワードが分かっている場合はドキュメントの検索機能を使って検索すると、欲しい内容がすぐに見つかる傾向にあります。今回は textarea を表示したかったので、"textarea" と検索したところ、すぐに見つけることができました。

フレームワークの習得には時間がかかる

Twitter Bootstrap のようなフレームワークはとても便利ですが、多機能なので、習得するまでにはある程度の時間がかかります。本来であれば、ドキュメントを一通り読んで何ができるのか? 便利な機能はないか? というのを確認してから利用し始めるのが良いと思います。

2021-08-22

プログラマーへの道 #25 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

checkboxのイベントについて
Visual Studio Code のオートフォーマットについて
イベントリスナーの外の変数を参照するプログラムについて

checkboxのイベントについて

checkboxのイベントを登録する際に "change" イベントを使いました。値が変更されたときに発火するイベントのようなので、"click" イベントよりも適切かなと思っています。

HTMLElement: change イベント - Web API | MDN

Visual Studio Code のオートフォーマットについて

以下の記事で説明されています。 "Format On Save" にチェックを付けると保存時に自動的にインデントが揃うようになります。

VisualStudioCodeに自動整形機能があった - Qiita

イベントリスナーの外の変数を参照するプログラムについて

動画中の以下のコードでは、チェックボックスのイベントリスナー内で deleteAllMemos という変数を参照しています。このようにイベントリスナー外の変数がHTML要素としての情報を持っていることがあります（今回は deleteAllMemos がチェックボックスの状態を持っていることになります）。その場合は、インベントリスナー内でその変数を利用することによってイベントリスナーの処理を分岐することができます。

const deleteAllMemos = document.getElementById("id-delete-all-memos")
deleteAllMemos.addEventListener("change", (event) => {
  const checkboxes = document.getElementsByClassName("class-checkbox")
  if (checkboxes.length == 0) {
    return
  }

  Array.from(checkboxes).forEach((checkbox) => {
    //ここで deleteAllMemos を参照している。
    if (deleteAllMemos.checked == true) {
      checkbox.checked = true
    } else {
      checkbox.checked = false
    }
  })
})

一方で以下のように if 文の直前でチェックボックスのHTML要素を取得しても同じことができます。動画ではHTML要素を取得する部分を一箇所にしておきたいと思ったので、↑の方法で実装しましたが、どちらでもいいと思います。

//省略

    const deleteAllMemos = document.getElementById("id-delete-all-memos")
    if (deleteAllMemos.checked == true) {
      checkbox.checked = true
    } else {
      checkbox.checked = false
    }

//省略

2021-08-21

プログラマーへの道 #24 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

HTMLにid, class, data属性を指定する
data属性について
id, class, data属性の使い分けについて
JavaScriptにおけるHTMLタグ操作について

HTMLにid, class, data属性を指定する

前回の動画では tbody, tr, td, input というHTMLのタグを順番に辿っていくことでチェックボックスの状態をチェックし、チェックされているメモに対応するtrを特定するためにtdの親要素をparentElementにて取得していました。 HTMLのタグ構造をそのまま利用するというのは考え方としてはシンプルですが、手間がかかる（プログラムが複雑になる）ので、今回の動画で説明したように id, class, data属性を上手く使ってプログラムをシンプルに保つことが重要になります。

data属性について

data属性については以下で解説されています。 data属性のアクセスはdatasetを利用するのが標準のようなので、動画中でもdatasetを利用しています。 developer.mozilla.org

id, class, data属性の使い分けについて

idとclassはHTMLの装飾に利用されるものなので、主にCSSのための属性です。一方でdata属性はJavaScriptによる操作にために利用される属性です。

動画中では削除対象のメモを識別するために data-memo-id というdata属性を定義し、チェックボックスを取得するためにclass属性に class-checkbox という値を設定しました。ただ、class属性のclass-checkboxはHTMLの装飾とは関係ないものになるので、data属性で定義した方がよかったかもしれません。

参考

How You Can Use HTML5 Custom Data Attributes and Why - SitePoint

JavaScriptにおけるHTMLタグ操作について

今までの動画でHTMLタグの取得と操作で getElementById() や remove() などのメソッドを利用していきました。これら以外にもいろんな取得方法と操作があります。

参考

2021-08-19

プログラマーへの道 #23 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

foreach() について
remove() について
getElementsByTagName() の戻り値について

foreach() について

動画中ではチェックボックスにチェックがついているメモを削除するために、チェックがついているチェックボックスを持つtdの配列をforeach()で回していました。 foreach()はfilter()とは異なり、新規配列を戻り値として生成しないので、単にループの中で処理をするだけの場合に利用されます。

Array.prototype.forEach() - JavaScript | MDN

remove() について

remove()はHTML要素を削除できるメソッドです。

Element.remove() - Web API | MDN

しかし、Internet Explorer（IE）ではサポートされていません。 IEをサポートする場合は removeChild() を利用する必要があります。

参考

internet explorer - JavaScript remove() doesn't work in IE - Stack Overflow

getElementsByTagName() の戻り値について

getElementsTagName() は指定したタグを取得するためのメソッドです。指定されたタグが複数存在する可能性があるので、戻り値としては配列のように複数のHTML要素を持つHTMLCollectionというオブジェクトになります。

HTMLCollection - Web API | MDN

指定されたタグが取得できなかった場合は戻り値がnullになると思っていましたが、 length=0 のオブジェクトが返されていたので、ifの条件を "戻り値がnullかどうか" から "lengthが0かどうか" に修正しました。

//before

if (input == null) {
}

//after

if (input.length == 0) {
}

また、HTMLCollectionが持つ要素にアクセスするには配列のようにアクセスする要素（インデックス）を指定する必要があります。そのため、以下のように checkbox という変数に代入しています。

const checkbox = input[0]

2021-08-16

プログラマーへの道 #22 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

let を const に変更
Array.from() について
チェックボックスの状態
filter() の戻り値について

let を const に変更

以前の動画で説明していますが、let と const の説明は以下です。再代入しない変数は const で定義します。

let - JavaScript | MDN

const - JavaScript | MDN

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>

HTML input checked Attribute

なので、JavaScript でも checked というプロパティをtrueにすることでチェックを付けることができます。 JavaScript のHTML要素のプログラミングはこのようにHTMLの各属性と連動していることが多いので、慣れてくると「なんとなくこうすればよさそうかな」というのは分かってきます。

checked と似たようなものとして disabled という属性もあります。

<input type="text" placeholder="郵便番号" disabled>

:disabled - CSS: カスケーディングスタイルシート | MDN

filter() の戻り値について

JavaScript の filter() は特定条件に一致した要素を集めた新規の配列を生成するメソッドです。その名の通り、元の配列の要素をフィルタしているわけです。戻り値として false を返すと、フィルタされて新規の配列の要素にはなりません。

Array.prototype.filter() - JavaScript | MDN

2021-08-16

プログラマーへの道 #20 から作っているメモ帳アプリの仕様について

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回はYoutube上に投稿している動画シリーズ "プログラマーへの道" では #20 から簡単なメモ帳アプリをJavaScriptで作っています。動画だとメモ帳アプリの仕様をスライドで少し見せるだけなので、ちゃんと見れるようにしました。といっても、スライドをそのまま貼っているだけです。

以下は #20 の動画です。