XPath検索という効率的かつ的確なCSSの影響範囲の調べる方法

Written by Ryohei Abe

大規模サイトの運用保守案件では、管理しているHTMLファイル数が膨大であったり既存CSSの記述が深い入れ子になっていたりしていて（その場合、CSSの作りが悪いのが根本だったりはするのですが、昔から記述されているCSSにはありがちだったりしますよね）、「このCSSを変更した時に、どのHTMLファイル内のどこの部分に影響が出るのか把握しきれない！影響範囲が良く分からないから怖くて既存のCSSを修正できない！」といったケースがあると思います。

そこで効率的に、的確に影響範囲を検索できるXPathを使用した検索についてご紹介します。

※今回はWebStormを使用した場合の方法をご紹介します。

XPathとは

まず、そもそもXPathとはなんぞや、と疑問に思われた方も多いかと思います。


XPathとは… 

XML Path Language （XPath; XMLパス言語） は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。 XPath自体は簡潔な構文 （式言語） であr(ry…

引用：http://ja.wikipedia.org/wiki/XML_Path_Language

とあるのですが、今回やりたい事を行うためにはXPathとはなんぞやという点は細かく知らなくても問題がないのですっ飛ばしましょう。

XPathを使用した検索でできること

CSSが影響しているHTML上のタグを検索することができます。

それによってCSSが影響する範囲を知ることができ、安全にCSSの修正が可能となります。

実際にやってみる

使用手順を紹介します。

今回は例として「#hoge .fuga」というCSSの影響範囲を調べてみます。

手順

1. CSSをXPathに変換

　下記サイトで変換できます。


CSS to XPath

http://css2xpath.appspot.com



上記のように「CSS Selector:」の欄に「#hoge .fuga」と入力することでXPathに変換された結果が「In XPath is:」の欄に表示されます。

※この「In XPath is:」の欄に表示されている内容を理解できる必要はありません。



2. エディタのXPathによる検索を実行

　手順1で変換したXPathを検索欄にコピペして検索を実行します。





「Find by XPath…」でXPathによる検索が実行できます。





検索したいXPathのテキストを検索欄にコピペして実行。

※入力しているテキストがよく見えませんが、XPathに変換した結果をコピペしているだけです。

　検索ディレクトリの指定は適宜指定したい範囲で選択してください。





「#hoge .fuga」というタグ構造になっているHTMLファイルの該当行数が検索結果として表示されます。

応用

普通にXPath検索するだけだと、全く同じCSSが異なるCSSファイルに存在している場合に、
どのCSSファイルに記述されているCSSの検索が引っかかったのかが判別できません。

その問題を解決する方法をご紹介します。

例. 

　　　　・top.css
　　　　　#hoge .fuga {color: #FF0000;}

　　　　・detail.css
　　　　　#hoge .fuga {color: #0000FF;}

というように同じCSSである「#fuga .hoge」という記述がtop.cssとdetail.cssにそれぞれ存在している場合、#hoge .fugaをXPathで検索した場合にその検索結果がtop.cssに記述されているCSSの影響範囲なのかdetail.cssに記述されているCSSの影響範囲なのかの判別ができません。

そこで例えばtop.cssに記述されている#hoge .fugaの影響範囲を知りたい場合は、まず最初に「/css/top.css」(※パスは各々の環境で適宜変更してください)で任意のディレクトリ全体に対してgrepを実行し、



top.cssファイルを読み込んでいるhtmlファイルを検索結果としてピックアップし、





「/css/top.css」を検索することで、





top.cssを読み込んでいるHTMLファイルが検索結果にピックアップされます。





「/css/top.css」の検索結果を表示したままの状態で、先ほど登場した「Find by XPath…」を表示させ、「#hoge .fuga」をXPathに変換したテキストを検索欄に入力します。

ここでScopeの選択肢で「Custom」⇒「Files in Previous Search Result」を選択することで、

・「/css/top.css」を読み込んでいるファイルの中から

・「#hoge .fuga」が該当する箇所をピックアップ
することができます。





検索結果です。

注意点

ここまで紹介してきて一見万能にも思えるXPath検索ですが、そんなXPath検索を使用しても該当箇所が検出できない状況が存在します。

JSで動的にDOMを生成、Ajaxで動的にDOMを差し込みしてる箇所はXPathによる検索を用いても検出できません。

例えば、今までの例で使用している「#hoge .fuga」を指定している場合に以下の様な処理を行うページの場合があるとします。 

   <div id="hoge">
       // ここに<p class="fuga">テスト</p>というHTMLをJSで動的に差し込む
   </div>

「#hoge .fuga」はJSで動的にHTMLが生成された結果には該当しますが、静的なHTMLにはfugaクラスが付与されたHTMLが存在しないため、XPathによる検索を用いても検索で見つけることができません。

こういったケースの場合は地道にgrepを使用して、実装されているJSの仕様を把握した上で対応する必要があります。

まとめ

・大規模案件のCSSを修正する際はXPathを用いた検索をうまく使って効率的に、的確に作業を進めましょう。

・ただし、JSで動的にHTMLを生成する箇所は気をつけましょう。