JavaScript の配列とオブジェクトをマスターする

はじめに

この実験では、テックスタートアップのウェブ開発者としてのアレックスの旅を続けます。シーンは開発チームのワークスペースで展開され、アレックスは複数の財務記録を処理する機能を組み込むことで個人向けの財務トラッカーを強化する任務を担っています。この重要な機能により、アレックスは JavaScript の配列とオブジェクトに深く突き入り、各財務記録を配列内のオブジェクトとして保存する必要があります。目的は、ユーザーの財務データを効率的に追跡するだけでなく整理する、動的で対話型のアプリケーションを作成することです。この取り組みを通じて、アレックスはユーザーに自分たちの財務活動の明確な概要を提供し、それによりアプリをより便利で魅力的なものにすることを目指しています。

この実験では、配列とオブジェクトを操作して会計記録を保存する必要があります。焦点は、オブジェクトを保存するための配列の使い方と、配列に新しい要素を追加する方法を理解することにあります。

ポイント：

配列操作（作成、反復処理、要素の追加）
オブジェクト（オブジェクトの作成、プロパティのアクセスと設定）

関数

この実験では、概念を理解するのに役立ついくつかの基本的な JavaScript のコードスニペットを含めます。これらのスニペットは、ブラウザのコンソールまたは Node.js 環境で実行できます。

ページを右クリックして「検証」を選択するか、F12を押すことでブラウザのコンソールを開きます。
ターミナルでnodeコマンドを実行することで Node.js 環境を開きます。

関数

JavaScript の関数は、タスクを実行するか値を計算するために設計されたコードのブロックです。関数はfunctionキーワードを使用して定義されます。

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // 出力："Hello, Alice!"

ここでは、greet関数はパラメータnameを受け取り、挨拶を返します。

アロー関数

ES6 で導入されたアロー関数は、関数を書くためのより簡潔な方法を提供します。匿名関数の式に特に役立ちます。

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // 出力："Hello, Bob!"

アロー関数は、コールバック関数やメソッドチェーンに便利な、現在のコンテキストのthis値を自動的にバインドします。

配列操作

JavaScript における配列は、複数の値を格納するために使用されるオブジェクトです。

配列の作成

let fruits = ["Apple", "Orange", "Cherry"];

JavaScript の配列は 0 から始まるインデックス付きです。配列の最初の要素はインデックス 0 にあり、2 番目の要素はインデックス 1 にあり、以下同様で、最後の要素は配列の length プロパティの値から 1 を引いたものになります。

各インデックスは一意の配列要素に対応します。

配列のインデックスと要素の関係

では、配列の要素をどのように読み取るのでしょうか。

配列の反復処理

配列を反復処理するにはforEachメソッドを使用します。

forEachメソッドは、2 つのパラメータvalueとindexを持つコールバック関数を取ります。

たとえば、fruits配列の各要素をコンソールに出力するには：

fruits.forEach(function (value, index) {
  console.log(index, value);
});

forEach による配列の反復処理

要素の追加

要素を配列の末尾に追加するにはpushメソッドを使用します。

たとえば、fruits配列にブドウを追加してみましょう。

fruits.push("Grape");
console.log(fruits);

配列に要素を追加する

オブジェクト

オブジェクトは JavaScript における基本的な構成要素で、キーと値のペアを格納するために使用されます。

オブジェクトの作成

let person = {
  name: "Alice",
  age: 30
};

プロパティのアクセスと設定

オブジェクトのプロパティにアクセスするには、ドット（.）記法またはブラケット（[]）記法を使用できます。

console.log(person.name); // ドット記法を使用

person["age"] = 31; // プロパティを設定するためのブラケット記法
console.log(person.age);

JavaScript のオブジェクトのプロパティの例

配列とオブジェクトの基本的な使い方を理解したので、これからプロジェクトのコードを改良していきましょう。

財務記録の作成と保存

このステップでは、アレックスと一緒になって、配列内のオブジェクトとして財務記録を保存するための構造を作成します。この設定は、財務トラッカーのデータ管理システムの骨格を形成し、財務記録の動的な更新と操作を可能にします。

まず、財務記録がどのようなものかを定義しましょう。各記録には、説明、金額、および種類（収入または支出）があります。script.jsを開き、これらの記録を保持するための配列を作成して始めましょう。

let records = [];

次に、この配列に新しい記録を追加する関数を作成します。各記録はオブジェクトになります。

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

まだページ上に何も表示されません。なぜなら、送信を待つ関数をまだ完成させていないからです。

~/project/script.jsにform.addEventListener("submit", (e) => {})を定義して、追加ボタンがクリックされたときのインタラクションを待ちます。

// 新しい記録を追加するためのフォーム送信のイベントリスナー
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

Event インターフェイスのpreventDefault()メソッドは、ユーザーエージェントに対して、イベントが明示的に処理されない場合、通常通りの既定のアクションを行わないように伝えます。
HTMLDataElement インターフェイスのvalueプロパティは、HTML 属性を反映する文字列を返します。

この時点で、addRecord関数を追加して、console.log(records);を追加すると、記録に追加されたデータが records にログされることがわかります。

台帳に追加された記録を表示したい場合は、renderRecords関数を作成する必要がありますが、その前にテンプレート文字列について学ぶ必要があります。

テンプレート文字列

テンプレート文字列は、バッククォート（）を使用して定義され、${式}の形式のプレースホルダを含めることができます。ここで、式`は任意の有効な JavaScript 式です。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 出力：Hello, Alice!

テンプレート文字列の例のコード

変数の挿入

テンプレート文字列は、変数値を便利に文字列に埋め込むことができ、動的な文字列情報の構築を簡素化します。

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // 出力：She is 25 years old.

変数の挿入の例

複数行の文字列の処理

従来の JavaScript では、複数行の文字列を処理するにはバックスラッシュや文字列の連結を使用する必要がありました。テンプレート文字列は、複数行のテキストを処理するためのより簡潔な方法を提供します。

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

複数行の文字列の例

財務記録の表示

アレックスが財務記録を保存する方法を設定したので、次のステップは、これらの記録を Web ページ上に動的に表示することです。財務記録の配列を反復処理し、各記録を財務トラッカーの UI の一部として表示する方法を学びます。

次に、script.jsにこれらの記録をレンダリングする関数を作成します。

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

テスト用の記録を追加した後、renderRecordsを呼び出してページ上に表示されるか確認します。

renderRecords();

この関数はfinancialRecords配列を反復処理し、各記録に対して新しい段落を作成し、Web ページ上の指定されたコンテナに追加します。

まとめ

この実験では、アレックスと一緒になって、個人用の財務トラッカーを堅牢なアプリケーションにするために大きな一歩を踏み出しました。配列とオブジェクトの使い方を学ぶことで、アプリケーションが複数の財務記録を動的に保存し表示できるようになりました。これは、アプリケーションの機能を強化するだけでなく、JavaScript における複雑なデータ構造の管理にも触れることができ、Web 開発における重要なスキルとなっています。

この実践的な経験を通じて、配列とオブジェクトがどのように協働して、データを意味のある方法で整理し操作するかを見てきました。この基礎知識は、今後の開発過程でのインタラクティビティやデータの永続化など、さらなる機能強化の土台となります。