JavaScriptの基本を学ぼう2
JavaScriptでHTMLの要素を操作して、Webページに反応をつけてみましょう！
🎯 この章の目標
- 関数を定義して、引数や戻り値を使った処理が書けるようになる
- DOM（HTML要素）をJavaScriptから取得・操作できるようになる
- イベント（クリックなど）に応じて動的にDOMを変化させられるようになる
Kinova編集部
目次
1. 関数を使ってみよう
関数とは、処理をまとめて定義し、あとから繰り返し使えるようにする「命令のかたまり」です。
たとえば「計算をする」「あいさつを表示する」「税金を求める」など、何度も使う処理をまとめるのに使います。
JavaScriptで関数を作るには
function を使います。書き方は次の通りです：
function 関数名() {
実行したい処理
};() をつけて呼び出します：
関数名();
次の例では、sayHello という関数を定義して、コンソールに「こんにちは！」と表示する処理をまとめています。
sayHello() を書くと関数が実行され、中の console.log("こんにちは！") が動きます。
関数の定義と実行を分けることで、コードが整理されて読みやすくなります。
・同じ処理を何度も書かずに済む
・修正したいときに1ヶ所を直せばよい
・読みやすく、管理しやすいコードになる
▶ 実践してみよう！
たとえば「今は〇〇の時間です」といったようなメッセージを表示する関数を作ってみましょう。
下のコードには showTime() という関数の中に処理を書くようになっています。
好きなメッセージを console.log() で表示してみてください。
解答例と表示結果をひらく
名前を受け取ってあいさつする関数を作ろう
関数には、外からデータを受け取って処理を行う「引数（ひきすう）」というしくみがあります。
引数を使えば、「名前を変えてあいさつしたい」など、パターンの違う処理を1つの関数にまとめて書くことができます。
たとえば、次のコードでは name という引数を使って、「こんにちは、〇〇さん！」というメッセージを表示します。
関数を呼び出すときに "さくら" や "たかはし" など、名前を渡すことで、表示される内容が変わります。
・
function greet(name) の name のように、受け取るための変数を「引数（パラメータ）」と呼びます。・関数を呼び出すたびに違う「引数（パラメータ）」を渡すことで、中の処理を柔軟に変化させることができます。
関数に引数を渡すイメージ
呼び出し時に渡す値（引数）
greet("さくら")
「name」という名前の情報を受け取り、
「こんにちは、〇〇さん！」と表示する関数
受け取って処理する関数（greet）
▶ 実践してみよう！
今度は、ペットの名前を引数として関数に渡し、「〇〇はとてもかわいいです！」というメッセージを表示してみましょう。
下のコードには praisePet() という関数が用意してください。好きなペットの名前を渡して、console.log() を使ってメッセージを出力してみてください。
解答例と表示結果をひらく
複数の引数を使おう
引数は1つだけでなく、複数使うこともできます。たとえば「名前」と「年齢」を受け取って、あいさつに使うこともできます。
▶ 実践してみよう！
関数に2つの引数を渡して、自己紹介のメッセージを作ってみましょう。
たとえば「私は〇〇歳の〇〇です。」という形で表示されるようにしてみてください。
下のコードには introduce() という関数が用意されています。
あなたの名前と年齢を引数として渡し、console.log() を使ってメッセージを表示しましょう。
解答例と表示結果をひらく
処理した結果を返す「戻り値」を使ってみよう
関数は、処理を実行するだけでなく、処理した結果を呼び出し元に返すことができます。
この「関数が返す値」のことを 戻り値（もどりち） と呼びます。
JavaScriptでは、return を使って関数の外に値を返します。
戻り値は、他の変数に代入したり、画面に表示したり、次の処理に活用することができます。
・
return 値; と書くと、関数の外に値を返します。・戻り値は、関数を呼び出した場所に「結果」として戻ってきます。
・戻り値を変数に代入して再利用したり、そのまま
console.log() で表示することもできます。
次の例では、getTotal 関数の中で price × count を計算し、return を使って結果を返しています。
呼び出し元では、それを total という変数に代入して、console.log() で表示しています。
関数から戻り値を受け取るイメージ
呼び出し時に渡す値（引数）
calculateTotal(200, 4)
「price」と「count」を使って
合計金額（price × count）を計算し、
returnで結果を返す関数
処理をして戻り値を返す関数（calculateTotal）
戻ってきた値（戻り値）
const result = 800
ここまでの関数では、console.log() などの処理を関数の中で完結させていました。
しかし、関数は値を外に返す（戻す）こともできます。
この「返された値」は、関数の外で別の処理に使うことができます。
少しややこしく感じるかもしれませんが、これは「関数の中で行っていた処理の一部を、外で扱うようにした」ということです。
関数は「結果を返す役目」に集中し、表示や利用は呼び出し元で行う、という役割分担ができるようになります。
▶ 実践してみよう！
「商品の値段」と「数量」を引数として受け取り、合計金額を戻り値として返す関数を作ってみましょう。
戻ってきた合計金額は console.log() を使って表示してください。
解答例と表示結果をひらく
番外編：配列の便利なループ処理の仕方を学ぼう
ここでは「番外編」として、JavaScriptの配列に便利な処理方法である forEach を紹介します。
本来 forEach は「繰り返し処理（ループ）」の中で登場するものですが、
中で使われるしくみは「関数」そのものです。
そのため、関数の使い方を先に学んだ今こそ、この処理の仕組みを自然に理解しやすくなっています。
複数のデータをまとめて持てる「配列」は、forEach メソッドを使うと、
1つずつ順番に取り出して処理することができます。
・配列には、中の要素を1つずつ順番に処理するためのメソッドがいくつか用意されています。
・
forEach() はその1つで、配列の各要素に対して同じ関数を実行するためのしくみです。
基本の書き方（文法構成）
配列.forEach(function(要素) { 要素ごとの処理 }); function() に渡される🔹 要素ごとの処理：配列の要素それぞれに対して実行される
forEachは "配列" を "要素" という変数に分解してくれる。
そしてその “要素” を引数にする function() に入る。
このように、forEach を使えば、配列の中身を ループで簡単に処理することができます。
下の例では、同じ配列に対して 「for文」と「forEach」 の両方を使って、すべての要素を console.log() で表示しています。
▶ 実践してみよう！
自分の好きな動物を3つ配列に入れて、それぞれを console.log() で表示してみましょう。
解答例と表示結果をひらく
2. DOM操作を使ってみよう
JavaScriptでは、HTMLの中身や見た目をあとから変更することができます。
このように、HTMLをJavaScriptで操作するしくみをDOM（Document Object Model）と呼びます。
たとえば、ボタンをクリックしたときに文字を変える・色を変える・消す・増やすなどができます。
Webページに動きや反応をつけるために、DOM操作はとても重要です。
DOMとは「WebページのHTMLをJavaScriptから操作するしくみ」です。
JavaScriptから見たHTMLの構造は、ツリーのような構造になっています。
最初のステップとして、HTMLの要素をJavaScriptで取得して、文字を変えてみることから始めましょう。
① 要素の取得をしてみよう
JavaScriptでHTMLを操作するには、まず対象の要素を取得する必要があります。
DOM操作の第一歩は、「どの要素を変えたいのか？」をJavaScriptに伝えることです。
もっとも基本的な取得方法は document.getElementById() を使って、IDで要素を探す方法です。
const title = document.getElementById("main-title");このように書くと、HTML内の
id="main-title" の要素が取得され、変数
title にその要素（オブジェクト）が代入されます。
下のコードでは、HTML内の <p id="text"> を取得し、console.log() でその中身を確認しています。
▶ 実践してみよう！
下のHTMLには、id="message" を持つ段落（pタグ）があります。
JavaScriptでこの要素を取得して、console.log() で中身を表示してみましょう。
解答例と表示結果をひらく
他の要素取得方法を見てみよう
getElementById() はもっとも基本的な方法ですが、他にも便利な取得方法があります。
特にCSSセレクタを使って取得できる querySelector() や querySelectorAll() は、柔軟でよく使われます。
・
getElementById("id")：IDで1つの要素を取得（もっとも基本）・
querySelector("セレクタ")：CSSセレクタで1つ目の要素を取得・
querySelectorAll("セレクタ")：複数の要素をまとめて取得（配列のように扱える）
querySelector() を使えば、CSSで書けるセレクタを使って、さまざまな要素を取得できます。
以下の例では、クラス指定・ID指定・タグ指定・子孫セレクタ・属性セレクタ などをそれぞれ試しています。
| 種類 | 説明 | 書き方 | 対象となるHTML例 |
|---|---|---|---|
| クラス指定 | class属性で指定された要素 | .title | <h1 class="title"> |
| ID指定 | id属性で指定された要素 | #main | <div id="main"> |
| タグ指定 | タグ名そのものを指定 | p | <p>文章</p> |
| 子孫セレクタ | ある要素の中にある別の要素 | .box p | <div
class="box"><p>...</p></div> |
| 属性セレクタ | 属性の種類や値を指定 | input[type="text"] | <input type="text"> |
input は、ユーザーから文字を入力してもらうための部品です。今はセレクタの練習の一環として出てきましたが、実際に値を読み取ったり使ったりする方法はこのあとのセクションで学びますので、ここでは「こういう要素も取得できるんだな」と思っておいてください。
▶ 実践してみよう！
下のHTMLには、さまざまなセレクタで取得できる要素が用意されています。
それぞれに合った querySelector() の書き方で、要素を1つずつ取得し、console.log() で表示してみましょう。
5つのパターンに対応するように、const ○○ = document.querySelector("セレクタ"); を使ってみてください。
解答例と表示結果をひらく
② 要素の内容を変更してみよう
前のセクションでは、JavaScriptでHTMLの要素を取得する方法を学びました。
次は、取得した要素の中身（テキストやHTML）を変更する方法を見てみましょう。
ここで紹介する textContent や innerHTML を使うことで、要素の中にある内容を書き換えることができます。
いままでは HTML全体の要素（タグごと）をそのまま取得していましたが、textContent を使えば中のテキスト部分だけを取り出すことができ、さらにそのテキストをJavaScriptから書き換えることもできます。
・
textContent は文字だけを扱い、HTMLタグはそのまま表示されます（安全）。・
innerHTML はHTMLとして解釈され、タグも反映されます（柔軟だが注意）。
下の例では、id="text" の段落要素の中身を、JavaScriptで書き換えています。
今度は innerHTML を使って、HTMLタグごと書き換えてみましょう。
▶ 実践してみよう！
下のHTMLには、id="message" の段落があります。
JavaScriptでこの要素を取得して、「ようこそ！このページへ」という文章に書き換えてみましょう。
textContent を使ってください。
解答例と表示結果をひらく
③ 要素のスタイルやクラスを変更してみよう
これまでは、要素の「中身（テキスト）」を変更してきました。
今度は、取得した要素の見た目（スタイル）や状態（クラス）をJavaScriptで変えてみましょう。
JavaScriptでは、次のような方法でスタイルやクラスを変更できます：
・
element.style.プロパティ：個別のスタイルを直接変更（例：element.style.color = "red"）・
element.classList.add("クラス名")：指定したクラスを追加する・
element.classList.remove("クラス名")：指定したクラスを取り除く
まずは、style.color を使って文字色を変更してみましょう。
Console Outputを見ると、style="color: orange; が追加されていることが分かりますね。
次に、classList.add() を使ってクラスを追加し、スタイルを切り替えてみましょう。
下の例では、あらかじめ .highlight というクラスを CSS に定義しています。
このクラスには「背景を黄色にする」「文字を太字にする」というスタイルが書かれています。
JavaScriptから classList.add("highlight") を使ってこのクラスを要素に追加すると、
そのスタイルが「当てはまる」ことで、見た目が変化します。
▶ 実践してみよう！
下のHTMLには、id="info" と id="note"
の2つの段落があります。
JavaScriptを使って、次の2つの操作を行ってみましょう。
-
id="info"の文字色をblueに変更し、console.log()で確認する -
id="note"にhighlightクラスを追加して、背景と文字のスタイルを変更し、console.log()で確認する
解答例と表示結果をひらく
3. イベントにより動きのあるページを作ろう1
これまでのセクションでは、JavaScriptでHTML要素を取得して、内容や見た目を変更することを学びました。
しかし、これらの処理はページを開いた瞬間に実行されるだけでした。
今回のセクションでは、ユーザーの操作（クリック・入力など）に応じて、そのときに処理を実行する方法を学びます。
このような操作のことを イベント と呼びます。
ユーザーの「クリック」「入力」「マウス操作」など、
ページ上で起こる“できごと”のことをイベントと呼びます。
イベントが発生したときに動かしたい処理を、JavaScriptで設定しておくことができます。
イベント処理を実行するには、次の3つのステップを順番に行います。
① 要素を取得する
HTMLから対象の要素を見つける
② イベントを設定する
クリックなど「いつ動くか」を指定
③ 処理を書く
起きたときに「何をするか」を書く
この3つを組み合わせることで、「何が起きたら」「どう動くか」をページに指定できます。
ステップ①では、getElementById() などを使ってHTMLの要素を取得する方法を学びましたね。
すでに取得できるようになっているので、次はその取得した要素に対して処理を設定していきます。
取得した要素には、textContentのようなメソッド（命令）がたくさん備わっています、
その中の1つのaddEventListener() というメソッドを使うと、「いつ（イベント）」「どんな処理を実行するか」をまとめて設定することができます。
このメソッドには、2つの情報（引数）を渡す必要があります。
📌 第1引数：いつ（イベント）
"click" や "input" などの文字列を渡します。
あらかじめ決められたイベントの名前です。
🧠 第2引数：どんな処理を実行するか
「イベントが起きたときに何をするか？」という関数を渡します。
以前の関数では文字や数値を引数にしていましたが、
今回は関数そのものを引数にできるのです。
・HTML要素を取得すると、その要素にはさまざまなメソッド（命令）が備わっています。
・
addEventListener() もその1つで、「イベントが起きたら、どうするか？」を指定するためのメソッドです。
基本の書き方（文法構成）
要素.addEventListener("イベント名", 関数);"click", "input", "change"🔹 第2引数：イベントが起きたときに実行する処理（関数）
このように、イベント名と処理内容をセットで渡すことで、JavaScriptが
「どのタイミングで」「どんな動作をするか」を覚えてくれます。
では実際に、ボタンをクリックしたら文字が変わる処理をみてみましょう。
🖱 ボタン要素（イベントのきっかけ）
id="btn" がついたボタンを取得しています。
この要素は「クリックされたら処理を実行する」というイベントの発生源です。
addEventListener() を使って、「クリックされたときに何をするか」を登録しています。
💬 テキスト要素（変化させたいもの）
id="message" がついた段落要素を取得しています。
ボタンが押されたときに、この要素のテキスト内容を変更することで、画面上のメッセージが変わります。
このように、「イベントを受け取る要素」と「見た目が変わる要素」は別々に取得して使うのがポイントです。
addEventListener() の中では、次のように無名関数（名前を持たない関数）を直接書くことができます：
function () {
// ③ 実行したい処理を書く
msg.textContent = "ボタンが押されました！";
}関数を外で定義しても同じように動きますが、ここでは簡単な例として中に直接書いています。
関数をあらかじめ定義して渡す
同じ処理でも、下記のようにfunction を使って事前に関数を定義し、それを名前で渡すこともできます。
このようにすれば、同じ処理を他の場所からも呼び出せるようになります。
どちらの書き方でも動作は同じですが、コードの整理のしやすさで使い分けるとよいでしょう。
▶ 実践してみよう！
下のHTMLには、id="btn" のボタンと、id="result" の段落要素があります。
ボタンがクリックされたとき、段落の内容を「クリックされました！」に書き換えるようにしてみましょう。
解答例と表示結果をひらく
4. イベントにより動きのあるページを作ろう2
前のセクションでは、ボタンをクリックしたときに文字が変わるなど、基本的なイベントの流れを学びました。
「①要素を取得 → ②イベントを設定 → ③処理を書く」という手順で、ページに動きをつけることができましたね。
今回のセクションでは、さらに一歩進んで、フォームに入力された内容に応じた反応や、複数のボタンやリストにイベントをつける方法を学んでいきます。また、イベントの詳細を取得できる「イベントオブジェクト」についても紹介します。
① フォーム入力に応じた処理をしてみよう
ユーザーが入力した内容を取得して、その内容に応じて動的に表示を変える方法を学びます。
<input> 要素に入力された値は、value プロパティを使って取得できます。
<input>（入力）
<input> タグは、フォームに使われる入力欄のひとつです。
このタグには type 属性をつけることで、入力の種類を指定できます。
たとえば「文字を入力する欄」や「チェックボックス」「送信ボタン」など、用途に応じて変えることができます。
以下は、よく使われる type の種類とその使い道です：
| 使い道 | 書き方 | 説明 |
|---|---|---|
| 文字を入力させたいとき | <input type="text" /> | 名前やメッセージなど、短い文字列を入力できます |
| 数値を入力させたいとき | <input type="number" /> | 数字だけが入力できる欄になります（上下ボタン付き） |
| パスワードを入力させたいとき | <input type="password" /> | 入力した文字が「●●●」のように隠されます |
| チェック欄を作りたいとき | <input type="checkbox" /> | 「同意する」などのON/OFFの選択肢に使えます |
| 選択肢から1つだけ選ばせたいとき | <input type="radio" name="fruit" /> | 同じname属性の中から1つを選ぶラジオボタンになります |
| 送信ボタンをつけたいとき | <input type="submit" value="送信" /> | フォームを送信するボタンになります（value で表示文字を指定） |
このように、typeの値を変えるだけで、まったく違う入力部品として使うことができます。
必要な入力欄に合わせて使い分けましょう。
<label>（ラベル）
入力欄の説明文をつけるためのタグです。
何を入力すればよいかをユーザーに伝える役割があります。
<label>名前を入力してください：</label>
<input type="text" />
このように書くと、「名前を入力してください：」という説明のあとに入力欄が続きます。
labelは必ず閉じタグが必要です。
<button>（ボタン）
ユーザーがクリックできるボタンを作るタグです。
JavaScriptと組み合わせると、「クリックされたときに何かの処理を実行する」ことができます。
<button>送信</button>
このように書くと、「送信」と表示されたボタンが作られます。
buttonタグには、表示する文字を中に書きます
閉じタグも必要です
JavaScriptでこのボタンに処理をつけると、クリックに反応するようになります。
ここでは、フォームに名前を入力し、「〇〇さん、こんにちは！」というメッセージを表示する例を見てみましょう。
まずは、名前を入力するためのフォームとボタン、そしてメッセージを表示する場所だけを
HTML で作ってみましょう。
この時点ではまだ JavaScript を書かず、「入力欄」「ボタン」「表示エリア」が見えるだけの状態です。
次に、JavaScript で「どの要素を使いたいか」を指定します。
ここでは、入力欄（input）、ボタン、表示エリア（pタグ）を取得して、console.log() で表示してみましょう。
ボタンがクリックされたときに「こんにちは！」という文字を表示してみましょう。
まだ名前は使いません。まずは textContent を使って、メッセージを書き換えるだけです。
いよいよ最後のステップです！
input.value を使って、フォームに入力された名前を読み取り、
「〇〇さん、こんにちは！」のように、名前入りでメッセージを表示してみましょう。
・
input は文字を入力するフォーム部品です。・
input.value と書くと、そのときの入力値を読み取ることができます。・この値を
textContent などに使えば、入力に応じた表示が可能になります。
▶ 実践してみよう！
入力フォームに名前を入れて、「送信」ボタンを押すとメッセージが表示されるようにしてみましょう。
今回はbuttonではなく、「送信」ボタンであることに注意です。
「〇〇さん、ようこそ！」という形で、入力した名前が表示されるようにします。
下のHTMLに、id="yourName" の入力欄、id="submitBtn" のボタン、id="output" の表示エリアを用意しましょう。
JavaScriptでこれらの要素を取得し、クリックイベントに応じて内容を変更しましょう。
解答例と表示結果をひらく
② 複数のボタンにそれぞれのイベントをつけてみよう
これまでは1つのボタンに対してイベントを設定してきましたが、
実際のWebページでは複数のボタンや要素に同じ処理をしたい場面がよくあります。
そのようなときは、querySelectorAll() を使ってまとめて取得し、
for文 や forEach() で1つずつイベントをつけていくのが基本です。
・
querySelectorAll() で同じクラスのボタンをすべて取得・配列のように扱えるので、
for や forEach
で1つずつ処理を設定・それぞれに
addEventListener() をつける
まずは HTML
を書いて、4つの季節（春・夏・秋・冬）を表すボタンと、メッセージを表示する段落を用意します。
まだJavaScriptは書かず、「画面に要素を並べるだけ」のステップです。
ここでは querySelectorAll() を使って、クラス .seasonBtn を持つボタンをまとめて取得します。
取得できた要素が配列のように表示されるかどうか、console.log() で確認してみましょう。
次に、取得したボタンたちに対して、forEach を使って1つずつクリックイベントを設定します。
クリックされたら 「クリックされました！」 と表示するようにしてみましょう。
・
forEach() は「すべてのボタンを順番に取り出す」処理です。・
addEventListener() は「そのボタンがクリックされたときの処理を登録する」ものです。つまり、すべてのボタンに対して、「クリックされたら〜する」というルールを設定しているというイメージです。
btn.textContent は、ボタンの中に書かれている「春」「夏」などの文字を取り出すために使っています。
最後のステップです！
それぞれのボタンに書かれた「春」「夏」「秋」「冬」という文字を取得し、
「〇〇が選ばれました」というメッセージを表示するようにしてみましょう。
▶ 実践してみよう！
下のボタンには「犬」「猫」「鳥」「カエル」という動物の名前が書かれています。
それぞれのボタンがクリックされたとき、対応する鳴き声を表示してみましょう。
たとえば「猫」のボタンを押したら、「にゃーん」と表示されるようにします。
どのボタンを押されたかで、条件分岐しないといけませんね。
鳴き声の表示先は <p id="result"> です。
解答例と表示結果をひらく
まとめ：イベントを使って動きのあるページを作ろう
このセクションでは、ボタンや入力フォームなどにイベントをつけて、ユーザーの操作に応じた反応を作る方法を学びました。
小さな動きでも、イベントとDOM操作を組み合わせることで、Webページにインタラクティブな体験を加えることができます。
今回学んだこと
- ✓
<input>・<label>・<button>の基本的な使い方を学んだ - ✓
input.valueを使って、フォームに入力された値を取得し、表示に活用する方法を学んだ - ✓
addEventListener()を使って、ボタンクリックに応じた処理を実行できるようになった - ✓
querySelectorAll()で複数の要素を取得し、forEach()を使ってそれぞれにイベントを設定する方法を学んだ - ✓
textContentを使って、要素の表示内容を動的に書き換える方法を理解した - ✓
forEachの中にaddEventListener()を入れて、要素ごとに処理を設定する書き方（ネスト構造）に慣れた
イベントとDOM操作を組み合わせることで、ボタンを押す・文字を入力するといった操作に、基本的な動きをつけることができるようになりました。
これらの技術は、フォームの作成・インタラクション・ユーザー体験の向上など、あらゆるWebアプリの土台になります。