0Pricing
JavaScript Academy · レッスン

ESMローダーの癖とパス・URLの違い

URLを安全に解決し、相対指定子とベア指定子を理解し、ファイルURLとWeb URLの違いを学びます。すぐに実行できる小さなデモを扱います。

「ESMローダーの癖とパス・URLの違い」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

全体像

目標: 環境をまたいでパスを安全に解決します。

  • 相対パスの解決にはURLコンストラクターを使います
  • 相対指定子とbare指定子の違いを理解します
  • file:とhttps:の違いを確認します
  • 壊れやすい文字列結合によるパス作成を避けます
ESMローダーの癖とパス・URLの違い — イラスト1

ベースに対する相対指定

new URL(relative, base)は、パスの各部分とスラッシュを正しく処理します。

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
ESMローダーの癖とパス・URLの違い — イラスト2

..で正規化する

コンストラクターが../を正しく取り除くため、手作業で文字列を操作する必要はありません。

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
ESMローダーの癖とパス・URLの違い — イラスト3

file: URLの特徴

file: URLはNodeに近い環境でローカルファイルを指します。ブラウザーからは、ユーザーの操作なしに直接読み取れません。

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
ESMローダーの癖とパス・URLの違い — イラスト4

指定子の種類

ESMローダーはbare指定子を相対URLや絶対URLとは異なる方法で扱います。種類を把握しておくと役立ちます。

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
ESMローダーの癖とパス・URLの違い — イラスト5

初心者向けの習慣

ヒント:

  • 文字列の連結よりURL(relative, base)を優先します。
  • bare指定子と相対指定子の違いを理解します。
  • ブラウザーにファイルが存在すると決めつけないようにします。
  • 初心者にも分かりやすいよう、パスは短く読みやすく保ちます。
ESMローダーの癖とパス・URLの違い — イラスト6

URL解決の基礎クイズ

クイックチェック: URLを安全に作成します。

ESMローダーの癖とパス・URLの違い — イラスト7

まとめ

まとめ: URLコンストラクターで相対パス（./、../）を解決し、bare指定子と相対指定子を区別します。また、file: URLはWeb URLとは異なることを覚えておきます。

ESMローダーの癖とパス・URLの違い — イラスト8

よくある質問

「ESMローダーの癖とパス・URLの違い」レッスンは無料ですか？

はい。「ESMローダーの癖とパス・URLの違い」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「ESMローダーの癖とパス・URLの違い」で何を学びますか？

URLを安全に解決し、相対指定子とベア指定子を理解し、ファイルURLとWeb URLの違いを学びます。すぐに実行できる小さなデモを扱います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「ESMローダーの癖とパス・URLの違い」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. グローバル、fetchの利用可否、ファイル・ネットワークAPI
  2. ESMローダーの癖とパス・URLの違い
  3. 環境変数と設定のパターン
← JavaScript Academyに戻る