プログラム設計

関数

レシピをまとめて名付ける:処理の使い回しで効率アップ

関数とは?「魔法の呪文」を定義する

プログラミングの世界では、同じ処理を何度も書くのは「罪」とされています。変更が必要になった時、全ての箇所を修正しなければならないからです。そこで登場するのが「関数(Function)」です。一連の処理をひとまとめにして名前をつけ、いつでも呼び出せるようにした「魔法の呪文」のようなものです。

1. 基本的な関数の作り方

最もオーソドックスな「関数宣言」です。

JavaScript
// 定義:呪文を作る
function greet(name) {
    console.log("こんにちは、" + name + "さん!");
    console.log("今日は良い天気ですね。");
}

// 実行:呪文を唱える
greet("佐藤");
greet("田中");

2. 引数(ひきすう)と戻り値(もどりち)

関数はただ命令を実行するだけではありません。「材料」を受け取り、加工して「成果物」を返すことができます。

  • 引数 (Arguments): 関数に渡すデータ。「材料」にあたります。コンマ区切りで複数渡せます。
  • 戻り値 (Return Value): 関数から返ってくる結果。「成果物」にあたります。`return` を使うと、そこで関数の処理は終了し、値が呼び出し元に返されます。
function add(a, b) {
    // a と b が「引数」
    const result = a + b;
    return result; // これが「戻り値」
}

const total = add(100, 50); // totalには150が入る

3. アロー関数 (Arrow Function)

現代のJavaScript(ES6以降)で主流となっている、短くてスマートな書き方です。`function` キーワードの代わりに `=>`(矢印)を使います。

// 従来の書き方
const oldWay = function(x) {
    return x * x;
};

// アロー関数
const newWay = (x) => {
    return x * x;
};

// さらに省略可能(引数が1つ、処理が1行の場合)
const simple = x => x * x;

特にReactなどのフレームワークでは頻繁に使われるため、この形に慣れておきましょう。

4. コールバック関数

JavaScriptの大きな特徴の一つが、「関数も値(データ)として扱える」という点です。つまり、関数を他の関数の引数として渡すことができます。これを「コールバック関数」と呼びます。

function doSomething(callback) {
    console.log("処理を開始します...");
    // 渡された関数を実行する
    callback();
}

doSomething(() => {
    console.log("終わりました!");
});

「クリックされたら実行」「データ読み込みが終わったら実行」といったイベント処理は、すべてこのコールバック関数で成り立っています。

まとめ

関数を使いこなすことは、プログラムを整理整頓する力そのものです。「長い処理は分割する」「同じ処理はまとめる」。この原則を守るだけで、あなたのコードは驚くほど読みやすく、バグの少ないものになります。