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