JavaScriptでスクレイピングする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでスクレイピングする方法について現役エンジニアが解説しています。スクレイピングは、Webページの情報を抽出・収集することです。JavaScript単体では、開発ツールのコンソールを使用し、そのページに対してJavaScriptを実行してスクレイピングを行います。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでスクレイピングする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでスクレイピングする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

スクレイピングとは

スクレイピングとは、Webスクレイピングの略です。様々なホームページの情報を抽出・収集することを指します。

JavaScriptでスクレイピングする方法

1ページ内の情報を収集したいというような、簡易なスクレイピングであれば各ブラウザの開発ツールを用いることでスクレイピングを行うことが出来ます。開発ツールのコンソールを使用すればそのページに対してJavaScriptを実行することが出来ます。

コンソールにて、$$(“【CSSセレクタ】”) を入力すれば、セレクタの各種情報をコンソールに出力することが出来ます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

bodyの情報を取得してみます。

デベロッパーツールでのWebサイトのソースコード

Webサイトのソースコードのセレクタ

画像の情報を収集してみます。

デベロッパーツールの内容をJavaScriptで操作する方法

取得した各情報から、画像のURLなどを収集することが出来ます。取得した情報をループしてクリップボードやエディタに出力することで画面内で使用されている画像の一覧を出すことが出来ます。

以下に一例を上げてみます。

//初期化
var imgsrc = [];
var tc="";

//データ取得ループ
for (var i = 0; i < $$(".a-img").length; i++){
imgsrc[i] = $$(".a-img")[i].src;
}

//クリップボードにコピー
var ta = document.createElement('textarea');
ta.value = tc;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
ta.parentElement.removeChild(ta);

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。