JavaScriptでWebスクレイピングをする方法まとめ！基礎から解説
Webスクレイピングを自社でも取り入れることになり、JavaScriptでWebスクレイピングを実行しようとしたものの、その具体的な方法が分からない方もいらっしゃるでしょう。
そこで今回は、JavaScriptの概要からJavaScriptでWebスクレイピングを実行する方法と注意点まで、基礎から解説します。
Webスクレイピングとは？
まずはWebスクレイピングの概要を確認しておきましょう。
Webスクレイピングとは
Webスクレイピングとは、Web上で収集したい特定の情報をプログラムによって自動的に抽出する技術を指します。スクレイピング（Scraping）は「Scrape（こする・かき出す）」からきている言葉であり、情報をこするようにかき出すといった意味合いから、すべての情報を集めてくるのではなく、一部を抽出するという点に特徴があります。
Webスクレイピングのやり方
Webスクレイピングのやり方は大きく2通りに分かれます。プログラミング言語を用いてWebスクレイピングのプログラムを自ら組む方法、もう一つがWebスクレイピング機能を持つサービス・ツールを活用する方法です。
1.プログラミング言語を用いて自ら実行する
Webスクレイピングは、Webクローラーと呼ばれるプログラムで情報を集めてきた後、Webスクレイパーというプログラムで取得したい情報を抽出する流れで行います。Webスクレイピングに適したプログラミング言語として、Python、PHP、Ruby、JavaScriptなどが挙げられます。
関連記事：Webスクレイピングのやり方をゼロから解説！方法・手順まとめ
2.Webスクレイピングサービス・ツールを利用する
自分でプログラムをゼロから組む必要がなく、既存のWebスクレイピングサービスやツールを利用してWebスクレイピングを実行します。
Webスクレイピングツールは、ツールをインストールして実行するもので、自身で行います。一方、Webスクレイピングサービスは、Webスクレイピングの専門業者がWebスクレイピングを実施し、収集した情報や加工データなどを納品してくれるといったサービスを含みます。無料で手軽に使用できるものから、有料で依頼するものがあります。
JavaScriptでWebスクレイピングを行う際の基本事項
上述のWebスクレイピング実行手段のうち、今回は自らWebスクレイピングを実行する方法として、JavaScriptを用いたWebスクレイピングについて解説します。
JavaScriptとは
JavaScriptはWebページを作る際によく利用されるプログラミング言語で、言語を記述するテキストエディタと実行環境さえ整っていれば、サーバーを介さずに動作を確認できるのが特徴です。開発環境づくりが容易であることから、初心者でも手軽に始められます。
JavaScriptは、二つの面で利用できるのが特徴です。一つが、Webページの見た目や動作に直接関わるフロントサイドで、もう一つがサーバーサイドです。JavaScriptを用いたインタラクティブなUI（ユーザーインターフェース）の例として、メッセージボックスの表示やカレンダーや地図、ゲームなどの実装、HTMLコンテンツ操作による要素の追加と削除などが挙げられます。
JavaScriptでWebスクレイピングを行う際の基本的な流れ
JavaScriptでWebスクレイピングを実行する具体的な方法を紹介する前に、Webスクレイピングを行う大まかな流れを見ていきましょう。
1.スクレイピング対象ページを特定する
まず情報を取得したい対象ページを特定し、URLを取得しておきます。2.対象ページの情報のうち取得したい対象データを特定する
対象ページの中で、取得したい情報を特定します。ECサイトの商品販売ページの価格情報であれば、「商品名」「価格」などの取得したい項目を特定します。
3.JavaScriptのコードを作成して、対象ページにリクエストを送信する
スクレイピングするためのコードを作成し、プログラムを通じて情報取得したい旨を対象ページにリクエストします。
4.取得したHTMLを解析し、必要な対象データを抽出する
対象ページにおいて、Webページの言語であるHTMLを解析し、必要なデータを抽出します。
5.取得した情報を整形・加工して保存する
抽出してきたデータは、人が見てわかりやすいように、また分析できるように、整形・加工して保存していきます。JavaScriptでWebスクレイピングを行う手順
では実際に、JavaScriptでWebスクレイピングを行う手順を見ていきましょう。
準備：JavaScriptの環境構築
JavaScriptでWebスクレイピングを行う準備事項として、環境を構築する必要があります。適切なツールとライブラリの準備をしましょう。主に必要となるものは次の通りです。
・テキストエディタ
・ブラウザ
・ランタイム（実行環境）
・ライブラリ
プログラムのコードを打ち込むテキストエディタと動作を確認するブラウザを準備しましょう。またプログラムをサーバーサイドで実行するときにはランタイムという実行環境が必要です。ランタイムにはよく「Node.js」が利用されます。
ライブラリは、プログラムを書きやすくするために、使用頻度の高いコードを効率的に利用できるようにまとめたものです。PuppeteerやCheerioなどがよく利用されます。
手順1.WebページよりHTMLを取得
まずHTMLを取得するためのプログラムを作成します。
下記はNode.jsとPuppeteerを用いた参考例です。
Puppeteerを呼び出した後、ブラウザを起動し、新しいページを開いた後で、「https://XXXX.com」という指定したURLにアクセスする場合を想定しています。
const puppeteer = require('puppeteer');
async function scrape() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://XXXX.com');
await browser.close();
}
await scrape();
手順2.HTMLを解析し、特定の情報を取得
続いて、取得したい特定の情報を取得していきます。
下記は、手順1で記載したコードに3行追加したものです。
const puppeteer = require('puppeteer');
async function scrape() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://XXXX.com');
const element = await page.$('.topics');
// HTMLの中で、「topics」というクラスがついた要素を抽出
const text = await page.evaluate(el => el.textContent, element);
// テキストを文字列で抽出
console.log(text);
// コンソール（※）に抽出したテキストを表示
await browser.close();
}
scrape();
※コンソールとは、入出力ウィンドウのことで、一般的にはブラウザに備わる開発者ツールに備わっているものを指します。
手順3.データの抽出と保存
抽出したデータを保存する工程です。
JavaScriptにおいてよく利用されるJSONという記述形式で保存する方法を見ていきましょう。
const puppeteer = require('puppeteer');
const fs = require('fs');
// fsというファイルを書き込んだり、読み込んだりする際に使用するモジュールを呼び出す。
async function scrape() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://XXXX.com');
const element = await page.$('.topics');
const text = await page.evaluate(el => el.textContent, element);
fs.writeFile('topics.json', JSON.stringify({data: text}), err => {
if (err) console.error('ファイルの保存中にエラーが発生しました', err);
else console.log('データがファイルに保存されました');
});
await browser.close(); }
scrape();
抽出したテキストデータを「topics.json」というファイル名のファイルにJSON形式で保存します。
これでtopics.jsonの中に、抽出した情報が保存されました。これを利用して業務に利活用していきます。
JavaScriptを利用したWebスクレイピングの注意点
JavaScriptを利用してWebスクレイピングを実行する際の注意点を押さえておきましょう。
サーバーに過度な負担をかけない
頻繁にプログラムを走らせることで、対象Webサイトのサーバーに負荷がかかるリスクがあります。サーバーが重くなったり、停止したりすると業務妨害と判断される恐れがあるため、十分に注意しましょう。
個人情報の取得に注意する
個人情報を本人の同意なく収集し、公開し、売買する行為は基本的に違法となります（違法にならないケースもあります）。スクレイピング対象を確認したうえで、個人情報の取得は避けましょう。
関連記事：Webスクレイピングは違法になり得る？禁止事項と行うべきこととは？
著作権侵害に注意する
収集したコンテンツの中に、著作権のあるコンテンツが含まれることもあり、その場合は著作権を無視した利用、複製などを行うことが禁じられており、著作権侵害となるケースがあります。
ただし、著作権法では「例外規定」が設けられています。この例外規定が適用される場合には許諾を得ずに著作物を利用できますが、目的外で著作物を使用することはできません。詳細は以下をご覧ください。
関連記事：Webスクレイピング・Webクローリングと著作権法について。注意点を解説
APIの有無を確認し、利用を検討する
目的次第ではWebスクレイピングよりもAPIが適しているケースもあるため、対象WebサイトがAPIを公開している場合、APIの利用も検討しましょう。
まとめ
JavaScriptでWebスクレイピングを行う方法をご紹介しました。情報の取り扱いや収集先の規定などに十分注意しながら効率的に実施しましょう。
今回はJavaScriptでWebスクレイピングを行う方法をご紹介しましたが、自力で行うことが困難だと感じた場合は、Webスクレイピングサービスを利用するのがおすすめです。
Webスクレイピングサービスの利点は、自社の人的リソースが不足していても手軽に実施ができ、情報収集・分析作業の工数削減や効率化できる点が挙げられます
Webスクレイピングサービスであれば、キーウォーカーの「ShtockData」をご検討ください。600万サイト以上、1500億ページ以上のクローリング実績（※ 2021年12月7日時点）があり、大量の情報収集はもちろん、データの見える化・分析まで一連のソリューションを提供します。サービス詳細や導入事例をご覧いただきながら、ご検討ください。
市場シェアNo.1 WebスクレイピングサービスならShtockData