0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Tomo27(EG- Fujita)
in

TypeScriptを学ぶ②（JS経験者向けTS学習記録〜バックエンド側の環境構築まで）

0
Last updated at Posted at 2025-10-15

はじめに

本記事の内容は筆者個人の見解に基づくものであり、所属する会社および組織の公式な見解や方針を示すものではありません。

本記事は、JavaScriptの基礎知識をお持ちの方向けの内容です。

この記事はMac OSでの学習の記録です。
記載しているコマンドはターミナル向けのものとなりますのでWindowsでの利用の場合は読み替えて下さい。

前回投稿した「TypeScriptを学ぶ①（JS経験者向けTS学習記録〜フロントエンド側の環境構築まで）」の続きになります。

ざっくり前回やったことを記載すると
開発環境の準備とプロジェクトファイルの作成をしたところ
フロント側はhttp://localhost:3000/ローカル実行ができてテンプレートが立ち上がったところまで。

今期は、バックエンド側のプロジェクトの追加までを学ぶ会とします。
（あんまり詰め込みすぎるのは疲れるから・・・。）

Node.jsとは？

先に今回のプロジェクトのバックエンドはNode.jsを使って開発すると意気込んでたけど、そもそもNode.jsってなんぞや？（言葉としては知ってるJSに関係あることはわかるけど・・・）実際は何？状態だったので改めてお勉強

まず：Node.jsとは？

「JavaScriptをサーバー側でも動かせるようにした環境」

この辺のお話は@non_calさんのNode.jsとはなにか？なぜみんな使っているのか？が分かりやすかったのでぜひご覧ください。

バックエンド側のプロジェクトの追加

まずはこれから作るプロジェクトの大まかな構成はこちら

myapp/
├─ frontend/        ← Next.js (TypeScript)
│   ├─ src/
│   ├─ package.json
│   ├─ tsconfig.json
│   └─ ...
│
├─ backend/         ← Node.js (Express + TS)
│   ├─ src/
│   │   ├─ index.ts
│   │   └─ routes/
│   ├─ package.json
│   ├─ tsconfig.json
│   └─ ...
│
└─ README.md

前回フロントエンド側のフォルダ（プロジェクト）についてはセットアップしたので今回はバックエンド（Node側）を追加していく。

まずはプロジェクトルートに移動する

bash
cd myapp

バックエンド側のディレクトリを作成する

bash
mkdir backend

移動

bash
cd backend

npm init -y を実行すると、
プロジェクトの設定ファイルである package.json が自動で生成される

bash
npm init -y

本番で使うパッケージ導入(今回の学習用のプロジェクトは最終的に公開したいので本番の想定もする)

bash
npm install express cors
パッケージ 役割
express Webサーバーを構築するためのフレームワーク
cors フロント（Next.js）との通信を安全に行うための設定ツール

フロントエンドとバックエンドが別のポート（例：3000と5000）で動く場合、
cors を設定しておかないと通信がブロックされます。

開発で使うパッケージ（-Dオプション付き）

bash
npm install -D typescript ts-node-dev @types/node @types/express @types/cors
パッケージ 役割
typescript TypeScriptをコンパイル（.ts → .js）するための本体。
ts-node-dev ファイル変更を検知して自動で再起動してくれるツール。開発効率が大幅に上がります。
@types/node Node.jsで使える関数（例：fs や path）の型情報を追加。補完が効くようになります。
@types/express Expressの型定義。req や res の型を認識できるようになります。
@types/cors CORS（クロスオリジン通信）ライブラリの型定義。TypeScriptで安全に使えるようになります。

-D は「--save-dev」の省略形で、**開発専用の依存関係（devDependencies）**として登録されます。
本番環境で実行する際にはこれらはインストールされず、実際の動作に必要な最小限のパッケージだけが使われます。
つまり「本番を軽く・安全に」「開発を快適に」するための分離です。

TypeScript の初期設定

bash
npx tsc --init

生成された tsconfig.json の一部を編集します

修正前tsconfig.json
{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    // "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

「Next.js用の設定 → Expressサーバーを動かすNode.js用の設定」に変える

項目 修正前 修正後 変更理由
target "esnext" "ES2020" Node.js実行環境向けに安定したバージョンを指定。esnextは最先端すぎて環境差が出やすい。
module "nodenext" "commonjs" Node.jsではExpressなどがrequireベースなので、commonjsが安定。
rootDir / outDir コメントアウト "rootDir": "src", "outDir": "dist" 開発用と出力用ディレクトリを明確に分けて、ビルドしやすくする。
jsx "react-jsx" 削除 React（フロント用）設定なので、バックエンドでは不要。
declaration, declarationMap true 削除（または不要） 型定義ファイル（.d.ts）を出力する設定。ライブラリ開発でないので今回は不要。
sourceMap true 省略可 デバッグ用だが、最初の学習段階ではなくても問題なし。
esModuleInterop なし true に追加 import express from "express" のような書き方を許可するために必要。
strict / skipLibCheck 維持 維持 安全な型チェック設定のため残す。
verbatimModuleSyntax, isolatedModules など true 削除 これらはNext.jsやESM環境向けの設定。CommonJS環境では不要。

修正後のJSONがこれ

修正後tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",              // Node.jsで安定して動作するJS仕様
    "module": "commonjs",            // Node.js標準のモジュール形式
    "rootDir": "src",                // TypeScriptファイルを置くフォルダ
    "outDir": "dist",                // 変換後のJSファイルを出力するフォルダ
    "esModuleInterop": true,         // import文の互換性を確保
    "strict": true,                  // 厳格な型チェックを有効に
    "skipLibCheck": true             // 外部ライブラリの型チェックを省略
  }
}

ソースフォルダとメインファイル作成
backendフォルダ直下にsrcフォルダを作成

bash
mkdir src

srcフォルダの下にファイルを作成

bash
touch src/index.ts

src/index.tsを編集する（記法について触れたいがまずは環境構築）
フロント側とポートをずらすために4000で定義

index.ts
import expresss from "express";
import cors from "cors";

const app = expresss();
const port = 4000;


app.use(cors());
app.use(expresss.json());


//疎通確認用のルートエンドポイント
app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

開発を爆速にしてくれる魔法の1行
package.json に次の1行を追加すると──
:warning: "test": "echo "Error: no test specified" && exit 1"の後ろに,`入れるのも忘れずに

変更後　package.json
{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "dev": "ts-node-dev --respawn --transpile-only src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^5.1.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.19",
    "@types/express": "^5.0.3",
    "@types/node": "^24.7.2",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.9.3"
  }
}

下記コマンドだけでサーバーが起動できるようになり開発効率が上がるみたいです。

bash
npm run dev

通常はソースを修正するたびにTypeScriptをコンパイル必要があるみたいです。
しかし開発の動作確認で一々コンパイルしてたら時間がかかるので上記を設定を入れることでnpm run devを実行することで修正がすぐ反映されるので効率的

設定を入れないと下記を実行して試さなきゃいけないみたい

bash
npx tsc      # TypeScriptをコンパイル
node dist/index.js  # 再起動

説明もしたので実際に起動する

bash
npm run dev!

実行後にhttp://localhost:4000/を実行すると下記の様なページが表示されると成功です。
スクリーンショット 2025-10-15 23.27.20.png

バックエンド側のプロジェクトも準備できたので。
次回はTSの記法やお作法について学ぶ会とします！

その他の学び

  • tsconfig.jsonはjsonファイルだからコメントダメだと思ったけどいけるみたい。
    Copilotからの引用

tsconfig.json ではコメント（ や /* ... */）を使っても問題ありません。TypeScriptのコンパイラは jsonc（JSON with Comments）形式をサポートしているため、コメント付きでも正しく読み込まれます。
ただし、他のツール（純粋なJSONパーサーなど）がこのファイルを読む場合は、コメントが原因でエラーになることがあります。TypeScript関連の用途であれば安心して使えます。

0
2
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
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?