TypeScript Academy · レッスン

列挙型

Q: 「列挙型」で何を学びますか？

コードをわかりやすくする列挙型の使い方を学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

コードをわかりやすくする列挙型の使い方を学びます

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

列挙型

次のレッスンへようこそ！このレッスンでは、TypeScriptのenumについて学びます。enumを使うと、名前付き定数の集合を定義できるため、コードが読みやすくなり、管理もしやすくなります。それでは詳しく見ていきましょう！

列挙型とは

enum（enumeration の略）は、名前付き定数の集合を定義できるデータ型です。enumは関連する値をまとめるために使われ、コードを整理しやすくし、ミスも減らせます。

例: 曜日はenumを使って表現できます。

課題: 1月から12月までのenumを作成し、いくつかの値を console に出力してください。

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

console.log(Days.Monday); // Output: 0
console.log(Days.Friday); // Output: 4

数値列挙型

TypeScriptのenumはデフォルトでは数値型で、0から始まります。必要に応じて、enumメンバーに任意の値を割り当てることもできます。

課題: ユーザーロール（例: Admin、Editor、Viewer）のenumを、任意の数値で定義してください。

enum Status {
  Active = 1,
  Inactive = 2,
  Pending = 3,
}

console.log(Status.Active); // Output: 1
console.log(Status.Pending); // Output: 3

逆方向マッピング

TypeScriptのenumは逆方向マッピングに対応しているため、値からenumメンバーの名前を取得できます。

課題: 自分で作成したenumを使って、逆方向マッピングを試してみてください。

enum Colors {
  Red = 1,
  Green,
  Blue,
}

console.log(Colors[1]); // Output: "Red"
console.log(Colors[2]); // Output: "Green"

文字列列挙型

TypeScriptは文字列 enumにも対応しており、各enumメンバーに文字列値を割り当てられます。

課題: 基本色（例: Red、Green、Blue）の文字列enumを作成してください。

enum Directions {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

console.log(Directions.Up); // Output: "UP"
console.log(Directions.Left); // Output: "LEFT"

異種列挙型

enumには数値と文字列の両方の値を含めることもできますが、一貫性を保つため、通常は推奨されません。

課題: 数値と文字列を混在させたenumを定義し、エディターでその動作を確認してください。

enum Mixed {
  Yes = 1,
  No = "NO",
}

console.log(Mixed.Yes); // Output: 1
console.log(Mixed.No); // Output: "NO"

関数で列挙型を使う

enumは、コードの処理の流れを制御するのに適しています。例:

課題: enumをパラメーターとして受け取り、メッセージを返す関数を作成してください。

enum Status {
  Active,
  Inactive,
  Pending,
}

function checkStatus(status: Status): string {
  switch (status) {
    case Status.Active:
      return "The status is active.";
    case Status.Inactive:
      return "The status is inactive.";
    case Status.Pending:
      return "The status is pending.";
    default:
      return "Unknown status.";
  }
}

console.log(checkStatus(Status.Active)); // Output: "The status is active."

よくあるミス

enumを使うときによくあるミスを確認しましょう。

文字列enumのほうがコードを明確にできる場合に、数値enumを使う。
同じenum内で数値と文字列の値を混在させる。
名前付き定数にすると便利な値に、enumを使わない。

ヒント: 用途に応じて、適切なenumの種類（数値または文字列）を選んでください。

enum Fruits {
  Apple = 1,
  Banana,
  Cherry,
}

console.log(Fruits.Banana);

よくできました！

おめでとうございます！TypeScriptでenumを使って名前付き定数を定義する方法を学びました。enumは、コードを読みやすくし、ミスを減らすための強力な方法です。次のレッスンでは、TypeScriptのもう1つの高度な機能であるリテラル型について学びます。引き続きコーディングしていきましょう！

よくある質問

「列挙型」レッスンは無料ですか？

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

「列挙型」で何を学びますか？

コードをわかりやすくする列挙型の使い方を学びますブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「列挙型」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← TypeScript Academyに戻る