Java Scriptの基本その8　Objectについて

イントロダクション

JavaScriptでオブジェクトを使って、人物情報を管理する方法を紹介します。まず、myProfileオブジェクトを定義し、名前や年齢、職業、親友リストをプロパティとして持たせます。オブジェクトのプロパティにはドット記法やブラケット記法でアクセスできます。また、新しいプロパティを追加するのも簡単です。関数を使って年齢を計算したり、プロフィールの概要を作成したりする方法も示しました。これにより、動的なデータ操作が可能になります。

オブジェクトの定義とプロパティへのアクセス

まず、myProfileというオブジェクトを定義しています。このオブジェクトは、人物の基本的な情報を保持しています。

const myProfile = {
  firstName: "Tony", // 名前
  lastName: "Tanaka", // 苗字
  currentAge: 29, // 年齢
  currentJob: "Lawyer", // 職業
  bestFriends: ["John", "James", "Kenny"], // 親友のリスト
};

myProfileには5つのプロパティがあります。firstNameとlastNameは文字列で名前と苗字を保持し、currentAgeは数値で年齢を、currentJobは文字列で職業を保持しています。bestFriendsは配列で、親友の名前を保持しています。

次に、オブジェクトのプロパティにアクセスする方法を見てみましょう。

console.log(myProfile.lastName); // ドット記法でアクセス
console.log(myProfile["lastName"]); // ブラケット記法でアクセス

lastNameプロパティには、ドット記法とブラケット記法の両方でアクセスできます。ドット記法は簡潔で分かりやすいですが、ブラケット記法は動的なプロパティ名のアクセスに便利です。

const nameKey = "Name";
console.log(myProfile["first" + nameKey]); // "firstName"にアクセス
console.log(myProfile["last" + nameKey]); // "lastName"にアクセス

ここでは、変数nameKeyを使って動的にプロパティ名を生成し、ブラケット記法でアクセスしています。これにより、柔軟にプロパティにアクセスできます。

配列の操作と条件分岐

次に、bestFriends配列の操作方法と条件分岐の使い方を見てみましょう。

console.log(myProfile.bestFriends[0]); // 配列の最初の要素にアクセス
console.log(myProfile.bestFriends.length); // 配列の長さを取得

bestFriends配列の最初の要素（"John"）にアクセスし、配列の長さ（3）を取得しています。

条件分岐を使った例も見てみましょう。

const guessTheJob = prompt("Tonyのお仕事を当ててごらん？");

myProfile[guessTheJob] = myProfile.currentJob
  ? console.log(`正解！${myProfile.currentJob}でした！`)
  : console.log("ハズレ！");

ここでは、prompt関数でユーザーからの入力を受け取り、その入力がmyProfile.currentJobと一致するかどうかを確認しています。もし一致すれば「正解！」と表示され、そうでなければ「ハズレ！」と表示されます。

プロパティの追加と関数の活用

オブジェクトに新しいプロパティを追加する方法を見てみましょう。

myProfile.currentResidence = "England";
console.log(myProfile);

myProfileオブジェクトにcurrentResidenceプロパティを追加し、その値として"England"を設定しています。これにより、オブジェクトに新しい情報を簡単に追加できます。

次に、関数をオブジェクトのプロパティとして定義する方法を見てみましょう。

const currentYear = 2024;
const herProfile = {
  firstName: "Miki",
  lastName: "Sato",
  birthYear: 1996,
  hasDriversLicence: true,
  calcAge: function () {
    this.currentAge = currentYear - this.birthYear;
    return this.currentAge;
  },
  createSummary: function () {
    return `${this.firstName}さんは${this.calcAge()}歳で${
      this.hasDriversLicence
        ? "自動車免許を持っている"
        : "自動車免許を持っていない"
    }`;
  },
};

herProfileオブジェクトには、年齢を計算するcalcAge関数とプロフィールの概要を作成するcreateSummary関数があります。calcAge関数は現在の年（currentYear）と生年（birthYear）を使って年齢を計算し、currentAgeプロパティにその結果を格納します。createSummary関数は、その計算結果とhasDriversLicenceプロパティを使って、Mikiさんのプロフィールの概要を文字列として作成します。

これらの関数を使って、オブジェクトのデータを動的に操作し、柔軟に情報を取得することができます。

console.log(herProfile);
console.log(herProfile.calcAge());
console.log(herProfile.currentAge);
console.log(herProfile.createSummary());

console.logを使って、herProfileオブジェクト全体、計算された年齢（calcAge関数の結果）、更新されたcurrentAgeプロパティ、そして作成されたプロフィールの概要（createSummary関数の結果）を表示します。これにより、オブジェクトのプロパティと関数がどのように連携しているかがよく分かります。

まとめ

このように、JavaScriptのオブジェクトを使うことで、複雑なデータ構造を簡単に管理できます。プロパティへのアクセス方法や、配列操作、条件分岐、新しいプロパティの追加、関数の利用方法を理解することで、より効率的にデータを操作できるようになります。オブジェクトの使い方をマスターすると、コードの保守性が向上し、柔軟で再利用可能なプログラムを作成することができます。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！