CSSセレクターとは何か？
CSSセレクターを分解するとCSSとセレクターである。
まずはCSSについて、説明をすると
CSS（Cascading Style Sheets）とは、 Webサイトのサイズや色、レイアウトなどを設定 するためのプログラミング言語もどきである。
CSSを利用するとウェブサイトのデザインをまとめて編集する際に便利な機能で一括でデザイン変更ができる。
そしてCSSセレクターとか逆に要素を指定すれば、ウェブサイト上でどのような表示になっているか、取得することができる。
今回はUdemyというサイトのウェブサイトのパーツをプログラムから取得してみる
Udemyとはオンライン学習サイトでベネッセが買収した企業なのだが、ウェブサイト上にカテゴリーという文字を抜きたいとする。
ここでGoogleChromeの開発者モードを立ち上げて、インスペクタをする。
インスペクタをすると、カテゴリーという文字は
'#u377-popper-trigger--1> span'
というSelectorが割り当たっていることがわかる。
ここで開発者コンソールで下記のSelectorを取得する
先ほどコピペした「'#u377-popper-trigger--1> span'」を貼り付けて、「el.innerText;」を記入する。
そして「エンターキー」を叩いてみる。
innerTextというのは、指定したプロパティでレンダリングされているテキストを表示することができる。
直接、「カテゴリー」という文字列をコピーすればよくないか？と思うかもしれないが、
この技術は動的に変動するテキストの抽出に便利なのである。
例えば、Amazonの特定商品の価格、日経平均の株価などである。
自動車で言えば、止まるときにきちんとブレーキペダルを押せるか？である。
自動運転で止まるときに機械がアクセルを踏み込んだら大事故である。
つまり自動化はコンピュータに人間の行動を教えてこむ行為なので、適切に教えないとロボットは誤った動作をしてしまい事故につながるのである。
値が刻々と変動するような値をプログラム上から取得する際に「QuerySelector」は非常に便利なのである。
これを参考にウェブ上から情報を抽出するプログラムを作成する人はぜひ勉強してみてほしい。
