JavaScriptの相対パス：ファイルの位置関係を示す

モジュールを学んだ際に出てきた "./ファイル名" という書き方。これは「相対パス」と呼ばれ、ファイルの位置関係を示しています。

相対パスとは

相対パスは、ファイルの位置関係を示す記述方法です。

import User from "./User";

この "./User" が相対パスです。

相対パスの基本ルール

.（ドット1つ）: 現在のディレクトリ

**ドット1つ . は、ファイルと同じディレクトリ（フォルダ）**を指します。

プロジェクト/
  ├── main.js
  └── User.js

// main.js
import User from "./User";  // 同じディレクトリのUser.jsを読み込む

./User は「同じディレクトリにあるUser.js」という意味です。

/（スラッシュ）: 横移動（同じ階層の移動）

スラッシュ / は、同じ階層のディレクトリやファイルへ移動します。

プロジェクト/
  ├── main.js
  └── classes/
      └── User.js

// main.js
import User from "./classes/User";  // classesディレクトリの中のUser.jsを読み込む

./classes/User は「現在のディレクトリにあるclassesフォルダの中のUser.js」という意味です。

..（ドット2つ）: 1つ上の階層に戻る

ドット2つ .. は、1つ上の階層に戻ることを意味します。

プロジェクト/
  ├── classes/
  │   └── User.js
  └── main/
      └── app.js

// main/app.js
import User from "../classes/User";  // 1つ上に戻ってclassesフォルダへ

../classes/User は「1つ上のディレクトリに戻って、classesフォルダの中のUser.js」という意味です。

相対パスの例

例1: 同じディレクトリ

src/
  ├── main.js
  └── User.js

// main.js
import User from "./User";

例2: サブディレクトリの中

src/
  ├── main.js
  └── models/
      └── User.js

// main.js
import User from "./models/User";

例3: 1つ上のディレクトリ

project/
  ├── models/
  │   └── User.js
  └── controllers/
      └── UserController.js

// controllers/UserController.js
import User from "../models/User";

例4: 深い階層

project/
  ├── src/
  │   └── models/
  │       └── User.js
  └── test/
      └── user.test.js

// test/user.test.js
import User from "../src/models/User";

../src/models/User は：

  1. .. で1つ上（projectディレクトリ）に戻る
  2. src に入る
  3. models に入る
  4. User.js を読み込む

相対パスと絶対パス

相対パス

現在のファイルからの位置関係で指定します。

import User from "./User";      // 相対パス
import User from "../User";     // 相対パス
import User from "./models/User"; // 相対パス

メリット

  • ファイル構造を変更しても、近くのファイルは影響を受けにくい
  • プロジェクト全体を別の場所に移動しても動く

絶対パス

プロジェクトのルート（根本）からの位置で指定します。

import User from "/src/models/User";  // 絶対パス

JavaScriptのモジュールでは、基本的に相対パスを使うことが推奨されています。

拡張子の省略

JavaScriptのimportでは、.js 拡張子を省略できます。

// どちらも同じ
import User from "./User.js";
import User from "./User";

実務では、拡張子を省略することが一般的です。

実用例：プロジェクトの構造

project/
  ├── main.js
  ├── models/
  │   ├── User.js
  │   └── Product.js
  └── utils/
      └── helper.js

// main.js
import User from "./models/User";
import Product from "./models/Product";
import { formatDate } from "./utils/helper";

const user = new User("太郎");

// models/User.js
import { formatDate } from "../utils/helper";  // 1つ上に戻ってutilsへ

class User {
  // ...
}

export default User;

Pythonとの比較

Pythonでも似た概念があります。

# Python
from models.user import User  # パッケージからインポート
from .user import User        # 相対インポート
from ..utils.helper import format_date  # 1つ上の階層から

// JavaScript
import User from "./models/User";
import User from "./User";
import { formatDate } from "../utils/helper";

JavaScriptの方が、ファイルパスの書き方により近い形になっています。

今日の学びのポイント

  • 相対パス: ファイルの位置関係を示す
  • .（ドット1つ）: 現在のディレクトリ
  • /（スラッシュ）: 横移動（同じ階層の移動）
  • ..（ドット2つ）: 1つ上の階層に戻る
  • 拡張子 .js は省略可能
  • 基本的に相対パスを使うことが推奨

相対パスを理解することで、複数のファイルに分けたプロジェクトを適切に管理できるようになります。

コメント