こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。
JavaScriptの学習を進めていると、避けて通れないのが「文字列（String）の操作」ですよね。「画面に表示するユーザー名が長すぎるから後ろを『…』で省略したい」「URLから特定のキーワードを抜き出したい」といった要望は、実務でも毎日と言っていいほど登場します。
そんな文字列操作のなかでも、特に初心者の皆さんを悩ませるのが「`slice()` と `substring()` の違い」です。
「どっちも文字を切り出すメソッドなんでしょ？ 違いなんてあるの？」と思われるかもしれませんが、これが実はJavaScriptの歴史が生んだ、ちょっとした「罠」でもあるんです。
今回は、この2つのメソッドの違い、特に「負の数（マイナスの値）を渡したときの挙動」にスポットを当てて、身近な例えを交えながら優しく解きほぐしていきますね。
大丈夫、ひとつずつ見ていけば絶対に理解できますから、肩の力を抜いていきましょう！
—
1. 文字列の切り出しってなに？（お肉のブロックに例えてみよう）
まずは、プログラムで「文字列を切り出す」という感覚をイメージしてみましょう。
例えば、スーパーで「500gのブロック肉」を買ってきたとします。
- 「最初から300g分だけステーキ用に切ろう」
- 「真ん中の美味しそうな部分だけをサイコロステーキにしよう」
JavaScriptの文字列もこれと全く同じです。
`”JavaScript”` という10文字の文字列があったとき、その中の「どこからどこまでをハサミでチョキチョキ切り取るか」を決めるのが、切り出しメソッドの仕事です。
そして、そのハサミを入れる位置（インデックス）は、一番最初の文字を「0」として数え始めます。ここがプログラミングの最初の関門ですが、慣れれば怖くありません。
文字: J a v a S c r i p t
位置: 0 1 2 3 4 5 6 7 8 9
このルールを踏まえて、現代のJavaScript開発で主役を務める `slice()` と、今回主役の `substring()` を比べていきましょう。
—
2. お行儀のいい『slice()』と、ちょっと癖のある『substring()』
文字列から一部を抜き出すとき、多くのシニアエンジニアは迷わず `slice()` を使います。なぜなら、頭でイメージした通りの素直な動きをしてくれるからです。
一方で `substring()` は、「サブ・ストリング（部分文字列）」という名前の通り、歴史の古いメソッドです。こいつは少しだけ「頑固で不器用な職人」のようなところがあります。
何が違うのか、最大の決定打である「マイナスの引数（負の数）を渡したとき」の挙動を見てみましょう。
違い①：マイナスの値を渡したときの反応
- `slice(-3)` の場合：
「後ろから3文字分をください！」と、後ろ基準でスマートに解釈してくれます。
- `substring(-3)` の場合：
マイナスを理解できず、「え？ 0番目（一番最初）のことですね！」と勝手に変換してしまい、結果的に文字列全体を返してきたりします。
これが原因で、「あれ、思った文字が取れない……！」と頭を抱えてしまう初学者が後を絶ちません。
—
3. コードで違いを体感してみよう
百聞は一見に如かず。実際にエディタで動かせるコードを用意しました。
コピペして、ブラウザのコンソールなどで動かしてみてください。
// テスト用の文字列を用意します
const text = “JavaScript”;
// ——————————–フロー1：普通の切り出し（ここまでは一緒）——————————–
// slice(開始位置, 終了位置の前まで)
console.log(text.slice(0, 4)); // 出力: “Java” （0番目から4番目の「前」まで）
// substring(開始位置, 終了位置の前まで)
console.log(text.substring(0, 4)); // 出力: “Java” （ここまでは全く同じ結果になります）
// ——————————–フロー2：マイナスを入れたときの運命の分かれ道——————————–
// 【sliceの優しさ】後ろから数えてくれる
console.log(text.slice(-6)); // 出力: “Script” （後ろから6文字をスパッと切り出す）
// 【substringの頑固さ】マイナスを「0」として扱ってしまう
console.log(text.substring(-6)); // 出力: “JavaScript” （”-6″ が “0” に化け、最初から最後まで取ってしまう）
// ——————————–フロー3：数字の順番を逆にしたとき——————————–
// sliceは「取れません（空文字を返す）」
console.log(text.slice(4, 0)); // 出力: “” （おや、何も取れません）
// substringは「気を利かして勝手にひっくり返してくれる」
console.log(text.substring(4, 0)); // 出力: “Java” （自動で (0, 4) に並び替えて処理してくれる）
どうでしょう？
`substring()` は、マイナスを無視したり、大きい数字と小さい数字を勝手に並び替えたりと、「良かれと思って余計な気を利かせるお節介な人」のような動きをしますよね。
この「お節介」があるせいで、バグの原因になりやすいのです。
—
4. 実務ではどちらを使うべき？ 現場からのアドバイス
ここまで読んで、「じゃあ `substring()` なんて使わない方がいいの？」と思われたかもしれません。
結論からお伝えすると、特別な理由がない限り、文字列の切り出しには `slice()` を使うのが現代のベストプラクティス（推奨される書き方）です。
理由はシンプルで、
1. マイナス指定（「後ろから数える」）が直感的でめちゃくちゃ便利。
2. 挙動がシンプルで、予期せぬバグを生みにくい。
からです。実務のコードベースを覗いてみても、圧倒的に `slice()` が使われている回数が多いはずです。
じゃあ、`substring()` は一体いつ使うの？というと、古いレガシーなコードを修正するときや、他の人が書いたコードを読むときに出会うくらいでしょう。新しくコードを書くときは、まずは `slice()` を選んでおけば間違いありません。
—
さいごに
プログラミングを学んでいると、「似たような名前のメソッドが複数あって、何が違うの？」と途方に暮れることがたくさんあります。今回の `slice` と `substring` もその代表格です。
でも、安心してください。
最初から全部を完璧に覚えているプログラミングのプロなんていません。私たちも「あれ、どっちだっけ？」となったら、すぐにこういう検証コードを書いて確かめたり、公式ドキュメントをチラ見したりしながら泥臭く開発しています。
「マイナスが使える素直な奴が `slice`！」
これだけ覚えておき今日のところは100点満点です。
あなたのJavaScriptの旅が、少しでも楽しく、快適なものになりますように。
それでは、次の解説でお会いしましょう！
コメント