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

2024年1月31日2025年4月1日

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

本記事の要点

TypeScriptを利用してアプリケーション開発を実施したい人
TypeScriptの開発環境構築が分からない人
自身のペースで開発環境を構築したい人

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

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

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

開発環境構築のポイント

Node.jsのインストール
TypeScriptのインストール
VSCodeのインストール

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

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のバージョンが表示されたら、インストール完了です。

Webpack等のツール類のインストール

JavaScript/TypeScriptによるフロントエンド開発は、様々なツールが導入可能であり、ツールを利用することで効率的な開発環境構築が実現できます。

ここでは、Webpackといったビルドツールのインストールも追加で記載しています。

任意のディレクトリに遷移後、コマンドプロンプトやターミナルにて下記のコマンドを実行してください。

npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev

以下は、インストールしたツール群をまとめています。

スクロールできます

名称	概要
typescript	TypeScriptコンパイラ
ts-loader	Webpackと連動してTypeScriptコンパイラを動作させる
webpack	JavaScript/TypeScriptのビルドツール（モジュールバンドラー）
webpack-cli	webpackを動作させるツール。Webpack4.0から必要。
webpack-dev-server	Webpackのビルド/開発用Webサーバー/ソースコードの変更検知/ブラウザの自動リロードなどを一括して提供するサーバー

TypeScript自体は既に前章でインストールしているため、重複してるように見えますが、ts-loaderはディレクトリないのライブラリにTypeScriptコンパイラが存在してることを前提としているため、省略せずインストールしましょう。

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

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

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

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

おすすめのテキストエディタ

Visual Studio Code
JetBrains IDE
Cursor

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

Visual Studio Code

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

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

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

JetBrains IDE

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

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

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

TypeScript対応しているシリーズ

IntelliJ IDEA Ultimate
WebStorm
PhpStorm
RubyMine
PyCharm
GoLand

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

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

Cursor

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

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

Cursorの特徴

VSCodeをフォークしている
ChatGPTを搭載
AIによる豊富な機能

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

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

VSCodeのインストール方法

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

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

https://code.visualstudio.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

開発環境構築のポイント

UIライブラリ・フレームワーク
型定義ファイル
実行環境
開発ツール

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を入力してください。

Vercelとは

近年では、アプリ開発時の様々なエコシステムが増加しておりトレンドになってきているのが「Vercel」です。

Vercelは、Vercel社（旧：ZEIT社）によって開発されたフロントエンド開発向けのホスティングサービスです。

また、同社はJavaScript/TypeScriptで利用できるNext.jsといったフレームワークも開発しています。

そのため、Next.jsと親和性が高く、Next.jsの需要も高いことからセットで活用されるケースが増えています。

Vercelの開発背景として、Jamstackの登場によりフロントエンドとバックエンドの切り分けが用意になったこと、フロントエンド開発のモダン化と高速化が影響しているようです。

Vercelの特徴

Vercelといったサービスは以下の特徴を持っています。

Vercelの主な特徴

Next.jsの相性が良い
SSRができる状態でDeployが可能
ソースコードの差分をGitHubにプッシュするだけで自動ビルドとDeploy可能
CDN利用により高速なページの描画可能

フロントエンド開発を主体とするエンジニアにとっては必須なエコシステムの一部になります。

VercelによるNext.jsのプロジェクト作成

プロジェクト作成する際に必要なものは以下になります。

プロジェクト作成に必要なもの

Vercelアカウント
Next.jsの開発環境
GitHubアカウント

Vercelアカウントの作成

Vercelの公式サイトからアカウントを作成します。

Vercel

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel Vercel’s Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

右上のSign Upをクリックします。

プランは一旦無料であるHobbyを選択で問題ありません。

ユーザーネームを入力するとGitHubと連携するか確認されますが、GitHubアカウントと電話番号認証すればOKです。

その後、Vercelのプロジェクト画面が表示されれば完了です。

Next.jsの開発環境を構築する

自身が利用しているターミナルを開き、作成したプロジェクトのディレクトリにて以下のコマンドを実行します。

npx create-next-app —typescript

するといくつかのオプションについて問われるため、適宜回答していきます。

回答を終えると、自動的にプロジェクトのディレクトリが作成されて”Success”と表示されればOKです。

次に、Next.jsの初期画面を表示してみましょう。

以下のコマンドをターミナルに打ち込み実行します。

npm run dev

ターミナル上で表示されたURLにアクセスすると初期画面が表示されます。

無事初期画面が表示されればOKです。

Supabaseとは

Supabase

Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

Supabaseは、オープンソースのFirebase代替として注目を集めているフルスタックバックエンドサービスです。

PostgreSQLデータベースを基盤とし、リアルタイムデータベース、認証、ファイルストレージ、サーバーレス関数、APIなどモダンなアプリケーション開発に必要な機能を包括的に提供します。

Supabeseの主な特徴

Supabaseは以下の特徴をを持ちます。

Supabaseの主な特徴

PostgreSQLデータベースを基盤に高い拡張性/信頼性
リアルタイムデータベース機能でデータ変更自動通知
多様な認証方法（電子メール/パスワード、ソーシャルログイン、電話認証など）
ファイルストレージ機能で大容量ファイルを効率管理
RESTful APIとGraphQL APIの自動生成による高速開発
開発者向けツールとSDKが豊富にあり設定/導入簡単

上記の特徴から、手軽に強力なバックエンドを構築することが可能です。

SupabaseとFirebaseの比較

Supabaseは、Firebaseのオープンソース代替として開発されたバックエンドサービスであり、開発者にフレンドリーな設計が魅力です。

Firebaseも優秀なバックエンドサービスですが、以下の相違点があります。

スクロールできます

項目	Supabase	Firebase
ソースコード	オープンソース	クローズドソース
データベース	PostgreSQL（RDB）	Firestore（NoSQL）
APIの生成	自動生成（REST & GraphQL）	手動設定（REST）
認証方法	メール、ソーシャルログイン、電話	メール、ソーシャルログイン、電話