こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
JavaScriptを書き始めたばかりの頃って、画面に文字を表示させたり、ユーザーが入力した名前を取得したりするだけでワクワクしますよね。でも、そのうちこんな壁にぶつかりませんか？
「データベースから取ってきた日付のフォーマット、年だけ切り出したいんだけど……」
「URLのうしろに変なパラメータがついてるから削りたい！」
そんなとき、文字列を「スパーン！」と思い通りに切り出してくれる、めちゃくちゃ頼れる相棒がいます。それが今回お話しする `String.prototype.slice()` メソッドです。
名前からして「何かを切るんだな」というのが伝わってきますよね。そう、まさに文字通り、ケーキをナイフで切り分けるような感覚で文字列をスパッと切り出せる魔法のメソッドなんです。
今日は、この `slice()` の使い方を、難しい専門用語はなるべく抜きにして、身近な例えを交えながら一緒に紐解いていきましょう。つまずきやすい「マイナスの数字」の謎も、ここですっきりクリアにしちゃいましょうね。
—
そもそも `slice()` ってどんな道具？
JavaScriptの世界で、文字列（String）というのは、実はひとつの「長いリボン」のようなものです。
例えば、`”JavaScript”` という文字があったら、これは `J` `a` `v` `a` `S` `c` `r` `i` `p` `t` という10個の文字が、仲良く一列に並んでいる状態です。
`slice()` は、このリボンをハサミで「ここから、ここまで切って！」と指定して、切り取ったパーツだけを取り出す ためのメソッドです。
基本の形はこうです：
// 文字列.slice(始まりの位置, 終わりの位置)
const 削り取られた文字 = 元の文字列.slice(start, end);
ここで最初に初心者の皆さんが「おや？」とつまずくポイントがあります。
JavaScriptの文字の数え方は、人間の感覚とはちょっと違って 「0番目」からスタートする というルールがあるんです。
先ほどの `”JavaScript”` を例に見てみましょう。
| 文字 | J | a | v | a | S | c | r | i | p | t |
| :— | :— | :— | :— | :— | :— | :— | :— | :— | :— | :— |
| 番号（インデックス） | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
そう、最初の `J` は `1`番目ではなく `0`番目 なんです。ここだけ、最初にちょっとだけ頭の片隅に入れておいてくださいね。
—
実践！コードで `slice()` を使ってみよう
百聞は一見に如かず。実際にコードを書いてその動きを見てみましょう。
ブラウザの検証ツール（コンソール）や、お使いのエディタに貼り付けて試してみてくださいね。
// おなじみの文字列を用意します
const message = “Hello, Frontend!”;
// 1. 「Hello」だけを抜き出したい！
// 0番目からスタートして、5番目の手前までを切ります
const greeting = message.slice(0, 5);
console.log(greeting); // “Hello” が出力されます！
あれ、「5番目の手前」ってどういうこと？って思いませんでしたか？
ここが `slice()` のちょっとしたクセであり、慣れるとすごく便利なポイントです。
ハサミを入れる場所のイメージ
`slice(start, end)` の `end`（終わりの位置）は、「その番号の文字を含まない（そこまででストップする）」 というルールになっています。
お弁当のバイキングを想像してみてください。「0番目から5個目のおかずを取るぞ！」ではなく、「0番目のお皿から、5番目のお皿の手前までお皿ごと持ってきて！」というイメージです。
だから、`0` から `5` を指定すると、
- 0番目：H
- 1番目：e
- 2番目：l
- 3番目：l
- 4番目：o
- （5番目の `,` は含まない！）
となり、きれいに `”Hello”` だけがゲットできるわけです。
—
2つ目の引数を省略するとどうなる？
もし、`slice()` の後ろ側の数字（終わりの位置）を書き忘れたらエラーになっちゃう……？
いいえ、安心してください。そんな意地悪な仕様ではありません。
終わりの位置を省略すると、「最後まで全部！」 という太っ腹な解釈をしてくれます。
const text = “JavaScript”;
// 4番目（S）から、最後まで全部くれ！
const result = text.slice(4);
console.log(result); // “Script” が出力されます
実務でも、「ファイル名の拡張子より前が欲しい」とか「URLの特定のパス以降を全部抜き出したい」というときによく使う、めちゃくちゃ登場回数の多いテクニックです。
—
【奥義】マイナスのインデックスってなぁに？
さて、ここからが少しだけステップアップしたお話です。でも、大丈夫、すごくロジカルで便利な仕組みですからね。
実務をやっていると、「文字列の『後ろから数えて』特定の文字を取り出したい」という場面に本当によく遭遇します。例えば、ファイルの拡張子（`.jpg` や `.png` の最後の3〜4文字）を取得したいときなどです。
そんなとき、わざわざ文字列の総文字数を数えて計算し直す必要はありません。
`slice()` では、マイナスの数字（負のインデックス） を使うと、「後ろからのカウント」 ができるんです。
イメージとしては、リボンの「右端（おしまい）」を起点にする感じです。
| 文字 | J | a | v | a | S | c | r | i | p | t |
| :— | :— | :— | :— | :— | :— | :— | :— | :— | :— | :— |
| 後ろからの番号 | -10 | -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 |
一番最後の `t` が `-1`、その一個前の `p` が `-2` という風に、左に向かってマイナスが増えていきます。
これを使ったコードを見てみましょう。
const fileName = “avatar.png”;
// 後ろから4文字分（.png）を切り出したい！
// -4番目からスタートして、最後まで切り取る
const extension = fileName.slice(-4);
console.log(extension); // “.png” が取れました！
これ、すごくスマートだと思いませんか？
ファイル名が `cat.png` に変わろうが、`super_duper_long_filename.png` に変わろうが、「後ろから4文字」というルールさえ分かっていれば、綺麗に拡張子をぶっこ抜くことができます。現場のコードでもめちゃくちゃ多用されている技です。
—
注意しておきたいポイント（初心者がハマりがちな罠）
最後に、私が現場のコードレビューでよく見かける「うっかりミス」をシェアしておきますね。
1. 元の文字列は壊れません（非破壊メソッドです）
`slice()` を使っても、大元の文字列（変数の中身）自体が書き換わるわけではありません。あくまで「切り取ったコピーを新しく作り出す」という動きをします。だから、安心して何度でも試せますよ。
2. 順番を間違えると空っぽになります
例えば `text.slice(5, 2)` のように、始まりの位置（5）が終わりの位置（2）より未来にある場合、`slice()` は優しくエラーを吐くのではなく、何も入っていない空の文字 `””` をこっそり返してきます。「あれ、何も取れないぞ？」となったら、引数の大小関係を疑ってみてくださいね。
—
まとめ
いかがでしたでしょうか？
`String.prototype.slice()` は、文字列というリボンを自由自在に操るための、フロントエンド開発の必須アイテムです。
- 基本は `slice(始まり, 終わりの手前)`
- 終わりの位置を省けば「最後まで」
- マイナスを使えば「後ろから数えて」切り出せる
この3つさえ心の中にメモしておけば、もう文字列の切り出しで迷うことはありません。日々の開発や学習の中で、ぜひこの子をたくさん使って、手に馴染ませてあげてくださいね。
あなたのJavaScriptライフが、もっと楽しく、もっとスムーズになりますように。
それでは、次の現場でお会いしましょう！
コメント