登場人物
- 天野 陽菜（あまの ひな）: おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 読者（あなた）: JavaScriptを学び始めた初心者。
オープニング：コンピューターに言葉を伝える方法
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]ひな姉、こんにちは！これまで数字を扱ったり、計算をさせたりするプログラムを学んできましたけど、ウェブサイトって文字だらけじゃないですか。名前とか住所とか、コンピューターに言葉を伝えたい時って、どうすればいいんですか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]こんにちは！とても良い質問だね！まさにウェブサイトの情報を表現する上で欠かせないのが、今日学ぶ『文字列（もじれつ）』だよ。私たちの言葉や文章を、JavaScriptでどうやって扱うのか見ていこうか！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい、お願いします！言葉をプログラムで扱えるなんて、なんだか不思議です。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]ふふ、まるで魔法みたいでしょ？ 今日は、文字列の基本から、ちょっとした便利な使い方まで教えちゃうね。[/voice]
文字列って何？まずは書いてみよう！
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]文字列は、文字の並び、つまりテキストのことだよ。JavaScriptで文字列を作る時は、シングルクォート（’）かダブルクォート（”）で囲んで書くんだ。[/voice]
//シングルクォートで囲む
const greeting = 'こんにちは！';
console.log(greeting);
//ダブルクォートで囲む
const message = "JavaScriptの勉強、楽しいね！";
console.log(message);[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]あ、見慣れた記号ですね！ console.log でメッセージを出す時にも使ってました。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうそう！あれも文字列だったんだ。どちらを使っても大丈夫だけど、一つのプロジェクトの中ではどちらかに統一すると、コードが見やすくなるよ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]もし、文字列の中にクォートを使いたい時はどうするんですか？例えば『ひな姉の”魔法”』みたいに。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]良い質問だね！そんな時は、外側と違う種類のクォートを使えばOKだよ。外がシングルクォートなら中はダブルクォート、逆もまた然りだね。[/voice]
const example1 = 'ひな姉の"魔法"';
cosole.log(example1);
const example2 = "彼は'Javascript'が好きだと言った。";
console.log(example2);[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]もし、どうしても同じ種類のクォートを使いたい場合は、『エスケープシーケンス』っていう特別な方法もあるんだけど、それはまた別の機会にね。基本的には外側と違うクォートを使えば大丈夫だよ。[/voice]
文字列同士をくっつける「連結」
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]次に、複数の文字列を一つにまとめる方法を見てみよう。これを『文字列の連結（れんけつ）』って呼ぶんだ。一番簡単なのは、+ 記号を使う方法だよ。[/voice]
const firstName = "太郎";
const laseName = "山田";
const fullName = lastName + firstName;
console.log(fullName);//山田太郎[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]あ、数字の足し算と同じ記号なんですね！文字列の場合はくっつくんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そう！JavaScriptは賢いから、数字と文字列で + の意味を使い分けてくれるんだ。ただし、文字列と数字を + で連結すると、数字も文字列として扱われちゃうから注意が必要だよ。[/voice]
const text = "私の年齢は" + 20 "歳です。";
console.log(text);//私の年齢は20歳です。
console.log(typeof text); //strig(文字列)[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]それと、この前学んだ『テンプレートリテラル』を覚えているかな？あれを使うと、もっと綺麗に文字列を連結できるんだったよね。[/voice]
const city = "東京";
const weather = "晴れ";
const weatherInfo = `今日の天気は${city}で${weather}です。`;
console.log(weatherInfo);[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わあ！テンプレートリテラル、ここでも大活躍ですね！断然こっちの方が分かりやすいです。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]でしょ？現代のJavaScriptでは、ほとんどの連結でテンプレートリテラルを使うのがおすすめだよ。[/voice]
[kanren postid=”996″]
文字列の長さ、特定の位置の文字を知る
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]文字列にも、配列みたいに便利なプロパティやメソッドがあるんだ。例えば、文字列の文字数を数えたい時は、配列と同じように .length を使うよ。[/voice]
const greetingJapan = "こんにちは";
console.log(greetingJapan.length);//5[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]おお、配列と同じなんですね！じゃあ、文字列の中の特定の文字を取り出すこともできますか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]できるよ！配列と同じく、インデックス（0から始まる位置の番号）を使って取り出せるんだ。[/voice]
const pragrammingLang = "JavaScript";
console.log(programmingLang[0]);//"J"
console.log(programmingLang[4]);//"S"
console.log(programmingLang[programmingLang.length - 1])//"t"[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]へえー！配列の知識がここでも役立つんですね。0から始まるインデックス、大事だなぁ。[/voice]
文字列を変換する便利なメソッド
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
文字列には、他にも色々な便利なメソッドがあるんだけど、よく使うものをいくつか紹介するね。」
toUpperCase()/toLowerCase(): 全ての文字を大文字/小文字に変換する。trim(): 文字列の先頭や末尾にある余分な空白を取り除く。replace(): 特定の文字列を別の文字列に置き換える。includes(): 特定の文字列が含まれているか確認する。
[/voice]
const originalText = " Hello JavaScript ";
console.log(originaiText.toUpperCase());// HELLO JAVASCRIPT
console.log(originaiText.toLowerCase());// hello javascript
console.log(originalText.trim());//Hello JavaScript
const sentence = "I love Javascript";
console.log(sentence.replace("Javascript","programming"));//I love programming
const fruitesBasclet = "apple,banana,orange";
console.log(fruitsBascket.includes("banana"));//true
console.log(fruitesBasclet.includes("grape"));//false[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]すごい！色々なことができるんですね！特に trim() とか replace() は、フォームに入力された文字をきれいにしたりする時に便利そうです。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！これらのメソッドは、ユーザーからの入力値を処理したり、表示を整えたりする時に頻繁に使うことになるから、覚えておくととても役に立つよ。[/voice]
まとめ：言葉を操るプログラミングの第一歩
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
今日のポイントをまとめるね！
- 文字列は、シングルクォート（’）かダブルクォート（”）で囲んで表現するテキストデータだよ。
- 文字列同士は
+で連結できるけど、テンプレートリテラル（と ${}）を使うのが断然おすすめ！ - 文字列の長さは
.lengthで、特定の位置の文字はインデックス（0から始まる番号）で取り出せる。 toUpperCase(),trim(),replace()など、文字列を便利に操作するたくさんのメソッドがあるよ。
どうだったかな？ 文字列の基本、理解できたかな？
[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい！言葉をそのまま扱えるのが面白いし、便利な機能もたくさんあって驚きました。特にテンプレートリテラルや、色々なメソッドが役立ちそうです！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]よかった！文字列は、ウェブサイトを作る上で避けては通れない道だから、今日学んだことをしっかり覚えて、ぜひ色々な文字列をいじってみてね。実際に手を動かすのが一番の近道だよ！それじゃあ、また次回！[/voice]
コメント