HTMLが骨組み、CSSが服なら…JavaScriptは「動き」！Webページを動かす仕組みをやさしく解説！

ネットで買い物をしているとき

ボタンを押した瞬間に

メニューがふわっと開いたり。

会員登録の画面で、

まだ送信していないのに

「メールアドレスの形式が

正しくありません」

と赤い文字が出てきたり。

見かけたこと、ありますよね？

逆に当たり前すぎて、

気にしたこともないかもしれませんね。

実はこれ、HTMLでもCSSでもない

もうひとつの言語の仕事なんです。

お疲れ様！じゅんです(^^)/

以前の記事で、

HTMLはWebページの「骨組み」

CSSは「服」というお話をしました。

今回はその続編。

3人目の主役

『JavaScript(ジャバスクリプト)』

を紹介します。

キーワードは、ずばり「動き」です。

Remember this！(≧∇≦)b

JavaScriptはWebページの「動き」担当

Webページは、

3つの言語が役割分担をしてできています。

・HTML：

文章や画像を並べる「骨組み」

・CSS：

色や配置を整える「服」

・JavaScript：

クリックや入力に反応する「動き」

HTMLとCSSだけでも

見た目のきれいなページは作れます。

ただ、それはいわば

「動かないマネキン」のような状態。

どれだけおしゃれな服を着ていても

話しかけて反応が返ってくることは

ありませんよね。

そこに動きを与えるのがJavaScriptです。

「ボタンが押されたら、メニューを開く」

「入力された文字が足りなければ、注意を出す」

このように、読者の行動に合わせて

ページを変化させる役割を担っています。

身近なところで動いているJavaScript

「プログラミング言語」と聞くと

遠い存在に感じるかもしれません。

でも私たちは、毎日のように

JavaScriptのお世話になっているんです。

・入力フォームのチェック

会員登録の画面で、

送信前に「パスワードが短すぎます」

と教えてくれる機能です。

送信してからエラーが返ってくるより

ずっとストレスが少なくなります。

・SNSの「いいね」ボタン

「いいね」を押すと、

ページ全体を読み込み直さなくても

数字がすぐに増えますよね。

画面の一部分だけを、

こっそり書き換えているんです。

・地図アプリ

Googleマップで地図をドラッグしたり

拡大したりできるのもJavaScriptの力。

もし動きがなかったら、場所を移すたびに

ページを開き直すことになるでしょう。

こうして見ると、

便利だと感じていた操作の多くが、

JavaScriptに支えられているとわかります。

JavaとJavaScriptは別物！ブログ運営での付き合い方

ここでひとつ、よくある勘違いを。

「Java(ジャバ)」と「JavaScript」は、

名前が似ていますが、

まったく別の言語です。

「メロンとメロンパンくらい違う」

なんて言われることもあるほど（笑）

混同しやすいポイントなので、

覚えておくといいでしょう。

では、ブログを運営する私たちは、

JavaScriptを書けるようになる

必要があるのでしょうか？

答えは、ほとんどの場合「いいえ」です。

WordPressのテーマやプラグインの中で

JavaScriptはすでに働いてくれています。

ただし、

知っておくと役立つ場面もあるんです。

・ブログの表示が遅いとき

プラグインを入れすぎると、

読み込むJavaScriptが増えて

表示が重くなる原因になります。

・「JavaScriptを有効にしてください」

と表示されたとき

ブラウザの設定で

JavaScriptがオフになっていると

サイトが正しく動きません。

「何かうまく動かないな」と感じたとき

原因の候補として思い出せるだけでも

十分ですよ。

---

まとめ

☑️Webページは、

・HTML(骨組み)

・CSS(服)

・JavaScript(動き)

の3つでできている

☑️JavaScriptは、

クリックや入力に反応して

ページを変化させる役割

☑️入力チェック、「いいね」ボタン

地図アプリなど、

身近な便利機能を支えている

☑️JavaとJavaScriptは、

名前が似ているだけの別の言語

☑️ブログ運営では自分で書く必要はほぼなく

「表示の遅さ」などの原因として

知っておけばOK

骨組み・服・動きがそろって、

はじめてWebページは

「使いやすい」ものになります。

次にボタンを押してメニューが開いたときは

ぜひ裏で働くJavaScriptを

思い出してみてくださいね。

今日も

最後まで読んでくれてありがとう～！

では！また (*´▽｀*)