javascriptは基本的にブラウザーの上にのっかっているエンジンなんだけど、結構変わった言語である。で、いちいちブラウザで書いてリロードするのも大変なのでコンソールで実行してみよう。

Hello world的な

hello.js

console.log('Hello, World!');

実行

% node hello.js                             
Hello, World!

ってまあこれはあんま意味がないので

モジュール

greeting.js というものをつくってみよう

export const greeting = 'Hello, World!';

なるほど、greetingという「変数」をexportしている

これをimportしてみると

import { greeting } from './greeting.js';
console.log(greeting);

この初歩中の初歩みたいなコードがまず動かない。

% node hello.js                                                         
(node:83588) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/fukuyama/jswork/hello.js:1
import { greeting } from './greeting.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.17.1

メッセージにあるように、ESモジュールを読みこむにはpackage.jsonでそういう指定をするかmjsという拡張子にしろと行っている。これはいきなり面来らう所である。

require

指定に従わずこのような構文にしてみよう

// import { greeting } from './greeting.js';
// console.log(greeting);
const greetingModule = require('./greeting.js');
console.log(greetingModule.greeting);

greeting.jsも書き換える

// export const greeting = 'Hello, World!';
module.exports.greeting = 'Hello, World!';

これは普通に動作する

% node hello.js                                                                           
Hello, World!

たったこれだけの事なんだけど、結構挙動が違うので最初は戸惑うように思う。まず、importの形式とrequireの形式で違う動きを見せたりするのだった。

AIによるまとめ

すなわち、もともとjsファイルはファイルを分割していわゆるモジュール化する手段を持っていなかったので、最初の方は無理無理requireしていたという状態があるそーな。つまりrequireはそれ自体ブラウザーで動作しきらんようで最終的に「バンドラー」で1つのファイルに纏められる事になるという事のようである。

一方package.jsonを手作りするとmoduleシステムも動作する

import { greeting } from './greeting.js';
console.log(greeting);

export const greeting = 'Hello, World!';

に戻して

{
  "type": "module"
}

こういうjsonを作ると

% node hello.js              
Hello, World!

動く。

import/export moduleの構文

というか、そもそもだが

import { greeting } from './greeting.js';
console.log(greeting);

この受け取り方を名前付きインポート(Named Import)と言うそうな。つまり今

export const greeting = 'Hello, World!';

としているが

export const greeting = 'Hello, World!';
export const farewell = 'Goodbye, World!';

という書き方もできる。受け取る場合は、まあ今greeting.jsに書いてるからアレな感じだけど

import { greeting, farewell } from './greeting.js';
console.log(greeting);
console.log(farewell);

このようにして受け取る。この構文は最近のjavascriptでは頻発すると思うから基礎を抑えておくのが重要っぽいぞと。

もちろん結果は

% node hello.js                                        
Hello, World!
Goodbye, World!

となるわけだ。

今回はここまで。このシリーズ、ちょっと続けていくぞい。