ページの中で何かが動いたら、それはJavaScriptです

メニューが開く、地図のピンが反応する。
ページに置かれた店番、JavaScriptの話です。

スマホでサイトを見ていて、右上の三本線を押すとメニューがすっと開く。
キャンプ場を探す地図で、ピンを押すと名前が浮かぶ。
ああいう「押したら何か起きる」は、ぜんぶJavaScriptの仕事です。

HTMLとCSSだけのページは、印刷したチラシと同じで、置いたら置きっぱなし。
そこに店番をひとり置いて、「ボタンが押されたらメニューを開けてね」と頼んでおく。
その店番がJavaScriptです。

店番への頼み方

日本語に直すとこういう頼み事

ボタン.押されたら(function () {
  メニューを開く();
});

実際は英語で書きますが、やっていることはこの日本語のままです。
クリックという出来事を待ち構えて、起きたら決めておいた作業をする。
待つ、起きる、動く。この3拍子で、たいていの動きは説明がつきます。

このサイトの中の店番

このサイトだと、キャンプ場マップのピンや、スクロールでふわっと現れる要素あたりが店番の担当です。
派手なことはさせていません。
店番が働きすぎるページは重くなって、電波の細いキャンプ場で開くとつらいので。

山の中で自分のサイトがなかなか開けなかったとき、動きより軽さだなと反省しました。
それ以来、JavaScriptには必要な仕事だけ頼むようにしています。

技術ブログ一覧へ戻る