JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編

JavaScript
スポンサーリンク

2日目のゴールと今日やること

2日目のテーマは「プログラムに“考えさせる”」です。
1日目は「値を覚える（変数）」と「結果を出す（console.log）」でした。
今日はそこに、

「もし〜なら、こうする」（条件分岐）
「よく使う処理に名前をつける」（関数）

を足していきます。

ゴールはこうです。
条件によってメッセージを変えるコードを書ける。
自分で関数を作って、何度も呼び出せる。
「条件」と「関数」が何をしているのか、ざっくり説明できる。

ここまで行けたら、超初級2日目としてはかなりいい感じです。

条件分岐 if：プログラムに「選ばせる」

「もし〜なら」のイメージを言葉でつかむ

人間の会話だと、こんなやりとりがあります。

もし雨なら、傘を持っていく。
もし20歳以上なら、お酒を飲める。
もし点数が80点以上なら、「よくできました」と表示する。

これをプログラムで表現するのが「if（イフ）」です。
if は「もし〜なら」という意味で、その条件が「本当かどうか」で、実行するかどうかを決めます。

if の基本形をコードで見る

まずは形を覚えましょう。

if (条件) {
  // 条件が「true（本当）」のときに実行されるコード
}
JavaScript

例えば、「年齢が20以上なら、大人ですと表示する」というコードはこうなります。

let age = 20;

if (age >= 20) {
  console.log("大人です");
}
JavaScript

ここでのポイントは、age >= 20 が「条件」になっていることです。
>= は「以上」という意味で、「age が 20 以上か？」をチェックしています。

もし age が 20 なら、age >= 20 は true（本当）なので、中の console.log が実行されます。
もし age が 18 なら、age >= 20 は false（ウソ）なので、中のコードは実行されません。

if と else：条件によって「どちらか」を選ぶ

if だけだと「何もしない」パターンがある

さっきのコードは、「大人ならメッセージを出す」だけでした。
未成年の場合は、何も起こりません。

let age = 18;

if (age >= 20) {
  console.log("大人です");
}
JavaScript

この場合、何も表示されません。
「大人じゃないときも、別のメッセージを出したい」と思ったときに使うのが else です。

if と else をセットで使う

else は「それ以外の場合」という意味です。
形はこうなります。

if (条件) {
  // 条件が true のとき
} else {
  // 条件が false のとき
}
JavaScript

さっきの例を、if と else で書き直すとこうなります。

let age = 18;

if (age >= 20) {
  console.log("大人です");
} else {
  console.log("未成年です");
}
JavaScript

age が 18 のときは、age >= 20 が false なので、else の中が実行されて「未成年です」と表示されます。
age を 25 に変えて実行すると、「大人です」と表示されます。

ここでの重要ポイントは、「if と else は必ずどちらか一方が実行される」ということです。
条件が true なら if の中、false なら else の中、どちらか一方だけが動きます。

条件を少しだけ複雑にしてみる

if / else if / else で「3パターン以上」を分ける

例えば、テストの点数でメッセージを変えたいとします。

80点以上なら「よくできました」。
50点以上なら「もう少し」。
それ以外なら「がんばろう」。

これを if だけで書こうとすると、かなり大変です。
そこで使うのが else if です。

let score = 72;

if (score >= 80) {
  console.log("よくできました");
} else if (score >= 50) {
  console.log("もう少し");
} else {
  console.log("がんばろう");
}
JavaScript

ここでの流れを丁寧に追ってみます。

まず、score >= 80 をチェックする。
72 >= 80 は false なので、ここはスルー。
次に、score >= 50 をチェックする。
72 >= 50 は true なので、「もう少し」が表示される。
else には行かない（どれか一つが実行されたら、残りはスキップされる）。

この「上から順番に条件をチェックして、最初に true になったところだけ実行する」という動きが、if / else if / else の基本です。

関数：処理に「名前をつけて再利用する」

関数のイメージを言葉でつかむ

関数は、「よく使う処理に名前をつけて、何度でも呼び出せるようにしたもの」です。

人間の生活で言うと、「歯を磨く」という行動を毎回細かく説明しないのと同じです。

歯ブラシを取る。
歯磨き粉をつける。
水で濡らす。
歯を磨く。

これを毎回全部言うのは大変なので、「歯を磨く」という一言にまとめています。
関数も同じで、「一連の処理に名前をつけて、必要なときにその名前を呼ぶ」ための仕組みです。

関数の基本形をコードで見る

JavaScriptで関数を作る基本形はこうです。

function 関数名() {
  // 実行したい処理
}
JavaScript

例えば、「こんにちは」と表示する関数はこう書けます。

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

これだけではまだ何も起こりません。
関数は「定義」と「呼び出し」がセットです。

sayHello();
JavaScript

と書いて実行すると、はじめて console.log("こんにちは！"); が動きます。

ここでのポイントは、「関数を作ること」と「関数を呼ぶこと」は別、ということです。
作るのは function ... { ... }、呼ぶのは 関数名(); です。

引数付きの関数：呼ぶときに「材料」を渡す

名前を変えて挨拶できる関数を作る

さっきの sayHello は、いつも同じメッセージでした。
今度は、「名前を変えて挨拶できる関数」を作ってみましょう。

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

ここでの name は「引数（ひきすう）」と呼ばれます。
関数を呼ぶときに渡す「材料」のようなものです。

実際に呼んでみます。

greet("太郎");   // こんにちは、太郎 さん！
greet("花子");   // こんにちは、花子 さん！
JavaScript

ここでの重要ポイントは、

関数の定義側では name という「箱の名前」だけ決めている。
呼び出し側で "太郎" や "花子" という具体的な値を渡している。
関数の中では、「渡された値」が name に入って使われる。

という流れです。

数値を使った関数の例：年齢から来年の年齢を計算する

次は、数値を使った関数を作ってみます。

function printNextAge(age) {
  let nextAge = age + 1;
  console.log("来年は " + nextAge + " 歳です。");
}
JavaScript

これを呼んでみます。

printNextAge(20);  // 来年は 21 歳です。
printNextAge(35);  // 来年は 36 歳です。
JavaScript

ここでも同じように、

関数の定義側では age という名前だけ決めている。
呼び出し側で 20 や 35 を渡している。
関数の中では、その値に 1 を足してメッセージを作っている。

という流れになっています。

条件分岐と関数を組み合わせたミニアプリ

年齢によってメッセージを変える関数を作る

ここまでの要素を組み合わせて、「年齢によってメッセージを変える関数」を作ってみましょう。

仕様はこうです。

20歳以上なら「大人です」。
13歳以上なら「中高生です」。
それ以外なら「子どもです」。

これを関数で書くと、こうなります。

function printAgeCategory(age) {
  if (age >= 20) {
    console.log("大人です");
  } else if (age >= 13) {
    console.log("中高生です");
  } else {
    console.log("子どもです");
  }
}
JavaScript

実際に呼んでみます。

printAgeCategory(25);  // 大人です
printAgeCategory(15);  // 中高生です
printAgeCategory(10);  // 子どもです
JavaScript

ここでの深掘りポイントは、条件の順番です。

最初に age >= 20 をチェックしている。
その次に age >= 13 をチェックしている。
最後の else は「それ以外全部」。

もし順番を逆にして、

if (age >= 13) {
  ...
} else if (age >= 20) {
  ...
}
JavaScript

のように書いてしまうと、20歳以上でも最初の age >= 13 が true になってしまい、「中高生です」と表示されてしまいます。
だから、「より厳しい条件（範囲が狭いもの）を先に書く」というのが、条件分岐の大事なコツです。

2日目のまとめと、明日へのつなぎ

今日やったことを、言葉で整理してみます。

if は「もし〜なら」の命令で、条件が true のときだけ中身が実行される。
if と else を組み合わせると、「どちらか一方」を選べる。
if / else if / else で、3パターン以上の分岐が書ける。
関数は「処理に名前をつけて再利用する仕組み」で、function 名前() { ... } で定義し、名前(); で呼び出す。
引数付きの関数で、「呼ぶたびに違う値を渡して、違う結果を出す」ことができる。
条件分岐と関数を組み合わせて、「年齢によってメッセージを変えるミニアプリ」を作れた。

明日（3日目）は、ここに「戻り値（return）」と「簡単な計算ロジック」を足していきます。
そうすると、「メッセージを表示するだけ」から、「値を計算して返す関数」が書けるようになります。

最後に一つだけ、ちゃんと聞きたい。

今日の中で、「あ、ちょっと気持ちいいな」と感じたのはどこでしたか？
条件を変えて結果が変わった瞬間か、同じ関数を違う引数で何度も呼べたときか。
その「気持ちいい」と感じたところが、あなたとロジック（考えるコード）の一番の接点です。
そこを意識しながら、3日目に進んでいきましょう。

前へ次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました