2026.09.15 泊まれる場所4,223 立ち寄りスポット46,522 営業中を確認したキャンプ場1,005 note を読む

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

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

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

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

店番への頼み方

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

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

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

このサイトの中の店番

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

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

まる子パパ

まる子パパ

会社員。受託開発のエンジニアで、その前は寿司職人・長距離運転手・農業。 技術ブログは、キャンプの合間に踏んだバグと、AI・Web開発の運用の失敗を書いています。 このサイト自体が、開発に携わっているCMS「コンテナ」の稼働中の実例です。 このサイトについて

ほかにも書いています

note・スタンプ

※noteは運営者が個人で書いているものです。

技術ブログ一覧へ戻る