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をダウンロードしてインストールしましょう。

https://nodejs.org/

トップページには複数のボタンがありますが、「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本体をインストールします。ここで使うのが、Node.jsに付属しているnpm（エヌピーエム）という道具です。npmは「プログラムをインストールするためのアプリストア」のようなもので、文字で命令を入力してソフトを追加していきます。

まずは、Windowsならコマンドプロンプト、Macならターミナルを開きましょう。スタートメニューや検索から「cmd」「ターミナル」と入力すれば見つかります。黒い（または暗い）画面が出てきたら、そこに次のコマンドを入力して実行します。


npm install -g typescript

npm installは「ソフトをインストールする」という意味で、typescriptがインストールしたいソフトの名前です。-gは「パソコン全体（グローバル）にインストールして、どのフォルダからでも使えるようにする」という指定だと思っておけば大丈夫です。

実行すると、少し時間がかかりますが、英語のメッセージがいくつか流れて処理が終わります。エラーが出ていなければ、TypeScriptのインストールは完了です。きちんと入ったか確かめたい場合は、同じ画面で次のコマンドを試してみましょう。


tsc -v

このようにバージョン番号（例：5.x.x のような表示）が出てくれば成功です。これで、今後TypeScriptのファイル（.ts）を作成して、JavaScriptに変換していく準備が整いました。ここまでできていれば、「Hello World」を出力するための環境づくりはあと一歩です。

6. TypeScriptで「Hello World」を書いてみよう

それでは、いよいよTypeScriptで「Hello World」を画面に表示してみましょう。ここでは初めてのコードを書くことになるので、難しいことは考えずに「書いてみる」「実行してみる」という流れを体験することを目的に進めていきます。

まず、デスクトップなど扱いやすい場所に新しいフォルダを作成し、その中にhello.tsという名前のファイルを作りましょう。拡張子が「.ts」になっていれば、TypeScriptのファイルとして認識されます。

次に、そのhello.tsの中に下のコードを書いてみてください。


let message: string = "Hello World";  // 「Hello World」という文字を入れた変数
console.log(message);                // 画面に表示する命令

ここで登場するletは「変数」を作るときに使うキーワードです。変数とは、値を入れておくための“箱”のようなものだとイメージすると分かりやすいでしょう。そしてstringは「これは文字のデータですよ」とTypeScriptに伝える役割を持っています。

プログラミング未経験だと少し不思議に感じるかもしれませんが、TypeScriptではこのように「どんな種類の値を扱うのか」を明確に書くことで、後で間違いを防ぎやすくしています。最後のconsole.log()は、画面に内容を表示するための命令で、ここでは先ほど作ったmessageという変数をそのまま出しています。

これだけで最初のTypeScriptプログラムは完成です。とても短いコードですが、プログラミングの基本となる「変数を作る」「値を入れる」「結果を表示する」の3つがすべて含まれています。あとはこのファイルをトランスパイルして実行すれば「Hello World」が表示されます。

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の型があると安心感がありますね。」

先生

「型はミスを減らす助けになりますし、コードの読みやすさにもつながりますよ。今回学んだ基礎は、これからのステップでもずっと役に立ちます。」

生徒

「もっといろいろなコードを書いてみたくなりました！」

先生

「その意欲が一番大切です。楽しみながら学んでいきましょう。」

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptとはどんなプログラミング言語ですか？JavaScriptとの違いも知りたいです

TypeScriptとは、JavaScriptをベースにマイクロソフトが開発したプログラミング言語で、型を使って間違いを防ぎやすいのが特徴です。JavaScriptに型安全性を追加した強化版のような存在で、初心者でも扱いやすいメリットがあります。

初心者がTypeScriptを始めるとき、最初にやるべきことは何ですか？

まずはTypeScriptを動かすためにNode.jsをインストールし、次にVisual Studio Codeを入れて環境を整えます。その後、TypeScript本体をインストールすることで、初めてプログラムを書く準備が整います。

「Hello World」とは何ですか？なぜ最初に表示させるんですか？

「Hello World」とは、プログラミングの入門として最初に画面へ表示させるメッセージです。環境が整っているか確認でき、初心者が基本を理解しやすいため、多くの言語で最初の課題になっています。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。