0Pricing
JavaScript Academy · レッスン

ArrayのCRUDとIteration、Objectの基本とAccess

配列のCRUDと反復処理、オブジェクトリテラル、ドット記法・ブラケット記法・オプショナルチェーンによるプロパティアクセスを学びます。

「ArrayのCRUDとIteration、Objectの基本とAccess」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全2レッスンが含まれています。

導入

目標: 配列とオブジェクトを、シンプルで安全なパターンを使って扱えるようになることです。

  • 配列のCRUD
  • 値の反復処理
  • オブジェクトへのアクセス
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト1

配列のCRUDの基本

要素の追加にはpush/unshiftを、削除にはpop/shiftを使用します。モバイルでは出力を短く保ちます。

// Make an array
const colors = ["red", "green"];

// Add to end
colors.push("blue");

// Add to start
colors.unshift("pink");

// Remove from end
const last = colors.pop();

// Remove from start
const first = colors.shift();

console.log("Colors now:", colors);
console.log("Removed:", first, last);
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト2

インデックスとlength

単純な読み取りにはindexアクセスとlengthを使用します。

// Read by index and use length
const nums = [10, 20, 30];

console.log("First:", nums[0]);
console.log("Last:", nums[nums.length - 1]);
console.log("Count:", nums.length);
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト3

配列の反復処理

for…ofは値を直接取り出し、forEachは各値に対して関数を呼び出します。

// Iterate values with for…of
const fruits = ["apple", "banana", "cherry"];

for (const value of fruits) {
  console.log("of:", value);
}

// Or use forEach with a small callback
fruits.forEach(function (v) {
  console.log("each:", v);
});
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト4

オブジェクトリテラルとアクセス

オブジェクトはキーと値のペアを格納します。アクセスにはドット記法またはブラケット記法を使用します。

// Create an object with properties
const user = {
  name: "Ayla",
  level: 1,
  active: true
};

// Dot access
console.log("Name:", user.name);

// Bracket access (useful for dynamic keys)
const key = "level";
console.log("Level:", user[key]);
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト5

オプショナルチェーンとスプレッド

?.を使うと、パスが存在しない場合のエラーを避けられます。...スプレッドは、オブジェクトのコピーやマージに使用します（後のキーが先のキーを上書きします）。

// Optional chaining: safely read nested values
const profile = { contact: { email: "ayla@example.com" } };
console.log("Email:", profile.contact?.email);
console.log("Twitter:", profile.social?.twitter);

// Clone and merge with spread
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const clone = { ...base };
const merged = { ...base, ...extra };

console.log("Clone:", clone);
console.log("Merged:", merged);
ArrayのCRUDとIteration、Objectの基本とAccess — イラスト6

配列メソッドのクイズ

クイックチェック: 配列の末尾への追加

ArrayのCRUDとIteration、Objectの基本とAccess — イラスト7

まとめ

まとめ: 配列のCRUDを練習し、for…of/forEachで反復処理を行い、オブジェクトのプロパティにアクセスし、オプショナルチェーンを使い、スプレッドでコピーやマージを行いました。

ArrayのCRUDとIteration、Objectの基本とAccess — イラスト8

よくある質問

「ArrayのCRUDとIteration、Objectの基本とAccess」レッスンは無料ですか？

はい。「ArrayのCRUDとIteration、Objectの基本とAccess」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全2レッスンが含まれています。

「ArrayのCRUDとIteration、Objectの基本とAccess」で何を学びますか？

配列のCRUDと反復処理、オブジェクトリテラル、ドット記法・ブラケット記法・オプショナルチェーンによるプロパティアクセスを学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/2です。

「ArrayのCRUDとIteration、Objectの基本とAccess」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ArrayのCRUDとIteration、Objectの基本とAccess
  2. クローンとマージ — spreadとObject.assign
← JavaScript Academyに戻る