JavaScriptでプログラミングをしていると、文字列の一部を別の文字列に置き換えたい場面がたくさんあります。
単純な文字の置き換えなら簡単にできますが、すべての文字を一気に置き換えたり、特定のパターンを持った文字だけを置き換えたりする場合は、少し工夫が必要です。
そんな時に大活躍するのが正規表現です。
この記事では、JavaScriptのreplaceで正規表現を使う方法について解説していきます。
JavaScriptのreplaceと正規表現の組み合わせが最強
JavaScriptのreplaceメソッドは、文字列を別の文字列に置換するためのとても便利な機能です。
しかし、単に文字列を指定するだけでは、最初に見つかった1つ目の文字しか置換されません。
ここで正規表現を組み合わせることで、一気に強力な置換ができるようになります。
正規表現を使うと、以下のようなメリットがあります。
- 文字列の中に含まれるすべての対象を一括で置換できる
- 大文字と小文字を区別せずに置換できる
- 数字だけ、アルファベットだけなど条件を指定して置換できる
例えば、文章の中にあるすべてのスペースを消したい時や、電話番号のハイフンを取り除きたい時などに、正規表現はとても役立ちます。
コードも短くすっきりと書けるため、プロのエンジニアも頻繁に使用するテクニックです。
すべての文字を一括で置換できるgフラグが便利
replaceメソッドで正規表現を使う最大の理由は、すべての対象を一括で置換できるからです。
通常の文字列指定では、最初に見つかった1つ目しか置換してくれません。
例えば「あいうえお、あいうえお」という文字列の「あ」を「お」にしたい場合、普通に書くと最初の「あ」しか「お」に変わりません。
しかし、正規表現の「gフラグ」（グローバルフラグ）を使うことで、文字列全体のすべての「あ」を対象にすることができます。
- 通常のreplaceは最初の1つだけ置換する
- 正規表現のgフラグを使うと全部置換できる
- 繰り返し処理を書かなくても1行で完了する
プログラムを書くとき、いかに短くわかりやすく書くかは重要なポイントです。
gフラグを使えば、ループ処理を使わずに一発で全部置き換えられるため、とてもスマートなコードになります。
このgフラグは実務でも本当によく使うので、必ず覚えておきたいテクニックの一つです。
大文字と小文字を区別せずに置換できるiフラグ
正規表現を使うもう一つの大きな理由は、大文字と小文字の区別をなくすことができる「iフラグ」（インセンシティブフラグ）が存在することです。
英語の文章を処理するとき、「Apple」と「apple」と「APPLE」のように、大文字小文字が混ざっていることがあります。
これを別々に処理するのは非常に面倒ですよね。
正規表現のiフラグを使えば、これらをすべて同じものとして扱うことができます。
- 大文字と小文字の違いを無視して検索できる
- ユーザーが入力した文字の揺れに対応しやすい
- gフラグと組み合わせて「gi」として使うこともできる
特にウェブサイトの検索フォームなど、ユーザーがどんな形式で文字を入力するかわからない場所では、iフラグが大活躍します。
このように、単純な文字列の置き換えだけでなく、柔軟な対応ができるようになるのが正規表現の強みです。
実践として複雑な条件を指定する方法
正規表現の真骨頂は、特定の文字ではなく「パターン」を指定して置換できることです。
これにより、プログラムの可能性がグッと広がります。
例えば「ユーザーが入力した電話番号からハイフンだけを取り除きたい」「文章の中から数字だけを削除したい」といった複雑な条件も、正規表現を使えば数文字のコードで実現できます。
数字を表す「\d」や、空白を表す「\s」などの特殊な記号（メタ文字）を使うのがポイントです。
- 「\d」で数字だけを指定できる
- 「\s」でスペースや改行などの空白文字を指定できる
- 特定の記号だけを狙って置換や削除ができる
最初は記号の羅列に見えて難しく感じるかもしれませんが、よく使うパターンをいくつか覚えておくだけでも十分役に立ちます。
インターネット上には正規表現のサンプルがたくさんあるので、それらをコピーして少し書き換えるだけでも立派なプログラミングです。
まずは数字の削除や空白の削除から練習してみましょう。
JavaScriptのreplaceに関するよくある質問
ここでは、JavaScriptのreplaceや正規表現について、よくある質問とその答えをまとめました。
Q1：正規表現の前後をスラッシュで囲むのはなぜですか？
正規表現をJavaScriptで書くときのルールです。
ダブルクォーテーションやシングルクォーテーションで囲むと普通の文字列として扱われてしまいますが、スラッシュで囲むことでプログラムが「これは正規表現だ」と認識してくれます。
Q2：置換したのに元の文字列が変わりません。
replaceメソッドは、元の文字列を直接書き換えるのではなく、新しい文字列を作って返すという性質があります。
そのため、必ず結果を新しい変数に代入して使うようにしてください。
- スラッシュで囲むことで正規表現になる
- replaceは元の変数を変更しない
- 結果は別の変数で受け取るか、上書き代入する必要がある
エラーが出ないのに思った通りに動かない時は、この「元の文字列が変わっていない」という罠にハマっていることが多いです。
変数の扱いに注意しながらプログラミングを進めてくださいね。
本格的にプログラミングを学ぶならスクールがおすすめ
ここまでJavaScriptのreplaceと正規表現について解説してきましたが、「もっと深く理解したい」「プログラミングを仕事にしたい」と思った方もいるのではないでしょうか。
独学でもプログラミングは学べますが、わからないところでつまずいて挫折してしまう人も少なくありません。
そこでおすすめなのが、プログラミングスクールを活用することです。
プロの講師に直接質問できる環境があれば、正規表現のような少し難しい概念もスムーズに理解できます。
- プロの講師に質問できるので挫折しにくい
- カリキュラムに沿って効率よく学べる
- 就職や転職のサポートがついていることも多い
本気でエンジニアを目指すなら、実績のあるスクールで基礎からしっかりと学ぶのが一番の近道です。
無料カウンセリングを行っているスクールも多いので、まずは話を聞いてみるのも良いかもしれません。
自分に合った学習方法を見つけて、プログラミングを楽しんでくださいね。
DMM WEBCAMP 学習コース（プログラミングコース）
Skill Hacks
CodeCamp
まとめ：replaceと正規表現で文字列を自在に操ろう
この記事では、JavaScriptのreplaceメソッドで正規表現を使う方法について解説してきました。
gフラグを使った一括置換や、iフラグを使った大文字小文字の区別をしない置換など、正規表現を使うことで文字列の処理が格段に便利になることがわかったと思います。
正規表現の記号（メタ文字）を組み合わせることで、さらに複雑なパターンの置換も可能になります。
最初は難しく感じるかもしれませんが、実際にコードを書いて試していくうちに、自然と使いこなせるようになっていきますよ。
文字列の操作はプログラミングの基本中の基本です。
replaceメソッドと正規表現の強力な組み合わせをマスターして、よりスマートなプログラムを書けるようになりましょう！
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
