1.関数とは？
JavaScriptにおける関数（function）とは、「ひとまとまりの処理」をまとめて名前をつけたものです。
たとえば「画面に文字を表示する処理」や「数字を足し算する処理」などを、何度でも使えるように箱に入れておくようなイメージです。
日常生活にたとえると？
関数は「料理のレシピ」に似ています。
たとえば「目玉焼きを作るレシピ」があったとしたら、それを何回でも使って目玉焼きを作ることができますよね。
目玉焼きレシピ（関数）
→ フライパンを熱する
→ 卵を割る
→ 焼く
→ 完成！
JavaScriptでもこれと同じように「処理の手順」を関数としてまとめておけば、必要なときに呼び出して使えます。
なぜ関数を使うの？
関数を使う理由は次のようなメリットがあるからです：
- 同じ処理を何度も使い回せる（再利用性）
- コードが読みやすく、整理しやすい（可読性）
- 名前をつけて分かりやすくできる（意味づけ）
次のセクションでは、実際に関数をどのように書くのか、コードを交えて紹介していきます。
2.関数の作り方（基本の書き方）
JavaScriptで関数を作るときは、functionキーワードを使います。
以下が基本的な形です：
function 関数名() {
// 実行したい処理
}文字を表示する関数
function hello() {
console.log("こんにちは！");
}この関数 hello() は、呼び出すとコンソールに「こんにちは！」と表示します。
hello(); // => こんにちは！引数つき関数の書き方
引数（ひきすう）は、関数に「情報を渡すための箱」です。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("さくら"); // => こんにちは、さくらさん！戻り値（return）を使う関数
関数で計算した結果などを「戻す（返す）」ことができます。
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // => 8
returnを使うことで、関数の外に結果を渡せるようになります。
【補足】関数名のルール
- 英語で意味のある名前にするのがベター（例：
calculateTotalなど） - 1文字目は英字（数字や記号では始められない）
- キャメルケース（例：
sayHello）が一般的
3.関数の呼び出し方
関数を作っただけでは、プログラムは何も実行しません。
関数は「呼び出す（＝実行する）」ことで、初めてその中の処理が動きます。
基本の呼び出し方
function hello() {
console.log("こんにちは！");
}
// 関数の呼び出し
hello(); // => こんにちは！
関数名のあとに () をつけることで、関数を「実行」します。
これを関数の呼び出しといいます。
引数を使った呼び出し
関数に引数がある場合は、() の中に値を入れて渡します。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("たろう"); // => こんにちは、たろうさん！
greet("さくら"); // => こんにちは、さくらさん！name という引数にそれぞれ違う名前が渡され、その名前を使って挨拶が変わります。
戻り値を受け取って使う
return を使って値を返す関数は、呼び出した側で結果を受け取って利用できます。
function add(a, b) {
return a + b;
}
let sum = add(10, 20);
console.log(sum); // => 30このように、関数の結果を変数に代入したり、他の処理に使うことができます。
関数は「作る」と「呼び出す」がセットになってはじめて意味を持ちます。
次は、関数を変数に代入する方法（関数式）について解説します。
4.関数式（関数を変数に代入する書き方）
関数は、function を使って「名前をつけて定義」するだけでなく、変数に代入することもできます。この書き方を「関数式（function expression）」と呼びます。
無名関数（名前なしの関数）を変数に代入する
const hello = function() {
console.log("こんにちは！");
};
hello(); // => こんにちは！このように、function() には名前をつけず、関数そのものを変数 hello に代入しています。const や let を使って関数を作ることで、関数も「値」として扱えるようになります。
引数・戻り値も普通の関数と同じように使える
const add = function(a, b) {
return a + b;
};
console.log(add(3, 7)); // => 10動作は「普通の関数定義」と同じですが、関数を値として変数に持たせているのが特徴です。
アロー関数（arrow function）という短い書き方
関数式はさらに短く書くこともできます。それがアロー関数です（=> を使う書き方）。
const hello = () => {
console.log("こんにちは！");
};
hello(); // => こんにちは！次は、初心者がハマりやすいポイント（関数の呼び出しミスやスコープの話）に軽く触れてみましょう。
5.初心者がハマりやすいポイント
関数はとても便利ですが、最初のうちは「どうしてうまく動かないの？」ということも起こりがちです。ここでは初心者がよくつまづくポイントを2つ紹介します。
5.1 関数を「呼び出す」と「参照する」の違い
function hello() {
console.log("こんにちは！");
}
hello; // 実行されない
hello(); // 実行される（=> こんにちは！）hello← これは「関数の中身を参照している」だけ。実行はされません。hello()←()があることで、関数が実行されます。
🔸 関数を使いたいときは、必ず () をつけて呼び出す ようにしましょう。
5.2 変数のスコープ（どこまで見えるか）
関数の中で定義した変数は、その関数の中でしか使えません。これを「スコープ（scope）」といいます。
function showMessage() {
let message = "やっほー";
console.log(message);
}
showMessage(); // => やっほー
console.log(message); // ❌ エラー！ message は外から見えない🔸 let や const で作った変数は、ブロック（関数や{}の中）ごとに限定されるので注意！
5.3 補足：関数の中から外の変数は見える？
逆に、関数の中から外の変数は使うことができます。
let greeting = "こんにちは";
function greetUser(name) {
console.log(greeting + "、" + name + "さん！");
}
greetUser("サクラ"); // => こんにちは、サクラさん！このあたりを理解しておくと、エラーやバグを防げるようになります！
6.まとめ
今回はJavaScriptの「関数」について、初心者向けに基本から丁寧に紹介しました。
おさらいポイント
- 関数は「ひとまとまりの処理」に名前をつけたもの
function 関数名()の形で定義できる- 引数や戻り値を使うと、より柔軟に使える
- 関数は「呼び出す（実行）」ことで動く
- 関数は変数に代入して使うこともできる（関数式・アロー関数）
()のつけ忘れやスコープのルールには注意！
関数の使い方を覚えたら、次は「イベント」と組み合わせることで、もっと実践的な動きを作れるようになります！
たとえば：
- ボタンをクリックしたときに関数を実行する
- 入力フォームに文字が入ったら関数でチェックする
- ページが読み込まれたときに関数を動かす など
「関数」はJavaScriptの基本中の基本ですが、しっかり身につけると一気にレベルアップできます。
まずは簡単な関数をたくさん書いてみて、感覚をつかんでいきましょう！
コメント