【モダンJavaScript #6】JavaScriptで重要な3つの概念

【モダンJavaScript #6】JavaScriptで重要な3つの概念【フロントエンドエンジニア講座】

📙 もくじ
0:00 イントロダクション
0:52 今回の結論
1:46 モジュール（CommonJS、ES Modules）
4:32 パッケージ管理システム（npm）
9:09 ビルド（webpack）
12:03 まとめ

【モダンJavaScript #7】モジュールの基礎を理解しよう！名前空間（スコープ）の問題とはおさらば！

【モダンJavaScript #7】モジュールの基礎を理解しよう！名前空間（スコープ）の問題とはおさらば！【フロントエンドエンジニア講座】

📙 もくじ
0:00 イントロダクション
0:22 CodeSandbox の紹介
3:18 今回取り扱うモジュールの形式
4:10 事前準備
4:55 script タグの位置に関する話
6:18 よくモジュールで使われる root の話
7:26 モジュールがない場合に生じる問題
10:21 ファイルが多くなるほど問題は大きくなる
13:21 モジュールを使った場合のコード
15:12 モジュールの遅延評価の説明
15:56 モジュールスクリプトを外部ファイルに分ける
17:06 モジュール同士のデータのやり取り
18:52 次回予告

【モダンJavaScript #8】Named import / exportの書き方をマスターしよう！

【モダンJavaScript #8】Named import / exportの書き方をマスターしよう！【フロントエンドエンジニア講座】

📙 もくじ
0:00 イントロダクション
0:55 前回のおさらい
2:25 export / import の種類
3:10 変数: 複数まとめて export
4:20 変数: 宣言と同時に export
4:53 関数: 複数まとめて export
6:22 関数: 宣言と同時に export
6:48 エイリアスとは
7:47 named export のエイリアス
9:15 named import のエイリアス
10:06 named export / import 両方でエイリアス
11:01 エイリアスが使われるタイミング例
14:01 エンディング

【モダンJavaScript #9】Default import / exportの書き方をマスターしよう！

【モダンJavaScript #9】Default import / exportの書き方をマスターしよう！【フロントエンドエンジニア講座】

📙 もくじ
0:00 default import / export を使うべきでない理由
1:13 解説前の事前準備
2:02 変数を default export してみる
3:04 default export は1モジュールにつき1つ
3:46 default export の import について
4:13 default export の仕組みについて
5:55 関数を default export してみる
7:33 named にできて default にできないこと
10:23 識別子を省略して default export
10:54 default export / import はやはり使わない
11:34 次回予告

【モダンJavaScript #10】モジュールの特殊な Import / Export について学ぼう

【モダンJavaScript #10】モジュールの特殊な Import / Export について学ぼう【フロントエンドエンジニア講座】

📙 もくじ
0:00 イントロダクション
1:08 解説前の事前準備
2:02 変数を default export してみる
3:21 All Import について
5:52 Re-Exportの事前準備
7:06 Re-Export ①NamedをすべてRe-Export
8:53 Re-Export ②NamedをすべてRe-Export + エイリアス
9:54 Re-Export ③Namedを選んでRe-Export
10:49 Re-Export ④Namedを選んでRe-Export + エイリアス
12:50 Re-Export ⑤DefaultをDefaultのままRe-Export
14:50 予約語について説明
16:08 Re-Export ⑥DefaultをNamedにしてRe-Export
17:20 Re-Export ⑦NamedをDefaultにしてRe-Export
18:55 Re-Exportのユースケース
22:07 Side Effect Importの事前準備
22:43 Side Effect（副作用）とは
23:34 Side Effect Importをコードで解説
25:24 Side Effect Importのユースケース
26:24 次回予告