JavaScript レッスン14
モジュール
import/exportを使ってコードを整理しよう
モジュールとは
モジュールは、コードを複数のファイルに分割して管理する仕組みです。 各ファイルが独自のスコープを持ち、必要な部分だけを公開（export）し、 他のファイルから取り込み（import）できます。コードの再利用性と保守性が向上します。
export— 関数や変数を外部に公開import— 他のモジュールから取り込むexport default— デフォルトエクスポート- 名前付きエクスポート — 複数の値を個別にエクスポート
import()— 動的インポート
export と import の基本
モジュールの基本構文をコード例で確認しましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
1 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
動的インポートと実践パターン
動的インポートとモジュールの実践的な使い方を学びましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
1 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
モジュール構成をシミュレーションして理解を深めましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
10 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。