【JavaScript入門】JavaScriptの関数を学ぼう

本章では、JavaScriptの関数について学びます。

関数とは何か、関数は何のためにあるのか、関数の使い方などを解説します。

本題に入る前に、関数を理解するためにこちらを確認しておきましょう。

では、JavaScriptの関数を一緒に学びましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

参考 サンプルコードJavaScript入門

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「010 関数」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

関数ってなに

プログラミングにおける関数とは、与えられた値を元に処理を実行しその結果を返すもの を言います。

この説明だけだとイメージがしづらいですね。

例えば、駅の切符の券売機をイメージしてみましょう。

切符券売機は、お金を入れて駅名を選択すると切符が出てきますね。

まとめると、次のような流れになります。

これと同じような流れで関数も動きます。

両者を対応させると、次のようになります。

ステップ	切符券売機	関数
ステップ1	「お金」を入れて、「駅名」を選択する	値を渡す
ステップ2	切符券売機が処理をする	処理を実行
ステップ2	切符が出る	処理した結果を返す

このように関数は、与えられたものを元に何かしらの処理をしてその結果を返すもの として覚えておきましょう。

関数の仕組み

関数は、与えられたものを元に何かしらの処理をしてその結果を返すもの、と解説しました。

もう一度関数のステップを見てみましょう。

プログラミングでは、ステップ1の「値を渡す」の「値」を 引数 と言います。

そして、ステップ3の「その結果」を 返り値 と言います。

イメージしやすいように、切符券売機と一緒に対応して見てみましょう。

用語	切符券売機	関数
引数	「お金」	与えられた値
返り値	切符	処理した結果

関数は、基本的にこの引数を受け取って、何かしらの処理をして、結果として返り値を返します。

引数と返り値は省略することができる

しかし、JavaScriptの関数はこの、引数と返り値を省略することができます。

ステップ2の「処理を実行する」だけをするパターンもあるということです。

console.logも関数

関数の仕組みについて見てきましたが、実際の例も見てみましょう。

実は、console.log も関数です。

console.log の動作は次のようなステップです。

console.log は引数を受け取って、コンソールに表示するという処理を実行しています。

返り値はないので省略されています。

まとめると、次のようになります。

用語	console.log
引数	数値や文字
処理	コンソールに表示する
返り値	なし

関数の書き方

では、実際に関数の書き方を見てみましょう。

関数のフォーマットは、次のようになります。

変数 = (引数) => {
  実行したい処理

  return 返り値
}

「=>」をアローと呼びます。

そのため、この書き方は アロー関数式 と言います。

実際にコードで見てみましょう。

引数に数値を受け取って、1を足してその結果を返り値として返す関数を定義してみましょう。

コードにすると次のようになります。

const sum = (number) => {
  const result = number + 1

  return result
}

関数を使う

では、定義した関数をどのようにして使うのでしょうか。

関数は次のフォーマットで使うことができます。

関数(引数)

先ほどの sum 関数を使ってみましょう。

引数として「1」を渡します。

const result = sum(1)

sum 関数は引数の値に1を足すので返り値は「2」ですね。

console.log(result)

実行結果

2

関数は何のためにあるの

関数の書き方と使い方について見てきましたが、関数は何のためにあるのでしょうか。

関数の用途はいくつかありますが、関数は 複数の処理をまとめて実行するために使われます。

例えば、次のように商品の合計金額を求める処理があるとします。

const price = 100 // 商品価格
const quntity = 10 // 購入数
const subtotal = price * quntity // 小計
const tax = subtotal * 0.10 // 消費税
const total = subtotal + tax // 合計金額

この処理を合計金額を求めるたびに書いていたらとても大変です。

なので、この計算処理を関数にしましょう。

「price」と 「quntity」を引数にして関数にします。

const calculate = (price, quntity) => {
  const subtotal = price * quntity// 小計
  const tax = subtotal * 0.10// 消費税
  const total = subtotal + tax// 合計金額

  return total
}

関数に定義することで、何度でも同じ計算処理を使うことができます。

const total1 = calculate(100, 10)
const total2 = calculate(200, 20)

コンソールに出すと計算結果は次のようになります。

console.log(total1)
console.log(total2)

計算結果

1100
4400

このように関数を使うと、複数の処理をまとめて共通化させて実行することができるのです。

関数を書いてみよう

では、実際にオブジェクトを書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「関数を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// 関数を書いてみよう
const logName = (name) => {
  console.log(name)
}

logName("鈴木です！")

const sum = (num1, num2) => {
  const result = num1 + num2
  return result
}
const result1 = sum(1, 2)
const result2 = sum(2, 3)

console.log(result1)
console.log(result2)

const calculate = (price, quntity) => {
  const subtotal = price * quntity
  const tax = subtotal * 0.10
  const total = subtotal + tax

  return total
}
const total1 = calculate(198, 10)
const total2 = calculate(1980, 20)

console.log(total1)
console.log(total2)

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

関数の名前の付け方

変数の説明の際に、変数の名前の付け方について解説しました。

【JavaScript入門】JavaScriptの変数と定数を学ぼう

関数の名前の付け方も変数と同様です。

なるべく、具体的で意味のある名前にする のが推奨されています。

例えば、次のような関数があるとします。

const aaa = (lastName, firstName) => {}

関数名を見ると、「aaa」という意味のない文字になっています。

これでは、パッとみたときに一体何をする関数なのか想像がつきません。

それでは、次のように名前を書き方えたらどうでしょうか。

const showName = (lastName, firstName) => {}

showName という名前にしました。

日本語訳すると、「名前を表示する」になりますね。

引数に受け取った「lastName」と「firstName」を元に名前を表示するのだと推測できます。

このように、関数名をつけるときは その関数がやることを名前にする のがいいでしょう。

一般的な慣習だと、「動詞」または、「動詞 + 名詞」にすると分かりやすくなります。

以前の関数の書き方

関数の書き方について学びましたが、以前は次のようなフォーマットで書かれていました。

function sum(num1, num2) {
  const result = num1 + num2
  return result
}

「function」というキーワードで宣言をして、その後に関数を書きます。

現在でも使うことはありますが、基本的にはアロー関数式で書くのがいいでしょう。

const sum = (num1, num2) => {
  const result = num1 + num2
  return result
}

まとめ

本章では、JavaScriptの関数について学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、スコープについて解説します。