関数
レシピをまとめて名付ける:処理の使い回しで効率アップ
関数とは?「魔法の呪文」を定義する
プログラミングの世界では、同じ処理を何度も書くのは「罪」とされています。変更が必要になった時、全ての箇所を修正しなければならないからです。そこで登場するのが「関数(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("終わりました!");
});
「クリックされたら実行」「データ読み込みが終わったら実行」といったイベント処理は、すべてこのコールバック関数で成り立っています。
まとめ
関数を使いこなすことは、プログラムを整理整頓する力そのものです。「長い処理は分割する」「同じ処理はまとめる」。この原則を守るだけで、あなたのコードは驚くほど読みやすく、バグの少ないものになります。