文字列を連結する
このレッスンで分かること
JavaScriptでは+で文字列を連結します、"Hello" + " " + nameのように繋ぎます- 数値が混ざると自動で文字列化、
"1" + 2は"12"(文字列連結)、1 + 2は3(数値加算)- 最小例は
return "こんにちは、" + name + " さん!";
文字列を連結する とは
+演算子で複数の文字列を組み立てて、自己紹介を作ってみよう。本レッスンでは、文字列を連結する の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
文字列を + でつなぐ
JavaScript で文字列を組み立てる一番素朴な方法が、プラス + を使った連結です。たとえば "Hello" と "World" をくっつけたいときは、"Hello" + "World" と書けば "HelloWorld" という新しい文字列ができます。算数の足し算と同じ記号ですが、文字列に対しては「連結」という意味で働きます。
JavaScript
const greeting = "Hello, " + "JavaScript" + "!";
console.log(greeting);
// => Hello, JavaScript!3 つの文字列をプラス + でつなぐと、"Hello, JavaScript!" という 1 本の文字列になります。途中の半角スペースもただの文字なので、"Hello, " のように文字列の中に含めて書きます。
プラス
+演算子は、両側がどちらも文字列なら「連結」、両側が数値なら「足し算」になります。JavaScriptは「左右の型を見て動きを変える」言語なので、最初は驚くかもしれません。
変数と一緒に使う
連結が本当の力を発揮するのは、変数と組み合わせたときです。
JavaScript
const name = "Alice";
const age = 28;
const intro = "私の名前は " + name + " です。年齢は " + age + " 歳。";
console.log(intro);
// => 私の名前は Alice です。年齢は 28 歳。name のところに "Alice" が、age のところに 28 が差し込まれて、1 本の自己紹介文ができあがります。age は数値ですが、左右に文字列があるため、JavaScript が自動的に "28" という文字列に変換してくれます。
「数値が勝手に文字列になる」は便利な反面、思わぬバグの温床にもなります。
1 + "2"は"12"という文字列、1 + 2は3という数値。同じ+でも結果がガラッと変わる、と覚えておきましょう。
| 式 | 結果 | 動きの説明 |
|---|---|---|
"a" + "b" | "ab" | 両側が文字列 → 連結 |
1 + 2 | 3 | 両側が数値 → 加算 |
"1" + 2 | "12" | 片方が文字列 → 連結 |
1 + 2 + "3" | "33" | 左から評価、最初は数値加算で 3、その後文字列連結 |
"1" + 2 + 3 | "123" | 左から評価、最初の + で文字列化、以降ずっと連結 |
連結の流れを図で見る
プラス + の連結は、内部では「左 → 右」の順に新しい文字列を作っていきます。
左から順に文字列を組み立てていくので、"私の名前は " + name の時点で "私の名前は Alice" という中間結果ができ、そこに " です。" を足してさらに伸ばす、という具合に成長していくイメージです。
テンプレートリテラルという選択肢
プラス + の連結は読みづらくなりがちなので、近年は テンプレートリテラル という書き方も人気です。バッククォート ` で文字列を囲み、${変数} で値を差し込めます。
JavaScript
const name = "Alice";
const age = 28;
const intro = `私の名前は ${name} です。年齢は ${age} 歳。`;こちらのほうがすっきりしていて、複数行の文字列もそのまま書けるという利点があります。ただし、この章ではあえてプラス + の連結を使って、JavaScript の素朴な部分を体に染み込ませます。テンプレートリテラルは第 2 章であらためて学びます。
どちらの書き方も現役で使われています。プラス
+の連結ができないと古いコードが読めなくなりますし、テンプレートリテラルを知らないと新しいコードが書きづらくなります。両方マスターしておきましょう。
よくある間違い
文字列連結で初心者がつまずきやすい落とし穴を 3 つ紹介します。
- 半角スペースを忘れる —
"私の名前は" + nameのように、変数の前にスペースを入れ忘れると"私の名前はAlice"のようにくっついてしまいます。スペースも文字列の一部だと意識しましょう - 数値と文字列の連結に頭が混乱する —
"1" + 2は"12"、1 + 2 + "3"は"33"、"1" + 2 + 3は"123"。左から評価されるので、最初に文字列が出てきた瞬間からあとは全部連結になります - クォートが閉じていない —
"私の名前はのように、"を閉じ忘れるとSyntaxErrorになります。エラーが出たらまずクォートの数を確認しましょう
プラス
+の連結はシンプルですが、JavaScriptの型変換ルールを知らないと結果を予測できません。「左から順に」「文字列が混ざったら全部文字列扱い」と覚えておくと迷いません。
ここまでの要点
文字列連結は +、両側が文字列なら連結、数値が混ざると自動で文字列化。左から評価されるので最初に文字列が出た瞬間から後ろは全部連結。テンプレートリテラルも代替手段として覚えておく。
やってみよう
それでは課題に挑戦しましょう。手順は次のとおりです。
- 関数
buildIntro(name)を定義する - 引数
nameを"こんにちは、"と" さん!"で挟んで+で連結する - 連結した文字列を
returnする
期待される結果は、buildIntro("Alice") が "こんにちは、Alice さん!" を返すことです。Alice の左右に半角スペースが必要なので、" さん!" の頭にしっかりスペースを入れるのを忘れないでください。
慣れてきたら、name を別の名前に変えてみたり、自分の名前を入れて呼んでみたりしましょう。さらに余力があれば、テンプレートリテラルで同じ結果を書き直してみると、両方の書き方のクセが見えてきます。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 四則演算 で、+ 演算子で複数の文字列を組み立てて、自己紹介を作ってみよう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 文字列連結 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 文字列連結 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- 関数名は
buildIntro、引数はnameの 1 つ - プラス
+を使って文字列を連結すること nameの左に"こんにちは、"、右に" さん!"を連結する (さん!の前に半角スペース 1 つ)
入出力例
test-cases.txt
buildIntro("Alice") → "こんにちは、Alice さん!"
buildIntro("太郎") → "こんにちは、太郎 さん!"
buildIntro("") → "こんにちは、 さん!"