Bootstrapの練習3日目 & jQueryの追加勉強

8月26日（月）の日記です。

本日はBootstrap4の技術取得の前に、以前知り合いから頂いた日経ソフトウェア付録の『プログラマとWebデザイナーをつなぐjQuery教本』という冊子を勉強しました。

内容としてはjQueryの簡単な基礎や応用が書かれているのですが、それ以上にHTMLの仕組みや1つ1つのコードの意味、そしてスクリプトの内容を記述する箇所等、今まで深く考えてこなかった事が多く説明されていたのでとても勉強になりました。
ページ数はそれ程多くはないものの、内容は実にしっかりしており、jQueryの書き方も1つではなくいろんな方法がある事を知れて満足です。

特に、「liタグの何番目の要素を取得する」というコードの書き方は参考になりました。
例えば「class_nameのクラスが付いたliの3番目の要素の文字色を緑にしたい」時、今までは、

$('.class_name:eq(2)').css('color', '#00ff00');

という書き方しか知らなかったのですが、

$('.class_name').eq(2).css('color', '#00ff00');

とも書ける様です。

とはいえ、これでは特に差異は無いので後者で書く必要性はあまり感じないかもしれませんが、数字の2が変数だったとすると少々書き方が複雑になります。
例として、

var array_val = 2;

として、数字ではなく変数array_valを織り込もうとすると、前者では、

$('.class_name:eq('+ array_val +')').css('color', '#00ff00');

こう書かなくてはいけないのです。

$('.class_name:eq(array_val)').css('color', '#00ff00');

これでは処理されません。「.class_name:eq(array_val)」全体を1つの文字列として認識してしまうのです。
しかし、後者であれば今まで通り、

$('.class_name').eq(array_val).css('color', '#00ff00');

これでOKです。実に見やすいですね。状況に応じて書き方を変える事で把握しやすいコードになります。ちょっと感動したので事例をあげてみました。

その後は新たにBootstrap4の練習を続けております。
今までは事例をそのまま入力してサイトを制作していたのですが、今度からは写経に入ります。完成形の画像を元にノーヒントで1から組み立てますので、ひたすらBootstrap4のリファレンスとにらめっこしながらレイアウトの配置...の繰り返しです（汗）。まだまだBootstrapの仕組みは理解仕切れていませんので、使いこなせる様になるのはいつになる事やら...。頑張ります。