JavaScriptとは｜操作に反応して画面やデータを変える言語

文字の変化を試してみよう

漫画：押すと、何が変わる？ 全4ページ

イトが数字を増やす試作ボタンを押しても、まだ0のまま。ユイとクリック後の処理を用意し、合図→1を足す→表示を更新する流れを確かめる。最初の操作で1、もう一回で2になり、ボタンの形と処理を分けて観察できる。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4押しても、まだ0

処理をつないでいない試作の＋1ボタンを押したイトは、数字が0のままと気づく。ユイは最初から横にいる。

1ページ目のセリフ

• 画面の札「試作」
• 試作画面の数字「0」、ボタン「＋1」
• イト「押しても、0のまま？」

2 / 4合図で処理を始める

クリックを合図に、JavaScriptで1を加えて表示を更新する処理を用意する。

2ページ目のセリフ

• 処理の図「クリック」→「JavaScript」「＋1」→「表示を更新」
• ユイ「合図で、処理を動かします。」

3 / 4押すと、1へ

処理をつないだボタンをイトが押すと、0だった表示が1へ変わる。

3ページ目のセリフ

• 操作前の数字「0」、ボタン「＋1」
• 操作後の数字「1」
• イト「今度は、変わった！」

4 / 4もう一回を試す

イトが1の表示を確認してもう一回押すと、2へ変わる。

4ページ目のセリフ

• 操作前の数字「1」
• 画面の数字「2」、ボタン「＋1」
• イト「もう一回で、2になった！」

横にスワイプして次のページへ。画像を押すと拡大できます。

数字を増やすページは、イベントを受けて処理し表示を変える例です。最初は試作ページに処理をつないでいない場面です。すべてのボタン操作にJavaScriptが必要という意味ではなく、HTMLの標準動作やCSSのアニメーションなどもあります。図は完全なコードやブラウザ内部の全工程を示しません。

本文の解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

ふだんの画面でも、操作と変化を分ける

JavaScriptを理解するには、実際の画面で「操作すると変わる場所」を探すのが近道です。

1. ボタンやメニューなど、押せる部品を一つ探す
2. 押す前と押した後で、画面のどこが変わるか見る
3. 入力欄がある場合は、文字を入れたときの反応を見る
4. 「もっと読む」「検索」「送信」のような追加読み込みを探す
5. 変化が、見た目だけか、内容の追加か、通信を伴いそうかを分ける

イト

CSSで見た目は整ったけど、押したら動くところは何が担当するの？

ユイ

JavaScriptは、Webページを動かす言語と聞きます

ピコ

その通り。操作への反応、画面更新、追加データの読み込みとして見ていこう

HTMLはページの構造を表し、CSSは見た目を整えます。JavaScriptは、ボタンを押したらメニューを開く、入力内容に合わせて表示を変える、あとからサーバーへデータを取りに行く、といった動きや処理に関わります。

第67話「JavaScriptは何を動かす？」では、CSS衣装室の奥にあるJavaScript操作室へ進みます。画面のむこう側で、部品がどう反応し、どう書き換わるのかを見通せる形にします。

操作室へ届く合図

ページは、最初に表示されたら終わりとは限りません。ボタンが押される、文字が入力される、スクロールされる、時間がたつ、サーバーから新しいデータが返る。そうしたきっかけに応じて、画面の一部が変わることがあります。

ラボのたとえでは、HTMLは設計図、CSSは衣装室、JavaScriptは操作室です。ボタンや入力欄から届く合図を受け取り、必要な指示を動かします。実際には、ブラウザがJavaScriptを実行し、ページの構造や通信を扱うことがあります。

JavaScriptが動く場面

JavaScriptは、Webページのさまざまな操作や処理で使われます。

• ボタンを押すとメニューが開く
• 入力内容に合わせてエラーメッセージを出す
• タブやアコーディオンを切り替える
• スクロールに合わせて表示を変える
• 検索結果や商品一覧をあとから読み込む
• チャットの新しいメッセージを表示する
• 地図やグラフを操作できるようにする

JavaScriptは「動き」を作るだけではありません。表示する内容を切り替える、必要なデータを取りに行く、利用者の操作を確認するなど、画面のふるまいに関わります。

ボタンの見た目はCSSで整えられますが、押したあとに何をするかはJavaScriptが担当することがあります。

HTML・CSSとの違いとイベント処理

JavaScriptを理解するときは、イベントという考え方が役に立ちます。

イベントは、画面の中で起きた合図です。

JavaScriptは、こうした合図をきっかけに処理を動かすことがあります。

たとえば、「ボタンが押されたらメニューを開く」「入力欄が空なら注意を出す」「もっと読むボタンが押されたら記事を追加する」といった形です。イベントを「操作室に届くベル」と考えると、画面が反応する理由が見えやすくなります。

マコト

ボタンそのものではなく、押された合図をきっかけに処理が走るんだね

ユイ

操作と処理を分けると、JavaScriptの役割が見えやすくなります

DOMをあとから変える

ブラウザはHTMLを読み、ページの構造を内部に作ります。この構造はDOMと呼ばれます。

JavaScriptは、DOMを通して画面の部品をあとから変えることがあります。

たとえば、次のような変化です。

1. メニューを非表示から表示に変える
2. 段落の文字を別の内容に変える
3. ボタンを押せない状態にする
4. 新しいリスト項目を追加する
5. エラーメッセージを表示する

とても短い例なら、次のように見えます。

button.addEventListener("click", () => {
  message.textContent = "ボタンが押されました";
});

この例では、ボタンが押された合図を受け取り、メッセージの文字を変えています。実際のコードはサイトによって違いますが、「操作を受けて画面の部品を変える」という見方は共通して使えます。

ただし、すべての変化がJavaScriptだけで起きるわけではありません。CSSだけで見た目を切り替える場合もありますし、サーバーが作ったHTMLが最初から変わっている場合もあります。実際の確認では、HTMLとは、CSSとは、JavaScript、通信を分けて見ます。

APIや追加通信

JavaScriptは、ページを開いたあとにサーバーに追加のリクエストを送ることがあります。

たとえば、次のような場面です。

• 検索ボタンを押すと結果が表示される
• もっと読むボタンで記事一覧が増える
• チャットに新しいメッセージが届く
• 地図を動かすと周辺情報が読み込まれる
• 管理画面で保存すると結果だけが更新される

このとき、ページ全体を読み直さず、一部だけが更新されることがあります。JavaScriptをきっかけに、APIへリクエストを送り、返ってきたJSONなどのデータを画面に反映する場合があります。

この先で出てくるAPIは、アプリやサービス同士が決まった形でデータや機能をやり取りするための窓口です。あとから届くデータを理解したいときは APIとは が続きになります。

JavaScriptが重いとき

JavaScriptは便利ですが、処理が多すぎるとページが重く感じることがあります。

確認する場所を分けると、次のようになります。

「ページが遅い」と感じたとき、通信だけが原因とは限りません。JavaScriptの読み込みや実行、追加通信、画面の書き換えが関係する場合があります。

サイト運用では、不要なスクリプトが増えていないか、外部ツールを読み込みすぎていないか、最初の表示に必要ない処理まで早く実行していないかを確認する入口になります。

JavaScript確認クイズ

Q1. JavaScriptは何に関わる言語ですか？

Webページの操作への反応、画面の更新、追加データの読み込みなどに関わる言語です。

Q2. イベントとは何ですか？

クリック、入力、スクロールなど、画面の中で起きた操作や変化の合図です。

Q3. JavaScriptがページを重くすることはありますか？

あります。ファイルの読み込み、処理の実行、追加通信、DOM更新が多い場合、表示や操作が重く感じられることがあります。

コードが保存されてから実行されるまでの全体像は、プログラムが動く仕組みで、OS・メモリ・CPUの仕事と結び付けて確認できます。