はじめに
これは私自身が後で見返すための学習メモです。
同じところで詰まっている方の参考になれば嬉しいです。
内容に誤りが含まれている可能性があるため、重要な点はご自身でも確認をお願いします。
前提
- 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 プロジェクトが何で成り立っているか」を理解するのに役立ちます。
ただし実務・個人開発ともに、テンプレートを活用したほうが初期構築は圧倒的に楽です。