ES2015でのモジュールの使用の仕方（サイト運用）

Question

こんばんわ。

ES2015を使用して、サイトを運用しようとしています。

その際のモジュールの使い方です。

• クラスを定義したファイルからインスタンスを生成する
• ファイル名がいたるところに散る（？）
• 名前空間やバッティングが発生(？)

となっているのかなと思いました。

モジュールでクラス毎に機能を分解して、必要な場所だけインポートすれば、オブジェクトを汚さずに済むのかなと思いました。

現在、ES2015でサイト運用をされている方はどのようなモジュールの使い方をされていますか？

漠然とした質問ですが、現実の対応方法が気になりましたm(_ _)m

Answer 1

モジュールでクラス毎に機能を分解して、必要な場所だけインポートすれば、オブジェクトを汚さずに済むのかなと思いました。

はいそのとおりですね。ESモジュールはimportの際にexportしたモジュール内の変数を必要なときだけ、使用することが出来ます。
これによって、現在のファイル内で名前が重複するのを防げるほか、コードの粒度が調整でき、管理しやすくなります。また、仮に、複数のライブラリを使用してクラスの名前が重複してしまっても、

import * as SampleLib1 from 'lib1'
import * as SampleLib2 from 'lib2'

SampleLib1.SampleClass
SampleLib2.SampleClass

のようにその場で名前空間を切り分けることが出来ます(ESモジュールに限った話ではなくほかのモジュール形式でも同様です。)

railsのwebpackerやsprockete-es6,nodeのgulp+babel,browserifyなど色々試した結果、結局nodeからwebpackでbuildする方法に落ち着きました。バックエンドに依存せずコンパイル速度も気をつけてれば遅くならず、自由にディレクトリ構成変えられていい感じになります。ただ、設定方法が込み入っているので最初は理解するまで、操作になれないかもしれません。もし試されるののであれば、いろんなgitリポジトリ上の情報を真似て参考にしていくのが良いかもです。webpackerなどの言語依存のラッパーは細かいビルド設定を隠蔽していて、webpackの機能を十分使いこなせないため、結局webpackそのものを理解して使うのが一番良いという結論に落ち着くと思います。

Comments

[ayu]

回答、ありがとうございます！