TypeScriptのREPLで対話的にコードを書く方法(ts-node)
生徒
「TypeScriptをすぐ試せる方法ってあるんですか?いちいちファイル作って保存するのが面倒で…」
先生
「そんなときには、ts-nodeというツールを使って、REPLという対話式の環境でTypeScriptをすぐに試すことができますよ。」
生徒
「REPLって何ですか?難しそう…」
先生
「大丈夫です。REPLは『入力したコードをその場で実行して結果を返す仕組み』です。今から一緒にやってみましょう!」
1. REPL(レプル)とは?
REPLとは、Read(読み込む)、Eval(評価する)、Print(出力する)、Loop(繰り返す)の頭文字をとった略語です。簡単にいうと、入力したコードをその場ですぐに試すことができる仕組みです。
たとえば、電卓のように「2 + 3」と打てばすぐに「5」と返してくれる、そんな感覚でコードを実行できます。
TypeScriptは通常、コンパイルしてから実行する言語ですが、ts-nodeを使えば、REPL環境でTypeScriptをすぐに実行できます。
2. ts-nodeとは?
ts-nodeは、TypeScriptのコードを直接実行できるツールです。通常はTypeScriptをJavaScriptに変換(コンパイル)してから実行しますが、ts-nodeならその手間なしにすぐ実行できます。
特に、REPL(対話式の実行環境)として使えば、1行ごとにTypeScriptのコードを試すことができ、学習やデバッグにとても便利です。
3. ts-nodeのインストール方法
まずは、Node.js(ノードジェイエス)をパソコンにインストールしておく必要があります。Node.jsとは、JavaScriptやTypeScriptを実行するための環境です。
Node.jsをインストールしたら、次にts-nodeをインストールします。コマンドプロンプトやターミナルで次のコマンドを入力してください。
npm install -g ts-node typescript
npm(エヌピーエム)は、Node.jsに付属しているパッケージ管理ツールです。-gはグローバルインストールを意味します。
4. ts-node REPLを起動する方法
ts-nodeがインストールできたら、REPLモードを起動してみましょう。次のコマンドを入力します。
ts-node
これだけで、すぐにTypeScriptのREPLモードが起動します。画面が切り替わり、>と表示されれば準備完了です。
5. TypeScriptのコードをREPLで試してみよう
起動したら、すぐにTypeScriptのコードを試せます。たとえば、次のように入力してみましょう。
let name: string = "Taro";
console.log("こんにちは、" + name + "さん");
すると、次のような結果がすぐに表示されます。
こんにちは、Taroさん
このように、ファイルを作らなくても、すぐにTypeScriptのコードを実行できます。
6. 数値や型のチェックも簡単!
たとえば、数値の計算や型の確認などもすぐにできます。次のような操作を試してみましょう。
let age: number = 18;
age + 2
20
また、TypeScriptの特徴である型チェックも、REPLの中でしっかり行われます。
let flag: boolean = true;
flag = "hello" // エラーになる
[eval].ts:2:8 - error TS2322: Type '"hello"' is not assignable to type 'boolean'.
7. よく使うコマンド
REPLを使っていると、以下のようなコマンドを覚えておくと便利です。
.exit… REPLを終了する.editor… 複数行のコードをまとめて入力できるモードに切り替えるCtrl + Cを2回 … 強制終了
8. ts-node REPLを使うメリット
ts-nodeのREPLを使えば、TypeScriptのコードをすぐに書いて、すぐに結果を見られます。プログラムがちゃんと動くかどうか、その場で試せるので、初心者の方にとってとても安心です。
特に、ファイルの保存や準備が面倒と感じる方にとって、この方法はとても効率的です。学習中の確認作業にもピッタリです。
まとめ
TypeScriptの学習において、対話式でコードを実行できるREPL環境はとても心強い味方になります。とくに、ふだんTypeScriptを書くときはファイルを作成してコンパイルし、JavaScriptに変換してから実行するという流れを踏みますが、学習の最初の段階やちょっとした動作確認のときには、その手順が負担になることがあります。そこで役に立つのが、記事の中で解説したts-nodeを使った対話型実行環境です。REPLを通じて、変数の動きや型の確認、文字列の連結、数値計算、条件分岐などをすぐに試せるため、基本的なTypeScript文法を短い時間で理解しやすくなります。
また、REPLの画面に現れる「>」というプロンプトに向かってコードを書き込むだけで、すぐに結果が表示される快適さは、TypeScriptの特徴である「型によるエラー検出」を体感するうえでも非常に効果的です。型の違いによるエラーが即座に表示されるため、間違いに早く気づけるだけでなく、「どうしてエラーになるのか」「どの型で合わせるべきか」という理解も自然と深まっていきます。型の重要性を実感しながら学べるという点は、REPLでTypeScriptを扱う大きな魅力といえるでしょう。
さらに、REPLでは複数行入力用の.editorモードを使えるため、少し長めのコードでもその場でまとめて書くことができ、クラスや関数を使ったテストも簡単に行えます。たとえば、オブジェクト指向の書き方やメソッドの動作確認などもREPLで行えるため、TypeScript全体の理解につながります。以下のサンプルコードでは、今回学んだ流れを思い出しながら、簡単なクラスや変数の操作をREPL風に試せるようにまとめてあります。
ふりかえり用サンプルプログラム
class ReplSample {
title: string;
count: number;
logs: string[];
constructor(title: string, count: number) {
this.title = title;
this.count = count;
this.logs = [];
}
updateCount(num: number) {
this.count += num;
this.logs.push("現在のカウントは " + this.count + " です");
}
showAll() {
console.log("タイトル:", this.title);
console.log("カウント:", this.count);
console.log("ログ一覧:", this.logs);
}
}
let sample = new ReplSample("れぷる学習", 5);
sample.updateCount(3);
sample.updateCount(7);
sample.showAll();
このミニサンプルでは、TypeScriptのクラス構文、プロパティの型指定、メソッドの動作確認、配列への追加、コンソール出力といった基本的な操作を一度にまとめています。REPLに貼り付けて実行すれば、数値の変化や文字列の動きがすぐに確認でき、TypeScriptの型がどのように働いているのか、より直感的に理解できるはずです。 また、REPLは短時間で試行錯誤できるため、型推論の仕組みや、引数の型の違いによるエラー、条件式の動作など、TypeScriptならではの特性を身につけるのにとても相性が良い環境です。普段の学習だけでなく、小さなアイデアの検証や、ライブラリの使い方を素早く理解したいときなどにも役立ちます。プログラムを書いては試し、また書いては試すという流れが自然に身につくと、もっと複雑な構文を学んだときも効率よく理解できるようになります。 それでは最後に、今回の内容をより深く定着させるために、先生と生徒の振り返り会話を読んでいきましょう。
生徒
「REPLって名前だけ聞くと難しそうでしたけど、実際に使ってみるととても便利ですね!すぐにコードを入力して、そのまま結果が出るのが気持ちよかったです。」
先生
「そうですね。REPLは学習の段階でも実務でも役に立ちます。TypeScriptは型の仕組みがしっかりしているので、REPLでエラーを確認しながら学ぶと理解が格段に早くなりますよ。」
生徒
「たしかに、間違えて違う型を入れたときにすぐエラーが出てくれるのが助かりました。どう直せばいいかも分かりやすかったです。」
先生
「型の力を実感できたようでよかったです。REPLなら、letを使った変数の書き換えや、配列の操作、クラスの動作確認など、いろいろな書き方をすぐに試せますからね。」
生徒
「複数行をまとめて書ける.editorモードも便利ですね!小さなプログラムならREPLだけで全部確認できそうです。」
先生
「その通りです。TypeScriptの練習にも向いていますし、動作確認にもぴったりです。これから複雑な型や関数の書き方を学んだときにも、REPLを活用すると理解が深まりますよ。」
生徒
「今日の内容でTypeScriptを試すのがもっと楽になりました!ありがとうございます!」