JavaScript レッスン14
モジュール
import/exportを使ってコードを整理しよう
モジュールとは
モジュールは、コードを複数のファイルに分割して管理する仕組みです。 各ファイルが独自のスコープを持ち、必要な部分だけを公開(export)し、 他のファイルから取り込み(import)できます。コードの再利用性と保守性が向上します。
export— 関数や変数を外部に公開import— 他のモジュールから取り込むexport default— デフォルトエクスポート- 名前付きエクスポート — 複数の値を個別にエクスポート
import()— 動的インポート
export と import の基本
モジュールの基本構文をコード例で確認しましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview動的インポートと実践パターン
動的インポートとモジュールの実践的な使い方を学びましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
モジュール構成をシミュレーションして理解を深めましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview