0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TypeScriptの開発環境を作ろう

0
Last updated at Posted at 2026-05-03

はじめに

これは私自身が後で見返すための学習メモです。
同じところで詰まっている方の参考になれば嬉しいです。
内容に誤りが含まれている可能性があるため、重要な点はご自身でも確認をお願いします。

前提

  • Node.js がインストール済みであること
  • npm が使えること

方法1 ゼロから手動で構築する

手動構築は「何がインストールされているのか」を把握する学習として有効です。

1. プロジェクトフォルダの作成

mkdir my-project
cd my-project

2. Node.js プロジェクトの初期化

npm init -y

package.json が生成されます。中身を開いて以下を確認してください。

  • main : エントリポイントのパス。そこにファイルを作成します。
  • scripts : npm run <名前> で実行できるコマンドの登録場所です。自由に追加できます。

3. TypeScript 関連パッケージのインストール

npm install -D typescript
npm install -D @types/node

4. TypeScript 設定ファイルの生成

npx tsc --init

tsconfig.json が生成されます。


方法2 テンプレートを使う(推奨)

手順が多い方法1に対して、こちらはコマンド1つで完結します。

npx create-typescript-app

以上です。本当にこれで終わりです。


その他のテンプレート

用途に合わせて使い分けてください。

# 汎用 TypeScript プロジェクト
npx create-typescript-app

# Vite + TypeScript(フロントエンド)
npx create-vite@latest my-app -- --template vanilla-ts

# Express + TypeScript(バックエンドAPI)
npx express-generator-typescript my-api

# Cloudflare Workers
npx wrangler generate my-worker

おわりに

手動構築は「TypeScript プロジェクトが何で成り立っているか」を理解するのに役立ちます。
ただし実務・個人開発ともに、テンプレートを活用したほうが初期構築は圧倒的に楽です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?