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

JavaScript関数の使い方を徹底解説JS
この記事は約8分で読めます。

 

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

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

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

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

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

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

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

はじめに

この記事を読めば、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);

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

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

●JavaScript関数の注意点と対処法

  1. 関数の名前は意味のあるものにすること。
  2. 関数内での変数名も意味のあるものにすること。
  3. グローバル変数の使用を避け、関数に引数を渡して使用すること。
  4. 関数は1つの機能に専念し、シンプルに保つこと。

●関数のカスタマイズ方法

関数をカスタマイズする際には、次の手法を利用できます。

  1. 引数を追加することで、関数の挙動を制御できます。
  2. コールバック関数を引数として受け取ることで、関数の挙動を外部から制御できます。
  3. 関数をオブジェクトやクラスのメソッドとして定義することで、より柔軟なカスタマイズが可能になります。

まとめ

この記事では、JavaScriptの関数について基本的な使い方から応用例、注意点と対処法、カスタマイズ方法までを紹介しました。

関数はJavaScriptにおける重要な概念であり、効果的に使いこなすことで、コードの可読性や再利用性を向上させることができます。

上記の例やポイントを参考に、自分自身のプロジェクトに役立ててください。