TypeScript Playgroundの使い方と設定方法

プログラミング言語を本格的に利用する場合、どうしても実行環境構築が余儀なくされます。

しかし、その手前でプログラミング言語に対する使用感を確認したい人もいるはずです。

上記の悩みを解決しながら、TypeScript Playgroundを解説します。

TypeScript Playgroundとは

TypeScript Playgroundは、TypeScript言語の公式サイトが提供するコードをブラウザ上で試せるオンラインエディタです。

Playgroundを利用することで、TypeScriptを自由に記述/共有/学習できます。

そのため、これからTypeScriptを利用したい人やプログラミング初心者も実行環境の構築不要なオンライン学習におすすめです。

TypeScript Playgroundの使い方

以下にアクセスするとTypeScript Playgroundをオンラインエディタとして利用できます。

また、TypeScript Playgroundの使い方として以下の項目を解説します。

特に、個人PCはあるがTypeSctriptの実行環境が整備できていない人はTypeSctriptの学習用として利用することをおすすめします。

プログラムの実行

TypeScript Playgroundにアクセスしたら、手始めにコードを実行してみましょう。

例として以下のサンプルコードをTypeScript Playgroundのオンラインエディタに記述します。

type Operation = "add" | "subtract" | "multiply" | "divide";

interface CalcHistory {
  operation: Operation;
  numbers: number[];
  result: number;
  timestamp: Date;
}

class SmartCalculator {
  private history: CalcHistory[] = [];

  // ランダムな演算を行う
  private randomOperation(): Operation {
    const operations: Operation[] = ["add", "subtract", "multiply", "divide"];
    return operations[Math.floor(Math.random() * operations.length)];
  }

  // 実際の計算を行う
  private calculate(operation: Operation, ...numbers: number[]): number {
    switch (operation) {
      case "add":
        return numbers.reduce((a, b) => a + b, 0);
      case "subtract":
        return numbers.reduce((a, b) => a - b);
      case "multiply":
        return numbers.reduce((a, b) => a * b, 1);
      case "divide":
        return numbers.reduce((a, b) => a / b);
      default:
        throw new Error("Unknown operation");
    }
  }

  // 面白い関数：ランダム演算付きスマート加算
  magicAdd(...numbers: number[]): number {
    const op = this.randomOperation();
    const result = this.calculate(op, ...numbers);

    this.history.push({
      operation: op,
      numbers,
      result,
      timestamp: new Date(),
    });

    console.log(`🧮 Operation: ${op} | Numbers: [${numbers.join(", ")}] = ${result}`);
    return result;
  }

  // 計算履歴を表示
  showHistory(): void {
    console.log("\n📜 Calculation History:");
    this.history.forEach((h, i) => {
      console.log(
        `${i + 1}. [${h.timestamp.toLocaleTimeString()}] ${h.operation}(${h.numbers.join(
          ", "
        )}) = ${h.result}`
      );
    });
  }
}

// ---- 実行例 ----
const calc = new SmartCalculator();

calc.magicAdd(10, 5, 2);
calc.magicAdd(3, 4);
calc.magicAdd(8, 2, 1);
calc.showHistory();

入力が終わったらオンラインエディタの上部にある「RUN」をクリックしコードを実行します。

実行後は右側のLogsのタブで実行結果が確認できます。

JavaScriptのコンパイル結果確認

TypeScriptを記述し生成されるJavaScriptのコードを確認する方法になります。

右側の.JSタブを開くことで生成されるJavaScriptのコードを確認できます。

例としてTypeScript固有の機能であるenumのコンパイル結果を確認します。

オンラインエディタに以下のコードを入力して.JSタブを開いてみてください。

enum Direction {
  North = "北",
  East = "東",
  South = "南",
  West = "西"
}

console.log(Direction.West);

TypeScriptがenumをJavaScriptへどのようにコンパイルしているか確認できます。

コンパイルエラーの確認

次のサンプルコードをオンラインエディタに入力するとコンパイルエラーが確認できます。

オンラインエディタ上に表示される赤の波線にマウスオーバーをするとリアルタイムにコンパイルエラーを確認できます。

let count: number = "five";
console.log(count + 1);

内容としては、countはnumber型として宣言してるが、”five”（文字列）を代入してるため型の不一致でコンパイルエラーが発生します。

また、オンラインエディタでマウスオーバーをする以外に、右側のErrorsタブを選択するとエラーを一覧で確認できます。

型定義の確認

.D.TSタブを開くとオンラインエディタのコードから生成される型定義を確認できます。

// コード
function add(a: number, b: number) {
  return a + b;
}
// .D.TSの出力
// declare function add(a: number, b: number): number;

コードの共有

百聞は一見にしかずということで以下のURLにアクセスしてみてください。

URL：https://www.typescriptlang.org/play/?#code/PTAEmaGQfhkSYYCgDMCuA7AxgFwJYHtmgIYAmhAFPgFyjKIC2ARgKYBOANKHZdfcwJSgDesUKCYN0iJnnygA1OwDcsAL6wQoAHQARdQBUAyoDsGQF+KgbKVVYQg1QAbfKNBI0WXAWJlOtRq3YfuTHr5e8kA

TypeScript PlaygroundはURLを共有すると書いたコードを他の人に共有できます。

上記のURLは型定義の章で記載したコードになります。

TypeScript Playgroundの各種設定

次に、TypeScript Playgroundの各種設定に関する内容を解説します。

TS Configの設定

以下は、TS Configの設定ができる大項目になります。

基本的にデフォルト設定で問題ありません。

必要に応じて詳細設定を変更したい人は適宜確認しましょう。

Examples

基本的に、JavaScriptとTypeScriptの基礎内容を例として参照できます。

確認したいあるいは学びたい項目を選択すると、即時実行できる状態にコードが挿入されます。

Settings

Settingsでは、オンラインエディタの右側サイドバーにある項目と設定について選択できる内容になります。

Settingsでは、「Disable ATA」「Disable Save-On-Type」のチェックボックスが用意されています。

「Disable ATA」は、import及びrequireの型の自動取得を無効にします。

「Disable Save-On-Type」は、入力時にURLが変更されないようにします。

Sidebar Tabsに関しては、サイドバーの項目に対して表示の有無を決めています。

TypeScript Playgroundにおけるオンラインエディタ上の各ボタン

ここでは、TypeScript Playgroundにおけるオンラインエディタ上のボタンを解説します。

TypeScriptのバージョン設定

オンラインエディタ上では、TS version3~5までは選べるようになっています。

基本的に最新バージョンを選択すれば学習として問題ありません。

Run

「Run」ボタンは、シンプルに記述したコードをオンライン上で実行するためのボタンになります。

実行すると、各種設定に合わせて確認できる表示箇所がリアルタイムで結果として変化します。

すぐに実行・確認・改善が実施できるため、今すぐ確かめたいコードなどあれば有益です。

Export

ここでは、Exportメニュー内にある項目を記載します。

各種メニューから利用できるので、適宜利用したい機能は確認しましょう。

Share

以下は上記で解説したコードの共有時に「Share」ボタンから作成したURLです。

URL：https://www.typescriptlang.org/play/?#code/PTAEmaGQfhkSYYCgDMCuA7AxgFwJYHtmgIYAmhAFPgFyjKIC2ARgKYBOANKHZdfcwJSgDesUKCYN0iJnnygA1OwDcsAL6wQoAHQARdQBUAyoDsGQF+KgbKVVYQg1QAbfKNBI0WXAWJlOtRq3YfuTHr5e8kA

TypeScript PlaygroundはURLを共有すると書いたコードを他の人に共有できます。

上記のURLは型定義の章で記載したコードになります。