TypeScriptで「Hello World」を出力する手順と解説
生徒
「プログラミングって難しそうですが、TypeScriptを始めるときは何からやればいいですか？」
先生
「まずは、パソコンにTypeScriptを使える環境を整えて、『Hello World』という文字を出すところから始めましょう。」
生徒
「『Hello World』って何ですか？」
先生
「プログラミングでは、最初に『Hello World』というメッセージを表示させるのが入門の第一歩なんです。基本の流れを一緒に学びましょう！」
1. TypeScript（タイプスクリプト）とは？
TypeScript（タイプスクリプト）は、JavaScript（ジャバスクリプト）をベースにマイクロソフトが開発したプログラミング言語です。JavaScriptに型（たとえば「これは数値」「これは文字列」などのデータの種類）を追加できることが最大の特徴で、プログラムの間違いを事前に見つけやすくしてくれます。
特にプログラミング初心者の方にとって「どんな値が入るのか」を明確にできるのは大きな安心材料です。TypeScriptは、書いたコードが正しいかどうかをチェックしてくれるため、後でエラーに悩まされる可能性がぐっと減ります。
とても簡単な例として、次のようなコードを見てみましょう。
let userName: string = "太郎"; // これは文字列
// userName = 123; // ❌ 数字を入れようとするとエラーになります
console.log("こんにちは、" + userName + "さん！");
このように、TypeScriptでは変数に「これは文字しか入りません」と指定できるため、間違った使い方をするとすぐに警告してくれます。初心者でも安心して始められる言語として、とても人気があります。
2. TypeScriptを使うための準備
TypeScriptでプログラミングを始めるためには、いきなりコードを書くのではなく、まずは「道具」をそろえるところからスタートします。料理をするときに包丁やまな板が必要なように、TypeScriptにも動かすための環境や、コードを書くためのソフトが必要になります。
- Node.js（ノードジェイエス）：TypeScriptやJavaScriptを実行するための土台となる環境です。これが入っていないと、あとで書くプログラムを動かすことができません。
- Visual Studio Code（VSCode）：プログラムを書くためのノートのようなものです。文字を入力するだけでなく、色分けや補完機能でコードを読みやすくしてくれるので、初心者でも間違いに気づきやすくなります。
- TypeScript本体：実際にTypeScriptという言語を使えるようにするためのソフトです。コマンドを使ってインストールし、.tsファイルをJavaScriptに変換するときに活躍します。
これらはすべて無料で利用でき、一度準備してしまえば今後の学習でもずっと使い続けることができます。「聞き慣れない名前ばかりで不安…」という方も、次の章から順番にやることを説明していくので大丈夫です。ここではまず、「Node.js」「VSCode」「TypeScript本体」の3つをそろえれば、TypeScriptで「Hello World」を出力する準備が整う、とイメージしておきましょう。
3. Node.jsをインストールしよう
TypeScriptを動かすには、まず土台となる環境であるNode.jsを入れておく必要があります。Node.jsは、ブラウザの外でJavaScriptやTypeScriptを実行できるようにしてくれるソフトで、Windows・Macどちらでも無料で利用できます。
以下の公式サイトから、Node.jsをダウンロードしてインストールしましょう。
トップページには複数のボタンがありますが、「LTS」と書かれている安定版を選ぶと安心です。自分のOSに合ったインストーラーをクリックし、ダウンロードしたファイルをダブルクリックして、画面の指示どおりに「Next」や「同意する」を押して進めていけばインストールは完了します。
インストールできたか確かめたいときは、コマンドプロンプトやターミナルを開いて次のコマンドを実行してみてください。
node -v
このようにバージョン番号（例：v20.0.0 のような表示）が出れば、Node.jsのインストールは成功です。ここまでできれば、次のステップでTypeScriptの開発環境を整える準備がしっかり整ったことになります。
4. VSCodeをインストールしよう
次は、TypeScriptのコードを書くためのソフトであるVisual Studio Code（VSCode）を用意します。VSCodeはマイクロソフトが提供している無料のエディタで、プログラム用の高機能なメモ帳のようなイメージです。文字を入力するだけでなく、キーワードごとに色分けしてくれたり、入力候補を表示してくれたりするので、プログラミング未経験の方でもコードが読みやすくなります。
まずは公式サイトにアクセスして、VSCodeをダウンロードしましょう。
https://code.visualstudio.com/
サイトを開くと、お使いのパソコン（Windows / Mac / Linux）に合わせたダウンロードボタンが表示されます。そのボタンをクリックしてインストーラーをダウンロードし、ダウンロードしたファイルをダブルクリックして画面の指示に従って進めていけば、特に難しい設定をしなくてもインストールが完了します。
インストールが終わったら、VSCodeを起動してみましょう。最初は英語表示になっている場合がありますが、左側の「拡張機能」から日本語化パックを追加することで、メニューや表示を日本語に切り替えることができます。日本語表示にしておくと、設定やメニュー内容が理解しやすくなり、TypeScriptの学習もスムーズに進められます。
VSCodeは、フォルダごと開いてファイルを管理できるのも便利なポイントです。後で作成するTypeScriptファイル（hello.tsなど）も、このVSCodeを使って編集していきます。まずは「TypeScriptを書く場所を用意するための道具」として、VSCodeをインストールしておきましょう。
5. TypeScriptをインストールする
パソコンにNode.jsが入ったら、次にTypeScriptをインストールします。コマンドプロンプトやターミナルを開いて、以下のコマンドを入力してください。
npm install -g typescript
-gは「グローバルにインストールする」という意味です。これでパソコン全体でTypeScriptが使えるようになります。
6. TypeScriptで「Hello World」を書いてみよう
それでは、いよいよTypeScriptで「Hello World」を出力してみましょう！
まず、デスクトップなどに新しいフォルダを作って、その中に「hello.ts」という名前のファイルを作成します。
そのファイルに以下のコードを書きましょう。
let message: string = "Hello World";
console.log(message);
letは変数（へんすう）を作るキーワードです。stringは「文字列（もじのならび）」を意味します。console.logは、画面に文字を表示する命令です。
7. TypeScriptファイルをJavaScriptに変換する
TypeScriptで書いたコードは、そのままでは実行できません。JavaScriptに変換（へんかん）してから使います。この作業を「トランスパイル」といいます。
先ほど保存した「hello.ts」があるフォルダを、VSCodeで開いてください。
そして、ターミナルを開いて、次のコマンドを入力します。
tsc hello.ts
すると、「hello.js」というファイルが自動的に作られます。これがJavaScriptに変換されたファイルです。
8. JavaScriptファイルを実行してみよう
今作成された「hello.js」をターミナルで実行してみましょう。
以下のコマンドを入力します。
node hello.js
すると、下のような結果が表示されるはずです。
Hello World
これでTypeScriptの基本的な使い方である「Hello World」の出力ができました！
9. よくあるエラーと対処法
プログラミング初心者がよくつまずくポイントを紹介します。
- コマンドが見つからない：
「'tsc' は内部コマンドまたは外部コマンドとして認識されていません」と表示されたら、TypeScriptのインストールに失敗している可能性があります。もう一度npm install -g typescriptを実行してください。 - ファイル名の間違い：
hello.tsというファイル名を入力ミスしていないか確認しましょう。 - 保存していない：
VSCodeでコードを変更した後、保存し忘れると変更が反映されません。必ず保存しましょう。
まとめ
TypeScriptを使った「Hello World」の手順を学んできたことで、初心者の方でもプログラミングの入り口に立てるようになりました。ここまでの流れを振り返ってみると、Node.jsを用意してVSCodeをインストールし、TypeScriptを導入して最初のコードを書き、トランスパイルして実行するという一連の工程は、実際の開発現場でも頻繁に行われる基本的で大切な作業ばかりでした。とくに、型の存在によってエラーを事前に防ぎやすいという特徴は、より安心してプログラミングを学びたい人にとって心強いものになります。そして、TypeScriptの魅力は単にJavaScriptを強化するだけでなく、プロジェクト全体を整理しやすくし、より複雑なアプリケーションを安全に作れるという点にもあります。今回の学習を通して、一つひとつの操作に対する理解が深まり、単に手順を覚えるだけでなく、なぜその手順が必要なのかまで理解できるようになったはずです。こうした積み重ねは後の学習で必ず役立つので、今後も小さな一歩を確実に踏みしめていきましょう。 また、TypeScriptの「Hello World」を出力する流れは、ファイルを作成してコードを書き、コンパイルして実行するという、どのプログラミング言語にも共通する基本的な構造を持っています。そのため、この手順に慣れておけば、ほかの言語を扱う場面でも応用できる考え方が自然と身につきます。とくに、型を使って変数の役割を明確にし、ログ出力で結果を確認するというスタイルは、初心者がコードを理解するうえで非常に効果的です。疑問を一つずつ解消しながら作業を進めれば、最初は難しそうに感じる部分も徐々に馴染んでいきます。さらに、今回の内容を実際に手を動かして試すことで、ファイルの作成方法やコマンドの実行方法など、たくさんの学びが自然と身についていきます。 そして、トランスパイルという工程はTypeScriptの大きな特徴のひとつです。TypeScriptで記述したコードをJavaScriptに変換して実行するという流れは、最初は少し複雑に見えるかもしれませんが、仕組みを理解してしまえばとてもシンプルです。この仕組みを知ることで、実行できるJavaScriptと開発を便利にするTypeScriptの役割の違いも理解できるようになります。今回の学習でエラーが起きたときの対処方法も紹介しましたが、エラーを見ながら原因を探し、落ち着いて解決する力はプログラミングでは必ず必要になります。初心者のうちからこれを経験しておくことで、後々の成長にも大きく影響します。 最後に、今回扱った知識はTypeScriptを学ぶうえでの土台となる大切な内容ばかりです。環境構築の方法、TypeScriptの基本的な書き方、トランスパイルの仕組み、JavaScriptとして実行する手順など、どれも今後の開発に欠かせない要素です。とくに、ファイルを作成してコードを記述し、コンパイルして実行するという流れを何度も繰り返すことで、自信をもってコードを書けるようになります。今回の経験を生かして、今後はもっと複雑な処理にも挑戦し、TypeScriptの便利さをさらに感じていきましょう。
サンプルコードで振り返り
let message: string = "TypeScriptの学習を続けよう";
console.log(message);
生徒
「TypeScriptを使った『Hello World』の流れがよくわかりました。最初は難しそうでしたが、順番にやれば意外と簡単ですね。」
先生
「そうなんです。環境を整えて、コードを書いて、トランスパイルして実行するという基本を覚えるだけで、大きな一歩になりますよ。」
生徒
「ファイルを作ったり、コマンドを実行したりする理由も理解できました。TypeScriptの型があると安心感がありますね。」
先生
「型はミスを減らす助けになりますし、コードの読みやすさにもつながりますよ。今回学んだ基礎は、これからのステップでもずっと役に立ちます。」
生徒
「もっといろいろなコードを書いてみたくなりました！」
先生
「その意欲が一番大切です。楽しみながら学んでいきましょう。」
この記事を読んだ人からの質問
