#042　フロントサイド（7）：JavaScript入門4（関数・アロー関数）

2024年7月29日 07:19

ビギナーのためのJavaScript関数入門

関数とは？

関数は、特定の仕事をする「命令のセット」です。料理のレシピのようなものだと考えてください。

レシピ（関数）があれば、同じ料理（処理）を何度でも作れます。
材料（引数）を変えれば、少し違う料理（結果）を作れます。

関数の基本形

function 関数名(引数1, 引数2, ...) {
    // 処理内容
    return 結果; // 必要な場合
}

足し算をする関数

function add(a, b) {
    return a + b;
}

// 関数を使ってみる
console.log(add(5, 3)); // 出力: 8
console.log(add(10, 20)); // 出力: 30

関数の使い方

関数の定義: 上記の例のように、function キーワードを使って関数を作ります。
関数の呼び出し: 関数名と括弧を使って、関数を実行します（例：add(5, 3)）。
引数: 括弧の中に渡す値です。関数に情報を与えるために使います。
戻り値: return で指定した値が関数の結果として返されます。

関数を使うメリット

コードの再利用: 同じ処理を何度も書く必要がありません。
整理整頓: プログラムを小さな部品に分けて管理できます。
変更が容易: 一箇所を修正するだけで、その関数を使っているすべての場所に反映されます。

この図は、JavaScriptの関数、引数、戻り値の関係を視覚的に表現しています。以下が図の説明です：

関数 (中央の青い箱):
- 大きな青い箱は関数 add を表しています。
- 関数は入力（引数）を受け取り、処理を行い、出力（戻り値）を返す「機械」のようなものです。
引数 (左側のオレンジの箱):
- 2つのオレンジの箱は引数 a と b を表しています。
- この例では、a に 5、b に 3 が渡されています。
- 引数は関数に与える入力値です。
処理内容 (青い箱の中):
- 関数内部で行われる処理を示しています。
- この例では a + b という足し算を行っています。
戻り値 (右側の緑の箱):
- 緑の箱は関数の戻り値を表しています。
- この例では、5 + 3 の結果である 8 が戻り値になります。
矢印:
- 左から右への矢印は、データの流れを示しています。
- 引数が関数に入力され、処理後に戻り値として出力されることを表現しています。
関数呼び出し:
- 図の下部に add(5, 3) と書かれています。
- これは、この関数をどのように呼び出すかを示しています。

この図を使用することで、関数が「引数を受け取り、処理を行い、結果を返す」という一連の流れを視覚的に理解できます。関数を「入力を受け取って出力を生成する機械」として捉えることで、プログラミング初心者でも関数の基本的な概念を直感的に理解しやすくなります。

ビギナーのためのアロー関数入門

アロー関数とは？

アロー関数は、JavaScriptで関数を書くための新しい、そしてより簡潔な方法です。「アロー」という名前は、関数を定義するときに使う => という矢印（アロー）の形をした記号から来ています。

基本的な書き方

通常の関数とアロー関数を比較してみましょう。

通常の関数

function add(a, b) {
    return a + b;
}

アロー関数

const add = (a, b) => {
    return a + b;
};

アロー関数の特徴

より短く書ける: 特に簡単な関数の場合、とてもコンパクトに書けます。
function キーワードが不要: 代わりに => を使います。
return が省略できる場合がある: 関数が1行で結果を返す場合、{} と return を省略できます。例：const add = (a, b) => a + b;
引数が1つの場合、括弧を省略できる: 例：const square = x => x * x;

サンプルプログラム：数字を2倍にする関数

上と下は同じ処理になる

// 通常の関数
function double(number) {
    return number * 2;
}

// アロー関数
const double2 = number => number * 2;

console.log(double(5)); // 出力: 10
console.log(double2(5)); // 出力: 10

注意点

アロー関数は常に匿名関数です（名前を持ちません）。変数に代入して使います。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。