JavaScript入門② - 関数について分かりやすく解説します

関数って何？

「自動販売機」「工場」「コックさん」など色んな例えがありますが、最初のイメージを掴むためのものなので、さほど重要ではありません。

僕は最初「工場です」と言われてピンときませんでしたが、しばらく使っていると自然と関数が何か分かるようにってきました。

ここでの例えは、初心者の挫折防止。が目的と思っています。

ので、今回の例では、関数とは【小さなおじさん】として考えてみましょう。

このおじさんは役割ごとにたくさんいて、役割を全うしてくれます。

こんな関係性になります。

では、例として2つの「こんにちは」と挨拶するおじさんを2人を作ってみましょう。

1人目 : 「こんにちは」という返事するだけ
2人目 : 「こんにちは○○さん」と、名前付きで返事する

こんな感じです。1人目は、だれがどう呼んでも、おじさんは「こんにちは」としか返事してくれません。

ところが2人目は、おじさんを呼ぶ時に「スキプラ」という名前も一緒につけて呼ぶと(これが引数)、「こんにちはスキプラさん」と名前付きて呼んでくれます。

ここでは、関数とは、役割を全うするおじさんを作って、呼び出すことで便利になる。程度の理解でOKです。

そして、引数というのは、【おじさんが自分の役割を全うするのに必要な情報】戻り値は【おじさんの返事】という感覚を持てればOKです。

関数を使ってみる

まだイメージが湧かないですよね。

実際に関数を使ってみながら理解を深めていきましょう。

まず、先程の2人のおじさんを実際に作ってみましょうか。

 alert(sayHello())

 function sayHello() {
   return "こんにちは"
 }

実際にこれを実行して、ブラウザで見るとこのように表示されます。

関数の宣言の仕方や、使い方を説明しておきましょう。

まずは、以下のように関数を定義(こんにちはおじさんを用意)します。

function sayHello() {
  // ここに処理
}

この関数の呼び出し方はシンプルで、関数名()として呼び出します。

今回の場合は、【sayHello()】ですね。

また、戻り値(呼び出した時の返事)も決めておきたいので、関数にこのように書きます。

function sayHello() {
  return "こんにちは"
}

これで、上のように【sayHello()】と呼び出してあげると、おじさんは「こんにちは」と返事をしてくれるようになります。

何となくイメージがつかめてきたでしょうか？

引数を使ってみる

では、第二のおじさんである、名前付きで返事してくれるおじさんを作ってみましょう。

alert(sayHelloByName("スキプラ"))

function sayHelloByName(name) {
 return "こんにちは" + name + "さん"
}

今回のおじさんは、単に「こんにちは」だけでなく。「こんにちは○○さん」と名前付きで返事してほしいですよね。

そこで出てくるのが【引数】です。先程引数とは「おじさんが自分の役割を全うするのに必要な情報」と説明しました。

今回は、○○さん。と呼ぶために、「その人の名前」という情報が必要ですね。それをnameという引数として定義してあげてるのです。

引数付き関数の定義の方法

関数の宣言の時に、【function sayHelloByName(name)】と、関数名の後の()の中に引数の名前を付けます。

引数付き関数の呼び出し方

関数に引数がある場合は、呼び出す時、さっきみたいに【sayHelloByName()】だといけません。

この状態で呼んでみましょう。

// 引数が必要なのに宣言していない
alert(sayHelloByName())

function sayHelloByName(name) {
 return "こんにちは" + name + "さん"
}

こんにちはundefinedさん。となりましたね。

undefinedというのは、簡単に言うと「そんな変数知らないよ」という意味です。

このsayHelloByNameおじさんは、引数で受け取ったnameを元に返事をしたいのですが、呼び出す時に引数に名前を指定しなかったので、「そんなの知らないよ」状態になってしまったのです。

じゃあどうすればよいか？引数を指定すればOKです。

引数を指定した関数の呼び出し方

これは非常に簡単です。関数の呼び出し方は覚えていますか？

。。。。

そう、

関数名()

ですね。引数付きの場合は、この【()】の中に引数を渡してやります。

冒頭で書いた通り【sayHelloByName("スキプラ")】として呼んでみましょう。

alert(sayHelloByName("スキプラ"))

function sayHelloByName(name) {
 return "こんにちは" + name + "さん"
}

ちゃんと僕の名前付きで返事してくれましたね！

問題①

ここで理解度チェックです。

以下を満たすコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

「いらっしゃい○○(あなたの名前)さん」と返事する関数(おじさん)を作って実際に呼び出してalertで表示してみてください。

複数の引数を指定する

もっと面白くするために、複数の引数を使ってみましょう。

じゃあ、今度は名前と、訪問回数を返事する関数(おじさん)を作ってみましょう。

複数の引数を指定するのは超簡単です。

1. 関数を宣言する時に引数をカンマ区切りで宣言
2. 関数を呼び出すとき、引数はカンマ区切りで呼び出す

だけです。

実際に作ってみましょう。

alert(sayHelloByNameAndVisitCount("スキプラ", 100))

function sayHelloByNameAndVisitCount(name, visit_count) {
 return "こんにちは" + name + "さん。あなたは" + visit_count + "回目の訪問です"
}

簡単でしたね。

今回関数(おじさん)の名前を、sayHelloByNameAndVisitCountと長めにしてますが、関数名は分かりやすい名前であればなんでもOKなので、練習で使う分には【function hoge(name, visit_count)】とかで宣言してもOKです。

問題②

では理解度チェック②です。

今度は、以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

「こんにちは○○(あなたの名前)さん、あなたの年齢はxx歳です」と返事する関数(おじさん)を作って実際に呼び出してalertで表示してみてください。

条件に合わせて返事を変えるおじさんを作ってみる

もう少し便利なおじさんを作ってみましょう。

20歳未満にはタバコを売れないよ。21歳以上ならタバコを売れるよ。ということを判断して返事をくれるおじさんを作ります。

alert(judgeMinor(19)) // 19歳がタバコを買えるかチェック
alert(judgeMinor(20)) // 20歳がタバコを買えるかチェック

function judgeMinor(age) {
 if (age >= 20) {
   return "あなたは" + age + "歳ですね。タバコを購入できます"
 } else {
   return "あなたは" + age + "歳ですね。ダメ！未成年はタバコを買えません！"
 }
}

1つ目のアラート

19歳はまだタバコを買えないので、おじさんは役割を全うしてくれましたね。

2つ目のアラート

20歳で成人してるので、こちらもおじさんは仕事を全うしています。

【ifとelseって何だ？】

いきなり出てきて混乱させてしまいましたが、簡単です。

この画像の通りなのですが、実際には【条件】のところが分かりづらいと思います。

これは条件分岐編でも詳しく解説しますが、ここでも簡単に説明しておきます。

まず、「条件に一致した場合」というのがどういう場合なのか？

それは【条件】に書いた内容が、trueになった時です。

true??????

安心してください。そんなに難しいことではありません。

プログラミングの世界には、trueとfalseという「boolean型」と呼ばれる型が存在するのです。

型？と言われるとハテナですが、例えば今までの「スキプラ」という文字列は、プログラミング上では「文字列型」として扱われてます。

また、「100」という訪問回数の数字は「int型」と呼ばれる数字の型として扱われてます。

何となく分かりますよね。そして、boolean型と呼ばれる、trueとfalseだけを持つ型も存在します。

これは、何か条件を書いた時に、その結果がYesだったらtrue、Noだったらfalseになります。

今回の例だと、「年齢が20歳以上か？」という条件を作りましたね。

これは、「age >= 20」と表現しました。

「>=」というのは左側(age)が、右側(20)以上か？

という意味です。

では簡単なクイズです。ageという変数に「30」が入ってる場合、この条件はtrue/falseどちらになるでしょうか？？

。。。。

そう。答えは、trueですね。

ageには20が入ってる場合、この条件式は「age >= 20」→「20 >= 20」という形で判定されることになり、20は20以上なので、条件を満たす = trueとなります。

ではもう一問。

ageに19が入ってる場合はどうでしょうか？

。。。

そう、答えはfalseです。

ageには19が入ってる場合、この条件式は「age >= 20」→「19 >= 20」という形で判定されることになり、19は20以上ではないので、条件を満たさない = falseとなります。

さて、trueとfalseの概念が分かったところで、元のコードに戻りましょう。

この関数を見ると、ageが20以上だった場合には、1つ目の処理「あなたはxx歳ですね。タバコを購入できます」と返事して、

ageが20未満だと、2つ目の処理(elseの部分)に入って、「あなたはxx歳ですね。ダメ！未成年はタバコを買えません！」と言ってくれます。

こうやって条件分岐も使えるとかなり面白くなりますよね。

問題③

では理解度チェック③です。

この講座は「将来的にECサイトで使えるJavaScriptの技術を身につける」が目的なので、少しECサイトっぽい問題を出してみます。

今度は、以下のコードを書いてTwitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

1. カートに入っている合計金額が5000円以上の場合、「あなたのカートには、xxx(合計金額)分の商品が入っているので送料が無料になります」とalertで表示。
2. カートに入っている合計金額が5000円未満の場合、「あなたのカートには、xxx(合計金額)分の商品が入っているので送料は有料です。5000円以上なら送料無料です」とalertで表示。

ヒント

・ 使う引数は1つ
・ 引数には「カートの合計金額」が入ります
・ 条件分岐は、ifとelseで表現可能です

プログラミング学習で、アウトプットは最大の学習効果をもたらしてくれます。

ぜひ、今回の3つの問題の答えを自分なりに答えて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。

コードは文字数多くなるので、自分で書いたコードのスクショとかでもOKです！

ぜひ、トライしてみてください。

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️