JavaScriptとCSSのモジュール
はじめに
Web界隈、とりわけフロントエンド界隈の変化は速く、次から次へと新しい技術や概念が登場します。
筆者がフロントエンドをお仕事でやっていたのはすでに5年以上も前のお話ですので、一部「今更」…感のある内容も含まれますが、最近調べて、個人的に感動した「モジュール」についてのお話です。
今回は「素」の JavaScript のお話です（俗に言う Vanilla です）
JavaScript モジュール
この概念自体はすでに「ES2015(ES6)」の頃から存在していました。
ところが、当時のモダンブラウザでは対応しておらず、意気揚々と試し、みごと撃沈した記憶がありました。
最近になって再び調べてみて、各ブラウザ以下のバージョンの頃から対応していたようです。
- Chrome: 60
- Firefox: 61
JavaScript モジュールがあると何が嬉しいか
JavaScriptファイルの管理・参照がとても楽になります。
がんばって開発を進め、大量の JavaScript ファイルが生じた場合、呼び出し側のHTMLは以下のようになります。
<head>
<script src='./js/viewer/main.js'></script>
<script src='./js/calendar/main.js'></script>
<script src='./js/popup/main.js'></script>
<script src='./js/slider/main.js'></script>
<script src='./js/favorite/main.js'></script>
<script src='./js/util/main.js'></script>
<!--：以下、延々参照地獄・・・-->
</head>
はじめの内は数が少ないから毎回呼び出し側のHTMLに参照を追加して… とやっていても数が増えると恐ろしいことに…。
参照追加が漏れ「なんかよくわかんないけど動かない！」、重複して読み込んで誤動作… etc
また、例えば VSCode のような開発環境で開発をすすめる時、肝心のインテリセンスが動作しなかったりと、あまり良いことはありません。。
なので 5年ほど前に筆者が開発をしていた際はどうしても
- 代替JavaScript を使い、型の問題を解決！（誤実装防止、インテリセンスが効くようにする…etc 色々効能があります）
- gulp などのタスクランナーで上記のような参照設定などは「ビルド」という仕組みに組み込んで解決！
といった解決方法が主流でした。（もちろん今でも有用かと思います）
どうやって使うか
具体例で書きます。
例えば以下のような構成の場合
- index.html
- main.js
- lib
- a.js
- b.js
- c.js
HTML側の参照
<head>
<script src='main.js' type='module'></script>
</head>
JS側の参照
import { A } from "./lib/a.js";
import { B } from "./lib/b.js";
import { C } from "./lib/c.js";
window.onload = async() => {
const appA = new A();
const appB = new B();
const appC = new C();
console.log(`${appA.a}\n${appB.b}\n${appC.c}`);
};
各モジュール（Aの場合）
export class A {
constructor() {
this.a = 'Aのモジュールです';
}
}
- ※ 同様のファイルを A/B/C 3つ用意します
動作結果
ローカルでホストし Chrome(97) で表示した結果が以下の通りです。
バッチリ動いていますね！
もちろんインテリセンスについても、きちんとプログラム的に参照がなされているため、候補が出てきます！
所感とまとめ
筆者的には、このごく当たり前のような動作ですら感動を覚えてしまいました…。
gulp などで作り上げた、ゴテゴテとしたビルドシステムもなく、代替JSを使うでもなく 「素」の JavaScript でここまでできるようになったのですから…。
ちなみにこの機能がモダンブラウザで使えるようになったのが 2018年の半ばあたりですから、筆者がフロントエンドをやっていた当時としてはまだ出来たてほやほやの状態。
「即・使いこなして実務で！」というわけにも行かず、また、ブラウザのバージョン管理が厳密な現場では、そもそも未対応で動かなかったり… など、実際に使える技術ではなかったように記憶しています。
さて長くなってしまったので今回はこのあたりとし、次回は CSS モジュールを少しばかり取り上げる予定です。