JavaScriptの関数について【入門編③】

はじめに

今回は、JavaScriptの関数についてまとめていきます。関数は再利用可能なコードのブロックを定義するために使用されます。関数を使うことで、コードを整理し、再利用性やメンテナンス性を向上させることができます。

関数の定義について

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

function 関数名(引数1, 引数2, ...) {
  // 実行するコード
  return 戻り値;
}

/* 例題 */
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Taro")); // "Hello, Taro!"

関数の呼び出し

関数を定義した後は、その関数を名前を使って呼び出します。

関数名(引数1, 引数2, ...);

let result = greet("Bob");
console.log(result); // "Hello, Bob!"

引数と戻り値

• 引数（Parameters）: 関数に渡す値で、関数の処理に使用されます。
• 戻り値（Return Value）: 関数が処理を終えた後に返す値です。returnステートメントを使って指定します。

アロー関数

ES6で導入された短縮構文の関数です。functionキーワードを使わずに定義します。

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

• アロー関数は、簡潔な構文: 引数が1つの場合は括弧を省略できます。
• thisのバインディング: thisは定義時のコンテキストに束縛されます。

コールバック関数

非同期処理: 非同期操作（例: AJAXリクエスト）で使うコールバック関数の基本的な使い方。

function fetchData(callback) {
  setTimeout(() => {
    let data = "データを取得しました";
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data);
});

データ処理

配列やオブジェクトの操作を含む関数を作成する。たとえば、リストアイテムの追加や削除、表示など。

function addItem(item) {
  let list = document.getElementById("myList");
  let li = document.createElement("li");
  li.textContent = item;
  list.appendChild(li);
}

関数のスコープとクロージャ

function outer() {
  let outerVar = "外側の変数";
  function inner() {
    console.log(outerVar);
  }
  return inner;
}

let innerFunc = outer();
innerFunc(); // "外側の変数"

• スコープとは、関数内の変数がどのようにスコープに影響するかを理解する。
• クロージャは、関数が他の関数内で定義された変数にアクセスする仕組みを学ぶ。

関数のモジュール化

複数の関数を使ってコードを整理し、再利用可能なコンポーネントを作成する方法

// utils.js
export function formatDate(date) {
  return date.toISOString().split('T')[0];
}

// main.js
import { formatDate } from './utils.js';
console.log(formatDate(new Date()));

エラーハンドリング

try...catchを使ってエラー処理を行う方法。

function safeDivide(a, b) {
  try {
    if (b === 0) throw new Error("ゼロで割ることはできません");
    return a / b;
  } catch (e) {
    console.error(e.message);
  }
}

console.log(safeDivide(10, 0)); // エラーメッセージ

まとめ

今回は、Webデザイナーが学ぶべきJavaScriptの関数についてまとめました。上記を覚えると、Webデザインの実務でポイントを押さえることができると思います。