Java Scriptの基礎その16　オブジェクトとメソッドの続き

イントロダクション

JavaScriptは、Web開発において非常に重要なプログラミング言語です。本記事では、JavaScriptでオブジェクトを作成し、そのプロパティやメソッドを操作する方法について解説します。特に、複数の書き方やプロパティの確認方法、メソッドの使用方法に焦点を当てて説明します。初心者の方にも理解しやすいよう、丁寧に解説していきますので、ぜひ参考にしてください。

オブジェクトの作成方法

書き方その1

まずは、オブジェクトの基本的な作成方法を見てみましょう。以下のコードは、月曜日から木曜日の営業時間をオブジェクトとして定義しています。

const openingHours = {
  mon: {
    open: 9,
    close: 18,
  },
  tue: {
    open: 9,
    close: 18,
  },
  wed: {
    open: 9,
    close: 18,
  },
  thu: {
    open: 9,
    close: 18,
  },
};

このオブジェクトは、曜日ごとにopenとcloseのプロパティを持つネストされたオブジェクトを含んでいます。

書き方その2

次に、異なる書き方を見てみましょう。配列を使用して動的にプロパティを設定する方法です。

const weekDays = ["月", "火", "水", "木", "金", "土", "日"];
const restingHours = {
  [weekDays[0]]: {
    open: 11,
    close: 12,
  },
  [weekDays[1]]: {
    open: 11,
    close: 12,
  },
  [weekDays[2]]: {
    open: 11,
    close: 12,
  },
  [weekDays[3]]: {
    open: 0,
    close: 12,
  },
};

ここでは、weekDaysという配列を使い、その要素をプロパティ名として使用しています。これにより、コードがより動的で柔軟になります。

オブジェクト内の関数

関数の書き方その1

オブジェクト内に関数を定義することもできます。以下のコードでは、ownerHelloMessageという関数を持つオブジェクトを作成しています。

const storeInformation = {
  shopName: "Candy Shop Poppin",
  locatedAt: "東京都港区麻布十番",
  ownerName: "安室奈美",
  candylist: ["チョコレート", "綿あめ", "シュガーケーン", "ジェリービーン"],
  openingHours: openingHours,
  restingHours: restingHours,
  ownerHelloMessage: function (yourName) {
    console.log(`${this.ownerName}です！${yourName}さん来てくれてありがとう。`);
  },
};

この関数は、yourNameという引数を取り、thisキーワードを使ってオブジェクトの他のプロパティにアクセスしています。

関数の書き方その2

異なる書き方もあります。以下のコードでは、ownerPresentingCandyという関数を定義しています。

const storeInformation = {
  // その他のプロパティ
  ownerPresentingCandy() {
    for (const candyItem of this.candylist) {
      console.log(`当店では${candyItem}を持っているよ`);
    }
  },
};

この関数は、candylistの各アイテムをループで回し、それぞれをコンソールに出力します。

データの確認方法

if文を使った確認

データが存在するかどうかを確認する方法も見てみましょう。

if (storeInformation.openingHours && storeInformation.openingHours.mon)
  console.log(storeInformation.openingHours.mon.open);

このコードでは、openingHoursとmonプロパティが存在するかをチェックしています。

オプショナルチェーン

より簡潔に書くために、オプショナルチェーンを使用することもできます。

console.log(storeInformation.openingHours.mon?.open);

これは、monプロパティが存在しない場合にエラーを避けるための便利な方法です。

配列とメソッドの使用

配列の要素を確認

配列の要素を確認する方法もあります。以下のコードでは、配列sampleUsersの最初の要素の名前を出力します。

const sampleUsers = [
  { name: "安室なみえ", email: "test123@samplemail.com", occupation: "singer" },
  {
    name: "ドリューバリモア",
    email: "test456@samplemail.com",
    occupation: "actress",
  },
];

if (sampleUsers.length > 0) console.log(sampleUsers[0].name);
else console.log("お名前が入力されていません");

オプショナルチェーンとnull合体演算子

オプショナルチェーンとnull合体演算子を使うことで、より簡潔に書けます。

console.log(sampleUsers[0]?.name ?? "お名前が入力されていません");

まとめ

JavaScriptでのオブジェクトや関数の作成方法、プロパティの確認方法、配列の操作について解説しました。これらの技術を理解することで、より柔軟で効率的なコードを書くことができます。特にオプショナルチェーンやnull合体演算子を使うことで、エラーを防ぎつつ簡潔なコードを実現できます。今後のコーディングにぜひ役立ててください。

Githubでも公開してるよ！

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