はじめてのNext.js｜TypeScriptやpnpmって何？わかりやすく解説します

こんにちは、Sorairoです。

この記事では、Next.jsを使ってWebアプリを開発する中で出てきた「TypeScript」「pnpm」「CSSの扱い方」などの疑問をまとめました。

できるだけ身近な例を交えながら、やさしく説明していきます。

「これからNext.jsを触ってみたいけど、難しそうで不安…」という方にも、ぜひ読んでいただけたら嬉しいです。

---

Chapter 1：パッケージマネージャーとは？

パッケージマネージャーは、JavaScriptやTypeScriptの開発で必要になる「ライブラリ」や「ツール」を管理・インストールしてくれる存在です。

たとえば、料理をするときに必要な材料をリスト化して、まとめて買ってきてくれるようなイメージです。

---

▶ よく使われる3つの種類

名前	特徴	イメージ
npm	Node.jsに標準で付属。基本的な機能。	シンプルな買い物かご
yarn	高速で便利な機能も追加された。	進化したショッピングカート
pnpm	高速かつディスク容量の節約にも優れる。	自動で整理される収納棚

今回、私は pnpm を使いました。

package.json というファイルに記載された依存関係（dependencies・devDependencies）に基づいて、必要なライブラリをインストールしてくれます。

---

Chapter 2：TypeScriptとは何か

▶ JavaScriptとの違い

TypeScriptは、JavaScriptに「型（Type）」というルールを追加した言語です。

型とは「このデータは文字なのか、数字なのか」といった情報のこと。

これを明確にしておくことで、バグを事前に防いだり、大規模な開発でもミスを減らしたりできます。

---

▶ 静的型付けと動的型付け

種類	特徴	例え
静的型付け（TypeScriptなど）	最初に型を明示しておく	お弁当箱に仕切りがある
動的型付け（JavaScriptなど）	実行時に型が決まる	ごちゃっとした袋にいろいろ入っている

「型をつけるのって面倒…」と感じる方も多いかもしれませんが、慣れてくると“保険”のような安心感があります。

---

Chapter 3：Next.jsでのCSSやルーティングの仕組み

▶ ファイルベースルーティングとは？

Next.jsでは、pages ディレクトリ内のファイル名が、そのままURLのルーティングに反映されます。

たとえば pages/index.tsx は / に、pages/about.tsx は /about というURLになります。

これを「ファイルベースルーティング」と呼びます。

---

▶ グローバルCSSとTailwind CSS

global.css というファイルを使えば、アプリ全体に共通のCSSスタイルを適用することができます。

Tailwind CSSは、クラス名を使って直感的にデザインを整えられる点がとても便利です。

例：

tsx
コピーする編集する
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  ボタン
</button>

---

おまけ：キャッシュってなに？

▶ ブラウザが情報を覚えておく仕組み

キャッシュとは、Webページの情報を一時的に保存しておき、次回以降の表示を速くする仕組みです。

ただし、古い情報が残って表示がおかしくなることもあります。

そんなときは、以下の操作でキャッシュをクリアして再読み込みできます。

Shift + Command + R（Mac）

Shift + Ctrl + R（Windows）

---

おわりに

Next.jsを始めたばかりの頃は、聞きなれない言葉が多くて戸惑うこともあるかと思います。

でも、ひとつずつ意味を理解していけば、だんだん全体像がつかめてきます。

この記事が、少しでも誰かの「わかってきたかも！」という感覚につながれば嬉しいです。

ここまで読んでくださって、ありがとうございました😊