こどもITラボ No.4｜Web開発

JavaScriptで動くサイトを作ろう

ボタンを押すと数字が増える、画像が切り替わる、入力した文字がその場で表示される——こうした「動き」を担当するのがJavaScriptです。HTMLが骨組み、CSSが見た目、JavaScriptが動き。3点セットでWebサイトはできあがります。この記事では、JavaScriptの入り口を解説します。

そもそもJavaScriptとは？

JavaScriptは、1995年にネットスケープ社で生まれたプログラミング言語です。当初はWebページに少し動きをつけるための補助でしたが、現在ではWebサイト・スマホアプリ・サーバー・ゲーム・AIツールまで幅広く使われています。世界で一番使われているプログラミング言語の調査（Stack Overflow Developer Survey）でも、毎年トップ常連です。「Java」と名前が似ていますが、別物の言語なので混同しないようにしましょう。

仕組み：ブラウザの中でコードが動く

JavaScriptは、ふだん使っているChrome・Safari・Edgeなどのブラウザの中に最初から動かす仕組みが入っています。HTMLファイルにJavaScriptのコードを書き込んで保存すると、ブラウザがそれを読み込んで実行します。サーバーに送る必要がないので、結果が画面にすぐ反映されます。

「いいね」ボタンを押してから赤くなるまで（合計約16ms） バーの幅が処理時間に比例。1フレーム（16.7ms）以内なら人間の目には一瞬 ①ボタン押下を検知 2ms ブラウザがclickイベント発火 ②JSコード実行 4ms addEventListener内の関数が動く ③DOMを書き換え 3ms classListやtextContentで変更 ④再レンダリング 7ms ブラウザが画面を再描画 0ms 5ms 10ms 15ms 押す前 ♡ グレーのハート → 16ms後 → 押した後 ♥ 赤いハート＋カウント+1 ※処理時間は性能の良いPC＋シンプルなDOMでの概算。重い計算や大量要素更新では数百msかかる ※モニタは秒60回（1フレーム16.7ms）描画するので、これ以内なら「カクつかない」と感じる
図1：JavaScriptが動く流れと所要時間。1フレーム以内に処理を終わらせるのがコツ

何に使われている？

身近なWebサービスのほぼすべてで、JavaScriptが動いています。

主要WebサービスのJavaScriptサイズ（圧縮後の概算） バーが大きいほどJSの量が多い＝動的処理が多い。HTMLよりJSのほうが大きいのが現代 自分の最初のJS 0.5KB（onclick1個） 学校の問い合わせフォーム 5KB（バリデーション） Yahoo!Japan 700KB Amazon商品ページ 2.1MB X（旧Twitter） 3.4MB YouTube 4.5MB Gmail 6.3MB 0MB 2MB 4MB 6MB JSがやっていること： クリック検知・通信・ログイン状態管理・無限スクロール・自動保存・通知・動画再生・チャット・リアルタイム反映 etc.
図2：複雑なWebサービスほどJavaScriptの量が増える。すべて「動き」を作っている

おすすめの使い方

JavaScriptを学ぶ最初の一歩は、HTMLにscriptタグを書いて「ボタンを押すとアラートが出る」を作ることです。たとえば「<button onclick=\"alert('こんにちは')\">押して</button>」と書けば、それだけでもうJavaScriptが動きます。

慣れてきたら、変数で数字を保持してカウンターを作る、入力フォームの内容を表示する、画像を切り替える、までやってみましょう。完成サンプルは「Todoリスト」「電卓」「占いアプリ」あたりが定番です。検索すれば今からでも理解できる解説が大量にあります。

次の段階では、DOM操作という考え方を覚えます。DOMは、HTMLの見出し、ボタン、入力欄などをJavaScriptから操作するための仕組みです。document.querySelector で要素を選び、textContent を変えるだけでも、画面が動く感覚をつかめます。最初からReactなどのフレームワークへ進むより、ブラウザ標準のJavaScriptで小さく作るのがおすすめです。

気をつけたい落とし穴

JavaScriptで初心者がハマりがちな3つ
  • セミコロン抜け・括弧の閉じ忘れで動かない。エラーは F12 → Console タブに表示される
  • 「コピペで動かない」ときは、HTMLとscriptの読み込み順序が逆な場合が多い
  • 他人のコードを丸コピーして勉強した気になる。1行ずつ意味を確認して、自分で書き換えるのが上達の近道

将来どう役立つ？

JavaScriptはWebフロントエンドの主役で、Node.jsを使えばサーバー側でも動きます。React・Vue.js・Next.jsといった人気フレームワークもJavaScript（あるいは派生のTypeScript）で動いており、Webエンジニアの求人でもよく求められる言語です。今のうちから少しでも触っておくと、進路の選択肢が広がります。

JavaScriptを学ぶと、ユーザーの操作に反応する設計を考えられるようになります。クリック、入力、送信、保存、エラー表示など、Webアプリの基本はイベント処理の積み重ねです。自分で小さなツールを作れるようになると、学校生活や部活のちょっとした不便もプログラムで解決できます。

今日からできること

3ステップで始めよう
  1. HTMLファイルに「<button onclick=\"alert('Hi')\">押す</button>」と書いて保存・ブラウザで確認
  2. F12で開発者ツールを開き、Consoleタブで「console.log(1+2)」と打ってEnterを押す
  3. 「JavaScript Todoリスト 入門」で検索し、最後まで写経して完成させる

まとめ

JavaScriptはWebサイトに「動き」を加える言語で、ブラウザの中で実行されます。HTMLとCSSがあるページにscriptタグを足すだけで、すぐ書き始められます。最初の壁は「アラートが出た瞬間」までで、そこを越えれば一気に楽しくなります。完璧を目指さず、小さな動きを1つずつ作って積み上げていきましょう。

確認 JSが足すものは？

関連記事

前の記事CSSとは？デザインを変える技術 次の記事自分のホームページを作る方法 関連JavaScript入門 関連小さなアプリを完成させる方法
← Web開発の記事へ