【TypeScript】インストール方法や開発環境構築を徹底解説！

本記事では、TypeScriptにてWebアプリケーションを動作させる開発環境構築を解説します。

上記の目的を達成したい人におすすめです。

TypeScriptの開発環境に必要なもの

TypeScriptを利用するためには、以下の開発環境を整える必要があります。

ここでは、最低限の開発環境構築について解説していきます。

Node.jsは、JavaScriptを動かす実行環境になります。

Node.jsをインストールすることで、JavaScriptを実行するnodeコマンド、パッケージをインストールするnpmコマンド（Node Package Manager）が使えるようになります。

TypeScriptをインストールするためには、npmコマンドを使います。

また、TypeScriptをインストールするとTypeScriptをコンパイルするtscコマンドが使えるようになります。

さらに、プログラミング用のコードエディタであるVSCode（Visual Studio Code）は、コマンドを実行できるターミナルが付属しているため、編集したソースコードのコンパイル/実行をVSCode上で実施できます。

tscコマンドとnodeコマンド

ターミナルにてtscコマンドを実行すると、TypeScriptがコンパイルされJavaScriptファイル（.jsファイル）が生成されます。

それをnodeコマンドで実行するのが最もシンプルな使い方になります。

各コマンドの例となる書式は以下になります。

tsc app.ts
node app.js

tscコマンドには様々なオプションが用意されており、設定ファイルを利用することでアプリ開発が捗るよう設計されています。

Node.jsのインストール方法

公式サイトから該当するPC向けのインストーラーをダウンロードしてください。

• https://nodejs.org/ja/download

インストーラーをダウンロードできたら、適宜PCにてインストールを開始してください。

インストール手順として、初期画面が表示されたら「Next」をクリックしてください。

ライセンス同意画面では、「I accept the terms in the License Agreement」にチェックを付け、「Next」をクリックしてください。

インストール先では、適宜フォルダーの指定を実施したのち、「Next」をクリックしてください。

インストール内容の選択画面では、基本的にデフォルトで問題ないため、「Next」をクリックしてください。

インストール開始画面まできたら、「Install」をクリックしてください。

インストールが完了したら、「finish」をクリックしてインストーラーを終了します。

Node.jsのバージョン確認方法

ターミナルから以下のコマンドを実行すると、インストールされているNode.jsのバージョンを確認できます。

node -v

実際に、バージョンが表示されたらインストール完了です。

TypeScriptのインストール方法

ターミナルからnpmコマンドを実行すると、最新バージョンのTypeScriptがインストールされます。

npm install -g typescript@latest

以下のコマンドを実行すると、バージョンを確認できます。

tsc -v

実際に、TypeScriptのバージョンが表示されたら、インストール完了です。

TypeScriptにおすすめなテキストエディタ

プログラミング業務において、利用するエディタによってはエンジニアのパフォーマンスに影響が出ます。

近年では、AIによるプログラミングも業務効率化の一部を担い始めています。

ここでは、比較的に現役エンジニアが利用しているエディタを紹介します。

特に、有償化することによってプログラミング業務の効率化を図ることができます。

Visual Studio Code

本記事に後述していますが、システムエンジニアにおいて最もポピュラーなエディタが「Visual Studio Code」です。

Microsoftが提供する無料で利用できるオープンソースのIDEです。

Windows、Mac、Linuxに対応しており、TypeScriptで実装されています。

JetBrains IDE

JetBrains IDEは、JetBrains社が提供する有償化されたエディタシリーズです。

Windows、Mac、Linuxで利用でき、プログラミング言語ごとに最適化された個別のIDEが提供されています。

次にあげるIDEはTypeScriptにしっかり対応しています。

フロントエンド開発のみであれば、最も安い「WebStorm」で問題ありません。

また、無料版IntelliJ Community Edition(CE)がありますが、これはTypeScriptには対応していません。

Cursor

Cursorは、プログラミング業務によるアプリケーション開発を一部自動化/効率化できるAI搭載のエディタです。

Cursorの主な特徴は以下の3つです。

VSCodeをベースに開発されているため、基本的な表示画面や操作性は馴染みあるものになっています。

また、ChatGPTが搭載されているため、コード自動生成・自動でバック・GPTとペアプロが可能など、開発環境の拡張が実現できています。

VSCodeのインストール方法

VSCodeのパッケージをダウンロードして、自身のPCにインストールします。

以下のURLからVSCodeをダウンロードできます。

• https://code.visualstudio.com/

PCのOSに合ったパッケージの安定版（Stable）を選択してインストーラーをダウンロードします。

ダウンロードしたインストーラーを起動すると、使用許諾画面が表示されるため、「同意する」にチェックし「次へ」をクリックします。

追加タスクの選択画面では、必要なオプションを選んだら「次へ」をクリックします。

インストール準備の完了画面で「インストール」をクリックします。

インストールを終えたら、「完了」をクリックします。

これで、VSCodeのインストールが完了します。

ここまでがTypeScriptにおける最低限の開発環境構築になります。

そのため、今後の開発環境を充実させるために必要なパッケージや拡張機能などを追加することで効率的なアプリケーション開発を実現できます。

TypeScriptにおけるおすすめの開発環境

TypeScriptを学習あるいは利用する際、TypeScript自体を深く理解する必要があります。

しかし、それだけでは実務上不十分になってしまいます。

そもそもTypeScriptだけでなく、数多くの技術スタックを組み合わせ開発を進めるためです。

そのため、TypeScriptを理解しながら、取り巻くエコシステムも理解すると最適な開発環境を構築できます。

UIライブラリ・フレームワーク

基本的にHTML/CSS/JavaScriptを利用すれば、UIを持つWebアプリケーションを作れます。

ただし、複雑なUIに対してJavaScriptのみで開発するのは作業効率が悪いです。

そのため、JavaScriptではUI作成がしやすいライブラリ/フレームワークが数多く存在します。

ライブラリ/フレームワークを活用すると、少量のコード実装や保守性が高いコードを記述できるメリットにつながります。

型定義ファイル

型定義ファイルは、ライブラリの型情報を記述したファイルです。

TypeScriptの強みとして、型チェックによりプログラムの不具合が発見できます。

しかし、JavaScriptのみのライブラリではちぇえく材料にする型情報が付いていません。

ライブラリと別で型定義ファイルを入手すれば、TypeScriptで型チェックができて保守性につながります。

実行環境

JavaScriptの実行環境は、ブラウザとサーバーの種類はあります。

レンダリングエンジン内部にあるJavaScriptエンジンにて評価/実行されます。

また、サーバーの実行環境はNodeやDenoが存在します。

Nodeは現在最も有名なJavaScript実行環境であり、DenoはTypeScriptのまま実行できる注目を集める環境です。

開発ツール

おそらく開発ツールは最も利用できるパターンが多く、何を選べばよいか初心者にとって迷うポイントです。

以下の項目をポイントに自身の環境を最適化していきましょう。

多くの開発ツールで迷ってしまいますが、開発環境を充実することで間違いなく開発効率が高まります。

TypeScriptを取り巻くエコシステム

上記では、TypeSciptの開発環境構築について解説しました。

しかし、TypeScriptを使いこなすにはTypeScriptを取り巻くエコシステムを理解する必要があります。

概要として、TypeScriptに関連するエコシステムを紹介します。

言語

JavaScriptの言語仕様を定義するのがECMAScriptになります。

また、ブラウザ関連のJavaScript仕様を定義するのがWHATWGになります。

さらに、XML構文を含むJSX, TSXといった言語もあります。

そのため、TypeScriptの仕様ではECMAScript/WHATWG/JSX/TypeScript固有、それぞれの仕様が含まれていることを理解しておきましょう。

コードエディタ・IDE

テキストコードエディタやIDEは、プログラムを記述/編集/実行/テスト/保存する際に利用されるソフトウェアになります。

特に、利用するコードエディタによってプラグイン等の拡張機能が用意されており、開発環境を整備することができます。

プログラミング環境を構築する際、無償で利用できるVisual Studio Code（VSCode）が一般的に利用されています。

コード品質

コードは、コードフォーマッターやリンターを利用することで品質を高められます。

以下は、代表的なツールになります。

コードフォーマッター（code formatter）

コードフォーマッター（code formatter）は、字下げスタイルやインデントを自動整形するツールです。

コーディングを統一するためのルールを策定できます。

一般的に利用されるのが、Prettier（プリティア）です。

VSCodeの拡張機能追加から利用することができます。

リンター（linter）

リンター（linter）は、コードがコーディング規約に沿っているか自動でチェックするツールです。

コーディング規約に則ったコードは保守性を高められます。

一般的に利用されるのが、ESLint（イーエスリント）です。

こちらもVSCodeの拡張機能追加から利用することができます。

パッケージ管理

パッケージ管理は、TypeScript（JavaScript含む）のライブラリを管理するパッケージマネージャーツールを利用します。

一般的に広く利用されるのが、npmやyarnになります。

また、npmはNode Package Managerの略になります。

ビルドツール

ビルドツールはコード変換や結合などアプリケーション開発時の手続きを効率化し、生産性向上を目指します。

例えばVite（ヴィート：モジュールハンドラー）は次世代フロントツールと呼ばれ、アプリケーション開発時に必要なライブラリ等を含んだプロジェクト構築や管理を実現します。

また、tsc（トランスパイラー）はTypeScriptからJavaScriptへトランスパイル（コード変換）を実現するツールです。

ここでは、Viteを利用してTypeScript×Reactの開発環境構築を後述しています。

デバッグツール

デバッグツールは、アプリケーション開発のプログラム実行時に動作確認を行うツールです。

例えば、Google Chrome/Mozilla Firefox/Microsoft Edgeなどのブラウザにて「React Developer Tools」が拡張機能として用意されています。

React Developer Toolsは、Reactコンポーネントの状態をブラウザの開発者画面から確認できる拡張機能です。

実際に、開発アプリの挙動やデータベース操作、ブラウザ上の値受け渡しが正常なのかなど、様々なテストの確認として利用されます。

ViteによるTypeScript&Reactプロジェクト作成

ここでは、フロントエンド開発のビルドツールであるViteを利用してTypeScript×Reactのプロジェクトを作成します。

以下、ターミナルアプリを起動しコマンドを実行します。

npm crative vite

Node.jsをインストールすると、同梱されているパッケージ管理ツールのnpmもインストールされます。そのため、CLI（コマンドラインインターフェース）上でnpmコマンドを利用できます。

creativeコマンド実行後、プロジェクト名を入力しEnterを押下します。

次に、フレームワークの選択画面が表示されるため、「React」を選択します。

次に、言語選択画面が表示されるため、「TypeScript」を選択します。

選択した項目に沿って開発環境が自動的に構築されたら、Viteの指示に従ってプロジェクトを起動してみましょう。

cd vite-project
npm install
npm run dev

以下は、起動後の画面になります。

開発用のローカルサーバーが起動したタイミングでo + EnterあるいはWebブラウザで割り当てられたURLにアクセスするとReactアプリケーションが確認できます。

開発用のローカルサーバーを停止する場合は、ターミナルにてq + Enterを入力してください。

TypeScriptの欠点とは

TypeScriptを利用する上で、TypeScriptで解決できない場面を把握しておくことは重要です。

開発時にTypeScriptの欠点を理解することで、改善策が立てやすいからです。

TypeScriptの言語特性からアプローチできるかどうかを知っておきましょう。

上記の各欠点をさらに詳しく理解したい人は、「【TypeScript】言語の難易度やJavaScriptと比較して徹底解説！」を一読ください。

あわせて読みたい

【TypeScript】言語の難易度やJavaScriptと比較して徹底解説！ TypeScriptは、プログラミング言語の中で静的型システムを備えたものになります。 フロントエンド言語としてJavaScriptが存在しますが、JavaScriptを一部強化するために…

TypeScriptの学習難易度

TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。

つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。

また、学習難易度は比較的高めですが、利用するべきメリットも存在します。

さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。

あわせて読みたい

【TypeScript】難しい理由と解決策を徹底解説！ 昨今、トレンドはあれど様々なプログラミング言語が存在し利用されています。 また、議題に上がるTypeScriptに対して「難しい・わかりづらい」などの意見も目にします。…