Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

String.prototype.replaceメソッドを削除 #804

Merged
merged 1 commit into from
Sep 6, 2024
Merged

String.prototype.replaceメソッドを削除 #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 0 additions & 56 deletions docs/3-web-servers/05-server/index.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

21 changes: 14 additions & 7 deletions docs/3-web-servers/06-form/index.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

25 changes: 18 additions & 7 deletions docs/3-web-servers/08-database/_samples/forum/main.mjs
View file
Open in desktop
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
Open in desktop

This file was deleted.

74 changes: 36 additions & 38 deletions docs/3-web-servers/08-database/index.mdx
View file
Open in desktop
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