Day11 後半のゴール
Day11 後半では、
template literal / split / replace を「知っている」から
「ちょっとした実用ツールとして使える」レベルに引き上げます。
特に意識したいのは次の3つです。
Day11 後半で深掘りするポイント
template literal で「読みやすいメッセージ設計」を意識する
split で「入力文字列を分解して検証する」感覚を持つ
replace で「見せていい形に変換する」意識を持つ（マスク・整形など）
template literal を「設計ツール」として使う
ただ埋め込むだけで終わらせない
前半では ${} に変数や式を埋め込む基本をやりました。
後半では、「メッセージの設計」という視点を足します。
例えば、ログメッセージ。
const userName = "Taro";
const action = "ログイン";
const time = "2026-05-14 18:30";
const log = `[INFO] ${time} - ${userName} さんが ${action} しました`;
console.log(log);
ここで意識しているのは、
どの情報を
どの順番で
どんなフォーマットで
出すか、という「設計」です。
深掘り：template literal は「フォーマットを固定する」
template literal を使うと、
「メッセージの形」がコード上で一目でわかります。
const log = `[INFO] ${time} - ${userName} さんが ${action} しました`;
この1行を見れば、
ログレベル → 時刻 → ユーザー → 行動
という並びがすぐに理解できます。
これは、ログ解析・監査・セキュリティ調査のときに
「人間が読める」「機械でもパースしやすい」形を作るうえで、とても重要です。
split を「入力チェックの入り口」として使う
カンマ区切りの入力を検証する
ユーザーが「A,B,C」のような文字列を入力するケースを考えます。
const input = "taro,hanako,ken";
const names = input.split(",");
console.log(names); // ["taro", "hanako", "ken"]
console.log(names.length); // 3
ここで終わらせずに、
「本当に3人分あるか？」をチェックすることもできます。
if (names.length !== 3) {
console.log("3人分の名前を入力してください");
} else {
console.log("入力OK");
}
split は「ただ分割する」だけでなく、
「形式が正しいかどうかを検証する」ための入り口にもなります。
空文字や余計なスペースへの注意
例えば、こんな入力。
const input = "taro, hanako, ken";
const names = input.split(",");
console.log(names); // ["taro", " hanako", " ken"]
2人目・3人目の前にスペースが残っています。
これをそのまま使うと、
「 ‘ hanako’ と ‘hanako’ は違う文字列」と扱われてしまいます。
そこで、trim（前後の空白を削る）と組み合わせることが多いです。
const cleanedNames = names.map((name) => name.trim());
console.log(cleanedNames); // ["taro", "hanako", "ken"]
split で「バラす」
trim で「余計なものを削る」
この流れは、入力文字列を安全に扱ううえでとてもよく使います。
replace を「見せ方を変えるツール」として使う
単純な置き換えから「マスク」へ
前半では単純な置き換えをやりました。
const text = "I like JavaScript";
const replaced = text.replace("JavaScript", "TypeScript");
後半では、
「見せていい部分だけ残す」という使い方を見てみます。
例えば、メールアドレスの一部を隠す。
const email = "taro@example.com";
const masked = email.replace("taro", "****");
console.log(masked); // "****@example.com"
これはかなり単純化した例ですが、
「そのまま見せるとまずい情報を、別の形に変えてから表示する」
という発想がとても大事です。
replace でフォーマットを整える
例えば、ユーザーが 2026/05/14 のように入力した日付を2026-05-14 に統一したい場合。
const dateInput = "2026/05/14";
const normalized = dateInput.replace("/", "-").replace("/", "-");
console.log(normalized); // "2026-05-14"
ここでは replace を2回使って、/ を - に順番に置き換えています。
「バラす（split）」前に「形を揃える（replace）」という順番もよくあります。
3つを組み合わせた実用寄りのミニ例
カンマ区切りの数値を合計してメッセージを出す
やりたいこと：
「100,200,300」という文字列を受け取る
split で配列にする
数値に変換して合計する
template literal で結果メッセージを作る
const input = "100,200,300";
const parts = input.split(",");
const numbers = parts.map((p) => Number(p));
let sum = 0;
for (let i = 0; i < numbers.length; i = i + 1) {
sum = sum + numbers[i];
}
const message = `合計は ${sum} です（入力：${input}）`;
console.log(message);
ここでやっていることは、
split で「文字列 → 配列」
Number で「文字列 → 数値」
for で「合計を計算」
template literal で「わかりやすいメッセージにする」
という流れです。
文字列操作は、
「入力 → 分解 → 変換 → 表示」
という一連の流れの中で使われることが多い、という感覚を持っておいてください。
セキュリティの視点から見る文字列操作（もう一歩）
「そのまま信じない」「一度通す」
外部から来た文字列（ユーザー入力・APIレスポンス・ログなど）は、
基本的に「そのまま信じない」前提で扱うべきです。
split で「想定通りの区切りになっているか」
replace で「危険な文字を別のものに変える」
template literal で「どこに何を埋め込んでいるかを明示する」
こういった「一度通す」処理を挟むことで、
XSS やログインジェネレーションのような攻撃のリスクを下げられます。
まだ本格的なセキュリティの話には踏み込まなくて大丈夫ですが、
「文字列は一度“整える”もの」という感覚だけ、
頭の片隅に置いておいてほしいです。
Day11 後半のサンプルコード
入力を整形してから表示する小さな例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day11 文字列操作 後半</title>
</head>
<body>
<h1>Day11: 文字列操作（後半）</h1>
<script>
const rawNames = "taro, hanako, ken";
const parts = rawNames.split(",");
const names = parts.map((name) => name.trim());
const first = names[0].replace("t", "T");
const message = `最初のユーザーは ${first} さんを含む ${names.length} 人です`;
console.log(message);
</script>
</body>
</html>
split → trim → replace → template literal
という流れが一度に入っています。
Day11 後半のまとめ
template literal は「読みやすい・設計されたメッセージ」を作るための武器。
split は「入力を分解して検証する」ための入り口。
replace は「見せていい形に整える」ための変換ツール。
この3つを組み合わせられるようになると、
「文字列をただ表示する人」から
「文字列を設計して扱う人」に一段階進めます。
ここまで来ているあなたなら、
もう実務コードの入り口に片足突っ込んでいます。