0Pricing
Frontend Academy · レッスン

関数: 宣言、式、アロー関数

3通りの方法で関数を定義し、ホイスティングを理解し、引数と戻り値を使い、簡潔なアロー関数を記述します。

「関数: 宣言、式、アロー関数」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

関数とは何でしょうか？

関数は再利用可能なコードのまとまりです。入力（パラメーター）を受け取り、処理を実行し、必要に応じて出力を返します。JavaScript では関数は第一級の値であり、変数に代入したり、引数として渡したり、別の関数から返したりできます。

関数宣言

関数宣言では、function キーワードを使って名前付き関数を作成します。関数宣言はホイスティングされるため、コード内で宣言より前に呼び出せます。

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

関数式

関数式では、関数を変数に代入します。関数式はホイスティングされません（変数は undefined としてホイスティングされます）。関数式には無名関数と名前付き関数があります。

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

アロー関数

アロー関数は ES6 で導入された簡潔な構文です。独自の this を持たず、外側のスコープから this を継承します。コールバックや短い関数に適しています。

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

パラメーターと引数

パラメーターは、関数定義に記述する名前です。引数は、関数を呼び出すときに渡す値です。余分な引数は無視され、不足している引数は undefined になります。

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

デフォルトパラメーター

ES6 では、パラメーターにデフォルト値を設定できます。引数が undefined の場合（まったく渡されなかった場合も含む）に、デフォルト値が使われます。

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

return文

関数はデフォルトで undefined を返します。値を返すには return を使います。関数は最初に実行した return で終了し、その後のコードは実行されません。

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

レストパラメーター

レストパラメーター ...args は、残りのすべての引数を配列にまとめます。最後のパラメーターでなければなりません。現代的なコードでは、従来の arguments オブジェクトの代わりに使います。

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

値としての関数（第一級関数）

関数は変数に保存したり、引数（コールバック）として別の関数に渡したり、関数から返したりできます。これにより、配列メソッドやイベントリスナーのような強力なパターンを利用できます。

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

純粋関数

純粋関数は、同じ入力に対して常に同じ出力を返し、副作用（DOM の変更、ネットワーク呼び出し、グローバルな値の変更）がありません。純粋関数はテスト、デバッグ、動作の理解が容易です。

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

即時実行関数式（IIFE）

IIFE は定義されるとすぐに実行されます。かつてはプライベートなスコープを作るために使われていました。現在はモジュールやブロックスコープによって必要性が下がっていますが、古いコードベースでは今でも見かけます。

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

クイックチェック

アロー関数について正しい説明はどれですか？

まとめ: JavaScriptの関数

関数宣言はホイスティングされます。関数式とアロー関数はホイスティングされません。アロー関数は簡潔で、独自の this を持ちません。不足している引数にはデフォルトパラメーターを使います。関数は第一級の値なので、自由に受け渡しできます。

よくある質問

「関数: 宣言、式、アロー関数」レッスンは無料ですか？

はい。「関数: 宣言、式、アロー関数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「関数: 宣言、式、アロー関数」で何を学びますか？

3通りの方法で関数を定義し、ホイスティングを理解し、引数と戻り値を使い、簡潔なアロー関数を記述します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「関数: 宣言、式、アロー関数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 変数: let、const、varとスコープ
  2. データ型: string、number、boolean、null、undefined
  3. 関数: 宣言、式、アロー関数
  4. 制御フロー: if、else、switch、for、while
← Frontend Academyに戻る