Added String#replace

aster-void · aster-void · commit ef9b298ea34a · 2023-11-11T14:01:11.000+09:00
diff --git a/docs/3-web-servers/04-server/index.mdx b/docs/3-web-servers/04-server/index.mdx
@@ -193,6 +193,61 @@ 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) メソッドは、第一引数に与えられた文字列 (または[正規表現]) に一致する文字列を第二引数の文字列に置き換えた新しい文字列を返します。
+第一引数が文字列の場合は、最初に一致した場所のみを置き換えます。
+一致するすべての場所を置き換えたい場合は、代わりに [`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
+```
+
+これと `fs.readFileSync` 関数を用いることで、HTML を別のファイルに分けて保存することができるようになり、より簡単に管理することができます。
+
+```js title="main.mjs"
+import express from "express";
+import fs from "fs";
+
+const app = express();
+
+const names = ["田中", "鈴木", "佐藤"];
+app.get("/", (request, response) => {
+  const index = fs.readFileSync("./index.html", "utf-8");
+  const html = index.replace(
+    "{users}",
+    names.map((user) => `<li>${user}</li>`).join(""),
+  );
+  response.send(html);
+});
+
+app.listen(3000);
+```
+
+```html title="index.html"
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <ul>
+      {users}
+    </ul>
+  </body>
+</html>
+```
+
+:::
+
+{/* prettier-ignore */}
+{/* いったんコメントアウト、必要そうならいい感じにして戻してください
 :::tip[テンプレートエンジン]
 上記のようにテンプレートリテラルを使って HTML を作成することもできますが、HTML がもっと長くなったり、さらに複雑なプログラムが必要になってきたらこのまま続けていくのは難しそうです。  
 [EJS](https://ejs.co/) をはじめとした**テンプレートエンジン**は、プログラミング言語から HTML などを作成する作業を簡単にしてくれます。先ほどのプログラムを、EJS を用いて書き換えると、次のようになります。(手元で試したい場合は `ejs` をインストールしてください)
@@ -235,6 +290,8 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/ejs-template-engine" />
 
+\*/}
+
 イベントハンドラの中で、プログラムではまず `fs.readFileSync` 関数を用いて `template.ejs` ファイルの内容を読み込んでいます。その次の行の [`ejs.render` 関数](https://ejs.co/#docs) がポイントです。この関数は、第 1 引数にテンプレートを文字列として受け取り、諸々の変換を行った後の文字列を返します。第 2 引数には、変換の際に埋め込みたいデータをオブジェクトの形式で指定します。
 
 このオブジェクトのキーと同じ名前の変数が、テンプレート内で利用できます。上の例の `template.ejs` における `listItems` は、`main.mjs` で指定した `{ listItems: names }` により `["田中", "鈴木", "佐藤"]` になります。
@@ -255,3 +312,4 @@ app.listen(3000);
 解答例 2:
 
 <ViewSource url={import.meta.url} path="_samples/server-or-client" />
+````
