早速、「サイト上の値の取得 ～パート①：前提知識～」にて、紹介した基礎知識を利用した上で、サイト上の値の取得方法を今回は実践編として、ご紹介していきます。
www.digitaldolphin.jp
目次
前回の振り返りと今回のスコープ
前回の内容に深くは言及しませんが、前回は「ブラウザの開発者ツール」を通して、HTMLのソースコードやcookie、WebStorageというものが何かやどのように確認できるのかという部分をご紹介していきました。ただ、あくまでも前回は、「ブラウザの開発者ツール」を利用して、それぞれを確認する部分のみのお話となっておりましたが、今回は確認したものをどのように利用するのかという部分をメインでお話ししていきます。
そして、簡単に振り返りになりますが、前回は「ブラウザの開発者ツール」のメニューの内、「要素」、「ソース」、「アプリケーション」で確認できることをご紹介していきました。一方で、確認したものをどのように取得できるのかという部分で、今回は「ブラウザの開発者ツール」の「コンソール」というメニューの話をメインで進めていきます。
とはいえ、実際に「コンソール」にて、HTMLのソースコードやcookie、WebStorageの中の値を取得したとしても、取得した値の見方が分からないなどの課題も出てくるかと思いますので、その辺の前提知識も併せて共有していきます。特に今回はHTMLからの値の取得に関して、前提も含めてご紹介していきます。
サイト上から値を取得する方法（HTML編）
ブラウザの開発者ツールのコンソールとは？
そもそも、ブラウザの開発者ツールの「コンソール」とは何なのかというと、開いているWebページ上でJavaScriptを実行し、JavaScriptで記載した処理の確認が出来るものとなっております。実際に、以下のキャプチャに示すように、ブラウザの開発者モードを前回の記事と同様に開いて頂き、コンソールを開いてみてください。
実際にコンソール画面を開くと、コンソール画面上でカーソルがアクティブになるかと思いますが、その状態であれば、実際に文字を打ち込んでみることも出来ます。特に、この画面上では、JavaScriptのソースコードを打ち込んでEnterを押すことで、打ち込んだJavaScriptを実行することが出来ます。例えば、「1+1」と打ち込んでEnterを押すと、「2」という結果が返ってくるかと思います。
ここまでで、ブラウザの開発者ツールのコンソールでは、JavaScriptが実行できるところまでは理解出来たかと思います。では、実際にHTMLソースコードやcookie、WebStorageから実際に値を取得してみましょう。（今回はHTMLに対象を絞ります。）
HTMLソースコードから値を取得する方法
では、まずコンソールにて、HTMLソースコード上の特定の値を取得することを実施してみましょう。今回はこのブログの一覧画面上に表示されている一番最新コンテンツのタイトルを取得するということを実施したいと思います。対象の箇所に関しては、キャプチャでも表示します。
早速、この後を取得したいと思いますが、もう少しHTMLの前提知識が正直必要となります。ただ、詳細に話してしまうとこの記事で収まらなくなるため、概念として知っておくべきことをまとめます。
HTMLの構成に関して
HTMLという言語自体は、CSSやJavaScriptがなければ、前回の記事でも記載した通り、大項目、中項目、小項目、詳細等が箇条書きで書かれている質素な文章となっており、タグと言われる「＜＞」で囲まれたものを利用して表現します。ただ一方で、実際のサイト上では大項目はこういったデザインにしたい、中項目はこのデザイン、小項目はこう、みたいな形で、それぞれの要素ごとにデザインを指定したいと思います。加えて、同じ中項目でも大項目1では中項目はこういったデザイン、大項目2では中項目はこうのように同じ中項目だったとしてもデザインを変更したいといったことが発生します。
一方で、デザインを指定するのは、前回の記事でCSSになるということを共有しましたが、CSSではどの階層に対してデザインを指定するかを決められますが、デフォルト状態において同じ中項目に対しては同じデザインとなってしまいます。では、どうするかというと、同じ中項目でも名前を付けて区別できるようにしようとなるわけです。そして、その名前の付け方がHTMLの属性と言われるもので、代表的なものではID属性やCLASS属性、NAME属性といったものがあります。
このID属性やCLASS属性などの名前により、HTMLのただの箇条書きを示す文章において、階層しか区別が出来なかったものから階層の中でも名前付けをして区別が出来るようになります。そして、今回の記事においても値をどこから取得するのかというのは、このID属性やCLASS属性を指定することで実現していきます。
ID属性とCLASS属性の違い
上ではHTMLの属性について、ID属性、CLASS属性、NAME属性というのを紹介しましたが、この中でも代表的なID属性やCLASS属性の2つに絞って、違いをご紹介できればと思います。
ID属性とCLASS属性の違いは、一つに対してしか名前を付けられないか、それとも複数に対して名前を付けられるかの違いになり、前者がID属性、後者がCLASS属性になります。なぜこの説明が必要だったのかというと、今回Webページ上の値を取得する上で、タグ＜＞だけで値を取得したい場所を指定しようとするとたどり着くまでに非常に長い道のりを歩むことになってしまうため、ID属性やCLASS属性で値を取得したい場所を指定するようにしてショートカットしたかったためです。なぜショートカットになるかは、実際に何度もやってみるとわかってくるかと思いますので、ここでは言及しないようにしたいです。（説明してもいいのですが、長くなりそうなため、すみません。。）そして、ID属性とCLASS属性では、その違いゆえに、ID属性で場所を指定すると一つの要素だけの取得となりますが、CLASS属性で場所を指定すると複数の要素が取得されるということを覚えておいてください。
HTMLソースから実際に値を取得しよう
HTMLソースから実際に値を取得するという部分をここで紹介していきます。ただ、細かい部分まではご説明しないため、そういうものだという形で理解してもらうところもありますので、その辺はご了承ください…！
では、早速先ほどのキャプチャの箇所（ブログの一覧画面上に表示されている一番最新コンテンツのタイトル）の値を取得しようと思いますが、開発者ツールの「要素」にて該当箇所を見てみると、CLASS属性が「entry-title-link」となっていることが分かります。そのため、Webページ上の「entry-title-link」というCLASS属性の情報を以下のJavaScriptにて、取得してみましょう。（実際に、ブログの一覧ページ（https://www.digitaldolphin.jp/）を開いて、開発者ツールのコンソールを開いて、実行してみてください。）
実行するJavaScript①
document.getElementsByClassName('entry-title-link');
実行結果を見てみると、複数の要素が返ってきていることが分かります。▶の記号がありますが、これを押して詳細を見てみましょう。
次に以下のキャプチャのように詳細の中で、0番目のもの（プログラミング言語全般ですが、付番は0空になります。）にカーソルを合わせると、HTML上の該当箇所が左側のようにハイライトされます。
そして、0番目が今回取得した場所だということが分かりましたら、次にJavaScript①にて記載したもので0番目を指定するような書き方に変更します。
実行するJavaScript②
document.getElementsByClassName('entry-title-link')[0];
そうすると、結果として、該当箇所のHTML内のタグ＜＞（以下では、要素と言います。）が取得できます。特に今回はこの要素内の表示テキスト部分が欲しいので、JavaScript②に「.innerText」という文字を追加することで値を取得しましょう。
実行するJavaScript③
document.getElementsByClassName('entry-title-link')[0].innerText;
このようにして、HTML内の特定の値を取得することが出来ます。他の値を取得する場合にはどうするかという部分は、今回は省略してしまいますが、どのWebページでも同じような考え方で値を取得することが出来ますので、実際に試してみると良いかと思います。また、JavaScriptの知識がもう少し付けられれば、for文やif文と言われるJavaScriptの構文を利用してより複雑な処理を組んでWebページ上の値を取得することも出来ます。