💬

【JavaScript】CommonJSについて初心者メモ

に公開
JavaScript
初心者
CommonJS
メモ
tech

はじめに

アルゴリズム問題を解いていく中で、ファイルの内容を別のファイルで使えるようにするためには2つの方法があるとわかりました。
ES ModuleとCommonJSです。

この記事では、CommonJSについて実際に使用してわかったことをまとめていきます。

CommonJSとは

CommonJSは、主にNode.jsというサーバーサイドでJavaScriptを動かす環境で使われてきた、モジュールの仕組みです。
これは、ESモジュールが登場する前のNode.jsにおける事実上の標準でした。

CommonJSの役割

CommonJSもESモジュールと同じく、コードを複数のファイルに分けて管理するための仕組みです。
ESモジュールがブラウザでも使えるように設計されたのに対し、CommonJSはサーバー環境、つまりファイルシステムにアクセスできる環境での使用を想定して作られました。

ESモジュールが「importとexport」を使うのに対し、
CommonJSは「require()とmodule.exports」を使います。

CommonJSの基本ルール

1. module.exports

他のファイルで使ってほしい変数や関数を「公開」するために使います。
ESモジュールのexportに相当します。

（例）最小値を持つノードを返す関数
function minimumNode(root){
    if(root === null) return null;

    let currentNode = root;

    while(currentNode.left !== null){
        currentNode = currentNode.left;
    }

    return currentNode;
}

module.exports = minimumNode; // ←ここ

2. require()

他のファイルで公開されている部品を「読み込む」ために使います。
ESモジュールのimportに相当します。

（例）minimumNodeを別のファイルで使用する
const minimumNode = require('../src/minimumNode.js');
const toBinaryTree = require('../../../../src/js/toBinaryTree.js');
const binarySubtreeToArray = require('../../../../src/js/binarySubtreeToArray.js');

// 1.
const root1 = toBinaryTree([]);
console.log(binarySubtreeToArray(minimumNode(root1)));
...

require()は「指定したファイルを読み込んで、その中身をください」という命令です。
読み込んだ中身は、constで受け取ることができます。

CommonJSの特徴

1. 同期的な読み込み
require()は、モジュールを読み込む際に、その処理が完了するまで次のコードの実行を待機します。
サーバーサイドのプログラムでは、ファイルシステムから同期的にモジュールを読み込むことが一般的であるため、この特性は理にかなっていたようです。

2. Node.jsのデフォルト
ESモジュールが普及するまで、Node.jsではこれが標準のモジュールシステムでした。
現在でも、多くの既存のライブラリやプロジェクトで使われています。

3. ブラウザでは使えない
そのままではブラウザで動かすことはできません。ブラウザで使いたい場合は、WebpackなどのツールでCommonJSをブラウザが理解できる形に変換（バンドル）する必要があります。

まとめ

今回は、定義した関数を別ファイルで使用する方法としてCommonJSについて簡単にまとめさせていただきました。
目的によってES Moduleと使い分けできるようになっていきたいものです。

最後までお読みいただき、ありがとうございました。

参考URL

https://nodejs.org/api/modules.html#moduleexports

http://zenn.dev/yodaka/articles/596f441acf1cf3

Discussion