登場人物
- 天野 陽菜（あまの ひな）: おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん: JavaScriptを学び始めた初心者。
長い文字列から必要な部分だけ抜き出したい！
ひな姉、こんにちは！この前、文字列の基本を教えてもらって、文章をプログラムで扱えるのが面白いなって思いました。もし、すごく長い文章の中から、必要な部分だけを抜き出したい時ってどうすればいいんですか？
こんにちはー！おお、具体的な疑問が出てきたね、素晴らしい！まさにウェブサイトでよく使うテクニックだよ。今日は、長い文字列の中から、君が欲しい部分だけをピンポイントで取り出す『文字列の切り出し』の技を紹介しちゃうね！
切り出し！なんだかプロっぽいです！ぜひ教えてください！
ふふ、マスターすれば、データ処理がぐっと楽になるよ。主に使うのは、
slice()、substring()、substr() の3つのメソッドだ。それぞれ特徴があるから、順番に見ていこうか！まずはコレ！『どこからどこまで』で切り出す slice()
一番よく使うのが、
slice()（スライス）っていうメソッドだよ。これは、まさに文字列をスライス（薄切り）するみたいに、『ここからここまでの範囲』を指定して切り出すんだ。
『ここからここまでの範囲』…どうやって指定するんですか？
文字列のインデックス番号を覚えてるかな？0から始まる、文字の位置を示す番号のことだよ。
slice() には、切り出しを始める位置（開始インデックス）と、終わりの位置（終了インデックス）を教えてあげるんだ。const sentence = "Javascriptを楽しく学ぼう！";
const part1 = sentence.slice(0,10);
console.log(part1);//Javascript
const part2 = sentence.slice(12,15);
console.log(part2);//楽しくなるほど！始まりと終わりを指定するんですね。終わりは、その手前までが切り出されるってことですか？
そう！指定した終了インデックスの文字は含まれないんだ。これはとても大事なルールだから覚えておいてね。例えば、インデックス12から15までって指定したら、12、13、14番目の文字が切り出される感じだよ。
あとね、もし終了インデックスを省略したら、開始インデックスから文字列の最後まで全部切り出してくれるんだ。
const sentence = "Javascriptを楽しく学ぼう！";
const restOfSentence = sentence.slice(10);
console.log(restOfSentence);//を楽しく学ぼう！おお！それは便利ですね！
slice() と似てるけど… substring()
次に
substring()（サブストリング）っていうメソッド。これも slice() と同じように『開始インデックス』と『終了インデックス』を指定して切り出すんだ。const sentence2 = '今日は晴れです。';
const sub1 = sentence2.substring(0,3);
console.log(sub1);//今日は
const sub2 = sentence2.substring(3);
console.log(sub2)//晴れです。あれ？これだと
slice() と全く同じ動きに見えますね…。よく見てるね！ほとんどの場合は
slice() と同じ動きをするんだけど、少しだけ違う点があるんだ。例えば、開始インデックスと終了インデックスを逆に指定した場合や、マイナスの値を指定した場合に挙動が変わるんだよ。でも、基本的にはslice()の方が柔軟性が高くて、推奨されることが多いから、まずは slice() をしっかり覚えておけば大丈夫！『どこから、いくつ分』で切り出す substr()（ちょっと古いけど…）
最後に
substr()（サブストリング）っていうメソッド。これはちょっと毛色が違うんだ。このメソッドは『開始インデックス』と『そこから何文字分切り出すか（文字数）』を指定するんだ。const movieTitle = 'スター・ウォーズ';
const partA = movieTitle.substr(0,3);
console.log(partA);//スター
const partB = movieTitle.substr(5,3);
console.log(partB);//ウォーなるほど！『何文字分』って指定するのは分かりやすいですね！
なるほど！『何文字分』って指定するのは分かりやすいですね！
うん、直感的な場合もあるよね。ただ、この
substr() メソッドは、実はもうあまり使わないことが推奨されているんだ。将来的に廃止される可能性もあるから、基本的には slice() を使うのが安心だよ。そうなんですね！じゃあ、やっぱり
slice() をマスターするのが一番いいってことですね！状況に応じた使い分け（まとめ）
その通り！今日のまとめとして、どのメソッドをどんな時に使うかの目安を伝えておくね。
slice(): 基本的にはこれを使おう！ 『開始インデックスから終了インデックスの手前まで』を切り出したい時に最も柔軟で推奨されるよ。substring():slice()とほぼ同じ。使い分けに迷ったらslice()でOK！substr(): 『開始インデックスから何文字分』という指定だけど、非推奨だから基本的には使わないようにしよう。
これで、文字列から必要な部分だけをスマートに取り出せるようになるはずだよ。まるで、長いセリフの中から、決め台詞だけを抜き出す役者さんみたいでしょ？
ひな姉の例え、いつも分かりやすいです！『スライス』でスパッと切り出すイメージ、覚えました！これで長文のデータも怖くないです！
まとめ：切り出しの技を磨こう！
今日のポイントをまとめるね！
- JavaScriptで文字列の一部を取り出すには、主に
slice()、substring()、substr()があるよ。 slice()が最も推奨される方法で、『開始インデックス』と『終了インデックス（含まず）』を指定して切り出す。substring()はslice()と似ているけど、少し挙動が違う点がある。substr()は『開始インデックス』と『文字数』を指定するけど、非推奨だから注意してね。
文字列の切り出しは、ユーザーが入力した情報の一部を取り出したり、日付の文字列から年だけを抜き出したりと、色々な場面で本当に役立つよ。実際に自分で色々な文字列で試して、感覚を掴んでみてね。
はい！今日の解説で、文字列操作がもっと楽しくなりそうです！ひな姉、今日もありがとうございました！
どういたしまして！また次回も、JavaScriptの新しい技を一緒に身につけていこうね！それじゃあ、またね！
