From 5e7712692b86135b1978250fe71a7af58bd34072 Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Sat, 4 Nov 2023 12:51:18 +0900 Subject: [PATCH 1/3] add "main.mjs" title to mjs codeblocks --- docs/3-web-servers/04-server/index.md | 8 ++++---- docs/3-web-servers/08-cookie/index.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/3-web-servers/04-server/index.md b/docs/3-web-servers/04-server/index.md index 271740871..72b1fcc4f 100644 --- a/docs/3-web-servers/04-server/index.md +++ b/docs/3-web-servers/04-server/index.md @@ -30,7 +30,7 @@ npm install express 続いて、次のような `main.mjs` を作成しましょう。 -```javascript title=main.js +```javascript title=main.mjs import express from "express"; const app = express(); @@ -107,7 +107,7 @@ Web サーバーにアクセスするために用いた `http://localhost:3000/` 次の例では、`/`、`/script.js`、`/sub/`、`/sub/script.js` へのリクエストについて、それぞれファイルから読み込んでレスポンスを送信しています。 -```javascript +```javascript title=main.mjs import express from "express"; import { readFileSync } from "fs"; const app = express(); @@ -132,7 +132,7 @@ app.listen(3000); `express.static` 関数を用いると、このような「リクエストを受け取ったら、そのパスに応じて適切なファイルを読み込んでレスポンスとして返す」という一連の動作を簡単に記述できます。 -```javascript +```javascript title=main.mjs import express from "express"; const app = express(); @@ -154,7 +154,7 @@ app.listen(3000); 前項のプログラムを書き換えて、複雑な HTML を出力できるようにしてみましょう。 -```javascript +```javascript title=main.mjs import express from "express"; const app = express(); diff --git a/docs/3-web-servers/08-cookie/index.md b/docs/3-web-servers/08-cookie/index.md index 619c37c78..fe97aae2b 100644 --- a/docs/3-web-servers/08-cookie/index.md +++ b/docs/3-web-servers/08-cookie/index.md @@ -36,7 +36,7 @@ npm install cookie-parser を実行して、パッケージをインストールしましょう。Web サーバーのプログラムは次のようになります。 -```javascript +```javascript title=main.mjs import express from "express"; import cookieParser from "cookie-parser"; From e468f30e96a2d899b77f9b26e65c1442b16f08dc Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Sat, 4 Nov 2023 12:56:58 +0900 Subject: [PATCH 2/3] fix absolute path to relative --- docs/4-advanced/01-fetch-api/index.md | 24 ++++++++++++------------ docs/4-advanced/02-bundler/index.md | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/4-advanced/01-fetch-api/index.md b/docs/4-advanced/01-fetch-api/index.md index 04238412e..78135c933 100644 --- a/docs/4-advanced/01-fetch-api/index.md +++ b/docs/4-advanced/01-fetch-api/index.md @@ -11,11 +11,11 @@ import chatAppVideo from "./chat-app.mp4"; しかしながら、ブラウザ上で動く JavaScript から利用できる **Fetch API** を用いると、任意のタイミングでリクエストが発行できるようになります。API は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、API に従い短いコードを記述するだけでその機能を利用することができます。 サーバーとクライアント、どちらで動く JavaScript なのかに注意しながら、次のプログラムを実行してみましょう。 -```html title="/static/index.html の body 内" +```html title="static/index.html の body 内" ``` -```javascript title="/static/script.js (ブラウザ上で動く JavaScript)" +```javascript title="static/script.js (ブラウザ上で動く JavaScript)" document.getElementById("fetch-button").onclick = async () => { const response = await fetch("/weather"); const weather = await response.text(); @@ -33,7 +33,7 @@ document.getElementById("fetch-button").onclick = async () => { なお、サーバーでは次のプログラムが動作しているものとします。 -```javascript title="/server.mjs (サーバーとして動く JavaScript)" +```javascript title="server.mjs (サーバーとして動く JavaScript)" import express from "express"; const app = express(); @@ -52,7 +52,7 @@ app.listen(3000); このとき、リクエストボディは、 `fetch` 関数の第 2 引数に指定したオブジェクトの `body` プロパティに指定します。 -```javascript title="/static/script.js" +```javascript title="static/script.js" document.getElementById("send-button").onclick = async () => { const name = document.getElementById("name").value; const age = document.getElementById("age").value; @@ -63,7 +63,7 @@ document.getElementById("send-button").onclick = async () => { }; ``` -```javascript title="/server.mjs" +```javascript title="server.mjs" import express from "express"; const app = express(); @@ -91,7 +91,7 @@ HTML のフォームで送ったものと同じ形式でデータを送信する `fetch` 関数の第 2 引数の `headers` オプションでは、リクエストヘッダを指定します。リクエストボディに JSON を指定する場合は、**`Content-Type` リクエストヘッダ**を `"application/json"` に指定します。 -```javascript title="/static/script.js" +```javascript title="static/script.js" document.getElementById("send-button").onclick = async () => { const name = document.getElementById("name").value; const age = document.getElementById("age").value; @@ -108,7 +108,7 @@ document.getElementById("send-button").onclick = async () => { サーバー側では、リクエストボディの JSON を解釈するため、[`express.urlencoded`](https://expressjs.com/ja/api.html#express.urlencoded) の代わりに [`express.json`](https://expressjs.com/ja/api.html#express.json) を用います。 -```javascript title="/server.mjs" +```javascript title="server.mjs" import express from "express"; const app = express(); @@ -153,7 +153,7 @@ app.listen(3000); [掲示板を作ったとき](../../3-web-servers/06-get-post/index.md) と同じく、`messages` という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。 -```javascript title="/server.js" +```javascript title="server.js" const messages = []; app.post("/send", (request, response) => { // メッセージを追加 @@ -164,7 +164,7 @@ app.post("/send", (request, response) => { [`express.Response#json` メソッド](https://expressjs.com/ja/api.html#res.json)は、受け取ったオブジェクトを `JSON.stringify` によって JSON としたうえでレスポンスするためのメソッドです。このとき、`Content-Type` レスポンスヘッダは自動的に `"application/json"` に設定されます。 -```javascript title="/server.js" +```javascript title="server.js" app.get("/messages", (request, response) => { response.json(messages); }); @@ -172,7 +172,7 @@ app.get("/messages", (request, response) => { 新着メッセージを確認するために、定期的に `/messages` に対して `fetch` 関数を用いてリクエストしましょう。`setInterval` 関数が利用できます。 -```javascript title="/static/script.js" +```javascript title="static/script.js" setInterval(async () => { const response = await fetch("/messages"); // レスポンスを処理する @@ -181,11 +181,11 @@ setInterval(async () => { `innerHTML` プロパティを空文字列とすることで要素の子要素を全て削除できます。`document.createElement` 関数を用いて再び生成し直しましょう。 -```html title="/static/index.html" +```html title="static/index.html" ``` -```javascript title="/static/script.js" +```javascript title="static/script.js" const messageList = document.getElementById("message-list"); messageList.innerHTML = ""; diff --git a/docs/4-advanced/02-bundler/index.md b/docs/4-advanced/02-bundler/index.md index c6f0e4d7d..b1e3b0de9 100644 --- a/docs/4-advanced/02-bundler/index.md +++ b/docs/4-advanced/02-bundler/index.md @@ -157,7 +157,7 @@ app `express.static` により Vite が作成したディレクトリを指定すれば完成です。 -```javascript title="/server/main.js" +```javascript title="server/main.js" const express = require("express"); const app = express(); From cfdcf7d947239b272b6f1235b4f0d63146b9f48e Mon Sep 17 00:00:00 2001 From: Fridge0 Date: Sat, 4 Nov 2023 12:57:44 +0900 Subject: [PATCH 3/3] server.js -> server/mjs --- docs/4-advanced/01-fetch-api/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/4-advanced/01-fetch-api/index.md b/docs/4-advanced/01-fetch-api/index.md index 78135c933..40b578845 100644 --- a/docs/4-advanced/01-fetch-api/index.md +++ b/docs/4-advanced/01-fetch-api/index.md @@ -153,7 +153,7 @@ app.listen(3000); [掲示板を作ったとき](../../3-web-servers/06-get-post/index.md) と同じく、`messages` という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。 -```javascript title="server.js" +```javascript title="server.mjs" const messages = []; app.post("/send", (request, response) => { // メッセージを追加 @@ -164,7 +164,7 @@ app.post("/send", (request, response) => { [`express.Response#json` メソッド](https://expressjs.com/ja/api.html#res.json)は、受け取ったオブジェクトを `JSON.stringify` によって JSON としたうえでレスポンスするためのメソッドです。このとき、`Content-Type` レスポンスヘッダは自動的に `"application/json"` に設定されます。 -```javascript title="server.js" +```javascript title="server.mjs" app.get("/messages", (request, response) => { response.json(messages); });