TypeScriptで「Hello World」を出力する手順と解説
生徒
「プログラミングって難しそうですが、TypeScriptを始めるときは何からやればいいですか？」
先生
「まずは、パソコンにTypeScriptを使える環境を整えて、『Hello World』という文字を出すところから始めましょう。」
生徒
「『Hello World』って何ですか？」
先生
「プログラミングでは、最初に『Hello World』というメッセージを表示させるのが入門の第一歩なんです。基本の流れを一緒に学びましょう！」
1. TypeScript（タイプスクリプト）とは？
TypeScript（タイプスクリプト）は、JavaScript（ジャバスクリプト）を元にしたマイクロソフトが開発したプログラミング言語です。JavaScriptに型（たとえば「これは数字」「これは文字」など）を付け加えられるのが特徴です。
初心者の方でも安心して使えるように設計されていて、間違いを減らせるようになっています。
2. TypeScriptを使うための準備
TypeScriptでプログラミングするには、まずパソコンにいくつかのツールを入れる必要があります。
- Node.js（ノードジェイエス）：TypeScriptを動かすのに必要な環境です。
- Visual Studio Code（VSCode）：コードを書くための無料のソフトです。
- TypeScript本体：コマンドでインストールします。
順番にやり方を見ていきましょう。
3. Node.jsをインストールしよう
以下のサイトから、Node.jsをダウンロードしてインストールします。
「LTS」と書かれている安定版を選びましょう。ダウンロードしたら、画面の指示に従ってインストールしてください。
4. VSCodeをインストールしよう
以下のサイトから、Visual Studio Code（通称：VSCode）をダウンロードしてインストールします。
https://code.visualstudio.com/
インストール後は、日本語化の拡張機能を追加すると使いやすくなります。
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の型があると安心感がありますね。」
先生
「型はミスを減らす助けになりますし、コードの読みやすさにもつながりますよ。今回学んだ基礎は、これからのステップでもずっと役に立ちます。」
生徒
「もっといろいろなコードを書いてみたくなりました！」
先生
「その意欲が一番大切です。楽しみながら学んでいきましょう。」
