Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

文字列

I. String型 (プリミティブ) とStringオブジェクト

プログラミングを学んでいると、同じ「文字列」を扱うのに、String型（プリミティブ）とStringオブジェクト という2つの言葉が出てきて混乱することがあります。

留学生の方には、「中身だけのリンゴ」 と 「箱に入ったリンゴ」 の違いに例たとえて説明すると、スッキリ理解してもらえます！

1. 二つの違いのイメージ

  • String型（プリミティブ）：

  • ただの「値」そのものです。

  • 例たとえ： お店で売っている「リンゴ」そのもの。軽くて、すぐ食べられます。

  • Stringオブジェクト：

  • new String() を使って作られる「特別な箱」です。

  • 例たとえ： 「豪華な箱に入ったリンゴ」です。箱の中にはリンゴだけでなく、説明書や道具も一緒に入っています。

2. コードで見てみよう

実際にどう違うのか、JavaScriptで書いてみます。

// 1. String型（プリミティブ）★ふだん使うのはこっち！
let str1 = "こんにちは";
console.log(typeof str1); // "string"

// 2. Stringオブジェクト（new を使う）
let str2 = new String("こんにちは");
console.log(typeof str2); // "object"

ここが注意！「見みた目めは同じでも中身が違う」

let s1 = "hello";
let s2 = new String("hello");

console.log(s1 == s2);  // true （文字の中身は同じ）
console.log(s1 === s2); // false （型が違うのでダメ！）

3. 不思議なルール：なぜプリミティブでメソッドが使えるの？

ここで学生からよく「先生、不思議です！」と質問が出ます。

「プリミティブは『ただの値』なのに、なぜ .length や .toUpperCase() などの 『道具（メソッド）』 が使えるんですか？」

実は、JavaScriptが裏側うらがわで 一時的な魔法まほう をかけているんです。これを 「ラッパーオブジェクト」 と呼びます。

  1. あなたが str1.toUpperCase() と書く。
  2. JavaScriptが「あ、道具を使いたいんだな？」と判断する。
  3. 一瞬だけ、プリミティブを「オブジェクトの箱」に入れる。
  4. 道具（メソッド）を使い終わったら、すぐに箱を捨てて「プリミティブ」に戻す。

この魔法まほうのおかげで、私たちは重い「オブジェクト」をずっと持っていなくても、必要なときだけ便利な道具を使えるのです。

4. どっちを使えばいい？

留学生へのアドバイスは、とてもシンプルです。

  • 常に「String型（プリミティブ）」を使いましょう！
  • 書かき方かたが簡単（"" で囲むだけ）。
  • メモリを節約できて、動うごきも速い。
  • new String() は、特別な理由がない限り、使わなくて大丈夫です。

まとめ

特徴String型 (Primitive)Stringオブジェクト
作り方"hello"new String("hello")
データ型stringobject
スピード速い少し遅い（重い）
おすすめ◎ 毎日使う！❌ ほとんど使わない

Tip

「ラッパー（Wrapper）」の意味 お菓子やプレゼントを包む「ラッピング（wrapping）」と同じ言葉です。 「値を一時的に包んで守る箱」だと教えると、イメージが定着ていちゃく（ていちゃく）しやすいですよ！

いかがでしょうか？「普段ふだんは身軽みがるなプリミティブ、道具を使うときだけ魔法まほうで変身へんしん」という仕組しくみは伝わりそうでしょうか。

II. 文字列の加工かこう

Stringオブジェクト（文字列）には、文字を自由に操あやつるための便利な「道具（メソッド）」がたくさんあります。

留学生の方には、「長い文章という『テープ』を、ハサミで切ったり、シールを貼ったりして加工かこうする」 イメージで説明すると伝わりやすいですよ。

よく使われる5つのメソッドを紹介します。

1. slice（スライス）：好きなところを切きり取とる

配列はいれつのときと同じ名前ですね！文字列でも「○番目から○番目までを取り出す」ことができます。

let text = "JavaScript";
let sub = text.slice(0, 4); // 0番目から4番目の「手前」まで

console.log(sub); // "Java"
  • ポイント： 元の text は変わりません。新しい「切きり抜ぬき」を作るだけです。

2. replace（リプレイス）：文字を置おき換かえる

間違った文字を直したり、別の言葉に変えたりします。

let greeting = "こんにちは、田中さん";
let newGreeting = greeting.replace("田中", "マリア");

console.log(newGreeting); // "こんにちは、マリアさん"
  • 覚え方： 「リプレイス」は「入いれ替かえる」という意味です。

3. split（スプリット）：バラバラにわける

長い文字列を、カンマやスペースで区切って「配列はいれつ（リスト）」に変えます。

let tags = "日本,韓国,中国";
let array = tags.split(","); // 「,」のところで切る

console.log(array); // ["日本", "韓国", "中国"]
  • 覚え方： 「スプリット」は「分裂ぶんれつ（ぶんれつ）する」という意味。名簿めいぼなどを作るときにとても便利です！

4. toUpperCase / toLowerCase：大文字・小文字にする

英語のアルファベットをすべて大文字、または小文字に変えます。

let email = "Maria@Example.Com";

console.log(email.toLowerCase()); // "maria@example.com"（すべて小文字）
console.log(email.toUpperCase()); // "MARIA@EXAMPLE.COM"（すべて大文字）
  • ポイント： ユーザーが入力にゅうりょくしたメールアドレスをきれいに整理するときによく使います。

5. trim（トリム）：まわりの空白を消す

文字の前後に入ってしまった、いらない「スペース」を自動で消してくれます。

let input = "   マリア   ";
let cleanInput = input.trim();

console.log(cleanInput); // "マリア"（きれいに消えた！）
  • 例たとえ： 髪の毛を「トリミング（整える）」するのと同じです。

まとめテーブル（留学生向け）

メソッド名やっていること例たとえ話
slice一部を取り出すハサミで切きり取とる
replace文字を入いれ替かえる修正テープで書かき直なおす
split配列はいれつに分けるチョコをパキパキ割る
toLowerCase小文字にする全部小さく書く
trim前後の隙間すきまを消すムダ毛をカットする

Tip

「元の文字は変わらない」というルール 文字列（String）のメソッドは、すべて**「加工かこうしたあとの新しい文字」**を返します。元の変数へんすうを変えたいときは、text = text.trim(); のように、もう一度代入だいにゅうする必要があるよ、と教えてあげてください。

いかがでしょうか？ 「文字列の加工かこう」ができるようになると、ユーザーが入力にゅうりょくしたデータをきれいに整理できるようになります。

III. 文字の検索けんさく

文字列（String）の中から「特定の文字」を見つけたり、場所を調べたりするときに欠かせない charAt と indexOf について説明します。

どちらも「何番目にあるか」という インデックス（番号） をキーワードにして動うごきます。

1. charAt（キャラット）：番号から「文字」を知る

指定した番号の場所に、どんな文字があるかを教えてくれます。

  • イメージ： 「3番の部屋に住んでいるのは誰（どの文字）？」と聞く感じです。
  • 書きかた： 文字列.charAt(インデックス)
let word = "JavaScript";

console.log(word.charAt(0)); // "J"（一番最初）
console.log(word.charAt(4)); // "S"（5番目）

Tip

最近のJavaScriptでは、配列はいれつと同じように word[0] と書いても同じ結果が得られますが、charAt は古いコードでもよく使われる大切な基本です。

2. indexOf（インデックスオブ）：文字から「番号」を知る

探したい文字が、最初から数えて何番目（インデックス）にあるかを教えてくれます。

  • イメージ： 「『S』さんは何番の部屋に住んでいますか？」と聞く感じです。
  • 書きかた： 文字列.indexOf("探したい文字")
let text = "Hello World";

console.log(text.indexOf("W")); // 6 （Wは7番目、つまりインデックスは6）
console.log(text.indexOf("o")); // 4 （最初に見つかった「o」の場所）

見つからなかったらどうなる？

ここがテストや実務（じつむ）で一番大切なポイントです。 探している文字がどこにもなかった場合、indexOf は -1 という数字を返します。

let msg = "こんにちは";
console.log(msg.indexOf("さようなら")); // -1

3. 二つのメソッドの違い（まとめ）

留学生の方には、この「逆（ぎゃく）」の関係を伝えてあげてください。

メソッド名知りたいこと（答え）入力にゅうりょくするもの例たとえ話
charAt文字はなに？番号 (Index)「0番の席に座っているのは誰？」
indexOf番号はどこ？文字 (String)「マリアさんは何番の席？」

留学生へのアドバイス：indexOf の便利な使い方

「あるかないか」を調べるために、if 文でよくこう書きます。

let email = "test@example.com";

// 「@」が入っているかチェックする
if (email.indexOf("@") !== -1) {
  console.log("正しいメールアドレスの形式（けいしき）です。");
} else {
  console.log("「@」がありません！");
}

Note

「-1 じゃない（!== -1）」 ＝ 「どこかにある」 という意味だよ！と教えると、コードの意味がスッと伝わります。

いかがでしょうか？「番号から文字」か「文字から番号」か、このペアで覚えるととても使いやすくなります。

IV. 文字列の応用

Webサイトで扱う情報の多くは「テキスト（文字列）」です。これをどう操作するかが、プログラミングの腕の見せ所です。

文字列の作成と結合けつごう

最新さいしんのJavaScriptでは、テンプレートリテラル（「`」 バッククォート）を使うのがとても便利です。

  • 変数へんすうの埋うめ込こみ: `こんにちは、${name}さん！` のように、${} で変数へんすうを入れられます。
  • 改行かいぎょう（かいぎょう）: テンプレートリテラルは、コードの中で改行かいぎょうした場所をそのまま文字として扱ってくれます。HTMLのコードを文字として作りたいときに非常に役立ちます。

数値すうちへの変換へんかん

prompt()（プロンプト：入力にゅうりょく画面がめん）でユーザーが入力にゅうりょくした数字は、見みた目めが数字でも、プログラム上は「文字列」です。計算するには変換へんかんが必要です。

  • parseInt(): 整数（1, 2, 3…）に変換へんかんします。
  • parseFloat(): 小数点を含む数値すうちに変換へんかんします。

So What?（なぜ大切なの？） 数字ではない文字を無理に数値すうちに変えようとすると NaN（Not a Number：数値すうちではないというエラー値）になります。Web開発かいはつではユーザーが何を打つか分かりません。isNaN() 関数かんすうを使って「これは本当ほんとうに数字かな？」とチェックすることは、プログラムが止まってしまう「クラッシュ」を防ぐためのプログラマーの責任です。