【JS】requireにチャレンジしてみる

こんにちは〜

今日はnode.jsで必須(?)になるrequireに挑戦してみようと思います。

1.呼び出し方

// main.js
const sub = require("./sub");

以上です。簡単です。

で、この"sub"ってなんやねんというと、main.jsと同じディレクトリに置いてあるsub.jsファイルのことです。.jsはいらないんですね。(ちなみに有っても大丈夫みたい)

では次。

2.実行順序

どういう感じで読み込まれるのか、チェックです。

//main.js
console.log("main called");
const sub = require("./sub");
console.log("main finished");

//sub.js
console.log("sub called");

さて、3つのlogはどう読み込まれるのか。(何となく想像は付きますが。)

main called
sub called
main finished

まぁそうですよね。

requireが読み込まれた時点でそのファイルをとりあえず読み込むみたいです。

3.変数の範囲

次にスコープ範囲についてです。

とりあえずコードを。

//main.js
var a = 5;
const sub = require("./sub");
console.log("main_a = " + a); //(1)
console.log("main_b = " + b); //(2)

//sub.js
var b = 10;
console.log("main_a = " + a); //(3)
console.log("main_b = " + b); //(4)

さて、どう出力されると思いますか?

答えは、3のところで未定義エラーを吐かれます。

node.jsには未定義はundefinedではなく、そのままエラーを出すんですね。

(ちなみに3と4を入れ替えると、main_b = 10は出力されます)

ということで、グローバルに書いても、他のファイルの変数へはアクセスできないと言うことですね。

ちなみにここには書きませんでしたが、mainファイルでrequireしたものも他のファイルで共有する事は出来ません。

4.mainでsub変数を扱うには

これ以降は自力で見つけるのは厳しいので調べます()

exportsオブジェクトというものに代入することで、subで宣言したものも使えます。

//main.js
var a = 5;
const sub = require("./sub");
console.log("main_a = " + a);
console.log("main_b = " + sub.b);

//sub.js
exports.b = 10;

//出力
//main_a = 5
//main_b = 10

exportsしたものは、mainで宣言したsubに代入されるので、そこで呼び出すことになります。

ちなみにjavascriptには不思議な関数宣言(関数を変数に代入できる)があるので、これを利用すれば関数も渡すことが可能ですね。

5.subでmain変数を扱うには

じゃあ逆はできるの?

一応できるみたいです。

//main.js
module.exports.a = 5;
const sub = require("./sub");

//sub.js
console.log(module.parent.exports.a);

//出力
//main_a = 5
//main_b = 10

ちょっと宣言が長い。

メイン側では、module.exportsに変数をセットする。

サブ側では、module.parent.exportsで取得する。

という感じです。

ちなみにmainからsubを参照する場合はexportsだけでしたが、あれはmodule.exportsを省略しているからです。(もっというと、global.module.exportsの略)でも逆はこれ以上省略できないみたい。

でもメインで呼ばれているという前提が必要になってしまうので、使う箇所は限定されるかもしれません。

終わりに

これだけ分かればあとは実戦で使っていくだけですよね。

もし分からないことがあればまた投稿していこうと思います。

自分みたいにrequireから避けてた人はぜひ使ってみてください、メインのコードが短くなると思いますよ(分割するという意味で)

ではまた〜

もしよろしければ、サポートをしていただけると今後の励みになります!!