見出し画像

Node.jsのモジュール２種類あるんだってさ

:Do

Glück auf meine freunde.
:Doです。

この記事は、Webアプリケーション開発をしたことがあるが、ちゃんと理解せず作っていて、奇跡的に作れていた人が書いています。細かいところまで理解するのを怠っていたので、今ここで勉強し直しているんです。


何話そうか

Node.jsを一から少しずつ勉強しているところでして、モジュールについて勉強し直しています。

モジュールシステム、２種類ありました。
大学でNode.js使っていろいろ開発やっていたのに、そんなもの全く意識せずコード書いてました。

ちなみに、モジュールはなんとなく知ってました。
コードの塊で、アプリの他のファイル、フォルダーで使いまわすことができる、みたいな。多分あってる。

で、でよ。このモジュールを他のファイルで使いたい！このファイルで読み込みたい！って時のやり方が、２種類あるんですって。

まずは１つ目。

module.exports, requireのやつ

なんかソースコードの上の方の行にrequireとか書いてありませんでした？
私はそんな認識でした。

これ、モジュールをシャバシャバやってるやつです。
このやり方は、CommonJSというモジュールシステムでのやり方です。クラシックなやり方とでも言いましょうか。

CommonJSだって

老舗。

こんな感じで使うんです。

//game.js

const schalkeFxxkingWin = function(team) {
    console.log(`Schalke fxxking won against ${team}!! JAAAAAA`);
}
 
const isUltrasHappy = function(result) {
    if(result === 1){
        console.log("Schalalalalala");
    } else {
        console.log("Scheiße!!");
    }
}

module.exports = {
	schalkeFxxkingWin,
	isUltrasHappy
};

schalkefxxkingWin, isUltrasHappyという皆が作ったことあるであろう非常にベーシックな関数を、他のファイルでも使い回したい時に、
module.exportsというオブジェクトに関数をぶち込んでください。

そして、他のファイルでこいつらを使いましょう。こうやって。

// schalke.js

const game = require('./game.js');

game.schalkeFxxkingWin('Borussia BVB');

game.isUltrasHappy(1);

gameに、game.jsで使い回したいってぶち込んだ関数たちが入ってます。
「.」でそれぞれ呼び出せます。

console:
Schalke fxxking won against Borussia BVB!! JAAAAAA
Schalalalalala

なるほどね。おけおけ。

じゃあ二つ目は。

import, exportとか使うやつ

こっちは、もう少し新しいって。ECMAScript(ESM)ってモジュールシステムでのやり方です。

ECMAScriptですってよにいちゃん

にいちゃんじゃない人も、使い方見てってください。

//game.js

const schalkeFxxkingWin = function(team) {
    console.log(`Schalke fxxking won against ${team}!! JAAAAAA`);
}
 
const isUltrasHappy = function(result) {
    if(result === 1){
        console.log("Schalalalalala");
    } else {
        console.log("Scheiße!!");
    }
}

export {
	schalkeFxxkingWin,
	isUltrasHappy
};

ね。そいで、呼び出したいときは、こう。

// schalke.js

import { schalkeFxxkingWin, isUltrasHappy } from './addTwo.mjs';

schalkeFxxkingWin('Borussia BVB');

isUltrasHappy(1);

で、
console:
Schalke fxxking won against Borussia BVB!! JAAAAAA
Schalalalalala

こうなると。

やり方はわかりました。どっちゃでもよくねえか。

なんで２種類できちゃってんのどっち使ったらいいか分からないじゃあないか

ね。こう思っちゃったんです。

結論。
ESMの方使っときゃ新しいよいいよ。JSの未来だよ。

CommonJSでは、同期的にローディングしてくれるんです。つまり、モジュール読み込むまで、他のコードが実行されないんだって。サーバーサイドでは有利だというふうに聞きました。
あとはコードの中でrequireできるとか。

ただ。やっぱ、ESMの方がもうだいぶスタンダードです。
全然こっちでやった方がいいらしいです。

非同期で、Webアプリのパフォーマンスがよりよくなりますね。ブロックしないんで。


ありがとうここまで読んでくれてくださって

初めてこういう記事を書いてみました。個人的に作っているアプリでModuleのコードを見てふと「何これ」となった時に、こういう「何これ」は大事にしていかないといけない気がしまして、これをたくさん集めてアウトプットしていかないといけないなという思いからこの記事が投稿されました。
今後も引き続き勉強頑張ります。

Glück auf!


この記事が気に入ったらサポートをしてみませんか？