JavaScript: JavaScriptの文字列
最終更新：2026-10-13
文字列はJavaScriptでもっともよく使うデータ型の一つです。書くコードの10行中9行は文字列に関係しています。テキスト表示、メッセージ構築、ユーザー入力の処理 — 文字列なしには何もできません。
1. 文字列の作成
JavaScriptでは3つの方法で文字列を作成できます：シングルクォート、ダブルクォート、バックティックです。
<script>
let a = 'こんにちは'; // シングルクォート
let b = "世界"; // ダブルクォート
let c = `こんにちは`; // バックティック
</script>
シングルクォートとダブルクォートは機能的に同一です。好きな方を選んでください。ただし、バックティックは異なり、テンプレートリテラルをサポートしており、はるかに強力です。詳細は後述します。
💪 チームプロジェクトでは、コードベース全体で一貫したクォートスタイル（シングルまたはダブル）を統一しましょう。
これは多くの開発者がぶつかる落とし穴です。文字列は一度作成されると、その内容を変更できません。呼び出すすべてのメソッドは新しい文字列を返し、元の文字列は変更しません。
<script>
let str = 'こんにちは';
str[0] = 'こ'; // 静かに失敗 — strはまだ'こんにちは'
str.toUpperCase(); // 'こんにちは'を返すが、str自体は変わらない
let upper = str.toUpperCase(); // 正しい — 戻り値を変数に代入する
</script>
覚えておいてください：文字列メソッドは元の文字列を変更しません。戻り値を新しい変数に代入する必要があります。
2. 主要メソッド
JavaScriptには多くの文字列メソッドがありますが、日常的に使うものは以下の通りです：
| メソッド | 用途 | 例 |
|---|---|---|
length |
長さを取得 | 'abc'.length → 3 |
indexOf() |
部分文字列の位置を検索 | 'こんにちは'.indexOf('にち') → 2 |
slice() |
部分文字列を抽出 | 'こんにちは'.slice(1,3) → 'んに' |
replace() |
内容を置換 | 'cat'.replace('c','b') → 'bat' |
toUpperCase() |
大文字に変換 | 'hi'.toUpperCase() → 'HI' |
toLowerCase() |
小文字に変換 | 'HI'.toLowerCase() → 'hi' |
trim() |
前後の空白を除去 | ' hi '.trim() → 'hi' |
split() |
デリミタで配列に分割 | 'a,b'.split(',') → ['a','b'] |
includes() |
部分文字列の存在確認 | 'hello'.includes('ell') → true |
startsWith() |
文字列の先頭チェック | 'hello'.startsWith('he') → true |
endsWith() |
文字列の末尾チェック | 'hello'.endsWith('lo') → true |
▶ サンプル：主要な文字列メソッド
▶ 試してみようslice(start, end)はstartからendの手前までを抽出することに注意してください。これはほとんどの言語と一致しており、すぐに慣れるでしょう。
3. テンプレートリテラル
バックティック（`）で作成された文字列はテンプレートリテラルと呼ばれ、2つの強力な機能があります：
- 複数行対応 —
\nは不要。そのままEnterキーを押すだけ - 補間 —
${変数}で変数や式を埋め込み
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>テンプレートリテラル</title></head>
<body>
<div id="output"></div>
<script>
let name = '花子';
let age = 20;
// 旧い方法：結合、プラス記号を忘れやすい
let msg1 = '私の名前は' + name + 'です。' + age + '歳です。';
// 新しい方法：テンプレートリテラル、はるかにクリーン
let msg2 = `私の名前は${name}です。${age}歳です。`;
document.getElementById('output').innerHTML =
'<strong>結合:</strong>' + msg1 + '<br>' +
'<strong>テンプレートリテラル:</strong>' + msg2;
</script>
</body>
</html>
▶ サンプル：テンプレートリテラルと結合の比較
▶ 試してみよう💪 多くの変数がある場合、テンプレートリテラルは結合よりもはるかに読みやすくなります。迷わず、日常コードではバックティックを優先しましょう。
4. エスケープ文字
文字列内で特別な意味を持つ文字があります。そのまま出力するには、バックスラッシュ\でエスケープします：
| エスケープ文字 | 意味 |
|---|---|
\n |
改行 |
\t |
タブ |
\\ |
バックスラッシュ自体 |
\" |
ダブルクォート |
\' |
シングルクォート |
▶ サンプル：エスケープ文字
▶ 試してみようC:\Usersを書く場合はC:\\Usersとします。エスケープのし忘れはバグのよくある原因です。
5. 文字列結合とテンプレートリテラルの比較
両方の方法はシンプルなケースでは動作しますが、変数が増えると結合はすぐに面倒になります：
<script>
// 結合：プラス記号の付け忘れや重複が起きやすい
let html = '<div class="' + cls + '">' + title + '</div>';
// テンプレートリテラル：一目瞭然
let html = `<div class="${cls}">${title}</div>`;
</script>
▶ サンプル：HTMLコンテンツの生成
▶ 試してみようループ内でテンプレートリテラルを使ってHTMLを生成するのは、実際の開発では非常に一般的で、結合よりもはるかに快適です。
❓ よくある質問
indexOfとincludesの違いは何ですか？indexOfは部分文字列の開始位置を返します（見つからない場合は-1）。includesはブール値を返します。部分文字列が存在するかどうかだけが知りたい場合はincludesがより直感的で、正確な位置が必要な場合はindexOfを使います。replaceは最初の一致しか置換しないのですか？replaceはデフォルトでは最初の一致のみを置換します。すべての一致を置換するにはreplaceAllを使うか、gフラグ付きの正規表現を使います：str.replace(/abc/g, 'xyz')。📖 まとめ
- 文字列はシングルクォート、ダブルクォート、バックティックで作成できる — バックティックを推奨
- 文字列は不変で、すべてのメソッドは新しい文字列を返し、元の文字列は変更しない
slice(start, end)はstartを含みendを含まない。indexOfは見つからないと-1を返す- テンプレートリテラルは
${}で補間し、式やメソッド呼び出しをサポートする - エスケープ文字は
\で始まる —\nが改行、\\がバックスラッシュ自体 trim()はユーザー入力の処理に特に便利 — 使用を忘れずに
📝 練習問題
- 文章を入力として受け取り、単語数を出力するプログラムを書いてください（ヒント：スペースで
splitし、lengthを使用）。 trimとtoLowerCaseを使って、文字列" Hello World "を完全に小文字にし、空白を除去した"hello world"に変換するプログラムを書いてください。- テンプレートリテラルを使って、あなたの名前、年齢、趣味を含む自己紹介HTMLスニペットを生成し（変数を使用）、ページに表示してください。
