AIと一緒に学ぶJavaScript基礎④ 関数とイベント ～「処理をまとめる」から「ボタンで動かす」まで～

こんにちは！
フロントエンドエンジニアのあまんちゅです。

AIと一緒に学ぶJavaScript基礎の第四弾です！

前回は、条件分岐（if / else）と繰り返し（for / forEach）を学びました。
「判断する」「何回も繰り返す」ができるようになって、だいぶプログラムっぽくなってきましたね。

今回は次のステップとして、
「関数」と「イベント」
に進みます。

関数とは？

関数は、「よく使う処理をまとめて、名前をつけて呼び出せる」仕組みです。

例えば、同じconsole.logを何回も書くより、関数にしておくとスッキリします。

関数を作って呼び出してみる

まずはコンソールで試してみましょう👇

function sayHello() { 
	console.log("こんにちは！");
}
sayHello();
sayHello();

同じ処理を、必要なタイミングで何度でも呼び出せるのが関数の良いところです。

引数：関数にデータを渡す

関数には、引数（ひきすう）という形でデータを渡せます。
「毎回ちょっとだけ違う処理をしたい」時に便利です。

function greet(name) { 
	console.log("こんにちは、" + name + "さん！");
}
greet("あまんちゅ");
greet("Taro");

name の部分が引数で、呼び出すときに渡した値が入ります。

戻り値：関数から結果を受け取る

関数は、処理の結果を戻り値として返すこともできます。
「計算した結果をあとで使いたい」場合などに使います。

function add(a, b) {
	return a + b;
}
const result = add(5, 3);
console.log(result);

return で返した値が、result に入っています。

アロー関数（短く書ける関数）

JavaScriptでは、関数を短く書く方法としてアロー関数がよく使われます。

const add = (a, b) => {
	return a + b;
};
console.log(add(2, 4));

初めは「こういう書き方もあるんだな」くらいで良いと思います。
この後のイベントに関する内容で、アロー関数がよく出てくるのでその時に慣れていきましょう！

DOMとは？

DOMは大まかに言うと、HTMLをJavaScriptから操作できるようにした仕組みのようなものです。
「画面に表示されている文字を変える」ようなことができるようになります。

querySelectorで要素を取得する

JavaScriptでHTML要素を取ってくる定番が document.querySelector です。

const title = document.querySelector("h1");
console.log(title);

ページ内にある h1 要素が取得できればOKです。
（ページにh1がない場合は null になるので、そのときはセレクタを変えて試してください）

textContentで文字を変えてみる

要素が取れたら、次はtextContent で中の文字を変えてみましょう。

const title = document.querySelector("h1");
title.textContent = "JavaScriptで文字を変えました！";

画面上の見た目が変われば成功です。

イベント：クリックをきっかけに処理を実行する

イベントは、「何かが起きたら処理を実行する」仕組みです。
Webでは特にクリックイベントがよく使われます。

ボタンをクリックしたら文字を変える

例として、次のHTMLがある想定です👇

<button id="btn">クリック</button>
<p id="message">まだクリックされていません</p>

JavaScriptはこんな感じです。

const btn = document.querySelector("#btn");
const message = document.querySelector("#message");
btn.addEventListener("click", () => {
	message.textContent = "クリックされました！";
});

実際には下記のような感じになります。
ボタンを押すと、下の文章が変わればOKです。

See the Pen
Javascript-Basic4-button by Tomomi Aman (@aman21030)
on CodePen.

簡易版カウンターを作ってみる（第五回につなげよう！）

次回はミニアプリ制作として「カウンター」を作る予定なので、今回は超ミニ版を先に作ってみます。

次のHTMLを用意します👇

<button id="plus">+1</button>
<p id="num">0</p>

JavaScriptはこちら👇

let count = 0;
const plusBtn = document.querySelector("#plus");
const num = document.querySelector("#num");

plusBtn.addEventListener("click", () => {
	count = count + 1;
	num.textContent = count;
});

実際には、下記のような感じになります。
クリックするたびに 0 → 1 → 2 … と増えたら成功です！

See the Pen
Untitled by Tomomi Aman (@aman21030)
on CodePen.

今回のまとめ

• 関数は「処理をまとめて、必要なときに呼び出す」仕組み
• 引数でデータを渡せて、戻り値で結果を受け取れる
• querySelector でHTML要素を取得し、textContent で文字を書き換えられる
• イベント（click）をきっかけに処理を実行できる

少しずつ聞き慣れない言葉が出てきましたが、一つ一つ意味を理解して実践して身につけていく流れで学習するのが良いと思います！

Try（練習）

よかったら次のTryも試してみてください👇

✅ Try1：挨拶関数を自分用にする

function greet(name) {
	console.log("こんにちは、" + name + "さん！");
}
greet("あなたの名前");

文字を変えて、自分の名前で表示してみてください。

✅ Try2：クリック回数を表示する（カウンター強化）

さっきのカウンターに、クリック回数の文も出してみます👇

let count = 0;
const plusBtn = document.querySelector("#plus");
const num = document.querySelector("#num");
const log = document.querySelector("#log");

plusBtn.addEventListener("click", () => {
	count = count + 1;
	num.textContent = count;
	log.textContent = count + "回クリックしました";
});

※HTMLにこれを追加してください👇

<p id="log">0回クリックしました</p>

表示が更新されればOKです！

次回予告

次回はいよいよ最終回、ミニアプリ制作です！
今回作ったカウンターをベースに、「アプリっぽく整える」ところまでやってみようと思います！

おまけ

AIとの併走メモ🏃‍♀️💨

今回も、AIに「例題の作り方」や「説明の順番」を相談しつつ進めました。
ただ、今回は、コンソールだけでなく、実際にHTMLとJavaScriptを別々に書く内容だったので、きちんと手を動かして理解できたと思います。

AIに聞くときは、

• 「この関数は、入力（引数）と出力（戻り値）が何？」
• 「クリックした瞬間、どの行からどの順番で実行される？」

のように、“流れ”が見える質問をすると整理しやすかったです。