【超初心者向け】JavaScriptの関数(function)とは？使い方・書き方を徹底解説！
この記事では、JavaScriptにおける関数の役割や、使い方について詳しく解説し、実際のコード例を交えながら理解を深めていきます。最初に、関数の基本的な概念から始め、その後に応用的な使い方や、関数がどのようにプログラム全体に影響を与えるかについても考察します。
JavaScriptを学び始めると最初につまずきやすいのが 関数(function) の概念です。この記事では、JavaScriptの関数について「超基礎」から「応用」まで、初心者にもわかりやすく丁寧に解説していきます。
🔶 関数とは何か？
関数とは、ある処理をまとめて再利用できるようにしたものです。たとえば「挨拶する処理」を関数にまとめると以下のようになります。
function sayHello() {
console.log("こんにちは！");
}
このように関数は、名前をつけて何度でも呼び出せる便利な機能です。
また、アロー関数の利点についても触れ、従来の関数との違いを明確にし、その使い方を実際のプロジェクトでどのように活用できるかを示します。
関数の基本構文を理解したら、応用的な使用方法として、コールバック関数や高階関数についても詳しく見ていきましょう。これらはJavaScriptの強力な機能であり、非同期処理やイベント処理を扱う際に非常に役立ちます。
🔶 関数の基本構文と使い方
function 関数名(引数1, 引数2) {
// 処理
return 戻り値;
}
✅ 例：
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // → 8
🔶 JavaScriptでの関数の活用方法
function 関数名(引数1, 引数2) {
// 処理
return 戻り値;
}
さらに、無名関数や即時関数についても詳しく解説し、それらがどのようにスコープやthisの扱いに影響を与えるかについて考察します。
✅ 例：
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // → 8
🔶 returnの役割とは？
returnは関数の「結果」を返すためのものです。
また、returnの時点で関数は終了します。
function sayHi() {
return "やあ！";
console.log("これは表示されない"); // 実行されない
}
🔶 引数と戻り値とは？
- 引数（パラメータ）：関数に渡すデータ
- 戻り値（リターン値）：関数が返す結果
function multiply(x, y) {
return x * y;
}
let result = multiply(3, 4); // 12
🔶 無名関数とは？
関数に名前をつけず、変数に代入して使う方法です。
const greeting = function(name) {
return "Hello, " + name;
};
console.log(greeting("Taro")); // Hello, Taro
🔶 アロー関数（=>）の使い方
ES6から導入された新しい関数の書き方で、短く記述できます。
基本の形：
const 関数名 = (引数) => {
return 処理;
};
短縮形：
const add = (a, b) => a + b;
引数が1つだけならカッコ省略OK：
const square = x => x * x;
🔶 関数の種類まとめ
| 種類 | 書き方例 | 特徴 |
|---|---|---|
| 通常の関数 | function fn() {} | 最も基本的な関数の書き方 |
| 無名関数 | const fn = function() {} | 一時的に使いたい関数 |
| アロー関数 | const fn = () => {} | 短くてthisの挙動が違う |
🔶 thisの違い：functionとアロー関数
ここで触れた各概念の実装例や、その結果については、コードスニペットを通じて具体的に示し、実際に動かしてみることができるようにします。
const obj = {
name: "Hanako",
normalFunc: function() {
console.log(this.name); // Hanako
},
arrowFunc: () => {
console.log(this.name); // undefined
}
};
obj.normalFunc();
obj.arrowFunc();
🔶 コールバック関数とは？
関数を「引数として渡す」ことで、あとで実行する方法です。
function doSomething(callback) {
console.log("最初の処理");
callback();
}
doSomething(function() {
console.log("あとで実行される処理");
});
🔶 ネストされた関数（関数の中の関数）
function outer() {
function inner() {
console.log("内側の処理");
}
inner();
}
🔶 関数は「第一級オブジェクト」
関数は「値」として扱えるので、以下のようなことが可能です：
- 変数に代入
- 引数に渡す
- 戻り値として返す
function greet(name) {
return function() {
console.log("Hello, " + name);
};
}
const sayHi = greet("Satoshi");
sayHi(); // Hello, Satoshi
✅ まとめ：関数を使うメリット
関数を使用することで得られるメリットは多岐にわたります。以下にその主な利点をまとめてみます。
- 処理の再利用ができる
- コードが整理される
- 意味のまとまりが明確になる
- 柔軟な設計が可能（関数を値として扱える）
- デバッグが容易になる
- モジュール化が進む
- 処理の再利用ができる
- コードが整理される
- 意味のまとまりが明確になる
- 柔軟な設計が可能（関数を値として扱える）
🔽 関数を理解する3つの視点
| 視点 | 内容 |
|---|---|
| ① 定義 | 関数を宣言して作る |
| ② 呼び出し | 関数名() で呼び出す |
| ③ 結果 | returnで値を返す |
🔎 関連キーワード（SEO対策）
- JavaScript 関数 わかりやすい
- functionの使い方 JavaScript
- アロー関数 違い
- 無名関数とは
- JavaScript 初心者 脱出
これらのポイントを踏まえることで、JavaScriptを用いたプログラミングにおける関数の重要性と、その活用方法について深く理解できるはずです。実際に手を動かして、さまざまな関数を試しながら学んでいきましょう。
このように、JavaScriptでの関数の役割を学び、実践することで、より良いプログラムを作成するためのスキルを身につけることができます。ぜひ、これを機にJavaScriptの関数を徹底的にマスターしましょう！
その他、初心者向けに分かりやすく解説していますのでプログラミング備忘録をご覧ください。
コメント