HTMLやCSSを何十ファイルも触っていると、「この書き方を一括で直したいのに、一部だけ違っていて普通の置換じゃ無理…」という壁にぶつかります。リンク先のディレクトリ名だけ違う、行末の余計なタグだけ消したい、属性をまとめて剥がしたい。手作業で一つずつ直すと、時間も気力も削られていきます。
そこで効いてくるのが正規表現です。Dreamweaverの検索・置換で正規表現をオンにすると、「パターン」で文字列をとらえて、一部が違うコードでもまとめて一発で置換できます。
とはいえ、正規表現は記号の羅列に見えて、最初は「呪文みたいで怖い」と感じる人がほとんどです。私もWeb制作を長年やってきましたが、駆け出しの頃は「.*」を見ただけで身構えていました。今ではちょっとした書き換えでも反射的に正規表現に手が伸びますが、実際に手を動かして覚えてみると、現場で使うメタ文字はほんの一握りだと分かってきます。最初の一歩さえ越えれば、あとはパターンの組み合わせを覚えていくだけです。
この記事では、Dreamweaver（現行のCreative Cloud版）の検索・置換パネルで正規表現を使う基本の手順から、よく使うメタ文字の意味、そしてコーディング現場でそのまま使える具体的な実例までを、初心者向けにかみ砕いて紹介します。タグの一括変換や属性の削除、改行の整理、キャプチャを使った置換といった「ありがちな面倒」を、まとめて片付ける方法が分かります。あわせて、Dreamweaver特有のクセや、知らないとハマる注意点も押さえていきましょう。
Dreamweaverの検索・置換で正規表現をオンにする手順
まずは土台となる操作から確認します。Dreamweaverの検索・置換は Ctrl+F（Macは Command+F）で「検索と置換」ダイアログを開くところから始まります。ここで正規表現をオンにしないと、記号はただの文字として扱われてしまいます。
正規表現を有効にするカギは、ダイアログ右側にある「正規表現を使用」（Use Regular Expressions）のチェックを入れることです。このチェックを入れて初めて、. や * といった記号が「特別な意味を持つ記号（メタ文字）」として解釈されます。逆に言えば、チェックを忘れると正規表現がまったく効かないので、置換がうまくいかないときはまずここを疑ってください。
検索する範囲と対象を選ぶ
ダイアログの「検索」（Find in）では、どこを検索するかを選べます。アクティブな1ファイルだけを対象にする「現在のドキュメント」、開いている全ファイルの「開いているドキュメント」、サイト全体をなめる「現在のローカルサイト全体」、ファイルパネルで選んだものだけの「サイト内の選択ファイル」、特定フォルダーだけの「フォルダー」から選びます。複数ファイルをまたいで一括置換できるのが、Dreamweaverの置換が強力な理由です。
そして「検索」のタイプは 「ソースコード」（Source Code）を選びましょう。ソースコードを選ぶと、テキストだけでなくHTMLタグ・属性・CSS・JavaScriptを含めたファイルの中身すべてが検索・置換の対象になります。タグそのものを書き換えたいときは、これを選ばないと話が始まりません。
「すべて検索」で先に確認してから置換する
ダイアログ下部には「次を検索」「すべて検索」「置換」「すべて置換」のボタンが並びます。私が現場で必ずやるのは、いきなり「すべて置換」を押さず、先に「すべて検索」で何件・どこがマッチするかを結果パネルで確認してから置換することです。正規表現は意図より広くマッチしてしまうことがあり、確認なしの一括置換は事故のもとだからです。マッチ箇所を見て狙いどおりなら、「すべて置換」で一気に片付けます。
参考：Adobe公式 Find and replace text, tags, and attributes
これだけ覚えれば十分！よく使う正規表現のメタ文字
正規表現の記号は数多くありますが、Web制作の置換作業で実際に使うのはごく一部です。まずは次のメタ文字を押さえれば、たいていの場面に対応できます。意味さえ分かれば、あとは組み合わせるだけです。
.：改行以外の任意の1文字にマッチします。*：直前の要素の0回以上の繰り返し。.*で「任意の文字列（空も含む）」になります。+：直前の要素の1回以上の繰り返し。最低1文字はある場合に使います。?：直前の要素が0回か1回。あってもなくてもよい部分に使います。[ ]：角括弧内のいずれか1文字。[abc]なら a・b・c のどれか、[0-9]なら数字1文字です。( )：グループ化。後で$1として再利用する「キャプチャ」もここで行います。|：または（OR）。cat|dogで cat または dog にマッチします。\d：数字1文字（[0-9]と同じ）。\w：英数字とアンダースコア1文字。\s：半角スペースやタブなどの空白文字1文字。\b：単語の境界。語のかたまりを区切りたいときに使います。
覚え方のコツは、* と + と ? は「直前のものが何回出るか」を表す量指定、\d や \w や \s は「どんな種類の1文字か」を表す文字クラスだと分けて理解することです。この2系統さえ頭に入れば、記号の羅列が急に読めるようになります。
Dreamweaver特有の注意点：行頭・行末の ^ と $
ここはつまずきやすいので強調しておきます。一般的な正規表現では ^ が行頭、$ が行末を表しますが、Dreamweaverの検索・置換では ^ と $ による行頭・行末のマッチがサポートされていません。行の区切りを扱いたいときは、改行コードそのものを表す [\r\n] を使うのがDreamweaver流のやり方です。
古い解説記事では「^＝行頭、$＝行末」とだけ書かれていることがありますが、Dreamweaverに限ってはそのまま当てはまりません。私も昔これを知らずに「なぜ効かないんだ」と小一時間悩んだことがあります。汎用の正規表現知識とツール固有の仕様は、分けて覚えておくと安全です。
参考：Using Regular Expressions in Dreamweaver（hibbard.eu）
コーディング現場で使える正規表現の実例
メタ文字の意味が分かったら、あとは実例で身につけるのが一番です。ここでは、私が実際の制作でよく使うパターンを4つ紹介します。どれも「正規表現を使用」にチェックを入れ、「ソースコード」を対象にした前提です。
実例1：一部だけ違うリンクを一括置換する
たとえば、次のように lesson1・lesson2・lesson3 と途中だけ違うリンクが、複数ファイルに散らばっているとします。
<li><a href="../lesson1/index.html">Next Lesson</a></li>
<li><a href="../lesson2/index.html">Next Lesson</a></li>
<li><a href="../lesson3/index.html">Next Lesson</a></li>これを全部 ../contents.html へのリンクにそろえたい場合、普通の置換では「違う部分」を吸収できません。そこで検索欄に .* を挟んで、違う部分をまとめてとらえます。
検索する文字列：
<a href="../.*/index.html">Next Lesson</a>置換する文字列：
<a href="../contents.html">Next Lesson</a>これで lesson1〜lesson3 のどれであっても、まとめて contents.html に置き換わります。「一部だけ違う」を .* で吸収するのが、正規表現置換のいちばん基本のパターンです。
実例2：キャプチャと $1 で中身を残してタグを変換する
正規表現の真価は、マッチした一部を「保持したまま」置換できる点にあります。( ) で囲んだ部分が「キャプチャ」され、置換側で $1（2つ目は $2）として呼び出せます。
たとえば、<br> で改行しているテキストを、<li> のリスト項目に作り替えたいとき。
検索する文字列：
(.*)<br>置換する文字列：
<li>$1</li>(.*) で <br> の前のテキストをまるごとキャプチャし、それを $1 として <li> で包み直しています。中身は触らず外側の型だけ変えたいときに、このキャプチャ＋ $1 が圧倒的に速いです。
実例3：不要な属性をまとめて削除する
過去に貼り付けたコードに、style 属性がベタ書きで残っていることがあります。これを一括で剥がしたいときは、属性とその値を .*? でとらえて、置換側を空にします。
検索する文字列：
style=".*?"置換する文字列は空欄にします。.*? の ? は「最短マッチ」を意味し、" から次の " までで止まってくれます。.* だけだと欲張って後ろまで飲み込みがちなので、属性値の削除では .*? が安全です。
実例4：連続する空白や余分な改行を整理する
コピペで増えた連続スペースを1つにまとめたいときは、\s と + の組み合わせが効きます。
検索する文字列：
\s+置換する文字列に半角スペース1つを入れれば、連続した空白や改行が1つの空白にそろいます。ただしソースコード全体に対して無条件にかけるとインデントまで崩れるので、適用範囲は選択部分や対象を絞り、「すべて検索」で結果を見てから実行するのが鉄則です。
関連記事：Dreamweaverの正規表現で複数行を効率的に置換する方法
もう一歩進んだ正規表現の応用と安全な運用
基本の実例に慣れてきたら、応用も視野に入ります。たとえば | を使って (jpg|png|gif) のように複数の拡張子を一度に検索したり、[0-9]{4} のように { } で回数を指定して「数字4桁」をピンポイントでとらえたり。\d や \w と量指定子を組み合わせれば、検索の精度はぐっと上がります。
ただし、応用が効くほど「想定外のマッチ」のリスクも増えます。大量のファイルに一括置換をかける前に、必ずバックアップを取るかバージョン管理でコミットしておくこと。これは長年やってきた今でも欠かさない習慣です。正規表現の置換は一瞬で数百箇所を書き換えるぶん、間違えたときの巻き戻しコストも大きいからです。
関連記事：VS CodeとDreamweaverを徹底比較！Web制作で選ばれる理由とは
もう一つ、Dreamweaverに依存しすぎないことも大事です。最近はVS Codeなど他のエディタでも正規表現置換が当たり前に使えますし、エディタによって ^ $ や改行の扱いといった細かい仕様が違います。「正規表現そのものの知識」は汎用スキルとして持ちつつ、ツール固有のクセはその都度確認する、という二段構えが結局いちばん応用が利きます。
参考：Adobe公式 Find and replace functions
まとめ：正規表現は「少数のメタ文字」と「確認グセ」で十分戦える
Dreamweaverの検索・置換で正規表現を使うと、一部が違うコードや、複数ファイルにまたがる定型の書き換えが一発で片付きます。最初は記号が呪文に見えても、実際に使うのは . * + ? [ ] ( ) | と、\d \w \s くらいのものです。
手順としては、Ctrl+F でダイアログを開き、「正規表現を使用」にチェック、対象を「ソースコード」にする。これがスタートラインです。検索範囲も「現在のドキュメント」から「サイト全体」「フォルダー」まで選べるので、直したい対象に合わせて絞り込んでおくと無駄なマッチを減らせます。そのうえで ( ) でキャプチャして $1 で呼び戻すテクニックを覚えると、中身を残したままタグだけ作り替えるような置換が一気にラクになります。
気をつけたいのは、Dreamweaverでは ^ と $ が行頭・行末として効かないこと。行を扱うときは [\r\n] を使う、というツール固有のクセは頭の隅に置いておいてください。
そして何より、いきなり「すべて置換」を押さず、「すべて検索」でマッチ箇所を確認し、バックアップを取ってから実行する。この確認グセひとつで、置換作業の安全性は段違いに上がります。正規表現の置換は一瞬で数十・数百箇所を書き換える力を持つぶん、雑に使えば一瞬で壊しもします。だからこそ、確認とバックアップという地味な手順が効いてくるわけです。
まずは今日紹介した実例をひとつ、手元のファイルで試してみてください。.* で違う部分を吸収する置換と、( ) と $1 を使ったキャプチャ置換の2つを押さえるだけでも、日々のコーディングの面倒がぐっと減ります。一度でも「数十箇所が一瞬で整う」体験をすれば、もう一つずつ手で直す作業には戻れなくなるはずです。
