my coding note

コーディングして思ったことなどを気ままに

ES modulesを触ってみる

背景

  • 最近フロントエンドに再入門しました。
  • commonjsとかそこらへんも全然わかってはいません。
  • JavaScript(ES6)の勉強を学習サイトの入門コースでやってみたのですが、import/exportに触れていなかったので軽くやってみました。

この記事でやること

  • 制限事項
  • import/exportの基本的な書き方(モジュールバンドラーなし)

実行環境

  • Thimble by Mozilla
  • ローカルでは動かないようなので、オンラインコードエディターを使用

制限事項

  • "strict"モードになる
  • htmlに読み込む際はscriptタグにtype="module"の属性を追加

export

  • 名前付き(named)、もしくは、defaultで定義できる
  • class
export class Human {...}
export default class Human {...}
  • function
export function func1(){...}
function func2() {...}
export {func2}
export default function () {...}
export default function func3() {...}
  • var, const, let
export let val1 = 1
let val2
export default val2 = 2
  • 1ファイルに複数のexportがかける
  • export defaultはモジュールに1つ

import

  • defaultでexportしたものはimport先で任意の名称をつける
    • 複数読み込む場合は、defaultを先にインポートする
  • ワイルドカード(モジュール全てを読み込む)
  • as名前空間やリネームに使用できる
import defaultModule, { namedModule, namedModule as rename} from './something.js'
import * as module1 from './something.js'

動かしたコード

ES module 基礎

出典

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

補足

  • 現在のブラウザではまだ十分に動かないので、webpack等を使う必要があります。