やあ、若きエンジニアの皆さん。よくここまで辿り着きましたね。
私はこれまで、数えきれないほどの凄まじい現場——それこそ、深夜のデバッグで目が充血し、コーヒーの空き缶がピラミッドのように積み上がるような修羅場をいくつも渡り歩いてきました。そんな私が、今日は皆さんに「JavaScriptという広大な海を安全に渡るための、ちょっとした、でも大切な知恵」をお話ししようと思います。
今日のテーマは、文字列操作の古き戦友、`substr()` についてです。
「本やネットの記事で見たことがあるよ！」という方も多いでしょう。でも、実はこのメソッド、現代のWeb開発では「もう引退させてあげよう」と言われている、いわば骨董品のような存在なんです。なぜダメなのか、代わりに何を使えばいいのか。現場のリアルな視点から、優しく噛み砕いて解説しますね。
—
1. `substr()` は「昔馴染みの、ちょっとクセがある道具」
まず、`substr()` がどんな動きをしていたかをおさらいしましょう。
例えば、「お買い物リスト」という文字列から「買い物」だけを取り出したいとき、`substr()` はこんな風に使われていました。
// 昔ながらの書き方
const text = “お買い物リスト”;
// 1番目（0から数えて「買」）から、2文字分だけ切り取る
const result = text.substr(1, 2);
console.log(result); // 結果: “買い物”
このメソッドの最大の特徴は、2番目の数字が「何文字分（長さ）」を指定することにありました。「ここからスタートして、◯文字ちょうだい！」という、日常会話に近い感覚ですね。
でも、ここに落とし穴があったんです。
—
2. なぜ「使わないで」と言われるようになったのか？
「えっ、便利そうじゃない？」と思うかもしれません。しかし、今のJavaScriptの世界（標準仕様）では、`substr()` は非推奨（Legacy）という扱いになっています。
その理由は、大きく分けて2つあります。
理由①：公式の「正式な仲間」になれなかった
実は `substr()` は、JavaScriptの厳格なルールブック（ECMAScriptといいます）において、メインの仕様ではなく「おまけ（Annex B）」という扱いに甘んじています。ブラウザによっては挙動が微妙に違ったり、将来的にサポートが弱まる可能性がある「不安定な足場」なんです。
理由②：他のメソッドと「考え方」が違って紛らわしい
これが現場で一番厄介なポイントです。
JavaScriptには、他にも文字を切り出す `slice()` や `substring()` がありますが、これらは2番目の数字に「終わりの位置」を指定します。
- slice(開始位置, 終了位置)
- substr(開始位置, 文字数) ← こいつだけ仲間外れ！
チームで開発していると、「あれ？この2番目の数字って『どこまで』だっけ？それとも『何文字』だっけ？」という混乱を招き、それがバグの原因になるのです。
—
3. これからは `slice()` を相棒にしよう！
「じゃあ、どうすればいいの？」と不安になったあなた、大丈夫ですよ。
現代のスタンダードは、`slice()` です。これさえ覚えておけば、文字列だけでなく配列（データのリスト）でも同じ感覚で使えるので、学習コストもグッと下がります。
`slice()` のイメージ：リボンをハサミで切る
`slice()` を使うときは、「ここから（始点）、ここまでの手前（終点）」をハサミで切るイメージを持ってください。
const message = “JavaScriptは楽しい！”;
// 0から数えて 10番目（「楽」）から、12番目（「い」）の手前まで切り取る
// つまり 10番目と11番目だけが手元に残る
const happy = message.slice(10, 12);
console.log(happy); // 結果: “楽しい”
「12番目の手前まで」という考え方が最初は少し戸惑うかもしれませんが、「後ろの数字から前の数字を引き算すれば、切り取れる文字数になる（12 – 10 = 2文字）」と覚えると、プロっぽくてカッコいいですよ！
—
4. 現場で使える！書き換えシミュレーション
さあ、実際に `substr()` を見かけたときに、どうやって `slice()` に直せばいいか、練習してみましょう。
パターンA：1文字だけ切り出す場合
「3文字目から1文字だけ欲しい」とき。
const code = “ABCDEFG”;
// 【古い】substr(開始位置, 1文字)
const oldWay = code.substr(3, 1); // “D”
// 【新しい】slice(開始位置, 次の位置)
const newWay = code.slice(3, 4); // “D”
パターンB：最後まで切り出す場合
「5文字目から最後まで全部欲しい」とき。これはもっと簡単です！
const story = “むかしむかし、あるところに…”;
// 実は slice は、2番目を省略すると「最後まで」という意味になります
const lastPart = story.slice(6);
console.log(lastPart); // 結果: “あるところに…”
—
5. 最後に：間違えても、遠回りしても大丈夫
もしあなたが今書いているコードに `substr()` が混ざっていたとしても、自分を責めないでくださいね。それはあなたが一生懸命、過去の素晴らしい知恵に触れた証拠ですから。
ただ、これから新しいコードを書くときは、「未来の自分や仲間のために、一番標準的で分かりやすい `slice()` を選ぼう」という優しさを持ってみてください。
その積み重ねが、あなたを「ただコードが書ける人」から「信頼されるエンジニア」へと変えていくのです。
JavaScriptの世界は広くて少し複雑ですが、一歩ずつ進めば必ず景色が開けてきます。分からないことがあったら、いつでもまたここへ来てください。私たちは、あなたの挑戦をいつだって応援していますよ。
さあ、エディタを開いて、新しく覚えた `slice()` を試してみませんか？
—
まとめ：今日のポイント
- `substr()` は「非推奨」。古いコードで見かけても、新しくは使わない。
- 代わりに `slice()` を使うのが現代の鉄則。
- `slice(開始, 終了)` の形に慣れよう（引き算で文字数がわかる！）。
- 迷ったら 「リボンのどこからどこまでを切るか」 をイメージする。
これであなたも、文字列操作の第一歩を完璧に踏み出せましたね。お疲れ様でした！
コメント