TypeScriptのインストール (環境準備)

Windows環境において、TypeScriptをコンパイル（JavaScriptへ変換）できるようにするための導入手順です。 Node.jsに付属するパッケージ管理ツール「npm」を使用してインストールを行います。

1. 前提準備 (Node.js)

TypeScriptをインストールするために、Node.jsの公式サイトからWindows用インストーラー（.msi）をダウンロードし、インストールを行います。 これにより npm コマンドが使用可能になります。

2. PowerShellの実行ポリシー変更

スクリプトの実行がシステムにより制限されている場合、管理者権限でPowerShellを開き、ポリシーを変更する必要があります。

# スクリプト実行を許可する設定（管理者権限で実行）
Set-ExecutionPolicy RemoteSigned -Scope LocalMachine

3. TypeScriptのインストール

プロジェクトフォルダ内でのローカルインストールを推奨します。

npm install typescript --save-dev

4. インストール確認

正しくインストールされたか、バージョンを表示して確認します。

npx tsc -v

TypeScriptの実行手順 (プロジェクト作成から実行まで)

環境が整ったら、実際にTypeScriptのコードを書いて実行する準備を行います。

手順1: TypeScriptの設定ファイルを作る

TypeScriptをJavaScriptに変換（コンパイル）するためのルールブックを作ります。
ターミナルで以下のコマンドを実行してください。

npx tsc --init

結果: tsconfig.json というファイルが新しく作られます。

手順2: コードを書く

すでにある main.ts に、試しにTypeScriptのコードを書いてみます。

// main.ts
// 型（Type）を指定できるのがTypeScriptの特徴です
const message: string = "Hello, TypeScript!";
console.log(message);

手順3: JavaScriptに変換（コンパイル）する

ブラウザやNode.jsはTypeScriptをそのまま理解できないため、JavaScriptに変換します。

npx tsc

結果: tsconfig.json の設定に従って変換が行われ、フォルダ内に main.js が生成されます。

手順4: 実行して確認する

生成されたJavaScriptを実行してみましょう。

node main.js

結果: コンソールに Hello, TypeScript! と表示されれば成功です！

手順5: ブラウザで実行する場合 (補足)

コンパイルされたJavaScriptをブラウザで動作させるには、以下の設定が必要です。

1. tsconfig.json の設定

"module": "esnext" を指定して、ES Modules形式で出力します。

{
  "compilerOptions": {
    "module": "esnext"
    // ...
  }
}

2. HTMLでの読み込み

HTMLファイルを作成し、type="module" 属性を付けて読み込みます。

<!-- index.html など -->
<script type="module" src="./main.js"></script>

💡 今後の学習サイクル

基本的には以下の繰り返しになります。

1. .ts ファイルにコードを書く
2. npx tsc で .js に変換する
3. 生成された .js を動かす（またはHTMLから読み込む）

[!NOTE] 慣れてくると、保存するたびに自動で変換するツールなどを使うようになりますが、まずはこの基本手順を覚えましょう。

実務で必須の3大機能 (Practical Features)

開発現場において、作業効率と品質を保つために「導入して当たり前」とされている標準的な機能です。

1. 自動コンパイル (Watch Mode)

ファイルを保存するたびに、手動でコンパイルを行う手間を省略する機能です。

• 目的: 開発スピードの向上（修正→即時反映）。
• 実行方法: -w (watch) オプションを付けて実行します。

  npx tsc -w

• 挙動: ターミナルが監視モードで待機し、.ts ファイルの変更を検知すると自動で .js に変換します。（終了は Ctrl + C）

2. ソースマップ (Source Maps)

ブラウザの開発者ツールで、変換後のJavaScriptではなく、変換前のTypeScriptソースコードを表示・デバッグできるようにする仕組みです。

• 目的: デバッグ効率の向上。エラー発生時に、TypeScriptファイルの正確な行数を特定できます。
• 設定: tsconfig.json で有効化します。

  "sourceMap": true

• 確認: ブラウザの検証ツール (F12) > Sources タブで .ts ファイルが表示されます。

3. リンターとフォーマッター (Linting & Formatting)

コードの品質と一貫性を自動的に保つためのツール群です。「チーム開発の法律」として機能します。

• ESLint (Linter):
  • 役割: 「文法エラー」や「バグの原因になりそうなコード」を検出し、警告します（例: 未使用の変数、危険な記述）。
• Prettier (Formatter):
  • 役割: コードの「見た目」を自動整形します（例: インデント、改行、セミコロンの有無）。
  • 運用: 一般的に「ファイル保存時に自動実行」されるようエディタを設定し、誰が書いても同じフォーマットになるようにします。

TypeScript / Node.js 環境のGit管理メモ

TypeScriptやNode.jsのプロジェクトをGitで管理する際のルールと理由のまとめ。

1. コミットしないもの（.gitignore に書く）

node_modules/

• 理由:
  • ライブラリの実体ファイル（数千〜数万個）が入っているため、コミットすると履歴が巨大になる。
  • package.json と package-lock.json さえあれば、npm install コマンドで誰でも同じ環境を１分で再現できるため、共有不要。

2. 必ずコミットするもの

package.json

• 役割: プロジェクトの「設計図」。そのプロジェクトがどのライブラリ（依存関係）を使っているかが記録されている。

package-lock.json

• 役割: ライブラリの「確定バージョン情報」。
• 重要性: これが無いと、チームメンバー間で「インストールされるライブラリのバージョンが微妙に違う」という事故が起きる。必ずコミットする。

ソースコード (.ts, .html, .css, etc.)

• 役割: 自分が書いたプログラム本体。当然すべて管理対象。

3. 設定ファイルについて

.gitignore

• Gitの管理から除外したいファイルを指定する設定ファイル。
• 最低限 node_modules/ は記述しておく。

tsconfig.json (TypeScript構成ファイル)

• TypeScriptをどのようにJavaScriptに変換するか（厳しさやターゲットバージョンなど）の設定。
• プロジェクトの挙動を決める重要なファイルなので、作成したら必ずコミットする。