TypeScript階層構造

階層構造

いまいち階層構造について理解していない部分があったのでAI先生の意見を踏まえメモです。

import "../globals.css";のような記述は、モジュールやファイルを相対パスでインポートする際の方法です。この仕組みについて解説します。

1. 階層構造の理解

JavaScriptやTypeScriptでのファイルインポート時、ファイルの階層を指定する方法は、現在のファイルがどのディレクトリに存在するかに基づきます。

../ の意味

../ は現在のディレクトリから 1つ上の階層 を示します。
例えば、以下のディレクトリ構造があるとします。

project/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
├── components/
│   ├── Header.tsx
├── globals.css

ここで、app/layout.tsxからglobals.cssをインポートする場合、../globals.cssと記述します。

../ 意味

.. 現在のファイルから1つ上のディレクトリに移動する。
/ 次にどのファイルやフォルダを指定するかを表す。
したがって、../globals.cssは「appディレクトリから1つ上の階層（project/）に戻り、globals.cssを参照する」という意味になります。

2. パスの種類

インポート時に使われるパスには以下の2種類があります。

相対パス

現在のファイルの場所に基づいて、目的のファイルを指定します。
. は現在のディレクトリ。
.. は1つ上のディレクトリ。
例

./file.js: 同じディレクトリ内のfile.jsをインポート。

../file.js: 1つ上の階層にあるfile.jsをインポート。

../../file.js: 2つ上の階層にあるfile.jsをインポート。

絶対パス

プロジェクトのルート（src/やapp/）からの相対位置を記述します。
Next.jsではjsconfig.jsonやtsconfig.jsonを設定して、絶対パスインポートを有効にできます。
設定方法
jsconfig.jsonまたはtsconfig.jsonに以下を追加します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

この設定により、以下のように簡潔な記述が可能になります。

例

相対パス：import Header from "../components/Header";

絶対パス：import Header from "@/components/Header";

3. よくある間違いと解決策

間違い例
パスが間違っている：

import "../css/globals.css"; // globals.cssが実際には`project/`に存在している。

解決策：

import "../globals.css"; // 正しいパスを指定する。

ファイル名や拡張子が違う：

import "../Globals.css"; // 実際にはファイル名が`globals.css`。

解決策：

import "../globals.css"; // ファイル名を正確に記述する。

絶対パスが無効になっている：

import "@/styles/globals.css"; // tsconfig.jsonで`baseUrl`が設定されていない場合。

解決策：

// tsconfig.jsonにbaseUrlとpathsを設定する。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/styles/*": ["styles/*"]
    }
  }
}

4. 練習問題

次のディレクトリ構造をもとに、各ファイルへの正しいインポートパスを考えてみましょう。

project/
├── app/
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── about.tsx
│   ├── layout.tsx
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
├── styles/
│   ├── globals.css

index.tsxからglobals.cssをインポート。

答え：../../styles/globals.css

layout.tsxからHeader.tsxをインポート。

答え：../components/Header

about.tsxからFooter.tsxをインポート。

答え：../../components/Footer

最後に

AI先生は何でも教えてくれるのですごい・・・