先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを勉強し始めたんですが、どんなツールを使えばコードを書きやすくなるんですか？」

先生

「それなら、Visual Studio Code（VS Code）という無料のエディタがおすすめです。初心者でも使いやすく、TypeScriptの設定も簡単ですよ。」

生徒

「どうやって設定すれば、TypeScriptを快適に書けるようになりますか？」

先生

「それでは、Visual Studio CodeでTypeScriptを書くための基本設定をわかりやすく紹介していきましょう！」

1. Visual Studio Code（VS Code）とは？

Visual Studio Codeは、マイクロソフトが提供している無料のコードエディタです。WindowsやMac、Linuxでも使うことができ、TypeScriptをはじめ、さまざまなプログラミング言語に対応しています。

特に初心者におすすめのポイントは、自動補完・文法チェック・拡張機能などが簡単に使えることです。

2. VS Codeのインストール方法

まずは、以下の手順でVisual Studio Codeをインストールしましょう。

公式サイトにアクセスします。
「Download for Windows」や「Mac用」など、自分のパソコンに合ったボタンをクリックします。
ダウンロードしたファイルをダブルクリックして、画面の指示に従ってインストールを完了させます。

3. TypeScriptの環境を整える

次に、TypeScriptを使うための設定を行います。まずは、パソコンにTypeScriptをインストールしましょう。これは、プログラミング言語としてTypeScriptを使うための準備です。

VS Codeのターミナル（黒い画面）を開いて、下記のコマンドを入力します。


npm install -g typescript

※npm（エヌピーエム）は、JavaScriptやTypeScriptのツールを管理するための仕組みです。

4. 拡張機能でTypeScriptを快適にする

VS Codeには、機能を追加できる「拡張機能（エクステンション）」という仕組みがあります。以下の拡張機能を入れることで、TypeScriptの開発がとてもスムーズになります。

ESLint：コードの書き方をチェックしてくれます
Prettier：自動でコードをきれいに整えてくれます
TypeScript Hero：インポート文を自動で補完してくれます

拡張機能をインストールするには、左側の「四つのブロックのマーク」をクリックし、名前で検索して「インストール」ボタンを押すだけです。

5. tsconfig.jsonを作成して設定する

tsconfig.jsonとは、TypeScriptの設定ファイルです。どのようにコンパイル（変換）するかを決めるためのファイルです。

ターミナルで以下のコマンドを入力すると、自動でこのファイルが作られます。


tsc --init

この中でよく使われる設定は以下の通りです。


{
  "compilerOptions": {
    "target": "es6", // 出力するJavaScriptのバージョン
    "strict": true,  // 厳格な型チェック
    "outDir": "./dist" // 出力ファイルの保存場所
  }
}

6. PrettierとESLintの連携でコードを自動整形

Prettier（プリッター）を使うと、保存時にコードの見た目を自動で整えてくれます。インデント（空白）や改行を統一してくれるため、読みやすさがアップします。

さらにESLintと組み合わせると、書き方のルールまでチェックしてくれるので、初心者でも「正しい書き方」が身につきます。

設定ファイルは次のようになります。


// .eslintrc.json の一例
{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser"
}

7. 実際にTypeScriptを書いてみよう

設定ができたら、いよいよTypeScriptのコードを書いてみましょう！ファイル名は main.ts にして、次のようなコードを書いてみてください。


let name: string = "たろう";
console.log("こんにちは、" + name + "さん！");

保存して、ターミナルで以下のように入力して変換（コンパイル）します。


tsc main.ts

すると、同じフォルダ内に main.js というJavaScriptファイルができます。

8. 保存時に自動でTypeScriptを変換する方法

毎回ターミナルでコマンドを打つのは大変ですよね。そんなときは、ウォッチモードを使いましょう。

以下のコマンドを使うと、ファイルを保存するたびに自動で変換してくれます。


tsc --watch

これで、保存するだけでJavaScriptに変換されるので、効率よく学習ができます。

まとめ

Visual Studio Codeを使ったTypeScriptの開発環境づくりは、初心者にとって学びやすく、効率のよいプログラミングにつながる大切なステップです。ここまでの記事では、VS Codeの特徴やインストール手順、TypeScriptの環境構築、拡張機能の設定方法、tsconfig.jsonの作成、ESLintとPrettierによるコード整形、そして実際のTypeScriptファイルの作成手順などを順を追って整理してきました。TypeScript学習を始めた人がつまずきやすい「設定」や「準備」の部分を丁寧に理解することで、自分の書くコードがどのように動作し、どのように管理されるのかを自然に意識できるようになります。VS CodeはTypeScriptと非常に相性が良く、コード補完・型チェック・デバッグといったプログラミングに欠かせない機能が豊富に備わっています。

特に拡張機能の活用は、開発効率を大きく向上させます。ESLintやPrettierのようなツールを使うことで、一定のルールに従った読みやすいコードを維持できるため、初心者でも迷うことなくきれいなソースコードを作成できます。また、TypeScript Heroのようにインポートを自動で補完してくれるツールは、プロジェクトの規模が大きくなるほどその便利さを実感できるでしょう。これらの機能を組み合わせることで、より整った環境で学習を進められ、TypeScriptの本質的な理解にもつながります。

さらに、tsconfig.jsonを設定することで、型チェックの厳しさや出力先フォルダ、コンパイル対象などを柔軟に調整でき、プロジェクト全体の管理がしやすくなります。ウォッチモードを利用すれば、保存した瞬間に自動でコンパイルが走り、学習スピードも飛躍的に上がります。こうした設定は初心者には難しそうに思えるかもしれませんが、一つ一つ理解していくことで、より深くTypeScriptの仕組みや動作を学べる土台となります。特に、JavaScriptとの違いや型情報の扱いについて理解が深まるにつれて、VS Codeのサポートがどれほど心強いかがよくわかるようになります。

サンプルプログラム：VS Code設定後のTypeScript実行例


class EditorGuide {
    title: string;
    createdAt: string;
    isActive: boolean;

    constructor(title: string, createdAt: string, isActive: boolean) {
        this.title = title;
        this.createdAt = createdAt;
        this.isActive = isActive;
    }

    getInfo(): string {
        return `ガイド名: ${this.title} / 作成日: ${this.createdAt} / 公開状態: ${this.isActive}`;
    }
}

const guide = new EditorGuide("VS Codeで学ぶTypeScript", "2024-01-01", true);
console.log(guide.getInfo());

このように、VS Codeの環境を整えることで、クラス構文や型注釈を使ったTypeScriptコードを快適に書けるようになります。コード補完やエラー表示がリアルタイムで反映されるため、書いた内容が正しく動作しているかがわかりやすく、学習効率も大幅に向上します。設定を整えたあとは、実際に手を動かしながらTypeScriptの型、関数、クラスなどを積極的に書いていくことで、理解がより深まり定着します。エディタとTypeScriptの特性を組み合わせることで、実践的なプログラミングスキルが身につき、今後のステップアップにも大いに役立つでしょう。

先生と生徒の振り返り会話

生徒「先生、VS Codeの設定ってすごく大切なんですね。最初はむずかしそうに感じていました。」

先生「確かに設定項目は多いですが、一度整えてしまえば毎日の開発がとても楽になります。TypeScriptとの相性も抜群ですよ。」

生徒「ESLintやPrettierを入れると、コードが自動できれいになるのが便利でした！」

先生「その通りです。書き方のクセも直るので、初心者こそ導入すると効果が大きいですね。」

生徒「tsconfig.jsonを作る意味もよく分かりました。プロジェクトの大事な設定なんですね。」

先生「そうです。ファイル構成や型チェックの精度など、全体の動作をコントロールできる重要なファイルです。」

生徒「ウォッチモードもすごく便利でした。保存するだけで変換されるなんて驚きです！」

先生「実際の現場でもよく使う機能ですよ。効率よく学習を進めるためにもぜひ活用してください。」

生徒「今日学んだ設定を使って、これからたくさんTypeScriptを書いてみます！」

先生「その意気です。環境が整えば、あとは積極的に手を動かすことが成長への近道ですよ。」