JavaScript関数の基礎から実践まで - 実務でも使う知識を身につけよう

こんにちは、とまだです。

JavaScriptを学習していて、「関数って何のためにあるの？」「function って書き方がよくわからない...」と悩んでいませんか？

私も最初は関数の概念が理解できず、何度もコードを書き直していました。プログラミングスクールで指導していた時も、受講生の約7割が関数でつまずいていたんです。

今回は、そんな関数の壁を確実に乗り越えられる方法を、豊富な練習問題とともにお伝えします。

JavaScript関数は「魔法の箱」だと思えばいい

関数を理解するのに、難しい説明は必要ありません。

自動販売機を想像してみてください。

お金を入れて、ボタンを押すと、飲み物が出てきますよね。この自動販売機こそが、まさに関数なんです。

• お金を入れる = 引数（ひきすう）を渡す
• ボタンを押す = 関数を実行する
• 飲み物が出てくる = 戻り値を受け取る

// 自動販売機（関数）の例
function vendingMachine(money) {
  if (money >= 120) {
    return "コーラ";
  } else {
    return "お金が足りません";
  }
}

// 使ってみる
console.log(vendingMachine(150)); // "コーラ"
console.log(vendingMachine(100)); // "お金が足りません"

このコードを見て、「なるほど！」と思えたら、もう関数の基本は理解できています。

なぜJavaScript関数を使うのか？3つの理由

「変数だけでもプログラムは書けるのに、なぜ関数が必要なの？」

実は、関数を使わないプログラミングは、料理で言えば毎回レシピを最初から読み直すようなものです。

理由1：同じ処理を何度も書かなくて済む

関数を使わない場合、同じ計算を何度も書く必要があります。

// 関数を使わない場合（ダメな例）
let price1 = 1000;
let tax1 = price1 * 0.1;
let total1 = price1 + tax1;

let price2 = 2000;
let tax2 = price2 * 0.1;
let total2 = price2 + tax2;

// もっと商品があったら...？

関数を使えば、こんなにスッキリします。

// 関数を使う場合（良い例）
function calculateTotal(price) {
  const tax = price * 0.1;
  return price + tax;
}

console.log(calculateTotal(1000)); // 1100
console.log(calculateTotal(2000)); // 2200

理由2：コードの意味がわかりやすくなる

関数には名前をつけられるので、何をする処理なのかが一目瞭然です。

// 関数名で処理の内容がわかる
function isAdult(age) {
  return age >= 18;
}

function formatPrice(price) {
  return `¥${price.toLocaleString()}`;
}

// 使うときも意味が明確
if (isAdult(20)) {
  console.log("成人です");
}
console.log(formatPrice(1000)); // ¥1,000

理由3：バグの修正が1箇所で済む

もし消費税が10%から8%に変わったら？関数なら1箇所直すだけです。

function calculateTotal(price) {
  const tax = price * 0.08; // ここだけ変更すればOK！
  return price + tax;
}

JavaScript関数の基本文法をマスターしよう

1. 関数の宣言（function文）

最も基本的な関数の書き方です。

function 関数名(引数) {
  // 処理を書く
  return 戻り値;
}

実際の例で見てみましょう。

function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet("田中")); // こんにちは、田中さん！

2. 引数と戻り値の理解

引数は材料、戻り値は完成品だと考えてください。

// 引数なし、戻り値なし
function sayHello() {
  console.log("Hello!");
}

// 引数あり、戻り値なし
function showMessage(message) {
  console.log(message);
}

// 引数なし、戻り値あり
function getCurrentTime() {
  return new Date().toLocaleTimeString();
}

// 引数あり、戻り値あり（最も一般的）
function add(a, b) {
  return a + b;
}

3. 複数の引数を使う

料理のレシピのように、複数の材料（引数）を使うこともできます。

function makeCoffee(beans, water, sugar) {
  if (beans < 10) {
    return "豆が足りません";
  }
  if (water < 150) {
    return "水が足りません";
  }

  let coffee = "コーヒー";
  if (sugar > 0) {
    coffee += `（砂糖${sugar}g入り）`;
  }

  return coffee;
}

console.log(makeCoffee(15, 200, 5)); // コーヒー（砂糖5g入り）

JavaScript関数の種類と使い分け

実は、JavaScriptには関数を書く方法が複数あります。それぞれの特徴を理解しておきましょう。

1. function文（関数宣言）

先ほどから使っている、最も基本的な書き方です。

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

特徴：どこに書いても、プログラムの最初に読み込まれます（巻き上げ）。

2. 関数式

変数に関数を代入する書き方です。

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

特徴：定義した後でしか使えません。

3. アロー関数（ES6以降）

最新の書き方で、シンプルに書けます。

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

// さらに短く書ける
const multiply = (a, b) => a * b;

特徴：短く書けて便利ですが、thisの扱いが特殊です。

どれを使えばいいか迷ったら、まずはfunction文から始めましょう。慣れてきたらアロー関数も使ってみてください。

初心者がつまずきやすい5つのポイントと解決法

1. return を忘れる

// ダメな例
function add(a, b) {
  a + b; // returnがない！
}

console.log(add(3, 5)); // undefined

// 良い例
function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8

解決法：関数から値を返したいときは、必ずreturnを書きましょう。

2. 引数の数が合わない

function greet(firstName, lastName) {
  return `${firstName} ${lastName}さん、こんにちは！`;
}

// 引数が足りない場合
console.log(greet("太郎")); // 太郎 undefinedさん、こんにちは！

// 引数が多い場合（余分な引数は無視される）
console.log(greet("太郎", "山田", "余分")); // 太郎 山田さん、こんにちは！

解決法：デフォルト値を設定しておくと安心です。

function greet(firstName, lastName = "名無し") {
  return `${firstName} ${lastName}さん、こんにちは！`;
}

console.log(greet("太郎")); // 太郎 名無しさん、こんにちは！

3. スコープ（変数の有効範囲）を理解していない

let message = "外側のメッセージ";

function showMessage() {
  let message = "内側のメッセージ"; // 関数内だけで有効
  console.log(message);
}

showMessage(); // 内側のメッセージ
console.log(message); // 外側のメッセージ

解決法：関数内で宣言した変数は、その関数内でしか使えないことを覚えておきましょう。

4. 関数の実行を忘れる

function sayHello() {
  return "Hello!";
}

// ダメな例（括弧を忘れている）
console.log(sayHello); // [Function: sayHello]

// 良い例
console.log(sayHello()); // Hello!

解決法：関数を実行するには、必ず()をつけます。

5. アロー関数でのthisの扱い

これは少し高度な話ですが、知っておくと後で困りません。

const obj = {
  name: "太郎",
  // function文なら正常に動く
  greet1: function() {
    console.log(`こんにちは、${this.name}です`);
  },
  // アロー関数だとthisが違う
  greet2: () => {
    console.log(`こんにちは、${this.name}です`);
  }
};

obj.greet1(); // こんにちは、太郎です
obj.greet2(); // こんにちは、undefinedです

解決法：オブジェクトのメソッドでは、通常のfunction文を使いましょう。

実践！よく使うJavaScript関数パターン10選

ここからは、実際の開発でよく使う関数のパターンを紹介します。

1. 文字列を操作する関数

// 文字列を大文字に変換
function toUpperCase(str) {
  return str.toUpperCase();
}

// 文字列の長さをチェック
function isValidLength(str, minLength, maxLength) {
  const length = str.length;
  return length >= minLength && length <= maxLength;
}

// 使用例
console.log(toUpperCase("hello")); // HELLO
console.log(isValidLength("パスワード", 8, 20)); // false

2. 数値計算の関数

// 平均値を計算
function calculateAverage(numbers) {
  if (numbers.length === 0) return 0;

  const sum = numbers.reduce((acc, num) => acc + num, 0);
  return sum / numbers.length;
}

// 税込み価格を計算
function calculateWithTax(price, taxRate = 0.1) {
  return Math.floor(price * (1 + taxRate));
}

// 使用例
console.log(calculateAverage([80, 90, 75, 85])); // 82.5
console.log(calculateWithTax(1980)); // 2178

3. 配列を操作する関数

// 配列から特定の要素を探す
function findByName(users, name) {
  return users.find(user => user.name === name);
}

// 配列をフィルタリング
function getAdults(users) {
  return users.filter(user => user.age >= 18);
}

// 使用例
const users = [
  { name: "太郎", age: 20 },
  { name: "花子", age: 17 },
  { name: "次郎", age: 25 }
];

console.log(findByName(users, "太郎")); // { name: "太郎", age: 20 }
console.log(getAdults(users)); // [{ name: "太郎", age: 20 }, { name: "次郎", age: 25 }]

4. 条件判定の関数

// メールアドレスの形式をチェック
function isValidEmail(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

// 営業時間内かチェック
function isBusinessHours() {
  const now = new Date();
  const hour = now.getHours();
  return hour >= 9 && hour < 18;
}

// 使用例
console.log(isValidEmail("test@example.com")); // true
console.log(isBusinessHours()); // 現在時刻による

5. DOM操作の関数（Webページ操作）

// 要素を表示/非表示
function toggleElement(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    element.style.display = element.style.display === "none" ? "block" : "none";
  }
}

// テキストを更新
function updateText(elementId, text) {
  const element = document.getElementById(elementId);
  if (element) {
    element.textContent = text;
  }
}

これらのパターンを覚えておけば、実際の開発で大いに役立ちます。

練習問題で実力をつけよう！

ここまで学んだことを、実際に手を動かして確認してみましょう。

基礎編（5問）

問題1: 2つの数値を受け取り、大きい方を返す関数を作ってください。

function getMax(a, b) {
  // ここにコードを書く
}

// テスト
console.log(getMax(5, 3)); // 5
console.log(getMax(2, 8)); // 8

問題2: 文字列を受け取り、その文字数を返す関数を作ってください。

function getLength(str) {
  // ここにコードを書く
}

// テスト
console.log(getLength("Hello")); // 5
console.log(getLength("JavaScript")); // 10

問題3: 年齢を受け取り、成人（18歳以上）ならtrue、未成年ならfalseを返す関数を作ってください。

function isAdult(age) {
  // ここにコードを書く
}

// テスト
console.log(isAdult(20)); // true
console.log(isAdult(15)); // false

問題4: 配列を受け取り、その要素の合計を返す関数を作ってください。

function sumArray(numbers) {
  // ここにコードを書く
}

// テスト
console.log(sumArray([1, 2, 3, 4, 5])); // 15
console.log(sumArray([10, 20, 30])); // 60

問題5: 名前を受け取り、挨拶文を返す関数を作ってください。

function createGreeting(name) {
  // ここにコードを書く
}

// テスト
console.log(createGreeting("太郎")); // "こんにちは、太郎さん！"

応用編

さらに実践的な問題にも挑戦してみましょう。

実は、私が運営しているLearning Nextでは、JavaScriptの関数についてさらに50問以上の練習問題を用意しています。

基礎から応用まで段階的に学べるので、「もっと練習したい！」という方はぜひチェックしてみてください。月額約2,000円で、JavaScriptだけでなくReactやRubyなども学び放題です。

よくある質問と回答

Q1: 関数名はどうやって決めればいい？

A: 動詞から始めて、何をする関数かわかる名前にしましょう。

• 良い例：calculateTotal、getUserName、isValid
• 悪い例：func1、process、data

Q2: 引数はいくつまで設定できる？

A: 技術的には制限はありませんが、3〜4個までが理想的です。それ以上必要な場合は、オブジェクトでまとめることを検討しましょう。

// 引数が多すぎる例（避けたい）
function createUser(firstName, lastName, age, email, phone, address) {
  // ...
}

// オブジェクトでまとめる（推奨）
function createUser(userData) {
  const { firstName, lastName, age, email, phone, address } = userData;
  // ...
}

Q3: returnは1つの関数に何個も書いていい？

A: はい、条件に応じて複数書くことができます。ただし、実行されるのは最初に到達したreturnだけです。

function checkScore(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "F";
}

まとめ：JavaScript関数をマスターする3つのステップ

ここまでJavaScript関数について詳しく解説してきました。

最後に、関数をマスターするための3つのステップをまとめます。

ステップ1：基本文法を理解する

• function文の書き方を覚える
• 引数と戻り値の概念を理解する
• 実際にコードを書いて動かしてみる

ステップ2：よくあるパターンを練習する

• 文字列操作、数値計算、配列操作など
• 実際のプロジェクトで使う関数を作ってみる
• エラーが出ても諦めずに修正する

ステップ3：実践的なプロジェクトで使う

• ToDoアプリなど、小さなアプリを作る
• 関数を使ってコードを整理する
• 他の人のコードを読んで学ぶ

関数は、JavaScriptプログラミングの心臓部です。

最初は難しく感じるかもしれませんが、一度理解すれば、プログラミングがグッと楽しくなります。

「自動販売機」の例を思い出しながら、一つずつ練習していけば必ず身につきます。

もし「もっと体系的に学びたい」「練習問題をたくさん解きたい」という方は、JavaScript基礎を1ヶ月で学習！初心者が確実に身につく学習法もチェックしてみてください。

関数をマスターして、JavaScriptプログラミングの世界を楽しみましょう！

一緒に頑張っていきましょう。応援しています！