Skip to content

Commit 804dc6b

Browse files
chvmvdchvmvd
authored
String.prototype.replaceメソッドを削除 (#804)
1 parent 2755e68 commit 804dc6b

File tree

9 files changed

+100
-166
lines changed

9 files changed

+100
-166
lines changed

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

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -311,62 +311,6 @@ console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange
311311

312312
このようにテンプレートリテラルを用いることで、複雑なウェブページの内容を表すことができます。
313313

314-
:::tip[`String#replace`メソッド]
315-
316-
上記のようにテンプレートリテラルを使ってHTMLを作成することもできますが、HTMLがさらに長くなったり、複雑なプログラムが必要になってきたりしたらこのまま続けていくのは難しそうです。
317-
318-
[`String#replace`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)メソッドは、第1引数に与えられた文字列に一致する文字列を第2引数の文字列に置き換えた新しい文字列を返します。
319-
`String#replace`メソッドは、最初に一致した場所のみを置き換えます。
320-
一致するすべての場所を置き換えたい場合は、代わりに[`String#replaceAll`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)メソッドを使います。
321-
322-
```js
323-
const base = "ABCBCC";
324-
document.write(base.replace("BC", "EFG")); // AEFGBCC
325-
document.write(base.replaceAll("C", "T")); // ABTBTT
326-
```
327-
328-
`String#replace`メソッドを用いることで、長いHTMLを見通しよく記述できるようになります。
329-
330-
```html title="index.html"
331-
<!doctype html>
332-
<html lang="ja">
333-
<head>
334-
<meta charset="utf-8" />
335-
<title>Title</title>
336-
</head>
337-
<body>
338-
<ul>
339-
<!-- users -->
340-
</ul>
341-
</body>
342-
</html>
343-
```
344-
345-
```js title="main.mjs"
346-
import express from "express";
347-
import { readFileSync } from "node:fs";
348-
349-
const app = express();
350-
351-
const names = ["田中", "鈴木", "佐藤"];
352-
app.get("/", (request, response) => {
353-
const template = readFileSync("./index.html", "utf-8");
354-
const html = template.replace(
355-
"<!-- users -->",
356-
names.map((name) => `<li>${name}</li>`).join(""),
357-
);
358-
response.send(html);
359-
});
360-
361-
app.listen(3000);
362-
```
363-
364-
リクエストを受け取ったとき、プログラムではまず`readFileSync`関数を用いて`index.html`ファイルの内容を文字列として読み込んでいます。
365-
366-
次の行で`String#replace`メソッドを用いて、読み込んだHTMLファイルの中の`"<!-- users -->"`を、`names`を箇条書きにした文字列に置換します。
367-
368-
:::
369-
370314
## 演習
371315

372316
### 訪問者カウンター

‎docs/3-web-servers/06-form/_samples/book-search-system/main.mjs‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import express from "express";
2-
import { readFileSync } from "node:fs";
32

43
const app = express();
54

@@ -17,12 +16,20 @@ app.get("/send", (request, response) => {
1716
const selectedBooks = books.filter(
1817
(book) => book.author === request.query.author,
1918
);
20-
const template = readFileSync("./send.html", "utf-8");
21-
const html = template.replace(
22-
"<!-- books -->",
23-
selectedBooks.map((book) => `<li>${book.title}</li>`).join(""),
24-
);
25-
response.send(html);
19+
response.send(`
20+
<!doctype html>
21+
<html lang="ja">
22+
<head>
23+
<meta charset="utf-8" />
24+
<title>Document</title>
25+
</head>
26+
<body>
27+
<ul>
28+
${selectedBooks.map((book) => `<li>${book.title}</li>`).join("")}
29+
</ul>
30+
</body>
31+
</html>
32+
`);
2633
});
2734

2835
app.listen(3000);

‎docs/3-web-servers/06-form/_samples/book-search-system/send.html‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎docs/3-web-servers/06-form/index.mdx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@ const evenNumbers = numbers.filter((number) => number % 2 === 0);
205205

206206
```javascript title="main.mjs"
207207
import express from "express";
208-
import { readFileSync } from "node:fs";
209208

210209
const app = express();
211210

@@ -223,12 +222,20 @@ app.get("/send", (request, response) => {
223222
const selectedBooks = books.filter(
224223
(book) => book.author === request.query.author,
225224
);
226-
const template = readFileSync("./send.html", "utf-8");
227-
const html = template.replace(
228-
"<!-- books -->",
229-
selectedBooks.map((book) => `<li>${book.title}</li>`).join(""),
230-
);
231-
response.send(html);
225+
response.send(`
226+
<!doctype html>
227+
<html lang="ja">
228+
<head>
229+
<meta charset="utf-8" />
230+
<title>Document</title>
231+
</head>
232+
<body>
233+
<ul>
234+
${selectedBooks.map((book) => `<li>${book.title}</li>`).join("")}
235+
</ul>
236+
</body>
237+
</html>
238+
`);
232239
});
233240

234241
app.listen(3000);

‎docs/3-web-servers/07-get-post/_samples/forum/main.mjs‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
import { readFileSync } from "node:fs";
21
import express from "express";
32

43
const app = express();
54
app.use(express.urlencoded({ extended: true }));
65

76
const messages = [];
87

9-
const template = readFileSync("./template.html", "utf-8");
108
app.get("/", (request, response) => {
11-
const html = template.replace(
12-
"<!-- messages -->",
13-
messages.map((message) => `<li>${message}</li>`).join(""),
14-
);
15-
response.send(html);
9+
response.send(`
10+
<!doctype html>
11+
<html lang="ja">
12+
<head>
13+
<meta charset="utf-8" />
14+
<title>掲示板</title>
15+
</head>
16+
<body>
17+
<ul>
18+
${messages.map((message) => `<li>${message}</li>`).join("")}
19+
</ul>
20+
<form method="post" action="/send">
21+
<input placeholder="メッセージ" name="message" />
22+
<button type="submit">送信</button>
23+
</form>
24+
</body>
25+
</html>
26+
`);
1627
});
1728

1829
app.post("/send", (request, response) => {

‎docs/3-web-servers/07-get-post/_samples/forum/template.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/3-web-servers/08-database/_samples/forum/main.mjs‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
1-
import { readFileSync } from "node:fs";
21
import express from "express";
32
import { PrismaClient } from "@prisma/client";
43

54
const app = express();
65
app.use(express.urlencoded({ extended: true }));
76
const client = new PrismaClient();
87

9-
const template = readFileSync("./template.html", "utf-8");
108
app.get("/", async (request, response) => {
119
const posts = await client.post.findMany();
12-
const html = template.replace(
13-
"<!-- messages -->",
14-
posts.map((post) => `<li>${post.message}</li>`).join(""),
15-
);
16-
response.send(html);
10+
response.send(`
11+
<!doctype html>
12+
<html lang="ja">
13+
<head>
14+
<meta charset="utf-8" />
15+
<title>掲示板</title>
16+
</head>
17+
<body>
18+
<ul>
19+
${posts.map((post) => `<li>${post.message}</li>`).join("")}
20+
</ul>
21+
<form method="post" action="/send">
22+
<input placeholder="メッセージ" name="message" />
23+
<button type="submit">送信</button>
24+
</form>
25+
</body>
26+
</html>
27+
`);
1728
});
1829

1930
app.post("/send", async (request, response) => {

‎docs/3-web-servers/08-database/_samples/forum/template.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/3-web-servers/08-database/index.mdx‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -265,32 +265,25 @@ const posts = await client.post.findMany();
265265
<Answer title="手順6まで">
266266

267267
```javascript title="main.mjsの抜粋"
268-
const template = readFileSync("./index.html", "utf-8");
269268
app.get("/", async (request, response) => {
270269
const posts = await client.post.findMany();
271-
const html = template.replace(
272-
"<!-- messages -->",
273-
posts.map((post) => `<li>${post.message}</li>`).join(""),
274-
);
275-
response.send(html);
270+
response.send(`
271+
<!doctype html>
272+
<html lang="ja">
273+
<head>
274+
<meta charset="utf-8" />
275+
<title>掲示板</title>
276+
</head>
277+
<body>
278+
<ul>
279+
${posts.map((post) => `<li>${post.message}</li>`).join("")}
280+
</ul>
281+
</body>
282+
</html>
283+
`);
276284
});
277285
```
278286

279-
```html title="index.html"
280-
<!doctype html>
281-
<html lang="ja">
282-
<head>
283-
<meta charset="utf-8" />
284-
<title>掲示板</title>
285-
</head>
286-
<body>
287-
<ul>
288-
<!-- messages -->
289-
</ul>
290-
</body>
291-
</html>
292-
```
293-
294287
</Answer>
295288

296289
### 手順7
@@ -303,23 +296,28 @@ app.get("/", async (request, response) => {
303296

304297
<Answer title="手順7まで">
305298

306-
```html title="index.html"
307-
<!doctype html>
308-
<html lang="ja">
309-
<head>
310-
<meta charset="utf-8" />
311-
<title>掲示板</title>
312-
</head>
313-
<body>
314-
<ul>
315-
<!-- messages -->
316-
</ul>
317-
<form method="post" action="/send">
318-
<input placeholder="メッセージ" name="message" />
319-
<button type="submit">送信</button>
320-
</form>
321-
</body>
322-
</html>
299+
```javascript title="main.mjsの抜粋"
300+
app.get("/", async (request, response) => {
301+
const posts = await client.post.findMany();
302+
response.send(`
303+
<!doctype html>
304+
<html lang="ja">
305+
<head>
306+
<meta charset="utf-8" />
307+
<title>掲示板</title>
308+
</head>
309+
<body>
310+
<ul>
311+
${posts.map((post) => `<li>${post.message}</li>`).join("")}
312+
</ul>
313+
<form method="post" action="/send">
314+
<input placeholder="メッセージ" name="message" />
315+
<button type="submit">送信</button>
316+
</form>
317+
</body>
318+
</html>
319+
`);
320+
});
323321
```
324322

325323
</Answer>

0 commit comments

Comments
 (0)