Java Scriptの基礎その12　Arrayの扱い

イントロダクション

この記事では、JavaScriptの配列やオブジェクトの操作について学びます。コード例を通じて、配列の基本的なアクセス方法やオブジェクトのメソッドの使い方、そしてデストラクチャリングと呼ばれる強力な機能について詳しく解説します。初心者の方でもわかりやすいように、各トピックを段階的に説明しますので、安心して読み進めてください。

配列の基本操作

配列の要素へのアクセス

まず、配列の基本的な操作方法について説明します。以下のコードは、配列の要素にアクセスする方法を示しています。

const arrySample = [1, 2, 3, 4];
const arryElement_1 = arrySample[0];
const arryElement_2 = arrySample[1];
const arryElement_3 = arrySample[3];
console.log([arryElement_1, arryElement_2, arryElement_3]);

このコードでは、arrySampleという配列が定義されており、その要素にインデックスを使用してアクセスしています。配列のインデックスは0から始まります。arryElement_1は配列の最初の要素（1）、arryElement_2は2番目の要素（2）、arryElement_3は4番目の要素（4）をそれぞれ取得しています。最後に、これらの要素を配列にまとめてconsole.logで出力しています。

デストラクチャリングによる配列の展開

次に、デストラクチャリングを使って配列を展開する方法を紹介します。

const [arryElement_A, arryElement_B, arryElement_C] = arrySample;
console.log(arrySample);

このコードでは、配列arrySampleの要素を順番にarryElement_A、arryElement_B、arryElement_Cという変数に割り当てています。デストラクチャリングを使用することで、配列の要素を一度に複数の変数に分けて代入することができます。

オブジェクトとメソッド

オブジェクトの定義とアクセス

次に、JavaScriptオブジェクトの基本的な使い方について説明します。

const sushiRestaurant = {
  name: "Sushi Yamamoto",
  location: "東京都麻布十番",
  category: ["おまかせ", "にぎり", "丼", "吸物"],
  starter: ["漬物", "刺身", "巻き寿司"],
  main: ["1万円コース", "5万円コース", "10万円コース"],
  order: function (starterIndex, mainIndex) {
    return [this.starter[starterIndex], this.main[mainIndex]];
  },
};

このコードでは、sushiRestaurantというオブジェクトを定義しています。このオブジェクトには、名前、場所、カテゴリ、スターター、メインディッシュなどのプロパティがあります。また、orderというメソッドも含まれており、指定したスターターとメインディッシュを返す機能を持っています。

デストラクチャリングによるオブジェクトの操作

オブジェクトのプロパティをデストラクチャリングを使って取得する方法も紹介します。

let [starterCourse, mainCourse] = sushiRestaurant.category;
console.log(starterCourse, mainCourse);
let [starterCourse_1, , mainCourse_1] = sushiRestaurant.category;
console.log(starterCourse_1, mainCourse_1);
[starterCourse, mainCourse] = [starterCourse_1, mainCourse_1];
console.log(starterCourse, mainCourse);
const [starterDish, mainDish] = sushiRestaurant.order(2, 0);
console.log(starterDish, mainDish);

ここでは、category配列の要素をデストラクチャリングで取得しています。また、orderメソッドを使って、特定のスターターとメインディッシュを取得し、出力しています。

ネストされた配列とデフォルト値

ネストされた配列の操作

ネストされた配列の操作方法について説明します。

const nestedSample = [1, 2, [3, 4]];
console.log(nestedSample);
const [a, , [c, d]] = nestedSample;
console.log(nestedSample);

このコードでは、nestedSampleというネストされた配列を定義し、その要素をデストラクチャリングを使って変数に割り当てています。cとdはネストされた配列の要素を取得する例です。

デフォルト値の設定

最後に、デフォルト値の設定方法について説明します。

const [p = 1, q = 2, r = 3] = [4, 5];
console.log(p, q, r);

このコードでは、デストラクチャリングを使用して配列の要素を変数に割り当てつつ、デフォルト値を設定しています。pには4、qには5が割り当てられ、rにはデフォルト値の3が割り当てられています。

まとめ

この記事では、JavaScriptの配列とオブジェクトの基本操作について学びました。配列の基本的なアクセス方法、デストラクチャリングを使った配列の展開、オブジェクトのプロパティへのアクセスとメソッドの利用方法、そしてネストされた配列の操作やデフォルト値の設定方法について解説しました。これらの知識を活用することで、より効率的で読みやすいコードを書けるようになるでしょう。引き続き、実際のコードを書きながら練習してみてください。

Githubでも公開してるよ！

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