Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

ブラウザだったらimportやrequireしなくても

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

正直、この辺りの常識度というか、正しい認識を知りたいのだけど……。この記事、合ってるかな。

目次

環境

ファイルを分けて管理したい。

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.jstest2.jsの順番で読み込むと普通に全部問題なく実行された。やっぱりブラウザで読み込めば、別ファイルの変数も関数も処理できるんだよな。node.jsとかで実行するならrequireが必要だけれども。

当然、読み込む順番をtest2.jstest.jsにするとundefinedでエラーになる。そういう依存関係はあるわけで。そういう時はwebpackとかで依存解決とかするわけだろうか。

しかしブラウザで実行するファイルを分割するだけなら、importもrequireもいらないということで良さそう。当たり前すぎるのか、インターネッツではみつからないけども……。

まとめ

という感じでファイルを分けたら便利そうかな、と思っている。

もし「ただ分割読み込みするだけだと不都合あるんだよ」という情報があったら教えて頂けると幸い。