JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。
今回はrequireやimportなど、他のファイルの読み込みについてです。
PHPなどサーバーサイドの言語を使っている場合、ファイルを適切に分けて、モジュール化しておくことが一般的です。
こうすることで
- コードが読みやすくなる
- 機能ごとにファイルを分割できる(保守性、再利用性の向上)
- 名前空間の汚染を防ぐ
などのメリットがあります。これがないと一つのファイルに全ての処理を詰め込むことになりますので、コードが非常に見にくいですね。
が、JavaScript関連は仕様が錯綜しており、情報を整理するのが結構大変です。
自分なりにファイルの読み込みをまとめてみました。
require
サンプルコード
https://github.com/umanari145/front_end_javascript/tree/master/require
- 元々はRequireJSというモジュール管理の仕様。
- 現在ではnodeJSで一般的に使われる手法。
- ブラウザから読み込むタイプのJavaScriptではコンパイルしないと無理。(生で使えない)
参考リンク
import
サンプルコード
https://github.com/umanari145/front_end_javascript/tree/master/import
- ECMAScript2015から使えるようになった書き方。
- コンパイルなしで読み込むことが可能(開発環境を整えるのは思った以上に大変なので、このメリットは大きい気がする。)
