EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

JavaScriptの文字列

文字列はJavaScriptでもっともよく使うデータ型の一つです。書くコードの10行中9行は文字列に関係しています。テキスト表示、メッセージ構築、ユーザー入力の処理 — 文字列なしには何もできません。

文字列の作成

JavaScriptでは3つの方法で文字列を作成できます：シングルクォート、ダブルクォート、バックティックです。

HTML 
<script>
let a = 'こんにちは';     // シングルクォート
let b = "世界";           // ダブルクォート
let c = `こんにちは`;     // バックティック
</script>

シングルクォートとダブルクォートは機能的に同一です。好きな方を選んでください。ただし、バックティックは異なり、テンプレートリテラルをサポートしており、はるかに強力です。詳細は後述します。

💪 チームプロジェクトでは、コードベース全体で一貫したクォートスタイル（シングルまたはダブル）を統一しましょう。

文字列は不変（イミュータブル）

これは多くの開発者がぶつかる落とし穴です。文字列は一度作成されると、その内容を変更できません。呼び出すすべてのメソッドは新しい文字列を返し、元の文字列は変更しません。

HTML 
<script>
let str = 'こんにちは';
str[0] = 'こ';            // 静かに失敗 — strはまだ'こんにちは'
str.toUpperCase();        // 'こんにちは'を返すが、str自体は変わらない
let upper = str.toUpperCase(); // 正しい — 戻り値を変数に代入する
</script>

覚えておいてください：文字列メソッドは元の文字列を変更しません。戻り値を新しい変数に代入する必要があります。

主要メソッド

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

実例：主要な文字列メソッド

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>主要な文字列メソッド</h2>
  <p id="output"></p>
  <script>
    let str = '  こんにちは、JavaScript！  ';
    let result = '';
    result += '元の文字列: "' + str + '"<br>';
    result += 'length: ' + str.length + '<br>';
    result += 'trim: "' + str.trim() + '"<br>';
    result += 'indexOf("Java"): ' + str.indexOf('Java') + '<br>';
    result += 'slice(2,7): "' + str.slice(2, 7) + '"<br>';
    result += 'includes("Script"): ' + str.includes('Script') + '<br>';
    result += 'startsWith("  こ"): ' + str.startsWith('  こ') + '<br>';
    result += 'toUpperCase: ' + str.toUpperCase() + '<br>';
    result += 'replace("JavaScript","世界"): ' + str.replace('JavaScript', '世界') + '<br>';
    document.getElementById('output').innerHTML = result;
  </script>
</body>
</html>

slice(start, end)はstartからendの手前までを抽出することに注意してください。これはほとんどの言語と一致しており、すぐに慣れるでしょう。

テンプレートリテラル

バックティック（`）で作成された文字列はテンプレートリテラルと呼ばれ、2つの強力な機能があります：

  1. 複数行対応 — \nは不要。そのままEnterキーを押すだけ
  2. 補間 — ${変数}で変数や式を埋め込み
HTML 
<!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>

実例：テンプレートリテラルと結合の比較

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>テンプレートリテラル比較</h2>
  <p id="output"></p>
  <script>
    let name = '太郎';
    let city = '東京';
    let hobby = '読書';

    let old = '私の名前は' + name + 'です。' + city + 'に住んでいて、' + hobby + 'が好きです。';
    let modern = `私の名前は${name}です。${city}に住んでいて、${hobby}が好きです。`;

    let html = '<strong>結合:</strong>' + old + '<br><br>';
    html += '<strong>テンプレートリテラル:</strong>' + modern + '<br><br>';

    let a = 5, b = 3;
    html += `<strong>式も使える:</strong>${a} + ${b} = ${a + b}<br>`;
    html += `<strong>メソッド呼び出しも:</strong>${name.toUpperCase()}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

💪 多くの変数がある場合、テンプレートリテラルは結合よりもはるかに読みやすくなります。迷わず、日常コードではバックティックを優先しましょう。

エスケープ文字

文字列内で特別な意味を持つ文字があります。そのまま出力するには、バックスラッシュ\でエスケープします：

エスケープ文字 意味
\n 改行
\t タブ
\\ バックスラッシュ自体
\" ダブルクォート
\' シングルクォート

実例：エスケープ文字

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>エスケープ文字デモ</h2>
  <p id="output"></p>
  <script>
    let s1 = '1行目\n2行目';
    let s2 = '名前\t年齢\t都市';
    let s3 = 'パス: C:\\Users\\Admin';
    let s4 = '彼は「こんにちは！」と言った';
    let s5 = '今日はいい天気です';

    let html = '';
    html += '<strong>\\n 改行:</strong><pre>' + s1 + '</pre>';
    html += '<strong>\\t タブ:</strong><pre>' + s2 + '</pre>';
    html += '<strong>\\\\ バックスラッシュ:</strong>' + s3 + '<br>';
    html += '<strong>\\" ダブルクォート:</strong>' + s4 + '<br>';
    html += "<strong>\\' シングルクォート:</strong>" + s5 + '<br>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
⚠️ バックスラッシュ自体もエスケープが必要です。WindowsパスのC:\Usersを書く場合はC:\\Usersとします。エスケープのし忘れはバグのよくある原因です。

文字列結合とテンプレートリテラルの比較

両方の方法はシンプルなケースでは動作しますが、変数が増えると結合はすぐに面倒になります：

HTML 
<script>
// 結合：プラス記号の付け忘れや重複が起きやすい
let html = '<div class="' + cls + '">' + title + '</div>';

// テンプレートリテラル：一目瞭然
let html = `<div class="${cls}">${title}</div>`;
</script>

実例：HTMLコンテンツの生成

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>テンプレートリテラルでコンテンツ生成</h2>
  <div id="output"></div>
  <script>
    let products = [
      { name: 'ノートPC', price: 999 },
      { name: 'マウス', price: 29 },
      { name: 'キーボード', price: 79 }
    ];

    let html = '<ul>';
    for (let p of products) {
      html += `<li>${p.name} - $${p.price.toFixed(2)}</li>`;
    }
    html += '</ul>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

ループ内でテンプレートリテラルを使ってHTMLを生成するのは、実際の開発では非常に一般的で、結合よりもはるかに快適です。

📖 まとめ

  1. 文字列はシングルクォート、ダブルクォート、バックティックで作成できる — バックティックを推奨
  2. 文字列は不変で、すべてのメソッドは新しい文字列を返し、元の文字列は変更しない
  3. slice(start, end)はstartを含みendを含まない。indexOfは見つからないと-1を返す
  4. テンプレートリテラルは${}で補間し、式やメソッド呼び出しをサポートする
  5. エスケープ文字は\で始まる — \nが改行、\\がバックスラッシュ自体
  6. trim()はユーザー入力の処理に特に便利 — 使用を忘れずに

❓ よくある質問

Q indexOfとincludesの違いは何ですか？
A indexOfは部分文字列の開始位置を返します（見つからない場合は-1）。includesはブール値を返します。部分文字列が存在するかどうかだけが知りたい場合はincludesがより直感的で、正確な位置が必要な場合はindexOfを使います。
Q なぜreplaceは最初の一致しか置換しないのですか？
A replaceはデフォルトでは最初の一致のみを置換します。すべての一致を置換するにはreplaceAllを使うか、gフラグ付きの正規表現を使います：str.replace(/abc/g, 'xyz')。
Q シングルクォートとダブルクォート、どちらを使うべきですか？
A 機能的には同一です。チーム内で一貫性を持たせるだけです。ほとんどのプロジェクトではデフォルトでシングルクォートを使用し、文字列自体にシングルクォートが含まれる場合にダブルクォートに切り替えます。

📝 演習

  1. 文章を入力として受け取り、単語数を出力するプログラムを書いてください（ヒント：スペースでsplitし、lengthを使用）。
  2. trimとtoLowerCaseを使って、文字列" Hello World "を完全に小文字にし、空白を除去した"hello world"に変換するプログラムを書いてください。
  3. テンプレートリテラルを使って、あなたの名前、年齢、趣味を含む自己紹介HTMLスニペットを生成し（変数を使用）、ページに表示してください。
100%