
非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで
Jay
私が好きなユーチューバーのグルメマップを作成しながら、フロントエンド、バックエンド、Kakao Map API の使用方法、公開までを一度に学べるフルスタックグルメマップの講義です。
初級
HTML/CSS, JavaScript, REST API
"JSビルドシステム、まだ混乱していますか?" 聞いてもピンとこなかったJSビルドシステムの概念と実践をひとつに!
学習した受講者のレビュー
5.0
서정우
バンドラーはwebpackやvite程度の浅い知識しかなかったのですが、講義を聞いて原理を理解できるようになりました。ありがとうございます
5.0
Seo Tr
フロントエンド開発で見落としがちな部分を、明確で分かりやすく説明してくださっていますね。 モジュールシステムをなんとなく知って通り過ぎてしまいがちなのですが、概念から詳しく説明されているので、その部分で曖昧な知識があるなら超おすすめです。知っていることと知らないことでは大きな違いがあるのに、時間を取って先に勉強しておけばよかったと思いました。
5.0
chaeyeon
フロントエンド開発をしながらいつも混乱していたJSモジュールシステム…講義を聞きながら整理されているようです。 CommonJS、AMD、ESM、UMDの概念はもちろん、なぜそのような構造が生まれたのか歴史的な背景まで説明してくださり、頭の中に体系が築かれつつあります。 特にWebpack、Viteのような最新ツールでモジュールシステムがどのように動作するのかも実際の構成ファイルを見て教えてくださり、ツールに振り回されていた自分自身を省みています😊😊 残りの講義も熱心に聞きながらぐんぐん成長していきたいと思います。 良い講義ありがとうございます :)
JSモジュールシステムの発展過程とCJS、AMD、ESM、UMDの深掘りした動作原理
require, import, define で混同していた全ての文法をシナリオ別実習で整理
Vite, SWC, TypeScript, Webpack など 最新ツールにおけるモジュールシステム完全分析
循環参照、条件付きローディング、非同期モジュールまで、実際にぶつかる問題解決ノウハウ
実務では、バンドル、パッケージマネージャ、トランスファイラを100%活用するためには、モジュールシステムの原理を正確に理解しておく必要があります。
どんな新しいツールでも、モジュールシステムの概念が確実であれば、誰よりも速くツールを活用できます。
ライブラリを直接作成またはデプロイする場合でも、 CJS、ESM、UMDのビルド戦略を知っておくと、エラーのないライブラリを提供できます。
フロントエンド開発環境を基礎から実戦まで完全に理解し、自分が望むように環境を構成したい開発者
CJS、ESM、AMD、UMDが何であるかをまだ理解していないジュニア開発者
Webpack、Vite、Rollup、Babelなどのビルドツールのコアコンセプトを理解し、実務で100%活用したい開発者
ES Module、CommonJS、AMDなど各方式の違いを確実に理解し、いつでもどこでも適切に選択・応用できるようになります。
Vite、Rollup、Webpack、Babelなどの主要ツールのモジュールシステム連動原理を貫いてみて、複雑な設定も恐れることなくカスタマイズできます。
JSビルドシステムを理解し、配布パイプラインで発生するモジュールエラーを迅速に診断・解決することができます。
モジュールシステムとツールチェーンの包括的な理解により、チームのアーキテクチャ決定に主導的に参加できます。
CJSからESMまで、JavaScriptモジュールシステムの発展過程を時系列にまとめます。
AMDはなぜCJSと分離されたのか?
Node.jsがCommonJSを採用した理由
UMDが解決しようとした問題
Webpack、Babelの登場理由
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両方互換
→ 汎用ライブラリの実習
🧪各モジュールシステムの動作原理を添えて直接実習しながら、抽象的な概念ではなく実戦知識を習得します。
Webpack、Vite、Babelなどの環境で、どのような原理とプロセスでモジュールを構築するかを見てください。
Package.json
Typescript(tsc)
Babel
Webpack
Rollup
Vite
ESLint
🔧ツール設定を「覚える」ではなく、内部動作原理に基づいて「設計」できるようになります。
(前)ラインファイナンシャルフロントエンド開発者
サムスンSSAFY、プログラマスなどのフロントエンド開発講義
Webパフォーマンス最適化講義の制作と本の出版
マイクロソフト393号(JSテーマ)、392号(ブロックチェーンテーマ)寄稿
(現)カカオ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
224
受講生
24
受講レビュー
1
回答
4.9
講座評価
1
講座
(現) カカオモビリティ
(前) Buzzni
(元) ロッテショッピング eコマース事業本部
(現)カカオモビリティ(前)Buzzni(前)ロッテショッピング eコマース事業本部
全体
43件 ∙ (5時間 12分)
講座資料(こうぎしりょう):
6. モジュールとは
03:45
8. CJS 登場
06:13
9. Node.JS 登場
06:44
10. AMD 登場
06:23
11. UMD 登場
05:10
12. ESM 登場
05:11
13. ESM その後 + まとめ
09:26
全体
24件
4.9
24件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
修正済み
受講レビュー 1
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
同じ分野の他の講座を見てみましょう!