JavaScript関数15選！初心者でもわかりやすい徹底解説とサンプルコード

JavaScript関数JS
2023.04.09
この記事は約10分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScript関数とは

JavaScript関数とは、一連の処理をまとめて実行できるようにしたものです。

関数を使うことで、コードの再利用や可読性が向上し、効率的なプログラミングが可能になります。

●基本的な関数の作成方法

JavaScriptでは、functionキーワードを使って関数を定義します。

下記は、関数の基本形です。

○サンプルコード1：関数の基本形

function hello() {
  console.log("Hello, World!");
}

●関数の呼び出し方

定義した関数を実行するには、関数名に続けて括弧()を記述します。

下記は関数の呼び出し例です。

○サンプルコード2：関数の呼び出し

function hello() {
  console.log("Hello, World!");
}

hello(); // "Hello, World!" と表示される

●引数と戻り値

関数には引数と戻り値があります。

引数は関数の処理に必要なデータを渡すために使い、戻り値は関数の処理結果を返すために使います。

下記は引数を使った関数の例です。

○サンプルコード3：引数を使った関数

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // "Hello, John!" と表示される

下記は戻り値を返す関数の例です。

○サンプルコード4：戻り値を返す関数

function add(a, b) {
  return a + b;
}

const result = add(3, 4);
console.log(result); // 7 と表示される

●無名関数とアロー関数

無名関数とは、名前を持たない関数のことです。

無名関数は変数に代入することができます。

下記は無名関数の定義と使用の例です。

○サンプルコード5：無名関数の定義と使用

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("John"); // "Hello, John!" と表示される

アロー関数は、無名関数をよりシンプルに記述できる機能です。

下記はアロー関数の定義と使用の例です。

○サンプルコード6：アロー関数の定義と使用

const greet = (name) => {
  console.log("Hello, " + name + "!");
};

greet("John"); // "Hello, John!" と表示される

●即時実行関数

即時実行関数は、定義と同時に実行される関数です。

通常は一度だけ実行される処理に使用されます。

下記は即時実行関数の使用例です。

○サンプルコード7：即時実行関数の使用例

(function() {
  console.log("This is an immediately invoked function!");
})(); // "This is an immediately invoked function!" と表示される

●コールバック関数

コールバック関数は、ある関数の処理が完了した後に実行される関数です。

非同期処理でよく使用されます。

下記はコールバック関数の使用例です。

○サンプルコード8：コールバック関数の使用例

function processData(callback) {
  // データ処理
  const data = "processed data";

  // コールバック関数の実行
  callback(data);
}

processData(function(data) {
  console.log("Data: " + data);
}); // "Data: processed data" と表示される

●高階関数

高階関数とは、関数を引数として受け取る関数や、関数を戻り値として返す関数のことです。

JavaScriptのArrayメソッドの一部（map, filter, reduceなど）が高階関数です。

下記は高階関数の使用例です。

const numbers = [1, 2, 3, 4, 5];

// 配列の各要素を2倍にする
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10] と表示される

●クロージャー

クロージャーとは、関数内で定義された変数を関数外からアクセスできるようにする機能です。

プライベート変数を実現するために使用されます。

下記はクロージャーの使用例です。

○サンプルコード10：クロージャーの使用例

function counter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const countUp = counter();

countUp(); // 1 と表示される
countUp(); // 2 と表示される

●デバッグ方法

JavaScriptのデバッグには、console.logやデバッガーを使用します。

下記はconsole.logを使ったデバッグの例です。

○サンプルコード11：console.logを使ったデバッグ

function add(a, b) {
  console.log("a:", a);
  console.log("b:", b);

  return a + b;
}

const result = add(3, 4);
console.log(result); // 7 と表示される

下記はデバッガーを使ったデバッグの例です。

○サンプルコード12：デバッガーを使ったデバッグ

function add(a, b) {
  debugger; // ブレークポイントを設定

  return a + b;
}

const result = add(3, 4);
console.log(result); // 7 と表示される

●エラー処理

JavaScriptでは、try-catch文を使ってエラーを捕捉し処理することができます。

下記はtry-catch文を使ったエラー処理の例です。

○サンプルコード13：エラー処理の例

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed.");
  }

  return a / b;
}

try {
  const result = divide(4, 0);
} catch (error) {
  console.error(error.message); // "Division by zero is not allowed." と表示される
}

○サンプルコード14：関数の拡張

JavaScriptでは、関数のプロトタイプにメソッドを追加することで、関数を拡張できます。

下記は関数の拡張の例です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// プロトタイプにメソッドを追加
Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

const person = new Person("John", 30);
person.greet(); // "Hello, my name is John and I am 30 years old." と表示される

●応用例とサンプルコード

JavaScriptの関数を応用して、実際に動作する簡単なクイズアプリを作成してみましょう。

○サンプルコード15：クイズアプリの作成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Quiz App</title>
</head>
<body>
  <div id="quiz">
    <h1 id="question"></h1>
    <button id="option1" onclick="checkAnswer(1)"></button>
    <button id="option2" onclick="checkAnswer(2)"></button>
    <button id="option3" onclick="checkAnswer(3)"></button>
    <button id="option4" onclick="checkAnswer(4)"></button>
  </div>
  <script>
    const questions = [
      {
        question: "What is the capital of Japan?",
        options: ["Tokyo", "Osaka", "Kyoto", "Nagoya"],
        correctAnswer: 1,
      },
      // 他のクイズ問題を追加...
    ];

    let currentQuestionIndex = 0;

    function displayQuestion() {
      const question = questions[currentQuestionIndex];
      document.getElementById("question").innerText = question.question;
      document.getElementById("option1").innerText = question.options[0];
      document.getElementById("option2").innerText = question.options[1];
      document.getElementById("option3").innerText = question.options[2];
      document.getElementById("option4").innerText = question.options[3];
    }

    function checkAnswer(answer) {
      const question = questions[currentQuestionIndex];
      if (answer === question.correctAnswer) {
        alert("Correct!");
      } else {
        alert("Incorrect!");
      }

      currentQuestionIndex++;
      if (currentQuestionIndex < questions.length) {
        displayQuestion();
      } else {
        alert("Quiz completed!");
      }
    }

    displayQuestion();
  </script>
</body>
</html>

まとめ

この記事を読めば、JavaScriptの関数について理解し、実践的な使い方ができるようになります。

関数の基本から応用まで幅広く学べるため、初心者から上級者まで役立つ情報が満載です。

ぜひ参考にして、JavaScriptプログラミングのスキルを向上させましょう。