軽量 Typescript IDE - Typescript コードをオンライン実行

複数ファイル編集、永続ワークスペース、実行環境別ライブラリ、共有、リアルタイム共同作業に対応した軽量オンライン IDE で Typescript を記述、実行、デバッグできます。

バージョン

🚀 183 合計実行 (183 今月)

🎯 あなたにぴったりのTypescriptコースを厳選

読み込み中…

🌀 この TypeScript オンライン実行ツールについて

CodeUtility TypeScript Executor は、ブラウザ上で直接 TypeScript のコードを書いて実行できます — コンパイラのセットアップ、Node.js のインストール、ローカル環境は不要です。安全なサンドボックス実行環境の中で、 TypeScript を JavaScript にコンパイルして実際に実行します。

この環境は現在 TypeScript 5.4 をサポートしており、デコレーター、型推論の改善、最新の ECMAScript への対応など最新の言語機能が使えます。

TypeScript を学習中でも、ユーティリティ関数のテストでも、型やインターフェースの実験でも、このツールならコードを素早くインタラクティブに記述・コンパイル・実行し、その場で結果を確認できます。

エディタやローカルのターミナルを行き来することなく、TypeScript の型システムを試したり、 TypeScript がどのように JavaScript にコンパイルされるかを検証したい開発者に最適です。

単なるコードランナーではありません

同じ実行環境で、複数ファイル対応エディター、分離された実行ターミナル、ランタイム別ライブラリ、永続ワークスペース、共有、リアルタイム共同作業を利用できます。

この実行環境の使い方

ランタイムを選択し、ファイルを開くか作成してコードを記述し、［実行］を選択します。出力はターミナルに表示されます。サインインしたユーザーは、ワークスペースにファイルを保存し、ライブラリをインストールして、共有を通じて共同作業できます。

バージョンを選択して現在のファイルを編集するか、ワークスペース内の別のファイルを開きます。
コードを実行し、求められた場合はターミナルに入力して、保存された実行履歴を確認します。
複数のコードスニペットが必要な作業では、ライブラリ、ワークスペースツール、共有、チャットを利用します。

コーディングを開始する

バージョン実行する前にランタイムを選択します。インストールされたライブラリは、選択した言語バージョンに属します。
「開いているファイル」には、開いていないテキストファイルがリストされます。1 つを選択すると、利用可能なエディタータブで開きます。
「実行」は、プログラムで使用可能なワークスペースを使用してアクティブなファイルを実行します。
Stop は、制限時間前に現在の実行を終了します。
詳細モードでは、ファイルエクスプローラーと移動可能でサイズ変更可能なターミナルを備えた IDE レイアウトが開きます。

ワークスペースとライブラリ

新しいファイルは、選択した親ディレクトリにファイルを作成し、エディタで開きます。
新しいフォルダーは、サポートされているネストの深さまでのディレクトリを作成します。
ファイルをアップロードすると、1 つ以上の安全なファイルがディレクトリに追加されます。
ダウンロードでは、ファイルまたは圧縮されたディレクトリがデバイスに保存されます。
コピーは、ワークスペースファイルまたはディレクトリを複製します。
[名前の変更] を実行すると、ファイル名が変更され、開いているタブと履歴が更新されます。
Move は項目を再配置します。ファイルやディレクトリもドラッグできます。
削除は、確認後に項目を削除し、開いているエディタータブを閉じます。
プリインストールされたライブラリには、このランタイムにすでに含まれているパッケージが表示されます。
Add Lib は、アカウントと選択したランタイム用のプライベートパッケージをインストールします。

ターミナルとサポート

実行履歴により、前と次の保存された出力が開きます。
実行サーバーとブラウザ Python の間で Python を切り替えて実行します。ブラウザ Python では、ワークスペースファイルやサーバーにインストールされたライブラリを使用できません。
出力をコピーすると、現在の端末テキストがコピーされます。
出力をクリアすると、確認後に保存されている実行出力がすべて削除されます。
Explain ではアクティブなコードを要約します。
[最近] では、最近の説明と結果が開きます。
設定により、フォント、テーマ、表示されるツールバーボタンが変更されます。

共有とコラボレーション

共有は、現在のファイル、ディレクトリ、またはワークスペース全体をスナップショットまたはライブワークスペースとして公開します。リンクへのアクセスと変更を保存できるユーザーを制御します。
ログには、共有ワークスペースに保存されたコラボレーターのアクションが記録されます。
チャットを共有すると、サインインした参加者はメッセージを送信したり、メンバーにメンションしたり、コードブロックを共有したり、オンラインまたは入力中のメンバーを確認したりできます。
ライブコラボレーションでは、コラボレーターのカーソルと保存されたファイルの更新が表示されます。表示専用ユーザーは、最新バージョンをロードすることも、一時的な編集を保存することもできます。

割り当てと制限

実行時間は、サーバーの実行ごとに 20 秒に制限されます。より早く終了したい場合は、「停止」を使用します。
ワークスペースストレージでは、サインインしているユーザーのワークスペースと言語ごとに、ファイル 100 個、ディレクトリ 100 個、合計 10 MiB が許可されます。
ファイルとフォルダーは、ファイルごとに 1 MiB、ネストされたディレクトリレベルは 5 に制限されます。コードによって生成されたファイルは、同じクォータに従います。
プライベートライブラリは、アカウントおよびランタイムごとにインストールされるパッケージが 10 個に制限されています。
共有スナップショットには、ファイルあたり 1 MiB、合計 2 MiB まで、最大 100 個のファイルを含めることができます。
共有の招待は、共有ごとに最大 25 人をサポートし、アクセス権と保存権限は個別に管理されます。
チャットの共有では、メッセージあたり 2,000 文字、共有あたり 10,000 メッセージが許可されます。
クォータの強制は、コードの実行中にも適用されます。ファイル数、サイズ、ストレージ、またはネストの制限を超える書き込みは安全に拒否されます。

知っておくと便利 信頼できるコードのみを実行し、パッケージをインストールしてください。実行は分離され制限されていますが、プログラムは強制クォータまで書き込み可能なワークスペース内のファイルを変更できます。

💡 初心者向け TypeScript 基本ガイド

1. 変数の宣言

TypeScript では let、const、および型注釈で静的型付けができます。

let x: number = 10;
const pi: number = 3.14;
let name: string = "Alice";
let isActive: boolean = true;

2. 条件分岐（if / switch）

if、else if、else で分岐します。switch は複数の値を扱う分岐に便利です。

let x = 5;
if (x > 0) {
  console.log("正の数");
} else if (x < 0) {
  console.log("負の数");
} else {
  console.log("ゼロ");
}

switch (x) {
  case 1:
    console.log("1");
    break;
  case 2:
    console.log("2");
    break;
  default:
    console.log("その他");
}

3. ループ

for、while、for...of を使って反復処理を行います。

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let i = 5;
while (i > 0) {
  console.log(i);
  i--;
}

4. 配列

配列は角括弧 [] で定義します。

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob"];
console.log(numbers[1]);

5. 配列の操作

push、splice、filter などの組み込みメソッドを使います。

let arr = [10, 20, 30];
arr.push(40);          // 末尾に追加
arr.splice(1, 1);      // 2番目の要素を削除
console.log(arr);

6. コンソール入出力

コンソールへの出力には console.log を使います。

const name: string = "Alice";
console.log("こんにちは、" + name);

7. 関数

引数や戻り値に型を付けて関数を定義します。

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 5));

8. マップ

キーと値の構造にはプレーンなオブジェクトや Map を使えます。

const m = new Map<string, number>();
m.set("Alice", 25);
console.log(m.get("Alice"));

9. 例外処理

try と catch でエラーを扱います。

try {
  throw new Error("問題が発生しました");
} catch (e) {
  console.error(e.message);
}

10. ファイル I/O（Node.js のみ）

ファイルの読み書きには Node.js の fs モジュールを使います。

import * as fs from "fs";

fs.writeFileSync("file.txt", "こんにちは、ファイル");
const content = fs.readFileSync("file.txt", "utf-8");
console.log(content);

11. 文字列操作

length、concat、includes などの文字列メソッドを使います。

let str = "こんにちは 世界";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("世界"));

12. クラスとオブジェクト

TypeScript はオブジェクト指向をサポートしています。

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(\`こんにちは、私は\${this.name}です\`);
  }
}

const p = new Person("Alice");
p.greet();