TypeScript Academy · レッスン

列挙型:数値定数と文字列定数

列挙型を使ってマジック文字列やマジックナンバーを置き換えます。

レッスン 4/413 ステップ

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

ようこそ

Enumsを使うと、名前付き定数値の集合を定義できます。マジックナンバーや文字列を、TypeScriptが型チェックできる読みやすい名前に置き換えられます。

数値enum

デフォルトでは、enumのメンバーに0から始まる連番の数値が割り当てられます。
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right, // 3
}
console.log(Direction.Up); // 0

数値enumの値をカスタマイズする

開始値を設定したり、個々のメンバーを上書きしたりできます。その後のメンバーには、最後に設定された値から連番が自動的に割り当てられます。
enum Status {
  Active = 1,
  Inactive, // 2
  Banned = 100,
}

文字列enum

文字列enumでは、各メンバーに明示的な値を指定する必要があります。数値よりも、ログやシリアライズされたデータで読みやすくなります。
enum Color {
  Red = 'RED',
  Green = 'GREEN',
  Blue = 'BLUE',
}

関数でenumを使う

パラメーターの型にenum型を使うと、値を定義済みの集合に制限できます。
function move(dir: Direction): void {
  console.log('Moving:', Direction[dir]);
}
move(Direction.Up);

逆マッピング(数値のみ)

数値enumでは逆マッピングがサポートされているため、値からメンバー名を調べられます。文字列enumではサポートされません。
enum Status { Active = 1, Inactive = 2 }
console.log(Status[1]); // 'Active'
console.log(Status.Active); // 1

const enum

`const enum`はコンパイル時にインライン化され、JavaScriptオブジェクトは出力されません。これによりバンドルサイズを削減できますが、実行時のイントロスペクションには制限があります。
const enum Axis { X, Y, Z }
const a = Axis.X; // compiled to: const a = 0;

enumとリテラルのユニオンの比較

多くのTypeScript開発者は、enumよりもリテラルのユニオン型を好みます。より軽量で、実行時のコードなしで動作するためです。
// Enum
enum Dir { Up = 'UP', Down = 'DOWN' }

// Union literal (preferred by many)
type Dir2 = 'UP' | 'DOWN';

異種enum(避けるべきパターン)

1つのenumに文字列値と数値を混在させることは可能ですが、混乱を招きます。このパターンは避けてください。
// Avoid:
enum Mixed { A = 1, B = 'bee' }

enumは実行時には実際のオブジェクト

interfaceやtype aliasとは異なり、enumはJavaScriptコードを出力します。コンパイル後の出力は、名前から値および値から名前への両方のマッピングを持つJavaScriptオブジェクトです(数値enumの場合)。

enumの値を反復処理する

実行時にenumオブジェクトのメンバーを反復処理するには、Object.values()またはObject.keys()を使います。
enum Role { Admin = 'ADMIN', User = 'USER', Guest = 'GUEST' }
const roles = Object.values(Role);
console.log(roles); // ['ADMIN', 'USER', 'GUEST']

クイックチェック

逆マッピング(値から名前を調べること)をサポートしているのは、どのenum型ですか?

まとめ

Enumsは、名前付き定数の集合を実際のJavaScriptオブジェクトとして定義します。読みやすさには文字列enum、パフォーマンスにはconst enumを使い、より軽量な代替手段としてリテラルのユニオン型も検討してください。
無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
101
レッスン
352

よくある質問

「列挙型:数値定数と文字列定数」レッスンは無料ですか?

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

「列挙型:数値定数と文字列定数」で何を学びますか?

列挙型を使ってマジック文字列やマジックナンバーを置き換えます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「列挙型:数値定数と文字列定数」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. 型付き配列: T[] と Array
  2. Readonly 配列と不変データ
  3. タプル: 固定長の型付き配列
  4. 列挙型:数値定数と文字列定数
← TypeScript Academyに戻る