inflearn logo
inflearn logo

フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム

"JSビルドシステム、まだ混乱していますか?" 聞いてもピンとこなかったJSビルドシステムの概念と実践をひとつに!

難易度 初級

受講期間 無制限

JavaScript
JavaScript
Node.js
Node.js
Webpack
Webpack
vite
vite
esm
esm
JavaScript
JavaScript
Node.js
Node.js
Webpack
Webpack
vite
vite
esm
esm

学習した受講者のレビュー

学習した受講者のレビュー

5.0

5.0

서정우

98% 受講後に作成

バンドラーはwebpackやvite程度の浅い知識しかなかったのですが、講義を聞いて原理を理解できるようになりました。ありがとうございます

5.0

Seo Tr

91% 受講後に作成

フロントエンド開発で見落としがちな部分を、明確で分かりやすく説明してくださっていますね。 モジュールシステムをなんとなく知って通り過ぎてしまいがちなのですが、概念から詳しく説明されているので、その部分で曖昧な知識があるなら超おすすめです。知っていることと知らないことでは大きな違いがあるのに、時間を取って先に勉強しておけばよかったと思いました。

5.0

chaeyeon

35% 受講後に作成

フロントエンド開発をしながらいつも混乱していたJSモジュールシステム…講義を聞きながら整理されているようです。 CommonJS、AMD、ESM、UMDの概念はもちろん、なぜそのような構造が生まれたのか歴史的な背景まで説明してくださり、頭の中に体系が築かれつつあります。 特にWebpack、Viteのような最新ツールでモジュールシステムがどのように動作するのかも実際の構成ファイルを見て教えてくださり、ツールに振り回されていた自分自身を省みています😊😊 残りの講義も熱心に聞きながらぐんぐん成長していきたいと思います。 良い講義ありがとうございます :)

受講後に得られること

  • JSモジュールシステムの発展過程とCJS、AMD、ESM、UMDの深掘りした動作原理

  • require, import, define で混同していた全ての文法をシナリオ別実習で整理

  • Vite, SWC, TypeScript, Webpack など 最新ツールにおけるモジュールシステム完全分析

  • 循環参照、条件付きローディング、非同期モジュールまで、実際にぶつかる問題解決ノウハウ

🛠ツールに振り回されないフロントエンド開発者のためのモジュールシステム!

JSモジュールシステムを理解したら、Webpack、Viteはもはや恐怖の対象ではありません!

  • 実務では、バンドル、パッケージマネージャ、トランスファイラを100%活用するためには、モジュールシステムの原理を正確に理解しておく必要があります。


  • どんな新しいツールでも、モジュールシステムの概念が確実であれば、誰よりも速くツールを活用できます。


  • ライブラリを直接作成またはデプロイする場合でも、 CJS、ESM、UMDのビルド戦略を知っておくと、エラーのないライブラリを提供できます。

🙋‍♀こんな方におすすめです!

フロントエンド開発環境を基礎から実戦まで完全に理解し、自分が望むように環境を構成したい開発者

CJS、ESM、AMD、UMDが何であるかをまだ理解していないジュニア開発者

Webpack、Vite、Rollup、Babelなどのビルドツールのコアコンセプトを理解し、実務で100%活用したい開発者


🚀受講後は

  • ES Module、CommonJS、AMDなど各方式の違いを確実に理解し、いつでもどこでも適切に選択・応用できるようになります。

  • Vite、Rollup、Webpack、Babelなどの主要ツールのモジュールシステム連動原理を貫いてみて、複雑な設定も恐れることなくカスタマイズできます。

  • JSビルドシステムを理解し、配布パイプラインで発生するモジュールエラーを迅速に診断・解決することができます。


  • モジュールシステムとツールチェーンの包括的な理解により、チームのアーキテクチャ決定に主導的に参加できます。


👨‍🏫このような内容を学びます

1. JSモジュールシステムの発展をした講義で

CJSからESMまで、JavaScriptモジュールシステムの発展過程を時系列にまとめます。

  • AMDはなぜCJSと分離されたのか?

  • Node.jsがCommonJSを採用した理由

  • UMDが解決しようとした問題

  • Webpack、Babelの登場理由



2. 各モジュールシステムの動作原理と実習

require, define, import が実際にどのような構造で動作するかを直接目で確認して実習してみます。

  • CommonJS
    →モジュール仕様、パッケージ仕様の紹介


    →CJS動作原理 Deep Dive
    →Resolution~Caching全過程説明
    →動作原理ベースのCJS実習(循環参照など)
    →CJSで作られたパッケージ分析

  • AMD


    define関数、非同期モジュールのロードフロー
    →RequireJSを活用したAMD実習

  • ESモジュール


    .mjs 、exportの種類、動的インポートなどの紹介


    → Parsing~Evaluation フロー Deep Dive
    →動作原理ベースのESM実習
    →モジュールグラフの可視化
    →循環参照の説明とCJSとの比較

  • UMD
    →UMDについて

    ブラウザ&Node.js両方互換
    → 汎用ライブラリの実習



🧪各モジュールシステムの動作原理を添えて直接実習しながら、抽象的な概念ではなく実戦知識を習得します


3. 開発ツール別モジュールシステムの実践実習

Webpack、Vite、Babelなどの環境で、どのような原理とプロセスでモジュールを構築するかを見てください。

  • Package.json

  • Typescript(tsc)

  • Babel


  • Webpack

  • Rollup

  • Vite

  • ESLint

🔧ツール設定を「覚える」ではなく、内部動作原理に基づいて「設計」できるようになります。

この講義を作った人


流動菌

  • (前)ラインファイナンシャルフロントエンド開発者

  • サムスンSSAFY、プログラマスなどのフロントエンド開発講義

  • Webパフォーマンス最適化講義の制作と本の出版

  • マイクロソフト393号(JSテーマ)、392号(ブロックチェーンテーマ)寄稿

Rafael

  • (現)カカオOOフロントエンド開発者


🤷‍♀ 「ライブラリを作って配布しようとしましたが、誰かとなり、誰かはできません。」
🤷‍♂ 「Webpack、Viteの設定をインターネットで見てみましたが、実はどういう意味なのかわかりません。」
🤷 「import/export、require/module.exportsが混乱しているプロジェクトをどのように整理しますか?」

9年以上フロントエンド開発とライブラリ設計、バンドル最適化をしてきて、
このような質問をチームから数え切れないほど受けてきました。

ほとんどの開発者はツールの使い方を知っていますが、なぜそのように動作するのかを深く理解せずに進むことは急速です。
そうするとエラーが発生したり、カスタムが必要な瞬間に崩れることになります。

私たちはこの苦しみを解決しようとするこの講義を作りました。

この講義は、単にモジュールを説明する講義ではありません。
実際に実務で「なぜこの設定をしなければならないのか」、「なぜこのような衝突が起きるのか」について
本当の理由と解決策を教えてくれる講義です。

ツールを自由に使いたい実務開発者にこれ以上必要な講義はないでしょう。

質問がありますか?

Q. なぜモジュールシステムを学ぶべきですか?

実務でrequireとimportを混用すると、必ず競合が発生します。

Q. 初心者も聞くことができますか?

はい、十分に聞くことができます。

この講義は「モジュールシステムという言葉が不慣れな方」も理解できるように
JavaScriptモジュールの概念自体から次第に説明します。

import、export、requireのような文法を一度でも書いてみた方ならOK
バンドラ(Webpack、Vite)を使ってみましたが、なぜそのように設定するのか分からない方ならもっと良いです

むしろ、モジュールシステムの概念に初めて触れる方ほど、「なぜこれを書くべきか」はっきり理解できます。
あります

講義中の概念が出るたびに、可視化されたフローチャート、サンプルコード、実習で繰り返し説明します。

Q. どんな練習をしますか?

第2章では、各モジュールシステムを学ぶときは、直接モジュールを作成し、実務に似た環境での実習を通じてエラーを一緒に解決していきます。

第3章では、複数のフロントエンド開発環境ツールツールでモジュールシステムを直接実装していき、対向できる問題を解決していきます。

受講前の注意

実習可能な環境

  • オペレーティングシステムとバージョン(OS):Windows、macOS

  • 使用ツール:コードエディタ(VS Code、cursor、Webstormなど無関係)

    • 講義ではVS Codeで説明

学習資料

  • 講義の際にPPTに進む部分はPDFで提供されます。

  • 練習の例はgithubとして提供されています。

この講義はシリーズ講義の最初の講義です。

  • シリーズ講義でパッケージマネージャー、バンドラー、トランスファイラー講義が続いて発売される予定です!


こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発環境を理解し、達人になりたい方

  • CJS, AMD, UMD, ESM 聞いただけだが、理解不足なジュニア開発者

  • ビルドツールがどのように動作するのか、原理から実践まで理解したい方

  • WebpackやBabelなどのビルドツールと格闘するあまり、多くの時間を無駄にしてしまった方

  • module not found、circular dependency エラーに悩まされた方

前提知識、
必要でしょうか?

  • JavaScript

こんにちは
Rafaelです。

216

受講生

23

受講レビュー

1

回答

5.0

講座評価

1

講座

(現) カカオモビリティ

(前) Buzzni

(元) ロッテショッピング eコマース事業本部

(現)カカオモビリティ(前)Buzzni(前)ロッテショッピング eコマース事業本部

もっと見る

共同知識共有者

カリキュラム

全体

43件 ∙ (5時間 12分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

23件

5.0

23件の受講レビュー

  • hackurity01님의 프로필 이미지
    hackurity01

    受講レビュー 1

    平均評価 5.0

    5

    17% 受講後に作成

    • oracion님의 프로필 이미지
      oracion

      受講レビュー 5

      平均評価 5.0

      5

      98% 受講後に作成

      バンドラーはwebpackやvite程度の浅い知識しかなかったのですが、講義を聞いて原理を理解できるようになりました。ありがとうございます

      • chloe111님의 프로필 이미지
        chloe111

        受講レビュー 1

        平均評価 5.0

        5

        35% 受講後に作成

        フロントエンド開発をしながらいつも混乱していたJSモジュールシステム…講義を聞きながら整理されているようです。 CommonJS、AMD、ESM、UMDの概念はもちろん、なぜそのような構造が生まれたのか歴史的な背景まで説明してくださり、頭の中に体系が築かれつつあります。 特にWebpack、Viteのような最新ツールでモジュールシステムがどのように動作するのかも実際の構成ファイルを見て教えてくださり、ツールに振り回されていた自分自身を省みています😊😊 残りの講義も熱心に聞きながらぐんぐん成長していきたいと思います。 良い講義ありがとうございます :)

        • solidinfra님의 프로필 이미지
          solidinfra

          受講レビュー 1

          平均評価 5.0

          5

          12% 受講後に作成

          • seobm79968177님의 프로필 이미지
            seobm79968177

            受講レビュー 1

            平均評価 5.0

            修正済み

            5

            91% 受講後に作成

            フロントエンド開発で見落としがちな部分を、明確で分かりやすく説明してくださっていますね。 モジュールシステムをなんとなく知って通り過ぎてしまいがちなのですが、概念から詳しく説明されているので、その部分で曖昧な知識があるなら超おすすめです。知っていることと知らないことでは大きな違いがあるのに、時間を取って先に勉強しておけばよかったと思いました。

            似ている講座

            同じ分野の他の講座を見てみましょう!

            ¥7,263