JavaScript
PR

【JavaScript 2-2】関数の入口｜同じ処理をまとめる感覚をつかむ（初心者向け）

JS2-2.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 2-2「関数の入口」です。
ここでは function を使って、処理をひとまとめにする感覚
を見ていきます。
最初は「よく使う処理に名前をつけて、あとから呼び出す」くらいで
大丈夫です。

前回は、if を使って
「もし〇〇なら、こうする」
という条件分岐を見ました。

今回はその次として、
**関数**
を見ていきます。

関数という言葉だけ聞くと少し難しそうですが、
最初はかなりシンプルに考えて大丈夫です。

関数は、
**処理に名前をつけて、あとから使いやすくするもの**
です。

同じような処理を何度も書かずに、
ひとまとめにして使えるようにする感覚です。

Q
「関数は“処理に名前をつける”ためのものです」

最初はこの理解で大丈夫です。

  • 処理をひとまとめにする
  • その処理に名前をつける
  • 必要な時に呼び出す
  • 同じ処理を何度も書かずに済む

たとえば、

function showMessage() {
message.textContent = “メッセージを表示しました。”;
}

と書くと、
「メッセージを表示する処理」に showMessage という名前をつけたイメージです。

そして、

showMessage();

と書くと、その処理を動かせます。

目次
  1. 今回のゴール
  2. 関数とは？
  3. 関数の基本形
  4. まずは完成形を見る
  5. どこを見ればいい？
  6. 関数を作る場所と、呼び出す場所を分けて見る
  7. クリック処理の中が短くなります
  8. 関数名は“何をするか”が分かる名前にする
  9. count の更新も関数の中にまとめています
  10. よくあるつまずき
  11. 今回のまとめ
  12. 今日のゴール確認
  13. JavaScript 2-3へ
  14. JavaScript 2-2 の一例
ここまでできればOK

今回のゴール

  • 関数は“処理に名前をつけるもの”だと分かる
  • function の基本形が分かる
  • 関数は呼び出した時に動くと分かる
  • ボタンクリックの中で関数を使える
  • 次の配列の入口へ進む準備ができる
関数①

関数とは？

関数は、
処理に名前をつけて、あとから使うためのものです。

たとえば、画面の文字を変える処理があるとします。

message.textContent = "ボタンが押されました。";
JavaScript

これを関数にすると、次のように書けます。

function showMessage() {
  message.textContent = "ボタンが押されました。";
}
JavaScript

このようにすると、
「文字を変える処理」に showMessage という名前をつけた形になります。

関数②

関数の基本形

部分ざっくりした意味
function関数を作る合図
showMessage関数の名前
()今回は入口の形としてそのまま使う
{ }まとめたい処理を書く場所
showMessage();関数を呼び出して動かす

関数は、作っただけでは動きません。

function showMessage() {
  message.textContent = "ボタンが押されました。";
}
JavaScript

これは、処理を用意しただけです。

実際に動かすには、

showMessage();
JavaScript

のように呼び出します。

最初は「関数を作る」と「関数を呼び出す」を
分けて見ると分かりやすいです。
作っただけでは動かない、という点が大事です。

コピペOK

まずは完成形を見る

今回は、ボタンを押すと関数が呼び出されて、
メッセージとクリック回数が変わるページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-02-02-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

   └─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 2-2</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 2-2 の一例</p>
      <h1>関数の入口</h1>
      <p class="lead">ボタンを押した時の処理を、関数にまとめる練習です。</p>
      <p id="message" class="message">まだ関数は呼び出されていません。</p>
      <p id="countText" class="message">実行回数：0回</p>
      <button id="runButton" class="button" type="button">関数を動かす</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.message {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const message = document.getElementById("message");
const countText = document.getElementById("countText");
const runButton = document.getElementById("runButton");

let count = 0;

function updateMessage() {
  count = count + 1;

  message.textContent = "関数 updateMessage が呼び出されました。";
  countText.textContent = "実行回数：" + count + "回";
}

runButton.addEventListener("click", function() {
  updateMessage();
});
JavaScript
toshi
toshi

今回は
“ボタンを押す → 関数を呼び出す → 画面が変わる”
という流れを見る回です。

変化のポイント

どこを見ればいい？

見る場所起きていること
function updateMessage()処理に名前をつけている
count = count + 1実行回数を1つ増やしている
message.textContent画面のメッセージを書き換えている
updateMessage();関数を呼び出している
addEventListenerボタンが押された時に関数を動かしている

今回の流れは、
前回までのクリック処理を少し整理した形です。

前回は、クリックされた時の中に直接処理を書きました。

今回は、
処理を updateMessage という関数にまとめて、
クリックされた時にその関数を呼び出しています。

関数③

関数を作る場所と、呼び出す場所を分けて見る

場所役割
function updateMessage() { }関数を作っている
updateMessage();関数を呼び出している
addEventListener の中ボタンが押された時に呼び出している

関数は、作る場所と呼び出す場所を分けて見ると分かりやすいです。

まず作ります。

function updateMessage() {
  message.textContent = "関数 updateMessage が呼び出されました。";
}
JavaScript

そして、必要な時に呼び出します。

updateMessage();
JavaScript

今回は、ボタンが押された時に呼び出しています。

関数④

クリック処理の中が短くなります

関数を使うと、クリック処理の中を短くできます。

今回のコードでは、

runButton.addEventListener("click", function() {
  updateMessage();
});
JavaScript

となっています。

クリックされた時にやっていることは、
updateMessage を呼び出すだけです。

実際の処理は、
関数の中にまとめています。

最初は「クリック処理の中身を関数に分けた」
と見るだけで十分です。コードを分けると、
どの処理が何をしているか見やすくなります。

関数⑤

関数名は“何をするか”が分かる名前にする

関数名読みやすさ
updateMessageメッセージを更新する感じが分かる
showMessageメッセージを表示する感じが分かる
test何をするか分かりにくい
aaa何をするか分からない

関数名は、あとから見た時に
「何をする処理か」が分かる名前にすると読みやすくなります。

今回の updateMessage は、
メッセージを更新する処理なので、
この名前にしています。

最初は完璧な名前をつける必要はありませんが、
aaa や test だけで増やしていくと、
あとでかなり読みにくくなります。

関数⑥

count の更新も関数の中にまとめています

今回の関数では、
メッセージだけでなく、回数の更新もまとめています。

function updateMessage() {
  count = count + 1;

  message.textContent = "関数 updateMessage が呼び出されました。";
  countText.textContent = "実行回数：" + count + "回";
}
JavaScript

– count が1つ増える
– message が変わる
– countText が変わる

という3つの処理が動きます。

toshi
toshi

関数は “いくつかの処理をまとめた箱”
と見ると分かりやすいです。

少しだけ変えてみる（練習）
  • updateMessage の中の文章を変えてみる
  • count = count + 1 を count = count + 2 にしてみる
  • 関数名を showMessage に変えて、呼び出し側もそろえてみる
  • button の文字を変えてみる
  • console.log を関数の中に入れて、呼び出されたか確認してみる

今回の練習では、
関数の中を変えると、呼び出した時の動きも変わることを確認します。

「関数を作る」
「関数を呼び出す」
この2つを分けて見られれば十分です。

関数が動いているか分かりにくい時は、
関数の中に console.log を入れると確認しやすいです。

function updateMessage() {
  console.log("updateMessage が呼び出されました。");

  count = count + 1;

  message.textContent = "関数 updateMessage が呼び出されました。";
  countText.textContent = "実行回数：" + count + "回";
}
JavaScript

これで、ボタンを押した時に
開発者ツールのコンソールへ表示されれば、
関数が呼び出されていると確認できます。

ここだけ確認

よくあるつまずき

Q
「つまずき①：関数を作ったのに動かない」

関数は、作っただけでは動きません。

function updateMessage() {
  message.textContent = "関数が動きました。";
}
JavaScript

これだけでは、まだ用意しただけです。

動かすには、

updateMessage();
JavaScript

のように呼び出す必要があります。

Q
「つまずき②：関数名を変えたら動かなくなった」

関数名を変えた場合は、
呼び出す側の名前もそろえる必要があります。

たとえば、

function showMessage() {
  message.textContent = "表示しました。";
}

showMessage();
JavaScript

のように、作った名前と呼び出す名前を同じにします。

Q
「つまずき③：updateMessage と updatemessage の違いが分からない」

JavaScriptでは、大文字と小文字が区別されます。

updateMessage と updatemessage は別の名前です。

最初は、関数名をコピーしてそろえるのがおすすめです。

Q
「つまずき④：クリックしても何も変わらない」

まずは、ボタンの id 名を確認します。

HTML側が、

<button id="runButton" class="button" type="button">関数を動かす</button>
HTML

なら、JavaScript側も

const runButton = document.getElementById("runButton");
JavaScript

のように同じ名前にします。

id 名がずれていると、ボタンを見つけられません。

ここだけ押さえればOK

今回のまとめ

  • 関数は処理に名前をつけるためのもの
  • function で関数を作る
  • 関数は呼び出した時に動く
  • クリック処理の中で関数を呼び出せる
  • 関数を使うと、処理を少し整理しやすくなる
できた判定

今日のゴール確認

ここまでできたらOKです。

  • 関数の入口が分かった
  • 処理を updateMessage にまとめられた
  • ボタンを押して関数を呼び出せた
  • 次の JavaScript 2-3 に進む準備ができた
次に読む

JavaScript 2-3へ

今回は、関数を使って処理をまとめる流れを見ました。

次は、
複数のデータをまとめて扱うために、
配列の入口へ進みます。

配列が分かると、
複数の文字や項目をまとめて扱いやすくなります。

次へ：JavaScript 2-3 配列の入口へ進む
zipについて

JavaScript 2-2 の一例

この記事の内容は、JavaScript 2-2 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで関数名や表示される文章を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-02-02-example.zip
└─ javascript-02-02-example/
├─ index.html
├─ css/
│ 　└─ style.css
└─ js/
　　└─ script.js

javascript-02-02-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、条件分岐・関数・DOM操作あたりで少しつまずきやすいので、
必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました