ひな姉と学ぶJS！文字列から必要な部分だけ取り出す「文字列切り出し」の技

登場人物

• 天野 陽菜（あまの ひな）: おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
• 後輩ちゃん: 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”]こんにちはー！おお、具体的な疑問が出てきたね、素晴らしい！まさにウェブサイトでよく使うテクニックだよ。今日は、長い文字列の中から、君が欲しい部分だけをピンポイントで取り出す『文字列の切り出し』の技を紹介しちゃうね！[/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”]ふふ、マスターすれば、データ処理がぐっと楽になるよ。主に使うのは、slice()、substring()、substr() の3つのメソッドだ。それぞれ特徴があるから、順番に見ていこうか！[/voice]

まずはコレ！『どこからどこまで』で切り出す slice()

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]一番よく使うのが、slice()（スライス）っていうメソッドだよ。これは、まさに文字列をスライス（薄切り）するみたいに、『ここからここまでの範囲』を指定して切り出すんだ。[/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”]文字列のインデックス番号を覚えてるかな？0から始まる、文字の位置を示す番号のことだよ。slice() には、切り出しを始める位置（開始インデックス）と、終わりの位置（終了インデックス）を教えてあげるんだ。[/voice]

const sentence = "Javascriptを楽しく学ぼう！";

const part1 = sentence.slice(0,10);
console.log(part1);//Javascript

const part2 = sentence.slice(12,15);
console.log(part2);//楽しく

[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”]そう！指定した終了インデックスの文字は含まれないんだ。これはとても大事なルールだから覚えておいてね。例えば、インデックス12から15までって指定したら、12、13、14番目の文字が切り出される感じだよ。[/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 sentence = "Javascriptを楽しく学ぼう！";
const restOfSentence = sentence.slice(10);
console.log(restOfSentence);//を楽しく学ぼう！

[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]

slice() と似てるけど… substring()

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]次に substring()（サブストリング）っていうメソッド。これも slice() と同じように『開始インデックス』と『終了インデックス』を指定して切り出すんだ。[/voice]

const sentence2 = '今日は晴れです。';

const sub1 = sentence2.substring(0,3);
console.log(sub1);//今日は

const sub2 = sentence2.substring(3);
console.log(sub2)//晴れです。

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]あれ？これだと slice() と全く同じ動きに見えますね…。[/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”]よく見てるね！ほとんどの場合は slice() と同じ動きをするんだけど、少しだけ違う点があるんだ。例えば、開始インデックスと終了インデックスを逆に指定した場合や、マイナスの値を指定した場合に挙動が変わるんだよ。でも、基本的にはslice()の方が柔軟性が高くて、推奨されることが多いから、まずは slice() をしっかり覚えておけば大丈夫！[/voice]

『どこから、いくつ分』で切り出す substr()（ちょっと古いけど…）

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]最後に substr()（サブストリング）っていうメソッド。これはちょっと毛色が違うんだ。このメソッドは『開始インデックス』と『そこから何文字分切り出すか（文字数）』を指定するんだ。[/voice]

const movieTitle = 'スター・ウォーズ';

const partA = movieTitle.substr(0,3);
console.log(partA);//スター

const partB = movieTitle.substr(5,3);
console.log(partB);//ウォー

[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日-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”]うん、直感的な場合もあるよね。ただ、この substr() メソッドは、実はもうあまり使わないことが推奨されているんだ。将来的に廃止される可能性もあるから、基本的には slice() を使うのが安心だよ。[/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”]そうなんですね！じゃあ、やっぱり slice() をマスターするのが一番いいってことですね！[/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”]

その通り！今日のまとめとして、どのメソッドをどんな時に使うかの目安を伝えておくね。

• slice(): 基本的にはこれを使おう！ 『開始インデックスから終了インデックスの手前まで』を切り出したい時に最も柔軟で推奨されるよ。
• substring(): slice() とほぼ同じ。使い分けに迷ったら slice() でOK！
• substr(): 『開始インデックスから何文字分』という指定だけど、非推奨だから基本的には使わないようにしよう。

これで、文字列から必要な部分だけをスマートに取り出せるようになるはずだよ。まるで、長いセリフの中から、決め台詞だけを抜き出す役者さんみたいでしょ？

[/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”]

今日のポイントをまとめるね！

• JavaScriptで文字列の一部を取り出すには、主に slice()、substring()、substr() があるよ。
• slice() が最も推奨される方法で、『開始インデックス』と『終了インデックス（含まず）』を指定して切り出す。
• substring() は slice() と似ているけど、少し挙動が違う点がある。
• substr() は『開始インデックス』と『文字数』を指定するけど、非推奨だから注意してね。

文字列の切り出しは、ユーザーが入力した情報の一部を取り出したり、日付の文字列から年だけを抜き出したりと、色々な場面で本当に役立つよ。実際に自分で色々な文字列で試して、感覚を掴んでみてね。

[/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”]どういたしまして！また次回も、JavaScriptの新しい技を一緒に身につけていこうね！それじゃあ、またね！[/voice]