この授業のゴール
自分で関数を作って、材料(引数)を渡して呼び出せるようになる。
この授業のためし方 (共通): コードは、VS Code で開いた HTMLファイルの
<script> と </script> のあいだ (= 「script の中」) に書きます。Ctrl + S で保存 → Go Live で表示 → 結果は F12 →「コンソール (Console)」タブ、がいつもの流れです。1. 関数 = 名前をつけたレシピ
関数(かんすう)の作り方と使い方は、2段階です。
// ① レシピを書く (この時点ではまだ実行されない)
function aisatsu() {
console.log("こんにちは!");
console.log("今日もいい天気ですね。");
}
// ② レシピを使う (呼び出し)
aisatsu();
aisatsu(); // 何度でも使える
function 名前() { ... }でレシピを登録します。書いただけでは動きません。名前();と書いた瞬間に、中の手順が上から実行されます。- 2回呼べば2回動く。「書くのは1回、使うのは何回でも」が関数のうれしさです。
2. 引数 ― レシピに材料を渡す
「こんにちは、山田さん」「こんにちは、佐藤さん」…相手の名前だけ変えたいとき、レシピに材料の置き場所(引数: ひきすう)を作れます。
function aisatsu(namae) {
console.log("こんにちは、" + namae + "さん!");
}
aisatsu("山田"); // → こんにちは、山田さん!
aisatsu("佐藤"); // → こんにちは、佐藤さん!
( ) の中の namae が材料置き場です。呼び出すときに渡した値が、そこに入って使われます。材料はカンマで区切って2つ以上にもできます。
3. 戻り値 ― できあがった料理を受け取る
関数は、結果を返すこともできます。return(リターン)を使います。
function zeikomi(nedan) {
return nedan * 1.1; // 税込価格を計算して返す
}
let kekka = zeikomi(1000);
console.log(kekka); // → 1100
console.log(zeikomi(500)); // → 550
return された値は、呼び出した場所に「置き換わる」イメージです。計算のレシピを一度作っておけば、どこからでも正確な答えが手に入ります。消費税率が変わっても、直すのはレシピの1か所だけ。これが「まとめる」力です。
4. やってみよう ― おみくじ関数
やってみよう
ボタンを押すたびに運勢が変わる「おみくじ」を作ります。web-renshu フォルダに omikuji.html を作り (ひな形 ! + Tab)、<body> の中に、まずこの形を写します。動かし方は、保存 → Go Live →「おみくじを引く」ボタンをクリック、です。
<button id="omikuji-btn">おみくじを引く</button>
<script>
function hiku() {
var kazu = Math.random(); // 0〜1のランダムな数
if (kazu < 0.3) {
return "大吉";
} else if (kazu < 0.7) {
return "中吉";
} else {
return "吉";
}
}
var btn = document.getElementById("omikuji-btn");
btn.addEventListener("click", function () {
alert("今日の運勢は " + hiku() + " です!");
});
</script>
- 写して動かす。
Math.random()は「0以上1未満のランダムな数をくれる、最初から用意されている関数」です。 - 運勢の種類を1つ増やす。(「凶」を入れるかはおまかせします)
- 確率を変えてみる。(大吉が出やすいおみくじ、ほぼ吉しか出ないおみくじ…)
- スタッフに3回引いてもらって、完成を報告する。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- 引数を2つ取る関数
bmi(shincho, taiju)を作って、BMI(体重 ÷ 身長(m)の2乗)を計算してみましょう。 - アロー関数という新しい書き方を調べてみましょう。
const aisatsu = (namae) => { ... };の形で、今のプロはほとんどこちらを使います。見た目は違っても中身は同じ「レシピ」です。 - 授業3「条件分岐」で作った合言葉チェッカーを、「判定部分を関数に切り出す」形に書き直してみましょう。プログラムを関数で整理する練習として最適です。