概要と到達目標：開発環境構築で学ぶこと | 開発環境構築とNext.js（TypeScript）入門 | Next.jsによるWebアプリケーション開発概論

この節の目的は、これから何を作るのかではなく、それを作れる状態をどう整えるのかをつかむことです。

Next.js の公式導入では、最初の入口として create-next-app を使ったプロジェクト作成、その後に TypeScript、ESLint、Module Path Aliases、Project Structure などを順に理解していく流れが示されています。

初心者の方がここで混乱しやすいのは、「Node.js」「npm」「TypeScript」「Next.js」が全部同じ種類のものに見えてしまうことです。実際には役割が違います。

Node.js は JavaScript をサーバ側やローカル環境で実行するための実行基盤です。
npm / pnpm / yarn / bun はパッケージ管理やコマンド実行を支える道具です。
TypeScript は JavaScript に型のための構文を加えた言語です。
Next.js は React をベースにした Web アプリケーションフレームワークです。

この違いが見えるだけで、以後の設定作業はかなり読みやすくなります。

1. そもそも「開発環境構築」とは何か

開発環境構築とは、自分のパソコンの中に、アプリを安全に作り、動かし、直せる作業場を整えることです。

料理でいえば、いきなり料理名を覚える前に、包丁、まな板、火元、材料置き場を整えるようなものです。机の上が散らかったままでは、料理レシピを見ても次に進めません。

Next.js の公式では、新しいアプリの作成に create-next-app を使う方法が案内されており、そのセットアップ過程で TypeScript、ESLint、Module Path Aliases などの初期設定をまとめて整えられます。

近年の開発環境構築は、昔のように「最初から全部を手作業で書く」よりも、公式が用意した標準的な始め方に乗るのが基本です。

2. 全体像

この第2章では、主に次の要素を学びます。

Node.js

Node.js は、JavaScript をブラウザの外で実行できる仕組みです。これがあることで、ローカルマシンで開発サーバを起動したり、パッケージをインストールしたりできます。pnpm の公式でも、通常の導入方法では Node.js が前提条件として示されています。

パッケージマネージャー

npm、pnpm、yarn、bun などは、必要なライブラリを入れたり、定義されたコマンドを実行したりする道具です。Next.js の導入ドキュメントでも、これら複数の選択肢が並列に案内されています。

TypeScript は JavaScript の上位互換で、型を記述できるようにすることで、実行前に問題を見つけやすくします。TypeScript 公式は、JavaScript は本質的に動的型付けであり、静的型システムは実行前に予測を与えると説明しています。また、TypeScript の構文は JavaScript を拡張したものであり、JavaScript の文法は TypeScript でも有効です。

ESLint

ESLint は、コードの書き方や危険な記述を検査するための静的解析ツールです。Next.js は eslint-config-next を提供しており、@next/eslint-plugin-next と React 系の推奨ルールをまとめて使いやすくしています。

ディレクトリ構造・Path Alias

プロジェクトの中で、どこに何を書くかを整理するための約束です。Next.js の学習導線でも、Project Structure と Module Path Aliases は独立した重要テーマです。

package.json

package.json は、プロジェクト名、依存関係、実行コマンドなどを管理する中心ファイルです。npm の公式でも、このファイルは npm プロジェクト設定の中心として説明されています。

3. なぜ最初に環境構築を学ぶのか

理由は単純です。環境が整っていないと、コードの良し悪し以前に動かないからです。

たとえば、次のような詰まり方が起きます。

Node.js が入っておらず、コマンドが使えない
パッケージマネージャーの意味が分からず、依存関係を入れられない
TypeScript エラーを「壊れている」と誤解する
ESLint の警告を「ただの邪魔な表示」と思って無視する
ディレクトリ構造が見えず、どこにファイルを置くべきか迷う

こういう混乱は、知識不足というより、地図なしで街に出た状態に近いです。

最初に開発環境の全体像をつかむと、今後出てくる各用語が「バラバラな単語」ではなく、「同じ作業場の道具」に見えてきます。

4. 最初に見ておきたいコマンド

まだ全部を理解しなくて大丈夫ですが、「こんなものが出てくる」という顔合わせはしておきましょう。

npm を使う場合は、たとえば次のようになります。

npx create-next-app@latest my-app
cd my-app
npm run dev

pnpmを使う場合の例はこちらになります。

pnpm create next-app my-app
cd my-app
pnpm dev

これは Next.js 公式の最短導線に近い形です。

1行目で新しいプロジェクトを作り、2行目でそのフォルダに入り、3行目で開発サーバを起動します。公式ドキュメントでは、create-next-app による作成後、http://localhost:3000 にアクセスして動作確認する流れが案内されています。

ここで大事なのは、「pnpm 版」と「npm 版」で目的は同じだということです。違うのは使う道具だけです。Next.js の導入ページでは、pnpm、npm、yarn、bun の複数パターンが提示されています。

5. TypeScript があると何が嬉しいのか

初心者のうちは、「とりあえず JavaScript でよいのでは」と感じることがあります。ただ、TypeScript の利点は、間違いを早く見つけやすいことにあります。

たとえば、次のような関数を考えます。

function double(value: number): number {
  return value * 2
}

console.log(double(5))
console.log(double("5"))

最後の "5" は文字列です。

TypeScript では、value に number を指定しているので、文字列を渡した時点でエディタやビルド時に問題に気づきやすくなります。TypeScript 公式も、静的型システムは実行前に「何が起きるはずか」を予測する助けになると説明しています。

JavaScript だけの世界では、実際に動かしてみて初めて気づく種類のミスがあります。

TypeScript は、その「後から発覚」を減らしてくれます。

Next.js は TypeScript を組み込みでサポートしており、新規プロジェクト作成時にも選択できます。既存プロジェクトでも .ts や .tsx を導入し、next dev や next build の実行を通じて必要な設定を整えられます。

6. ESLint がエラーの原因？

初心者が誤解しやすいのですが、ESLintが入っているといつもエラーにということを感じたことありませんか。

たとえば、使っていない変数を書いたり、危険な書き方をしたり、書き方の統一が崩れたりしたとき、ESLint はそれを知らせてくれます。Next.js の公式では、eslint-config-next が Next.js 用の推奨ルール群をまとめて提供していると説明されています。

たとえば、次のコードを見てください。

const message = "hello"
const unusedValue = 123

console.log(message)

この unusedValue は宣言されているのに使われていません。

ESLint はこうした「ミスではないが、放置すると散らかる」部分も教えてくれます。机の上に置きっぱなしの道具に付箋を貼ってくれるようなものです。

7. package.json は「このプロジェクトの名札兼設計メモ」

Next.js プロジェクトを作ると、ほぼ必ず package.json というファイルがあります。

これは、プロジェクトの名前、使っているライブラリ、実行コマンドなどをまとめたファイルです。npm 公式では、このファイルは正しい JSON 形式で書かれるべきであり、npm の振る舞いに大きく関わる中心ファイルとして説明されています。

たとえば、次のような形です。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

ここで覚えたいのは、scripts の部分です。

この設定があるからこそ、次のようなコマンドが使えます。

npm run dev
pnpm dev

つまり、package.json は単なる設定ファイルではなく、プロジェクトに対して何ができるかを定義する操作パネルでもあります。

8. 「どこに何を書くか」が分かると怖くなくなる

初心者の学習を邪魔する大きな原因の一つが、ディレクトリ構造です。

ファイルが多いと、それだけで圧倒されます。

ただし、最初から全部を覚える必要はありません。

この段階では、次の認識で十分です。

app: 画面やルーティングの中心になる場所
public: 画像などの静的ファイルを置く場所
package.json: プロジェクト情報と scripts
tsconfig.json: TypeScript の設定
eslint.config.mjs など: ESLint の設定

Next.js の公式学習導線でも、Project Structure は独立した主要テーマとして扱われています。つまり、「コードを書く前に構造を知る」ことは遠回りではなく、正式な学習順序です。

9. この節での到達目標

この節を読み終えた時点で、次の状態になっていれば十分です。

Node.js、パッケージマネージャー、TypeScript、Next.js の役割の違いを言える。
開発環境構築が「コードを書く前の面倒な儀式」ではなく、「今後の学習全体の土台」だと理解している。
create-next-app、package.json、ESLint、ディレクトリ構造といった用語を見ても、完全な未知ではなくなっている。
これからの節で、何を順番に学ぶのかをイメージできる。

ここで完璧にする必要はありません。大切なのは、全体像を理解することです。どんな勉強もまずは今から何をしようとしているのか、全体像を理解することになります。

10. 練習問題

問1

Node.js の役割として最も近いものはどれですか。

A.コードの見た目を整える道具
JavaScript をローカルやサーバ側で実行するための基盤
Webページの見た目を作る CSS フレームワーク
型定義専用のライブラリ

JavaScript とまったく別の言語で、文法互換がない
JavaScript を実行できなくするための仕組み
JavaScript に型のための構文を加えたもの
npm の別名

モニターの明るさ設定
使用ライブラリや実行コマンド
キーボード配列の設定
OS のログインパスワード

Next.js をアンインストールするためのコマンド
画像を圧縮するツール
コードの問題や書き方を検査する静的解析ツール
データベースそのもの

Node.js は実行基盤
パッケージマネージャーは道具箱
TypeScript は型でミスを減らす仕組み
Next.js は Web アプリを組み立てるフレームワーク
ESLint は早めに問題を見つける補助役
package.json はプロジェクトの中心ファイル

ここまで理解できれば十分なスタートです。

次の節では、こうした基盤のうち、まず Node.js とパッケージマネージャーをもう少し具体的に見ていきます。

参考文献

Next.js Documentation, Getting Started: Installation
Next.js Documentation, App Router: Getting Started
Next.js Documentation, create-next-app CLI
Next.js Documentation, Configuration: ESLint
Next.js Documentation, Configuration: TypeScript
Next.js Blog, Next.js 16
TypeScript Documentation, The TypeScript Handbook
TypeScript Documentation, The Basics
TypeScript Documentation, TypeScript for the New Programmer
TypeScript Official Site
npm Docs, package.json
pnpm Documentation, Installation