プログラマーへの道 #26 の補足説明 - プログラマー VTuber 衣亥栖ティオのちょっとした話

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

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

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

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

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

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

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

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

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

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

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

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

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

まずは 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()

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

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

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

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