.mjs拡張子を用いる方法からpackage.jsonに"type": "module"と書く方法に変更

docs/3-web-servers/03-node-js/index.mdx

@@ -91,13 +91,13 @@ WindowsのWSLでは、エクスプローラーのサイドパネルから`Linux`
 
 :::
 
-続いて、開いたフォルダに`main.mjs`ファイルを作成し、下のスクリプトを保存します。拡張子が`.mjs`であることに気をつけてください。`console.log`関数は、画面に文章を表示させるための関数です。
+続いて、開いたフォルダに`main.js`ファイルを作成し、下のスクリプトを保存します。`console.log`関数は、画面に文章を表示させるための関数です。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 console.log("Hello World!");
 ```
 
-ターミナルを開き、`node main.mjs`コマンドを実行します。
+ターミナルを開き、`node main.js`コマンドを実行します。
 
 ![Hello Worldを実行](./run-hello-world.png)
 

docs/3-web-servers/04-module/_samples/date-fns/package.json

@@ -1,5 +1,6 @@
 {
   "name": "date-fns",
+  "type": "module",
   "dependencies": {
     "date-fns": "^4.1.0"
   }

docs/3-web-servers/04-module/_samples/default-export/main.js

@@ -0,0 +1,2 @@
+import add from "./sub.js";
+console.log(add(3, 4));

docs/3-web-servers/04-module/_samples/mathjs/package.json

@@ -1,5 +1,6 @@
 {
   "name": "mathjs",
+  "type": "module",
   "dependencies": {
     "mathjs": "^14.5.3"
   }

docs/3-web-servers/04-module/_samples/named-export/main.mjs → docs/3-web-servers/04-module/_samples/named-export/main.js

@@ -1,3 +1,3 @@
-import { add, subtract } from "./sub.mjs";
+import { add, subtract } from "./sub.js";
 console.log(add(3, 4));
 console.log(subtract(4, 3));

docs/3-web-servers/04-module/_samples/node-emoji/package.json

@@ -1,5 +1,6 @@
 {
   "name": "emoji",
+  "type": "module",
   "dependencies": {
     "node-emoji": "^2.2.0"
   }

docs/3-web-servers/04-module/index.mdx

@@ -7,30 +7,30 @@ import npmInstallVideo from "./npm-install.mp4";
 
 ## 別のファイルに書かれたプログラム
 
-Node.jsでは、あるファイルに書かれたプログラムは、別のプログラムからは読み込めません。よって、次の`main.mjs`はエラーになります。
+Node.jsでは、あるファイルに書かれたプログラムは、別のプログラムからは読み込めません。よって、次の`main.js`はエラーになります。
 
-```javascript title="sub.mjs"
+```javascript title="sub.js"
 function add(a, b) {
   return a + b;
 }
 ```
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 console.log(add(3, 4)); // Uncaught ReferenceError: add is not defined
 ```
 
 別のファイルに書かれたプログラムを読み込むための手段として、Node.jsでは<Term>**モジュール**</Term>という仕組みが用意されています。JavaScriptでは、すべてのファイルが<Term>モジュール</Term>として扱われます。
 
-Node.jsでは、ファイルの拡張子が`.mjs`の場合、`export`文や`import`文を用いて他の<Term>モジュール</Term>とのやりとりを行います。
+Node.jsでは、`export`文や`import`文を用いて他の<Term>モジュール</Term>とのやりとりを行うことができます。
 
-```javascript title="sub.mjs"
+```javascript title="sub.js"
 export default function add(a, b) {
   return a + b;
 }
 ```
 
-```javascript title="main.mjs"
-import add from "./sub.mjs";
+```javascript title="main.js"
+import add from "./sub.js";
 console.log(add(3, 4));
 ```
 
@@ -44,7 +44,7 @@ console.log(add(3, 4));
 
 上のように**デフォルトエクスポート**を使うと各モジュールで複数の関数をエクスポートすることができません。その場合は、**名前付きエクスポート**を用いることができます。
 
-```javascript title="sub.mjs"
+```javascript title="sub.js"
 export function add(a, b) {
   return a + b;
 }
@@ -54,8 +54,8 @@ export function subtract(a, b) {
 }
 ```
 
-```javascript title="main.mjs"
-import { add, subtract } from "./sub.mjs";
+```javascript title="main.js"
+import { add, subtract } from "./sub.js";
 console.log(add(3, 4));
 console.log(subtract(4, 3));
 ```
@@ -66,9 +66,9 @@ console.log(subtract(4, 3));
 
 :::tip[CommonJSモジュール]
 
-さきほどのように`export`文と`import`文を用いて他の<Term>モジュール</Term>とのやり取りを行うJavaScript標準の<Term>モジュール</Term>システムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。Node.jsでは、拡張子を`.mjs`にすることで、ECMAScript<Term>モジュール</Term>を用いてプログラムを記述できます。
+さきほどのように`export`文と`import`文を用いて他の<Term>モジュール</Term>とのやり取りを行うJavaScript標準の<Term>モジュール</Term>システムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。
 
-ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports`オブジェクトや`require`関数を用いて他の<Term>モジュール</Term>とのやり取りを行うことができます。Node.jsでは、拡張子を`.js`にすることで、CommonJS<Term>モジュール</Term>を用いてプログラムを記述できます。
+ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports`オブジェクトや`require`関数を用いて他の<Term>モジュール</Term>とのやり取りを行うことができます。
 
 `exports`オブジェクトは標準では空のオブジェクトですが、プログラム中から書き換えることができます。
 
@@ -98,7 +98,7 @@ console.log(add(3, 4));
 
 Node.jsの[`fs`モジュール](https://nodejs.org/api/fs.html)を用いると、Node.jsからファイルの読み書きを行うことができます。`fs`モジュールの[`readFileSync`関数](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options)は、ファイルの読み込みを行う関数で、第1引数にファイルへのパスを指定し、第2引数には文字コードを指定します。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import { readFileSync } from "node:fs";
 console.log(readFileSync("./sample.txt", "utf-8"));
 ```
@@ -127,7 +127,7 @@ Hello World!
 
 第1引数にファイルへのパス、第2引数に書き込む文字列を指定します。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import { writeFileSync } from "node:fs";
 writeFileSync("./sample.txt", "Hello World!");
 ```
@@ -146,7 +146,7 @@ Node.jsにおける**パッケージ**とは、主にJavaScriptファイルを
 
 また、npmから利用されるパッケージを集積したサービス[npmjs.com](https://www.npmjs.com/)もまた、npmと呼ばれます。例として、日付や時刻の操作のために用いられる<Term>ライブラリ</Term>である、[date-fns](https://www.npmjs.com/package/date-fns)パッケージを利用してみましょう。
 
-npmを用いて開発を行うには、まず`npm init`コマンドを実行します。いくつか質問をされるので、Enterキーを押し続けて質問をスキップしましょう。完了すると、フォルダの中に`package.json`という名前のファイルが作成されます。このファイルは、npmによって管理されるフォルダに必ず1つ必要になるものです。
+npmを用いて開発を行うには、まず`npm init`コマンドを実行します。いくつか質問をされるので、`type`と尋ねられた時には`module`と入力し、それ以外の時にはEnterキーを押し続けて質問をスキップしましょう。完了すると、フォルダの中に`package.json`という名前のファイルが作成されます。このファイルは、npmによって管理されるフォルダに必ず1つ必要になるものです。
 
 <video src={npmInitVideo} controls muted />
 

docs/3-web-servers/05-server/_samples/app-use/package.json

@@ -1,7 +1,8 @@
 {
   "name": "express-server",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/complex-html/package.json

@@ -1,7 +1,8 @@
 {
   "name": "complex-html",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/express-server/package.json

@@ -1,7 +1,8 @@
 {
   "name": "express-server",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/html-external-resources/package.json

@@ -1,7 +1,8 @@
 {
   "name": "express-server",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/nth/package.json

@@ -1,7 +1,8 @@
 {
   "name": "nth",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/server-or-client/package.json

@@ -1,7 +1,8 @@
 {
   "name": "server-or-client",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/static-hosting-naive/package.json

@@ -1,7 +1,8 @@
 {
   "name": "static-hosting-naive",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/_samples/static-hosting-smart/package.json

@@ -1,7 +1,8 @@
 {
   "name": "static-hosting-naive",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/05-server/index.mdx

@@ -45,9 +45,9 @@ Google ChromeやSafariに代表される**ブラウザ**は、Webにおけるク
 npm install express
 ```
 
-続いて、次のような`main.mjs`を作成しましょう。
+続いて、次のような`main.js`を作成しましょう。
 
-```javascript title="main.mjs" showLineNumbers
+```javascript title="main.js" showLineNumbers
 import express from "express";
 const app = express();
 
@@ -66,7 +66,7 @@ app.listen(3000);
 ファイルを保存したら、作成したファイルを実行しましょう。
 
 ```shell
-node main.mjs
+node main.js
 ```
 
 ブラウザで<a href="http://localhost:3000/" target="_blank">`http://localhost:3000/`</a>にアクセスし、次の動作を確認してください。
@@ -107,9 +107,9 @@ node main.mjs
 
 ## Hello Worldサーバーの動作
 
-`main.mjs`のプログラムを参照しながら、ブラウザとサーバーの間でどのようなやり取りが行われているのかを確認しましょう。
+`main.js`のプログラムを参照しながら、ブラウザとサーバーの間でどのようなやり取りが行われているのかを確認しましょう。
 
-```javascript title="main.mjs (再掲)" showLineNumbers
+```javascript title="main.js (再掲)" showLineNumbers
 import express from "express";
 const app = express();
 
@@ -123,7 +123,7 @@ app.get("/lang/ja", (request, response) => {
 app.listen(3000);
 ```
 
-### `node main.mjs`を実行したとき
+### `node main.js`を実行したとき
 
 1. **[2行目]** `const app = express();`により、Expressの[`Application`](https://expressjs.com/ja/api.html#app)クラスのインスタンスが作成されます。
 2. **[4行目]** `app.get("/", (request, response) => { ... });`で呼び出された[`get`](https://expressjs.com/ja/api.html#app.get.method)メソッドにより、`/`というパスに対するリクエストを受けたときに実行される関数として、第2引数に指定された関数が登録されます。この時点では関数は`Application`インスタンスに登録されるのみで、実行はされません。
@@ -163,7 +163,7 @@ app.listen(3000);
 6. サーバーは、`document.write("Hello World!");`という文字列をレスポンスとして送信します。
 7. ブラウザは、受け取ったレスポンスをJavaScriptとして解釈し、`Hello World!`という文字列を表示します。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import express from "express";
 const app = express();
 
@@ -183,7 +183,7 @@ app.listen(3000);
 
 次の例では、`/`、`/script.js`、`/sub/`、`/sub/script.js`へのリクエストについて、それぞれファイルから読み込んでレスポンスを送信しています。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import express from "express";
 import { readFileSync } from "node:fs";
 const app = express();
@@ -208,7 +208,7 @@ app.listen(3000);
 
 [`express.static`関数](https://expressjs.com/ja/api.html#express.static)を用いると、このような「リクエストを受け取ったら、そのパスに応じて適切なファイルを読み込んでレスポンスとして返す」という一連の動作を簡単に記述できます。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import express from "express";
 
 const app = express();
@@ -248,7 +248,7 @@ app.listen(3000);
 
 前項のプログラムを書き換えて、複雑なHTMLを出力できるようにしてみましょう。
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import express from "express";
 const app = express();
 
@@ -293,7 +293,7 @@ Expressを用いて、`あなたはn人目のお客様です。`とレスポン
 
 <Answer title="訪問者カウンター">
 
-```javascript title="main.mjs"
+```javascript title="main.js"
 import express from "express";
 const app = express();
 

docs/3-web-servers/06-fetch-api/_samples/currency-converter/package.json

@@ -1,7 +1,8 @@
 {
   "name": "currency-converter",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/06-fetch-api/_samples/exchange-rates/package.json

@@ -1,7 +1,8 @@
 {
   "name": "exchange-rates",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/06-fetch-api/_samples/fetch-open-status-json/package.json

@@ -1,7 +1,8 @@
 {
   "name": "fetch-open-status-json",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/06-fetch-api/_samples/fetch-open-status/package.json

@@ -1,7 +1,8 @@
 {
   "name": "fetch-open-status",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/06-fetch-api/_samples/fetch-weather-json/package.json

@@ -1,7 +1,8 @@
 {
   "name": "fetch-weather-json",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"

docs/3-web-servers/06-fetch-api/_samples/fetch-weather/package.json

@@ -1,7 +1,8 @@
 {
   "name": "fetch-weather",
+  "type": "module",
   "scripts": {
-    "start": "node main.mjs"
+    "start": "node main.js"
   },
   "dependencies": {
     "express": "^5.1.0"