正直、この辺りの常識度というか、正しい認識を知りたいのだけど……。この記事、合ってるかな。
目次
環境
ファイルを分けて管理したい。
kintoneをやっていて、開発環境と、本番環境で使う変数を分けたい、ということがある。
kintoneの本番環境・開発環境で異なるアプリIDを自動判定する方法 - Qiita
こういうのもそう。
あるいは、基本的な操作は共通ライブラリを作って流用したい、ということで、ファイルを分割したくなる。
webで「JavaScript ファイル分割」など調べるとimportとかrequireとか、webpackとかbabelとかが出てくる。
だが待てよ? ブラウザって、jquery.jsを読み込んで普通にそっちの関数とか使うじゃん? 別ファイルの関数とか読めるんじゃなかったっけ?
//test.js var test_int = 3; var test_string = 'testeer'; function test(params) { if (typeof parms !== "undefined" && parms !== null && parms !== '') { console.log(params); } else { console.log('no'); } } var test_function = function () { console.log('test_functionだよ'); }
// test2.js console.log(test_int); console.log(test_string); test_function(); test('params');
test.js
→ test2.js
の順番で読み込むと普通に全部問題なく実行された。やっぱりブラウザで読み込めば、別ファイルの変数も関数も処理できるんだよな。node.jsとかで実行するならrequireが必要だけれども。
当然、読み込む順番をtest2.js
→ test.js
にするとundefinedでエラーになる。そういう依存関係はあるわけで。そういう時はwebpackとかで依存解決とかするわけだろうか。
しかしブラウザで実行するファイルを分割するだけなら、importもrequireもいらないということで良さそう。当たり前すぎるのか、インターネッツではみつからないけども……。
まとめ
- 設定ファイル
- ライブラリ
- 実行ファイル
- 単体テスト
という感じでファイルを分けたら便利そうかな、と思っている。
もし「ただ分割読み込みするだけだと不都合あるんだよ」という情報があったら教えて頂けると幸い。