2020/12/01に入社した社会人アルバイトエンジニアのshimokuraです。

スクレイピングと言えば、CSSセレクタ。

Webサイト上の特定のテキストやURLといった要素を指定するのに苦労した経験はありませんか？

私はあります。

新人研修の時、とある医療機関のサイトの1ページ分の情報を取得するのに3, 4時間を溶かしてしまったことがあります。

慣れないうちは、静的なページでも診療時間の表といったテーブル内の要素や、複雑な要素同士の階層構造の中のテキストを上手く抽出するのにかなり時間がかかってしまいます。

ましてや、動的に表示が変わるサイトなんて脳ミソがオーバーヒートしてしまいますね。

本記事では、Webページの特定の要素を操作するためのCSSセレクタについて、弊社で過去に取り上げた記事をまとめました。

また、効率よくCSSセレクタを指定して目的を達成するための心構えやコツも共有いたします。

No scraping, no life.

CSSセレクタ関連記事まとめ

初級編

スクレイピングで使うCSSセレクタ　基礎編

基本的なCSSセレクタの書き方を学べます。これを抑えずに初心者を脱することはできません。

スクレイピングエンジニアなら知っておきたいNokogiriの使い方8選

実務でよく使う基本的なセレクタを取り上げています。

スクレイピングを行うにあたって最低限必要な記法を簡潔にまとめているので、しっかり抑えておきましょう。

中級編

Nokogiriのcssメソッドで「あるテキストを含むノード」を検索する

セレクタを指定するときに、特定のテキストを含むものを取り出したい時に使える「contains」という記法を紹介しています。

記法自体は簡潔で初級レベルではありますが、本記事ではその挙動を考察しているので中級とさせていただきました。

NokogiriでCSSセレクタとノードの深さを取得する方法

人間の目でhtml構造を読まなくてもCSSセレクタを取得することのできる「css_path」メソッドが紹介されています。

classやidがついたパスを取ることが出来ないというこのメソッドの欠点を補った、筆者オリジナルの「css_path_with_class_id」メソッドが公開されているのもとても参考になります。

上級編

Nokogiriで正規表現にマッチするエレメントを取得する

Webサイトからある要素を取得したい時に、セレクタのパターンを利用したいことがあると正規表現が使えるよ！という記事です。

CSSセレクタを用いないXPathでの書き方も紹介されています。

Rubyスクレイピングの最終手段、html上のテキスト&属性値で検索してパースする方法

動的に表示される要素が変化するサイトでは、idやclassといったセレクタを利用できないケースがあります。

その時に、取得したい要素の属性値を利用できる場合があります。こちらもXPathでの記法が併せて紹介されています。

番外編

脱CSSセレクタ！RubyとXPathでスクレイピング

CSSセレクタの解説記事を取り上げている中で脱CSSセレクタを推す記事をピックアップするのはあまのじゃくかもしれませんが（笑）、手法をたくさん持っておくことは大切ですね。

CSSセレクタを利用する方が簡単なケースが多いですが、目的は所望のhtml要素から情報を抜き出すことなので、それを達成する手段はCSSセレクタでもXPathでも構わないわけですね。

CSSセレクタを効率よく探すための究極のコツ

最後に、私が3ヶ月間スクレイピングエンジニアとしてのキャリアをスタートする中で掴んだコツを伝授します。

①Chrome DevToolsを使いこなせ！

DevToolsはGoogle Chrome に組み込まれたウェブ作成およびデバッグツールで、こちらを使ってWebページのHTML文書や特定の要素を指定するCSSセレクタ（パス）を簡単に取得することができます。

上に取り上げた記事では簡単なHTML文書の例で解説していたので、セレクタを探すのは楽ちんだったのですが、現実世界のWebサイトは複雑怪奇です。

理解に苦しむほど雑然とした構造で書かれており、スクレイピングしづらいサイトも少なくはありません（笑）

使い始めの頃はツールの見方に不慣れだとは思いますが、使いこなせるようになればスクレイピングスピードは爆速になります。

公式ドキュメントもありますので、読み込めばDevToolsマスターになれることでしょう。

Chrome DevTools

②CSSセレクタは右から書け！

要は、アラビア語のように右側からセレクタを書いていけば良いということです。（個別のタグは英語同様左から書きますが）

上で紹介した記事中の例（NokogiriでCSSセレクタとノードの深さを取得する方法）を引っ張ってくると、

html > body > div > div:nth-of-type(1) > p:nth-of-type(1)

のように要素を指定できるときは、

div:nth-of-type(1) > p:nth-of-type(1)

だけで同様に指定できます。

コードはできる限り短く書きたいですよね。

この例では、一番右にあるp:nth-of-type(1)をまず指定します。

これだけでは、図らずも

div:nth-of-type(1) > p:nth-of-type(1)

div:nth-of-type(2) > p:nth-of-type(1)

の２つを指定することになってしまいます。

そこで、左にもう一つ付け加えてdiv:nth-of-type(1) > p:nth-of-type(1)を指定します。

これで、例の要素を指定するための最短のCSSセレクタが出来上がるわけです。

CSSセレクタの書き方に慣れないうちは左から書いてしまいがちですが、右から考えることで楽をすることができます。

これを意識してDevToolsを使いこなせば、もう困ることはなくなります。

たくさんのWebサイトをどんどんスクレイピングして、百戦錬磨のスクレイピングエンジニアになりましょう。