Skip to content

Commit

Permalink
String.prototype.replaceメソッドを削除
Browse files Browse the repository at this point in the history
  • Loading branch information
@chvmvd
chvmvd committed Aug 16, 2024
1 parent 5c96f3c commit 07592ce
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 166 deletions.
56 changes: 0 additions & 56 deletions docs/3-web-servers/05-server/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<ul>
<!-- users -->
</ul>
</body>
</html>
```

```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(
"<!-- users -->",
names.map((name) => `<li>${name}</li>`).join(""),
);
response.send(html);
});

app.listen(3000);
```

リクエストを受け取ったとき、プログラムではまず`readFileSync`関数を用いて`index.html`ファイルの内容を文字列として読み込んでいます。

次の行で`String#replace`メソッドを用いて、読み込んだHTMLファイルの中の`"<!-- users -->"`を、`names`を箇条書きにした文字列に置換します。

:::

## 演習

### 訪問者カウンター
Expand Down
21 changes: 14 additions & 7 deletions docs/3-web-servers/06-form/_samples/book-search-system/main.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import express from "express";
import { readFileSync } from "node:fs";

const app = express();

Expand All @@ -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(
"<!-- books -->",
selectedBooks.map((book) => `<li>${book.title}</li>`).join(""),
);
response.send(html);
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
<ul>
${selectedBooks.map((book) => `<li>${book.title}</li>`).join("")}
</ul>
</body>
</html>
`);
});

app.listen(3000);
12 changes: 0 additions & 12 deletions docs/3-web-servers/06-form/_samples/book-search-system/send.html
View file

This file was deleted.

21 changes: 14 additions & 7 deletions docs/3-web-servers/06-form/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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(
"<!-- books -->",
selectedBooks.map((book) => `<li>${book.title}</li>`).join(""),
);
response.send(html);
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
<ul>
${selectedBooks.map((book) => `<li>${book.title}</li>`).join("")}
</ul>
</body>
</html>
`);
});

app.listen(3000);
Expand Down
25 changes: 18 additions & 7 deletions docs/3-web-servers/07-get-post/_samples/forum/main.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,29 @@
import { readFileSync } from "node:fs";
import express from "express";

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

const messages = [];

const template = readFileSync("./template.html", "utf-8");
app.get("/", (request, response) => {
const html = template.replace(
"<!-- messages -->",
messages.map((message) => `<li>${message}</li>`).join(""),
);
response.send(html);
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
${messages.map((message) => `<li>${message}</li>`).join("")}
</ul>
<form method="post" action="/send">
<input placeholder="メッセージ" name="message" />
<button type="submit">送信</button>
</form>
</body>
</html>
`);
});

app.post("/send", (request, response) => {
Expand Down
16 changes: 0 additions & 16 deletions docs/3-web-servers/07-get-post/_samples/forum/template.html
View file

This file was deleted.

25 changes: 18 additions & 7 deletions docs/3-web-servers/08-database/_samples/forum/main.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,30 @@
import { readFileSync } from "node:fs";
import express from "express";
import { PrismaClient } from "@prisma/client";

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(
"<!-- messages -->",
posts.map((post) => `<li>${post.message}</li>`).join(""),
);
response.send(html);
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
${posts.map((post) => `<li>${post.message}</li>`).join("")}
</ul>
<form method="post" action="/send">
<input placeholder="メッセージ" name="message" />
<button type="submit">送信</button>
</form>
</body>
</html>
`);
});

app.post("/send", async (request, response) => {
Expand Down
16 changes: 0 additions & 16 deletions docs/3-web-servers/08-database/_samples/forum/template.html
View file

This file was deleted.

74 changes: 36 additions & 38 deletions docs/3-web-servers/08-database/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,32 +265,25 @@ const posts = await client.post.findMany();
<Answer title="手順6まで">

```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(
"<!-- messages -->",
posts.map((post) => `<li>${post.message}</li>`).join(""),
);
response.send(html);
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
${posts.map((post) => `<li>${post.message}</li>`).join("")}
</ul>
</body>
</html>
`);
});
```

```html title="index.html"
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
<!-- messages -->
</ul>
</body>
</html>
```

</Answer>

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

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

```html title="index.html"
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
<!-- messages -->
</ul>
<form method="post" action="/send">
<input placeholder="メッセージ" name="message" />
<button type="submit">送信</button>
</form>
</body>
</html>
```javascript title="main.mjsの抜粋"
app.get("/", async (request, response) => {
const posts = await client.post.findMany();
response.send(`
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>掲示板</title>
</head>
<body>
<ul>
${posts.map((post) => `<li>${post.message}</li>`).join("")}
</ul>
<form method="post" action="/send">
<input placeholder="メッセージ" name="message" />
<button type="submit">送信</button>
</form>
</body>
</html>
`);
});
```

</Answer>
Expand Down

0 comments on commit 07592ce

Please sign in to comment.