TypeScript初心者が小さな個人開発する際の全体手順メモ（Win版）

:::note warn
個人開発新規作成する時のファイル作成からのメモ
小さなプロジェクトを対象としReactなどは使っていない
自分自身の理解を深めるためにあえて手順を分けてる場所も有り

TypeScriptとVScodeを使用、そこまでの説明は割愛
:::

:::note alert
途中で中断した際、作業ディレクトリが思った場所でないことがあるので注意！その場合ここでは`cd my-typescript-project`を打つ
:::


# 1.Node.jsのインストール
初回のみNode.jsのインストール必要。`npm`（Node Package Manager）が利用可能になる為
（インストール手順は割愛）

# 2.プロジェクトのディレクトリを作成
1.Node.jsのインストールは初回のみ、2回目以降はココから始める
```typescript
mkdir my-typescript-project
cd my-typescript-project
```
- **`mkdir my-typescript-projectmkdir`**
**現在のディレクトリ（ターミナルで作業してる場所）に空の`my-typescript-project`というフォルダが作成される**
`mkdir`は「make directory」の略で、新しいディレクトリ（フォルダ）を作成するためのコマンド。`my-typescript-project`は作成されるディレクトリの名前。なので自分の好きなファイル名を指定する。但しスペース` `はあまり使わず間を空けたいならハイフン`-`を使う

- **`cd my-typescript-project`**
**現在の作業ディレクトリがmy-typescript-projectに変更される。ディレクトリを移動することで、以降のコマンドがこの新しいディレクトリ内で実行される**
`cd`は「change directory」の略で、指定したディレクトリに移動するためのコマンド。作成したディレクトリ`my-typescript-project`の中に移動する。つまり以降のファイル作成やインストール作業はmy-typescript-project内で行われることになる。

# 3.`npm init`でプロジェクトの初期化
```typescript
npm init -y
```
**プロジェクトに必要な設定ファイル`package.json`を迅速かつ簡単に生成し、開発の準備を整えるコード**
このステップを省略すると、依存関係やスクリプトの管理が手間になり、プロジェクト運用が非効率になる可能性がある。`npm init -y`を使ってプロジェクトを初期化する理由は、Node.jsプロジェクトで必要となるpackage.jsonファイルを簡単に作成するため。このファイルには以下のプロジェクトの基本情報が含まれる。また`-y`というオプションを使う事で1つ1つ行う作業を省略できている。
- プロジェクト名
- バージョン番号
- プロジェクトのエントリポイント（デフォルトは`index.js`）
- ライセンス情報
- スクリプト（後でカスタマイズ可能）

# 4.TypeScriptのインストール
```typescript
npm install typescript --save-dev
```
TypeScriptをプロジェクトに追加する。`--save-dev`でTypeScriptをインストールすると、そのプロジェクトの`node_modules`にインストールされ、`package.json`の`devDependencies`セクションに記録される。つまりプロジェクト間で異なるTypeScriptのバージョンを使うことが可能になり他の開発者が同じプロジェクトを利用する場合、`npm install`コマンドを実行すれば`package.json`に基づいて同じ依存関係がインストールされ依存関係をプロジェクト単位で管理し、安定した開発環境を維持する事が可能になる。なのでプロジェクト毎にインストールする必要がある。


# 5.ローカルサーバーの導入（必要に応じて）
```typescript
npm install lite-server --save-dev
```
`lite-server`は本番環境用ではなく開発中にブラウザで確認しやすいようにするツール。ローカルサーバーを追加しindex.htmlを使う際に必要になるもの。index.htmlが不要な場合は飛ばしてOK。本番では別途Webサーバー（例: Apache, Nginx）を使用することが一般的。
### index.htmlを使うかの判断基準
**必要な場合（フロントエンド）**
- Webブラウザで動作するアプリケーションを開発する時（TypeScriptやJavaScriptを使用）
- UIを伴うプロジェクト（ユーザーが見る画面有り）
- 静的ファイルをホスティングする場合

**不要な場合（バックエンド）**
- サーバーサイド開発のみ（Node.jsなど）
- CLIツールやAPIサーバーを作る場合



# 6.TypeScript設定ファイルの作成
```typescript
npx tsc --init
```
インストールが完了したら、TypeScriptの設定ファイルを生成する。これにより`tsconfig.json`という設定ファイルが作成される。`tsconfig.json`は、TypeScriptコンパイラ（tsc）の設定を定義するためのファイル。一度設定を行えば、tscコマンドを使う際に設定を毎回指定する必要がなくなる（例: `npx tsc`とするだけでプロジェクト全体をコンパイル）

```typescript
mkdir src
New-Item -Path "src\index.ts" -ItemType File
```
index.tsファイルを作成する。
- **`mkdir src`**
`mkdir`は「make directory」の略で、新しいディレクトリ（フォルダ）を作成するためのコマンド。この場合`src`という名前のディレクトリを現在の作業ディレクトリ内に作成する。通常`src`（sourceの略）はプロジェクトのソースコードを格納するために良く使われる名前らしい

- **`New-Item -Path "src\index.ts" -ItemType File`**
`New-Item`は「空のファイルやフォルダを作成する」ためのコマンド。この場合`src`ディレクトリ内に`index.ts`という空のファイルを作成する。結果`src/index.ts`というファイルが作成される。このファイルはTypeScriptファイル（.ts拡張子）で、プロジェクトのエントリポイント（起点）として使われることが多い。

:::note warn
`Linux`や`macOS`はこの部分のコマンドが異なる。またコマンド入力しなくても`VS Code`内から直接ファイルを作成するのもあり（`VS Code`のエクスプローラ（サイドバー）で `src`フォルダを右クリック → 「新しいファイル」 → `index.ts`と入力して作成）
:::



### tsconfig.jsonを編集
```typescript
{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
```

生成された`tsconfig.json`を必要に応じてカスタマイズする

:::note alert
**修正後に「保存」する事！**
:::

- `compilerOptions`
TypeScriptコンパイラの動作を制御する設定オプションがここに記述される
- `outDir`
コンパイルされたJavaScriptファイルの出力先を明確に指定する（例: `dist/`）また`outDir`を記載する事により自動的に`dist/`が作成される
- `rootDir`
ソースコードのルートディレクトリを指定します（例: `src/`）これで構造が明確になる
- `include`
コンパイル対象とするファイルやディレクトリを指定
- `exclude`
コンパイル対象から除外するファイルやディレクトリを指定（デフォルトで`node_modules`が除外される、なのでこのコードはなくても良い）

:::note info
`index.html`がある場合、TypeScriptの`module`オプションは`CommonJS`よりも`ESNext`または`ESModule`を使用するのが一般的に適している（モダンブラウザでサポートされているESモジュール形式）`module`を`ESNext`または`ESModule`に設定し、HTMLで` <script type="module"> `を使う。互換性が必要な場合（古い環境など）は`module`を`CommonJS`に設定するのが良い
:::


### 主要な`compilerOptions`
| オプション名                    | 説明                                                                                      |
|---------------------------------|------------------------------------------------------------------------------------------|
| `target`                        | 出力するJavaScriptのバージョンを指定（例: `ES5`, `ES6`, `ES2020`など）                     |
| `module`                        | 使用するモジュールシステム（例: `CommonJS`, `ESNext`, `AMD`など）                           |
| `strict`                        | 厳格モードを有効にする（型チェックがより厳しくなる）。デフォルトで`true`。                |
| `esModuleInterop`               | ESモジュールの互換性を向上させる（`import`と`require`の互換性を確保）。                   |
| `skipLibCheck`                  | ライブラリファイル（`node_modules`内など）の型チェックをスキップしてコンパイル時間を短縮。 |
| `forceConsistentCasingInFileNames` | ファイル名の大文字小文字の一貫性を強制する。                                         |


# 7.`index.ts`にコードを記述
```typescript
// 挨拶を生成する関数
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

// コンソールに出力
console.log(greet("World"));

```
上記はコード例。コンソールに「Hello, World!」と出る（この手順は⑥`index.ts`ファイル作成時に行っても問題ない）

# 8.TypeScriptのコンパイル
```typescript
npx tsc
```
`tsc`コマンドを使用してTypeScriptをJavaScriptにコンパイル。`dist`ディレクトリ内にコンパイル済みの`index.js`が生成される

# 8-5.`index.html`にコードを記述
```typescript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Project</title>
</head>
<body>
    <script src="dist/index.js"></script>
</body>
</html>
```
`index.html`を作成した時はこのコードを記述する。このHTMLコードは、TypeScriptでコンパイルされたJavaScriptファイル`dist/index.js`をブラウザで実行するための基本的なHTML構造。これで`index.js`内のJavaScriptコードが実行され、必要に応じてHTMLページを動的に操作したり、データを表示したりされる。

**下記はコマンドでindex.html作成＆記述**
```typescript
echo '<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Project</title>
</head>
<body>
    <script src="dist/index.js"></script>
</body>
</html>' > index.html
```


# 9.ディレクトリ構造を確認（確認のみで実行なしなくて良い）
```typescript
my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── index.html
├── tsconfig.json
├── package.json
├── package-lock.json
```
index.htmlが必要な場合は上記↑、不要な場合は下記↓を参照。エラーなく出来ていた場合このような構成が出来上がっている（順不同）
```typescript
my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── package.json
├── tsconfig.json
├── package-lock.json
```
:::note warn
`my-typescript-project`の部分は指定したファイル名
この時`dist/`ディレクトリガ存在していなかった場合「8.TypeScriptのコンパイル」`npx tsc`がちゃんと実行されているか確認する
:::

- `src/`
TypeScriptファイルを格納するディレクトリ
- `dist/`
コンパイル後のJavaScriptファイルが出力されるディレクトリ




# 10.スクリプトの実行
### ローカルサーバーで実行（index.htmlがある場合）
```typescript
npx lite-server
```
フロントエンドの場合こちらを実行。`lite-server`を使ってブラウザで確認。自動的にブラウザが開き`index.html`が表示される。実行時コンソールに「Hello, World!」と表示される。ブラウザが`index.html`をロードし、そこから`dist/index.js`を読み込む仕組み（コンソールのみでブラウザ画面には出ないスクリプトです）

:::note warn
実行する前に`npx tsc`でコンパイルが成功していることを確認する
:::


### JavaScriptファイルを直接実行（index.htmlがない場合）
```typescript
node dist/index.js
```
バックエンドの場合こちらを実行。Node.jsを使用してコンパイル済みのJavaScriptファイルを実行する。実行時コンソールに「Hello, World!」と表示される


# 11.ブラウザで確認（自動で開かなかった場合など）
10のスクリプト実行後自動で開かなかったり上手く表示されなかった場合は以下を試す

**①`http://localhost:××××`をクリックし実行**
10のスクリプト実行時ターミナルに表示されたローカルアドレスを直接クリックし確認

**②Visual Studio Code の Live Server を使用**
ローカル環境で`file://`プロトコルを使用して`HTML`を開くと、Quirks Modeが発生することがある。その場合`Live Server`拡張機能を使う事により解決する事もある

:::note info
1.Visual Studio Code (VS Code) を開く
2."Ritwick Dey" 作成の Live Server を選択し、「インストール」
3.VS Code のエクスプローラーで index.html を右クリック、「Open with Live Server」を選択
:::

**③上記でスクリプト変更時に「保存」しているか**
スクリプト編集時に「保存」をしていなかった故に反映されていない可能性あり

**④エラー確認**
対策をしても表示されない場合ブラウザのデベロッパーツール（F12）でエラーを確認する





---

**説明はここまで、より効率の良い方法は存在するので個人でカスタマイズして下さい！**