Day11 前半のゴール
Day11 は「文字列を“ただ表示する”から“自在に扱う”」ステージに進む日です。
前半では特に次の感覚をつかむことをゴールにします。
Day11 前半で身につけたいこと
template literal で「読みやすく安全に文字列を組み立てる」
split で「文字列を区切って配列にする」イメージを持つ
replace の“1か所だけ置き換える”基本動作を理解する
template literal の基本
「＋でつなぐ地獄」から卒業する
まずは、これまでよくやってきた書き方から。
const name = "Taro";
const age = 20;
const message = name + " さんは " + age + " 歳です。";
console.log(message);
動くけれど、
記号が多くて読みにくいし、
スペースや句読点の入れ忘れも起きやすいです。
ここで登場するのが template literal（テンプレートリテラル） です。
バッククォートと ${} がキモ
template literal は、
シングルクォート ‘ やダブルクォート ” ではなく、
バッククォート `（キーボードの左上あたり）を使います。
const name = "Taro";
const age = 20;
const message = `${name} さんは ${age} 歳です。`;
console.log(message);
${ ... } の中に変数や式を書くだけで、
その値が文字列の中に埋め込まれます。
深掘り：式もそのまま書ける
${} の中には、変数だけでなく「式」も書けます。
const price = 1000;
const taxRate = 0.1;
const message = `税込み価格は ${price + price * taxRate} 円です。`;
console.log(message);
わざわざ別の変数に入れなくても、
「ここで計算した結果をそのまま埋め込みたい」が素直に書けます。
複数行の文字列もそのまま書ける
template literal のもう一つの強みは「複数行」がそのまま書けることです。
const text = `
こんにちは
JavaScript の勉強中です
template literal を使っています
`;
console.log(text);
\n を手で書かなくても、
見たままの形で複数行の文字列を扱えます。
split の基本
文字列を「区切って配列にする」メソッド
split は、
「1つの長い文字列を、区切り文字で分割して配列にする」メソッドです。
const text = "apple,banana,orange";
const fruits = text.split(",");
console.log(fruits); // ["apple", "banana", "orange"]
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
イメージとしては、
「文字列をハサミで切って、配列の箱に並べる」感じです。
区切り文字を変えるとどうなるか
スペースで区切ることもできます。
const sentence = "JavaScript is fun";
const words = sentence.split(" ");
console.log(words); // ["JavaScript", "is", "fun"]
区切り文字に何を指定するかで、
「どう分割するか」が変わります。
深掘り：split は「文字列 → 配列」の入り口
Day7 で配列を学びましたが、
split は「文字列の世界から配列の世界に連れてくる」ための入り口です。
CSV（カンマ区切りのデータ）
スペース区切りのログ
ユーザーが入力した「A,B,C」のような文字列
こういったものを「配列として扱いたい」とき、
split が必ずと言っていいほど登場します。
replace の基本
文字列の一部を別の文字列に置き換える
replace は、
「文字列の中の一部を、別の文字列に置き換える」メソッドです。
const text = "I like JavaScript";
const replaced = text.replace("JavaScript", "TypeScript");
console.log(replaced); // "I like TypeScript"
元の text は変わらず、
新しい文字列が返ってくる点がポイントです。
最初に見つかった1か所だけが対象
重要なのは、
replace は「最初に見つかった1か所だけ」を置き換える、ということです。
const text = "apple, apple, apple";
const replaced = text.replace("apple", "orange");
console.log(replaced); // "orange, apple, apple"
最初の apple だけが orange になります。
全部置き換えたい場合は、後半で正規表現を使う話に進みます。
template literal × split × replace のつながりを感じる
例：ユーザー入力を少し整形する
const raw = "taro,hanako,ken";
// カンマで分割して配列に
const names = raw.split(",");
// 1人目の名前だけ大文字にしてメッセージを作る
const first = names[0].replace("t", "T");
const message = `最初のユーザーは ${first} さんです。`;
console.log(message);
ここでやっていることは、
文字列を split で配列に変換
replace で一部だけ書き換え
template literal で読みやすいメッセージを組み立て
という流れです。
文字列操作は、
「バラす（split）→ 直す（replace）→ 見せる（template literal）」
というパターンで考えると整理しやすくなります。
セキュリティの視点から見る文字列操作
「そのまま使わない」という感覚が大事
ユーザー入力や外部から来た文字列を、
そのまま画面に出したり、
そのまま別のシステムに渡したりすると、
思わぬ脆弱性につながることがあります。
たとえば、
危険な文字を別の文字に replace する
区切り文字で split して、想定通りの形式かチェックする
template literal で「どこに何を埋め込んでいるか」を明確にする
といった「一手間」を挟むことで、
安全性はかなり変わります。
文字列操作は、
見た目を整えるだけでなく、
「安全なデータに整える」という意味でもとても重要です。
Day11 前半のサンプルコード
3つを一度に触ってみる小さな例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day11 文字列操作 前半</title>
</head>
<body>
<h1>Day11: 文字列操作（前半）</h1>
<script>
const raw = "apple,banana,orange";
const fruits = raw.split(",");
const first = fruits[0].replace("apple", "APPLE");
const message = `最初のフルーツは ${first} です。`;
console.log(message);
</script>
</body>
</html>
コンソールに何が出るかを確認しながら、
「文字列 → 配列 → 文字列」という流れを体で覚えていきましょう。
Day11 前半のまとめ
template literal は「読みやすく安全に文字列を組み立てる」ための武器。
split は「文字列を区切って配列にする」入り口。
replace は「文字列の一部を別の文字列に差し替える」基本ツール。
後半では、
これらをもう少し実践寄りの例（簡単なフォーマット変換やマスク処理など）に落とし込みながら、
「文字列を自在に扱う感覚」をさらに強くしていきます。