配列とタプル
TypeScriptで配列とタプルを扱います
「配列とタプル」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
配列とタプル
次のレッスンへようこそ。このレッスンでは、TypeScriptで配列とタプルを扱う方法を学びます。これらのデータ構造を使うと、複数の値を整理して格納できます。それでは始めましょう。
配列とは
配列は、1つの変数に格納された項目の集合です。TypeScriptでは、配列の要素の型を指定できます。例：
課題：好きな数字の配列を作成し、コンソールに出力してみましょう。
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
console.log(numbers);
console.log(names);
配列要素へのアクセス
配列の要素には、インデックスを使ってアクセスできます。配列のインデックスは0から始まることに注意してください。
課題：配列内のさまざまな要素にアクセスし、コンソールに出力してみましょう。
let colors: string[] = ["red", "blue", "green"];
console.log(colors[0]); // Output: "red"
console.log(colors[2]); // Output: "green"
よく使う配列メソッド
TypeScriptの配列には、便利なメソッドが多数用意されています。ここではいくつか例を紹介します。
- push：配列の末尾に要素を追加します。
- pop：配列の最後の要素を削除します。
- length：配列の要素数を返します。
例：
課題：pushやpopなどの配列メソッドを試してみましょう。
let fruits: string[] = ["apple", "banana"];
fruits.push("cherry"); // Add "cherry"
console.log(fruits); // Output: ["apple", "banana", "cherry"]
fruits.pop(); // Remove "cherry"
console.log(fruits); // Output: ["apple", "banana"]
console.log(fruits.length); // Output: 2
タプルとは
タプルは、各要素が異なる型を持てる固定長の配列です。タプルは、異なる型の関連データをまとめる場合に便利です。例：
課題：名前と年齢を持つ学生を表すタプルを作成してみましょう。
let person: [string, number] = ["Alice", 30];
console.log(person[0]); // Output: "Alice"
console.log(person[1]); // Output: 30
タプルの操作
タプルは配列と同じように、インデックス指定やメソッドに対応しています。ただし、構造は固定されているため、タプル型を変更しない限り要素を追加できません。例：
課題：2D空間上の点を表すタプルを定義し、その値を出力してみましょう。
let coordinates: [number, number] = [10, 20];
console.log(`X: ${coordinates[0]}, Y: ${coordinates[1]}`);
// Attempting to add an extra element will result in an error
// coordinates.push(30); // Error: Tuple type '[number, number]' of fixed length 2
タプルの配列の使用
複数の関連するデータ項目を格納するために、タプルの配列を作成できます。例：
課題：友人の名前と年齢を格納するタプルの配列を作成してみましょう。
let students: [string, number][] = [
["Alice", 30],
["Bob", 25],
["Charlie", 35],
];
console.log(students[0]); // Output: ["Alice", 30]
console.log(students[1][1]); // Output: 25
よくある間違い
配列とタプルを扱う際によくある間違いを紹介します。
- 配列の範囲外の要素にアクセスする（
undefinedになります）。 - 配列やタプルで間違った型のデータを使用する（TypeScriptでエラーが発生します）。
- 型を更新せずにタプルの構造を変更しようとする。
ヒント：予期しない動作を避けるため、必ず型を明示的に指定しましょう。
let scores: number[] = [10, 20, 30];
console.log(scores.length);
よくできました！
おめでとうございます！TypeScriptで配列とタプルを使って、データのコレクションを保存・管理する方法を学びました。これらは、プログラムで構造化された情報を扱うための重要なツールです。次のレッスンでは、より複雑な状況に対応するためのユニオン型とインターセクション型について学びます。引き続きコーディングしていきましょう！
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「配列とタプル」レッスンは無料ですか？
はい。「配列とタプル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「配列とタプル」で何を学びますか？
TypeScriptで配列とタプルを扱います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「配列とタプル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。