diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx index 9e3383184..69b2c7f0d 100644 --- a/docs/3-web-servers/03-node-js/index.mdx +++ b/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) diff --git a/docs/3-web-servers/03-node-js/run-hello-world.png b/docs/3-web-servers/03-node-js/run-hello-world.png index e21b528e3..2df397417 100644 Binary files a/docs/3-web-servers/03-node-js/run-hello-world.png and b/docs/3-web-servers/03-node-js/run-hello-world.png differ diff --git a/docs/3-web-servers/04-module/_samples/date-fns/main.mjs b/docs/3-web-servers/04-module/_samples/date-fns/main.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/date-fns/main.mjs rename to docs/3-web-servers/04-module/_samples/date-fns/main.js diff --git a/docs/3-web-servers/04-module/_samples/date-fns/package.json b/docs/3-web-servers/04-module/_samples/date-fns/package.json index 0384ade30..c43050dbc 100644 --- a/docs/3-web-servers/04-module/_samples/date-fns/package.json +++ b/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" } diff --git a/docs/3-web-servers/04-module/_samples/default-export/main.js b/docs/3-web-servers/04-module/_samples/default-export/main.js new file mode 100644 index 000000000..56990bc97 --- /dev/null +++ b/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)); diff --git a/docs/3-web-servers/04-module/_samples/default-export/main.mjs b/docs/3-web-servers/04-module/_samples/default-export/main.mjs deleted file mode 100644 index b91b339d7..000000000 --- a/docs/3-web-servers/04-module/_samples/default-export/main.mjs +++ /dev/null @@ -1,2 +0,0 @@ -import add from "./sub.mjs"; -console.log(add(3, 4)); diff --git a/docs/3-web-servers/04-module/_samples/default-export/sub.mjs b/docs/3-web-servers/04-module/_samples/default-export/sub.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/default-export/sub.mjs rename to docs/3-web-servers/04-module/_samples/default-export/sub.js diff --git a/docs/3-web-servers/04-module/_samples/mathjs/main.mjs b/docs/3-web-servers/04-module/_samples/mathjs/main.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/mathjs/main.mjs rename to docs/3-web-servers/04-module/_samples/mathjs/main.js diff --git a/docs/3-web-servers/04-module/_samples/mathjs/package.json b/docs/3-web-servers/04-module/_samples/mathjs/package.json index 469f1534a..675393520 100644 --- a/docs/3-web-servers/04-module/_samples/mathjs/package.json +++ b/docs/3-web-servers/04-module/_samples/mathjs/package.json @@ -1,5 +1,6 @@ { "name": "mathjs", + "type": "module", "dependencies": { "mathjs": "^14.5.3" } diff --git a/docs/3-web-servers/04-module/_samples/named-export/main.mjs b/docs/3-web-servers/04-module/_samples/named-export/main.js similarity index 55% rename from docs/3-web-servers/04-module/_samples/named-export/main.mjs rename to docs/3-web-servers/04-module/_samples/named-export/main.js index b875410ed..1a2ddc893 100644 --- a/docs/3-web-servers/04-module/_samples/named-export/main.mjs +++ b/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)); diff --git a/docs/3-web-servers/04-module/_samples/named-export/sub.mjs b/docs/3-web-servers/04-module/_samples/named-export/sub.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/named-export/sub.mjs rename to docs/3-web-servers/04-module/_samples/named-export/sub.js diff --git a/docs/3-web-servers/04-module/_samples/node-emoji/main.mjs b/docs/3-web-servers/04-module/_samples/node-emoji/main.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/node-emoji/main.mjs rename to docs/3-web-servers/04-module/_samples/node-emoji/main.js diff --git a/docs/3-web-servers/04-module/_samples/node-emoji/package.json b/docs/3-web-servers/04-module/_samples/node-emoji/package.json index 48bd12871..e4289978d 100644 --- a/docs/3-web-servers/04-module/_samples/node-emoji/package.json +++ b/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" } diff --git a/docs/3-web-servers/04-module/_samples/read-file-sync/main.mjs b/docs/3-web-servers/04-module/_samples/read-file-sync/main.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/read-file-sync/main.mjs rename to docs/3-web-servers/04-module/_samples/read-file-sync/main.js diff --git a/docs/3-web-servers/04-module/_samples/write-file-sync/main.mjs b/docs/3-web-servers/04-module/_samples/write-file-sync/main.js similarity index 100% rename from docs/3-web-servers/04-module/_samples/write-file-sync/main.mjs rename to docs/3-web-servers/04-module/_samples/write-file-sync/main.js diff --git a/docs/3-web-servers/04-module/index.mdx b/docs/3-web-servers/04-module/index.mdx index 21a1ddab2..4322067d6 100644 --- a/docs/3-web-servers/04-module/index.mdx +++ b/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では**モジュール**という仕組みが用意されています。JavaScriptでは、すべてのファイルがモジュールとして扱われます。 -Node.jsでは、ファイルの拡張子が`.mjs`の場合、`export`文や`import`文を用いて他のモジュールとのやりとりを行います。 +Node.jsでは、`export`文や`import`文を用いて他のモジュールとのやりとりを行うことができます。 -```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`文を用いて他のモジュールとのやり取りを行うJavaScript標準のモジュールシステムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。Node.jsでは、拡張子を`.mjs`にすることで、ECMAScriptモジュールを用いてプログラムを記述できます。 +さきほどのように`export`文と`import`文を用いて他のモジュールとのやり取りを行うJavaScript標準のモジュールシステムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。 -ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports`オブジェクトや`require`関数を用いて他のモジュールとのやり取りを行うことができます。Node.jsでは、拡張子を`.js`にすることで、CommonJSモジュールを用いてプログラムを記述できます。 +ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports`オブジェクトや`require`関数を用いて他のモジュールとのやり取りを行うことができます。 `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と呼ばれます。例として、日付や時刻の操作のために用いられるライブラリである、[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つ必要になるものです。