初心者必見！JavaScript関数の使い方を徹底解説！10選サンプルコード付き

はじめに
●JavaScript関数の基本
- ○関数とは
- ○関数の宣言方法
●JavaScript関数の使い方
●JavaScript関数の応用例
●JavaScript関数の注意点と対処法
●関数のカスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptの関数を使いこなすことができるようになります。

初心者の方でも安心して学べるように、関数の基本から応用例までを徹底解説。

さらに、実践的な10選サンプルコード付きで、より具体的に理解を深められます。

それでは、早速JavaScript関数の魅力を一緒に学んでいきましょう！

●JavaScript関数の基本

○関数とは

関数とは、プログラム内で何度も繰り返し行われる処理や、複雑な処理をひとまとめにしたものです。

関数を使うことで、コードの再利用性が高まり、メンテナンスがしやすくなります。

○関数の宣言方法

JavaScriptでは、関数を宣言する方法として、「関数宣言」と「関数式」の2種類があります。

関数宣言の例

function 関数名(引数1, 引数2, ...) {
  処理;
}

関数式の例

const 関数名 = function(引数1, 引数2, ...) {
  処理;
};

●JavaScript関数の使い方

○サンプルコード1：単純な足し算関数

このコードでは、二つの数値を受け取り、その合計を返す関数を作成しています。

この例では、5と7を足して12を返しています。

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

const result = add(5, 7);
console.log(result); // 12

○サンプルコード2：文字列の結合関数

このコードでは、二つの文字列を受け取り、それらを結合して返す関数を紹介しています。

この例では、「Hello」と「World」を結合して、「HelloWorld」という文字列を返しています。

function concat(str1, str2) {
  return str1 + str2;
}

const result = concat("Hello", "World");
console.log(result); // "HelloWorld"

○サンプルコード3：配列要素の合計を求める関数

このコードでは、与えられた配列の全ての要素を足し合わせる関数を紹介しています。

この例では、配列[1, 2, 3, 4, 5]の全ての要素を足し算して、合計の15を返しています。

function sumArray(arr) {
  let sum = 0;
  for (const num of arr) {
    sum += num;
  }
  return sum;
}

const result = sumArray([1, 2, 3, 4, 5]);
console.log(result); // 15

○サンプルコード4：DOM要素を操作する関数

このコードでは、指定されたDOM要素のテキストを書き換える関数を紹介しています。

この例では、id属性が”target”の要素のテキストを”Hello, JavaScript!”に変更しています。

function changeText(elementId, newText) {
  const element = document.getElementById(elementId);
  element.textContent = newText;
}

changeText("target", "Hello, JavaScript!");

●JavaScript関数の応用例

○サンプルコード5：クリックイベントに関数を適用

このコードでは、ボタンをクリックすると指定された関数が実行されるように設定しています。

この例では、ボタンをクリックするとアラートが表示される関数を実行しています。

function showAlert() {
  alert("ボタンがクリックされました！");
}

const button = document.getElementById("button");
button.addEventListener("click", showAlert);

○サンプルコード6：関数を使った簡単なアニメーション

このコードでは、要素をアニメーションさせるための関数を紹介しています。

この例では、id属性が”box”の要素を右に移動させるアニメーションを実行しています。

let position = 0;

function moveElement(elementId, distance) {
  const element = document.getElementById(elementId);
  position += distance;
  element.style.left = position + "px";
}

setInterval(() => {
  moveElement("box", 5);
}, 100);

○サンプルコード7：関数を使った入力値のバリデーション

このコードでは、入力フォームに入力されたメールアドレスが正しい形式かどうかをチェックする関数を紹介しています。

この例では、メールアドレスの形式が正しい場合は「正しいメールアドレスです」と表示し、そうでない場合は「不正なメールアドレスです」と表示しています。

function isValidEmail(email) {
  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

const emailInput = document.getElementById("email");
const resultDiv = document.getElementById("result");

emailInput.addEventListener("input", () => {
  if (isValidEmail(emailInput.value)) {
    resultDiv.textContent = "正しいメールアドレスです";
  } else {
    resultDiv.textContent = "不正なメールアドレスです";
  }
});

○サンプルコード8：関数を使ったタイマー機能

このコードでは、指定した時間が経過した後に関数を実行するタイマー機能を紹介しています。

この例では、3秒後にアラートを表示するタイマー機能を実装しています。

function timer(callback, delay) {
  setTimeout(callback, delay);
}

timer(() => {
  alert("3秒経過しました");
}, 3000);

○サンプルコード9：関数を使ったAPIデータ取得

このコードでは、外部APIからデータを取得し、そのデータを処理する関数を紹介しています。

この例では、JSONPlaceholderというAPIを利用して、ユーザーデータを取得し、コンソールに表示しています。

async function fetchData(apiUrl) {
  const response = await fetch(apiUrl);
  const data = await response.json();
  return data;
}

fetchData("https://jsonplaceholder.typicode.com/users")
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error("データ取得に失敗しました:", error);
  });

○サンプルコード10：関数を使った独自のソートアルゴリズム

このコードでは、関数を使って独自のソートアルゴリズムを実装する方法を紹介しています。

この例では、数値の配列を偶数と奇数に分けて昇順にソートするアルゴリズムを実装しています。

function customSort(arr) {
  const even = [];
  const odd = [];

  arr.forEach((num) => {
    if (num % 2 === 0) {
      even.push(num);
    } else {
      odd.push(num);
    }
  });

  even.sort((a, b) => a - b);
  odd.sort((a, b) => a - b);

  return even.concat(odd);
}

const numbers = [5, 2, 8, 1, 7, 4, 3, 6];
const sortedNumbers = customSort(numbers);
console.log(sortedNumbers);

このコードでは、まず数値の配列を偶数と奇数に分けて、それぞれ昇順にソートしています。

最後に、偶数と奇数の配列を結合して結果を返しています。