JavaScriptで名前付き引数を使いこなす5つの方法と10個のサンプルコード

function printUserInfo(user) {
  console.log(`名前: ${user.name}, 年齢: ${user.age}, 性別: ${user.gender}`);
}

const user = {
  name: "山田太郎",
  age: 30,
  gender: "男性",
};

printUserInfo(user);

function printUserInfo({ name, age, gender }) {
  console.log(`名前: ${name}, 年齢: ${age}, 性別: ${gender}`);
}

const user = {
  name: "山田太郎",
  age: 30,
  gender: "男性",
};

printUserInfo(user);

function createUser({ name, age, gender }) {
  return {
    name: name,
    age: age,
    gender: gender,
  };
}

const user = createUser({ name: "山田太郎", age: 30, gender: "男性" });
console.log(user);

function createUser({ name, age, gender }) {
  return {
    name,
    age,
    gender,
  };
}

const user = createUser({ name: "山田太郎", age: 30, gender: "男性" });
console.log(user);

function createUser({ name, age, gender }) {
  if (!name || !age || !gender) {
    throw new Error("引数が足りません");
  }

  return {
    name,
    age,
    gender,
  };
}

try {
  const user = createUser({ name: "山田太郎", age: 30 });
} catch (error) {
  console.error(error.message);
}

function createUser({ name = "名無しさん", age = 20, gender = "不明" }) {
  return {
    name,
    age,
    gender,
  };
}

const user = createUser({ name: "山田太郎" });
console.log(user);

function createUser({ name, age, gender, isAdmin = false }) {
  return {
    name,
    age,
    gender,
    isAdmin,
  };
}

const user = createUser({ name: "山田太郎", age: 30, gender: "男性", isAdmin: true });
console.log(user);

function createReport({ title, author, pages, fontSize = 12, isDoubleSpaced = true }) {
  // レポートの生成処理
  console.log(`タイトル: ${title}`);
  console.log(`著者: ${author}`);
  console.log(`ページ数: ${pages}`);
  console.log(`フォントサイズ: ${fontSize}`);
  console.log(`ダブルスペース: ${isDoubleSpaced ? "はい" : "いいえ"}`);
}

const reportOptions = {
  title: "年次報告書",
  author: "田中一郎",
  pages: 100,
  fontSize: 14,
  isDoubleSpaced: false,
};
createReport(reportOptions);

async function fetchData({ url, method = "GET", headers = {}, body = null }) {
  const response = await fetch(url, {
    method,
    headers,
    body,
  });
  return response.json();
}

fetchData({ 
  url: "https://api.example.com/data", 
  method: "POST", 
  body: JSON.stringify({ key: "value" }) 
}).then(data => console.log(data));

function createButton({ text, id, className, onClick }) {
  const button = document.createElement("button");
  button.innerText = text;
  button.id = id;
  button.className = className;
  button.addEventListener("click", onClick);
  return button;
}

const button = createButton({
  text: "クリック",
  id: "myButton",
  className: "button-class",
  onClick: () => console.log("ボタンがクリックされました"),
});
document.body.appendChild(button);

class StringBuilder {
  constructor({ initialValue = "" }) {
    this.value = initialValue;
  }

  append({ text }) {
    this.value += text;
    return this;
  }

  prepend({ text }) {
    this.value = text + this.value;
    return this;
  }

  display() {
    console.log(this.value);
  }
}

const stringBuilder = new StringBuilder({ initialValue: "Hello" });
stringBuilder
  .append({ text: ", " })
  .append({ text: "World!" })
  .prepend({ text: "こんにちは" })
  .display();

function onButtonClick({ event, buttonId }) {
  console.log(`ボタン${buttonId}がクリックされました。`);
  console.log("イベントオブジェクト:", event);
}

document.getElementById("button1").addEventListener("click", (event) => {
  onButtonClick({ event, buttonId: 1 });
});

document.getElementById("button2").addEventListener("click", (event) => {
  onButtonClick({ event, buttonId: 2 });
});

class CustomError extends Error {
  constructor({ message, errorCode }) {
    super(message);
    this.errorCode = errorCode;
  }
}

function throwError({ message, errorCode }) {
  throw new CustomError({ message, errorCode });
}

try {
  throwError({ message: "カスタムエラーが発生しました", errorCode: 500 });
} catch (error) {
  console.error(`エラーコード: ${error.errorCode}, メッセージ: ${error.message}`);
}