JavaScriptの関数：処理をまとめて再利用する

配列とオブジェクトに続いて、「関数」を学びました。関数は、Pythonでも学んだ概念ですが、JavaScriptでは書き方が少し異なります。さらに、ES6から導入された「アロー関数」という新しい書き方も学びました。

関数とは

関数は、いくつかの処理をまとめたものです。一度定義しておけば、何度でも呼び出して使えます。

関数なしの場合

console.log("こんにちは");
console.log("よろしくお願いします");

console.log("こんにちは");
console.log("よろしくお願いします");

console.log("こんにちは");
console.log("よろしくお願いします");

同じ処理を3回書くのは非効率です。

関数を使う場合

const greet = function() {
  console.log("こんにちは");
  console.log("よろしくお願いします");
};

greet();  // 1回目
greet();  // 2回目
greet();  // 3回目

関数を使えば、同じ処理を何度でも簡単に実行できます。

関数の定義

構文:

const 定数名 = function() {
  まとめたい処理
};

const sayHello = function() {
  console.log("Hello!");
  console.log("Welcome to JavaScript");
};

ポイント

  • const で定数として定義
  • function() の後に {} で処理を囲む
  • 全体の最後にセミコロン ; が必要

関数の呼び出し

構文: 定数名();

const sayHello = function() {
  console.log("Hello!");
};

// 関数の呼び出し
sayHello();  // Hello!
sayHello();  // Hello!（何度でも呼び出せる）

() を付けることで、関数が実行されます。

アロー関数：ES6の新しい書き方

アロー関数は、ES6（ECMAScript 2015）から導入された関数の新しい書き方です。

従来の書き方

const greet = function() {
  console.log("こんにちは");
};

アロー関数の書き方

const greet = () => {
  console.log("こんにちは");
};

function() の部分を () => に置き換えるだけです。

アロー関数の特徴

短く書ける

// 従来の書き方
const double = function(num) {
  return num * 2;
};

// アロー関数
const double = (num) => {
  return num * 2;
};

// さらに短く（処理が1行の場合）
const double = num => num * 2;

実務では、アロー関数の方がよく使われます。

従来の関数とアロー関数の比較

項目従来の関数アロー関数
書き方function() {}() => {}
長さやや長い短い
導入時期古くからES6以降（2015年〜）
// 従来の関数
const add = function(a, b) {
  return a + b;
};

// アロー関数
const add = (a, b) => {
  return a + b;
};

// どちらも動作は同じ
console.log(add(3, 5));  // 8

関数を使うメリット

1. コードの再利用

const showMessage = () => {
  console.log("=" * 20);
  console.log("重要なお知らせ");
  console.log("=" * 20);
};

showMessage();  // 何度でも使える
showMessage();

2. 可読性の向上

// ❌ 分かりにくい
console.log("=" * 20);
console.log("重要なお知らせ");
console.log("=" * 20);

// ✅ 分かりやすい
showImportantMessage();

関数名を見るだけで、何をしているか分かります。

3. 保守性の向上

const calculateTax = (price) => {
  return price * 0.1;
};

// 税率が変わったら、関数内だけ修正すればOK

Pythonとの比較

項目PythonJavaScript
定義def 関数名():const 関数名 = () => {}
呼び出し関数名()関数名()
セミコロン不要必要
# Python
def greet():
    print("こんにちは")

greet()

// JavaScript（アロー関数）
const greet = () => {
  console.log("こんにちは");
};

greet();

JavaScriptでは、関数を定数に代入するという書き方が特徴的です。

今日の学びのポイント

  • 関数: いくつかの処理をまとめたもの
  • 従来の書き方: const 定数名 = function() { 処理 };
  • アロー関数: const 定数名 = () => { 処理 };
  • function() を () => に置き換えるだけ
  • アロー関数はES6（2015年）から導入
  • 実務ではアロー関数の方がよく使われる
  • 関数のメリット：再利用・可読性・保守性

関数は、プログラミングの基本中の基本です。次は、関数に値を渡す「引数」や、関数から値を返す「return」を学んでいきます。

コメント