こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
JavaScriptの勉強、毎日お疲れ様です！
画面に文字を表示させたり、ユーザーが入力した名前を整えたり、「文字列操作」ってフロントエンド開発の楽しさをグッと実感できる最初の大きな山場ですよね。
今日は、そんな文字列操作の旅路の途中で、誰もが一度はすれ違う（そして時々ちょっと厄介なトラブルを引き起こす）「古いあのメソッド」についてお話しします。
「なんだか古い書き方を見つけたけれど、これって使ってもいいのかな？」
そんなモヤモヤを、今日ここでスッキリ解消しちゃいましょう！大丈夫、すごくシンプルで簡単なことなんですからね。
—
懐かしの（そしてちょっと気まぐれな）レガシー道具：`substr()`
JavaScriptの長い歴史の中で、文字の一部を切り出す（抜き取る）ために使われてきたメソッドに、`String.prototype.substr()` というものがあります。
イメージしてみてください。これはおばあちゃんの家にあった、刃が少し欠けていて使い方のコツがいる古い「裁ちバサミ」のようなものです。
この `substr()` さん、使い方は一見するとシンプルでした。
「何文字目から、何文字分切り取るか」を指定するんです。
// レガシーな substr() の使い方（※今は使わないでね！）
const text = “JavaScript”;
// 0番目（最初の ‘J’）から、5文字分を切り取る
const result = text.substr(0, 5);
console.log(result); // “Java” が出力されます
「あれ？これすごく直感的で便利じゃない？」って思いませんでしたか？
そう、パッと見はとっても分かりやすいんです。でも、実はこのバサミ、世界標準の仕様から外された「非推奨（レガシー）」の道具になってしまいました。
なぜ、第一線を退くことになってしまったのでしょうか？
—
なぜ `substr()` を使ってはいけないのか？
理由は大きく分けて2つあります。一番の理由は「歴史の都合で世界標準のルールから外されてしまったから」、そしてもう一つは「挙動が少し気まぐれで危なっかしいから」です。
1. ECMAScript（JavaScriptの公式ルールブック）の規格外だから
JavaScriptの仕様を決めている偉い人たちの会議（TC39）で、この `substr()` は「もう古い規格だから、新しい仕様書からは外そうね（Normative Optional）」と判断されてしまいました。つまり、公式に「引退勧告」が出ている状態なんです。
2. マイナスを指定したときの「気まぐれ」が危ない
プログラミングをしていると、「後ろから3文字を切り出したいな」と思って、ついマイナスの数字を入れたくなることがありますよね。
現代の正しい代打バサミである `slice()` メソッドなら、マイナスを入れると「後ろから数える」という優しいルールで動いてくれます。しかし、`substr()` は環境（ブラウザの種類など）によって動きが違ったり、変な挙動をしたりして、バグ（予期せぬ不具合）の温になりやすかったのです。
現場のプロたちが「うわ、このコード、まだ `substr` 使ってるよ……」と冷や汗をかくのは、まさにこの「いつ爆発するか分からない不安定さ」があるからなんです。
—
じゃあ、代わりに何を使えばいいの？（現代の主力選手たち）
「じゃあ、文字を切り出したいときはどうすればいいのさ！」という声が聞こえてきそうですね。安心してください、私たちには頼もしい現代の相棒たちがちゃんと用意されています。
基本的には、以下の2つを覚えておけば間違いありません！
1. `String.prototype.slice()` （文字の切り出しの主役）
2. `String.prototype.substring()` （昔からある安全な控え選手）
特に、今日からあなたの相棒にしてほしいのは `slice()` です。
お買い物のレシートから特定の情報だけをキレイに切り取るカッターナイフのような、切れ味抜群で安全なツールですよ。
現代の正解：`slice()` の使い方
`slice()` は、「どこから（開始位置）」と「どこまで（終了位置）」を指定して文字を切り出します。
// 現代の標準！ slice() を使った安全な切り出し
const message = “Hello, Frontend!”;
// 0番目から7番目の手前までを切り取る
const greeting = message.slice(0, 5);
console.log(greeting); // “Hello”
// 応用：マイナスを使うと「後ろから」数えてくれる！
// 後ろから9文字目から、一番最後まで切り取る
const target = message.slice(-9);
console.log(target); // “Frontend!”
`substr()` との違いは、「何文字分か」ではなく「どこから、どこまで（の位置）」を指定するところです。最初は少し戸惑うかもしれませんが、慣れると `slice()` の方が圧倒的に頭の中で計算しやすくなりますよ。
—
実務でよくあるシチュエーション：長い文章を「…」で省略する
ここで、実際のWeb制作やアプリ開発で本当によくある例を見てみましょう。
例えば、ブログのカード一覧などで、タイトルが長すぎるときに「JavaScriptの文字列操作の基本につい…」みたいに省略して表示させたい場面です。
`slice()` を使って、安全にスマートに書いてみましょう！
/
- 指定した文字数を超えた場合に、文章を省略して「…」を付ける関数
- @param {string} str – 元の文字列
- @param {number} maxLength – 表示したい最大の文字数
/
function truncateText(str, maxLength) {
// もし元の文字が最大文字数より少なければ、そのまま返す
if (str.length <= maxLength) {
return str;
}
// 安全な slice() を使って、0番目から最大文字数までを切り取る
// その後ろに "..." を優しく添えてあげる
return str.slice(0, maxLength) + "...";
}
// 実行してみよう！
const longTitle = "JavaScriptの文字列操作をマスターして前端の達人になろう";
const safeTitle = truncateText(longTitle, 10);
console.log(safeTitle);
// 出力結果: "JavaScript..." （綺麗に収まりましたね！）
どうでしょう？ `substr()` を使わなくても、`slice()` を使えばこんなにエレガントで安全なコードが書けるんです。
---
まとめ：今日から一歩、モダンなコードへ
古い参考書や、ネットの海のどこか古い記事には、まだ `substr()` が平然と紹介されていることがあります。「あれ？動くじゃん！」と思って使いたくなる気持ち、痛いほどよく分かります。私も昔はよくお世話になりました。
でも、今日このブログを読んでくれたあなたには、ぜひ「古いバサミはそっと引き出しにしまって、新しい `slice()` を手に取る」という選択をしてほしいなと思います。
もし過去のコードで `substr()` を見つけても、「あ、ここを直せばもっと安全になるぞ！」と気づけるだけで、あなたのエンジニアとしてのスキルは確実にワンランクアップしています。
焦らなくて大丈夫。一つひとつ、こうしてモダンな書き方を覚えていけばいいんです。
あなたのJavaScriptの旅が、今日も楽しく素晴らしいものになりますように！
コメント