From 07592ce2c0d30b426f5afa56cba5397f1019597a Mon Sep 17 00:00:00 2001 From: WATAHIKI Yuto Date: Fri, 16 Aug 2024 17:40:52 +0800 Subject: [PATCH] =?UTF-8?q?`String.prototype.replace`=E3=83=A1=E3=82=BD?= =?UTF-8?q?=E3=83=83=E3=83=89=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/3-web-servers/05-server/index.mdx | 56 -------------- .../_samples/book-search-system/main.mjs | 21 ++++-- .../_samples/book-search-system/send.html | 12 --- docs/3-web-servers/06-form/index.mdx | 21 ++++-- .../07-get-post/_samples/forum/main.mjs | 25 +++++-- .../07-get-post/_samples/forum/template.html | 16 ---- .../08-database/_samples/forum/main.mjs | 25 +++++-- .../08-database/_samples/forum/template.html | 16 ---- docs/3-web-servers/08-database/index.mdx | 74 +++++++++---------- 9 files changed, 100 insertions(+), 166 deletions(-) delete mode 100644 docs/3-web-servers/06-form/_samples/book-search-system/send.html delete mode 100644 docs/3-web-servers/07-get-post/_samples/forum/template.html delete mode 100644 docs/3-web-servers/08-database/_samples/forum/template.html diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx index 65df10b9e..0521f702e 100644 --- a/docs/3-web-servers/05-server/index.mdx +++ b/docs/3-web-servers/05-server/index.mdx @@ -311,62 +311,6 @@ console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange このようにテンプレートリテラルを用いることで、複雑なウェブページの内容を表すことができます。 -:::tip[`String#replace`メソッド] - -上記のようにテンプレートリテラルを使ってHTMLを作成することもできますが、HTMLがさらに長くなったり、複雑なプログラムが必要になってきたりしたらこのまま続けていくのは難しそうです。 - -[`String#replace`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)メソッドは、第1引数に与えられた文字列に一致する文字列を第2引数の文字列に置き換えた新しい文字列を返します。 -`String#replace`メソッドは、最初に一致した場所のみを置き換えます。 -一致するすべての場所を置き換えたい場合は、代わりに[`String#replaceAll`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)メソッドを使います。 - -```js -const base = "ABCBCC"; -document.write(base.replace("BC", "EFG")); // AEFGBCC -document.write(base.replaceAll("C", "T")); // ABTBTT -``` - -`String#replace`メソッドを用いることで、長いHTMLを見通しよく記述できるようになります。 - -```html title="index.html" - - - - - Title - - - - - -``` - -```js title="main.mjs" -import express from "express"; -import { readFileSync } from "node:fs"; - -const app = express(); - -const names = ["田中", "鈴木", "佐藤"]; -app.get("/", (request, response) => { - const template = readFileSync("./index.html", "utf-8"); - const html = template.replace( - "", - names.map((name) => `
  • ${name}
    • `).join(""), - ); - response.send(html); -}); - -app.listen(3000); -``` - -リクエストを受け取ったとき、プログラムではまず`readFileSync`関数を用いて`index.html`ファイルの内容を文字列として読み込んでいます。 - -次の行で`String#replace`メソッドを用いて、読み込んだHTMLファイルの中の`""`を、`names`を箇条書きにした文字列に置換します。 - -::: - ## 演習 ### 訪問者カウンター diff --git a/docs/3-web-servers/06-form/_samples/book-search-system/main.mjs b/docs/3-web-servers/06-form/_samples/book-search-system/main.mjs index 0fb09d7e2..db09df73a 100644 --- a/docs/3-web-servers/06-form/_samples/book-search-system/main.mjs +++ b/docs/3-web-servers/06-form/_samples/book-search-system/main.mjs @@ -1,5 +1,4 @@ import express from "express"; -import { readFileSync } from "node:fs"; const app = express(); @@ -17,12 +16,20 @@ app.get("/send", (request, response) => { const selectedBooks = books.filter( (book) => book.author === request.query.author, ); - const template = readFileSync("./send.html", "utf-8"); - const html = template.replace( - "", - selectedBooks.map((book) => `
  • ${book.title}
    • `).join(""), - ); - response.send(html); + response.send(` + + + + + Document + + + + + + `); }); app.listen(3000); diff --git a/docs/3-web-servers/06-form/_samples/book-search-system/send.html b/docs/3-web-servers/06-form/_samples/book-search-system/send.html deleted file mode 100644 index 5304d8c16..000000000 --- a/docs/3-web-servers/06-form/_samples/book-search-system/send.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Document - - - - - diff --git a/docs/3-web-servers/06-form/index.mdx b/docs/3-web-servers/06-form/index.mdx index 6cfe8345d..74268616b 100644 --- a/docs/3-web-servers/06-form/index.mdx +++ b/docs/3-web-servers/06-form/index.mdx @@ -205,7 +205,6 @@ const evenNumbers = numbers.filter((number) => number % 2 === 0); ```javascript title="main.mjs" import express from "express"; -import { readFileSync } from "node:fs"; const app = express(); @@ -223,12 +222,20 @@ app.get("/send", (request, response) => { const selectedBooks = books.filter( (book) => book.author === request.query.author, ); - const template = readFileSync("./send.html", "utf-8"); - const html = template.replace( - "", - selectedBooks.map((book) => `
  • ${book.title}
    • `).join(""), - ); - response.send(html); + response.send(` + + + + + Document + + + + + + `); }); app.listen(3000); diff --git a/docs/3-web-servers/07-get-post/_samples/forum/main.mjs b/docs/3-web-servers/07-get-post/_samples/forum/main.mjs index 1d0542dcb..f4f66a6b0 100644 --- a/docs/3-web-servers/07-get-post/_samples/forum/main.mjs +++ b/docs/3-web-servers/07-get-post/_samples/forum/main.mjs @@ -1,4 +1,3 @@ -import { readFileSync } from "node:fs"; import express from "express"; const app = express(); @@ -6,13 +5,25 @@ app.use(express.urlencoded({ extended: true })); const messages = []; -const template = readFileSync("./template.html", "utf-8"); app.get("/", (request, response) => { - const html = template.replace( - "", - messages.map((message) => `
  • ${message}
    • `).join(""), - ); - response.send(html); + response.send(` + + + + + 掲示板 + + + +
    + + +
    + + + `); }); app.post("/send", (request, response) => { diff --git a/docs/3-web-servers/07-get-post/_samples/forum/template.html b/docs/3-web-servers/07-get-post/_samples/forum/template.html deleted file mode 100644 index acc0db8cf..000000000 --- a/docs/3-web-servers/07-get-post/_samples/forum/template.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - 掲示板 - - - -
    - - -
    - - diff --git a/docs/3-web-servers/08-database/_samples/forum/main.mjs b/docs/3-web-servers/08-database/_samples/forum/main.mjs index 12b77084e..c2563884f 100644 --- a/docs/3-web-servers/08-database/_samples/forum/main.mjs +++ b/docs/3-web-servers/08-database/_samples/forum/main.mjs @@ -1,4 +1,3 @@ -import { readFileSync } from "node:fs"; import express from "express"; import { PrismaClient } from "@prisma/client"; @@ -6,14 +5,26 @@ const app = express(); app.use(express.urlencoded({ extended: true })); const client = new PrismaClient(); -const template = readFileSync("./template.html", "utf-8"); app.get("/", async (request, response) => { const posts = await client.post.findMany(); - const html = template.replace( - "", - posts.map((post) => `
  • ${post.message}
    • `).join(""), - ); - response.send(html); + response.send(` + + + + + 掲示板 + + + +
    + + +
    + + + `); }); app.post("/send", async (request, response) => { diff --git a/docs/3-web-servers/08-database/_samples/forum/template.html b/docs/3-web-servers/08-database/_samples/forum/template.html deleted file mode 100644 index acc0db8cf..000000000 --- a/docs/3-web-servers/08-database/_samples/forum/template.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - 掲示板 - - - -
    - - -
    - - diff --git a/docs/3-web-servers/08-database/index.mdx b/docs/3-web-servers/08-database/index.mdx index 04839fffe..4f269d468 100644 --- a/docs/3-web-servers/08-database/index.mdx +++ b/docs/3-web-servers/08-database/index.mdx @@ -265,32 +265,25 @@ const posts = await client.post.findMany(); ```javascript title="main.mjsの抜粋" -const template = readFileSync("./index.html", "utf-8"); app.get("/", async (request, response) => { const posts = await client.post.findMany(); - const html = template.replace( - "", - posts.map((post) => `
  • ${post.message}
    • `).join(""), - ); - response.send(html); + response.send(` + + + + + 掲示板 + + + + + + `); }); ``` -```html title="index.html" - - - - - 掲示板 - - - - - -``` -     ### 手順7 @@ -303,23 +296,28 @@ app.get("/", async (request, response) => { -```html title="index.html" - - - - - 掲示板 - - - -
    - - -
    - - +```javascript title="main.mjsの抜粋" +app.get("/", async (request, response) => { + const posts = await client.post.findMany(); + response.send(` + + + + + 掲示板 + + + +
    + + +
    + + + `); +}); ```