• JavaScriptでスクレイピングは可能?環境構築やコードも紹介

    公開日:2021年12月03日 最終更新日:2022年01月05日

    「Webサイトの情報をスクレイピングで取得したい!」「JavaScriptでスクレイピングする方法があれば、詳しく知りたいなぁ...」と思ったことはありませんか。

    今回は、

    • そもそもJavaScriptでスクレイピングができるのか

    • JavaScriptでスクレイピングする環境のつくり方

    を解説します。

    JavaScriptでスクレイピングするサンプルコードもご紹介しているので、環境構築してすぐにスクレイピングを試したい方におすすめです。

    1. JavaScriptでWebサイトのスクレイピングは可能?

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    結論から言うと「JavaScriptでWebサイトのスクレイピングは可能」です。

    一般的にWebサイトのスクレイピングをする際には、

    • プログラミング言語:Python3

    • HTMLの取得:Requestsライブラリ

    • HTMLの解析:Beautiful Soup

    などが使われることが多いです。

    しかしJavaScriptエンジニアにとって、これらの利用はハードルが高いと感じる方もいるのではないでしょうか。

    今回は、JavaScriptエンジニアになじみ深いNode.jsとpuppeteerを使う方法を記載します。

    ▲ページトップへ戻る

    1.1 JavaScriptでスクレイピングを行うための必要な環境

    それでは、実際にJavaScriptでスクレイピングを行う場合の必要な環境を整えましょう。

    Windowsの場合はNode.jsとpuppetter、Macの場合は加えてHomebrewの準備が必要です。


    1.1.1 Homebrew(Macの場合)

    Homebrewとは、各種ソフトウェアの導入と削除、ソフトウェア同士やライブラリとの依存関係を管理するシステムのことです。MacOSまたは、Linux上で利用します。

    Node.jsを利用するにあたりHomebrewは必須となるため、ダウンロードしておきましょう。

    ▸ 参考:Homebrewのダウンロードはこちら

    あわせてNode.jsのバージョンを管理する「nodebrew」も以下コマンドでインストールしましょう。

    $ brew install nodebrew
    

    以下のコマンドを実行すると、インストールできたか確認できます。

    $ nodebrew -v
    

    バージョンが表示されていれば正常にインストールできています。

    ▲ページトップへ戻る


    1.1.2 Node.js

    Node.jsとは、サーバサイドでJavaScriptが動くように非同期型のイベント駆動に切り替える環境のことです。


    Windowsの場合

    Windowsの場合は、以下の公式サイトからインストーラーをダウンロードし、インストールします。

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    出典:ダウンロード|Node.js

    インストーラーを立ち上げたら、特に変更せずインストールを進めてください。完了後にWindows PowerShellを開き、以下コマンドを実行してバージョンが表示されればインストールされています。

    node --version
    

    Macの場合

    Homebrewインストール済みのMacを利用している方は、以下のコマンドでNode.jsをインストールできます。

    $ brew install node
    

    こちらも以下コマンドでバージョンを確認すれば、インストールできているか確認できます。

    $ node -v
    

    ▲ページトップへ戻る


    1.1.3 puppeteer

    puppeteer(パペティア)とは、Googleが開発したプログラムからブラウザ(GoogleChrome)を制御できるライブラリのことです。

    • 指定した特定のWebサイトの画像キャプチャの取得

    • 指定された場所のクリック

    • 値の入力や結果の出力

    などブラウザ操作ができます。スクレイピングでは肝となる機能なので、インストールしていきましょう。

    Macの場合は以下のコマンドで、インストールできます。

    $ npm install puppeteer
    

    ▲ページトップへ戻る

    2. JavaScriptでスクレイピングを行う実際の手順

    今回は例として、「プロエンジニアのエンジニア転職ガイドの記事タイトルを取得する」という目的のプログラムを作成する手順をご紹介します。

    ▼ 取得したいデータイメージ

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    出典:エンジニア転職ガイド|プロエンジニア

    ▲ページトップへ戻る

    2.1 手順1.プロジェクトディレクトリの作成

    まずは「プロジェクトディレクトリ」を作成します。フォルダの名称は任意のもので構いません。
    今回はデスクトップに「proengineer_career」という名前のプロジェクトディレクトリを作ります。

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.2 手順2.package.jsonの作成

    Windowsの場合

    コマンドプロンプトを開き、(1)(2)の順に入力します。

    (1)

    CD C:\Users\xxxxxx\Desktop\proengineer_career

    (2)

    npm ini -y

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    【確認方法】

    proengineer_careerフォルダの配下に「package.json」というファイルが生成されていれば成功です。

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.3 手順3.プロジェクトディレクトリにpuppeteerをインストール

    次に、proengineer_careerフォルダの配下に「node_modules」というフォルダと「package-lock.json」というファイルをインストールします。

    Windowsの場合

     npm i puppeteer と入力

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    【確認方法】

    proengineer_careerフォルダの配下に「node_modules」というフォルダと「 package-lock」というjsonファイルとが生成されていれば成功です。

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.4 手順4.scraping-proengineer_career.jsの作成

    実際にスクレイピングするためのJavaScriptを用意します。
    エディタを使って以下のようなコードを記載し「scraping-proengineer_career.js」という名称をつけて、proengineer_careerフォルダの配下へ保存しましょう。

    ▼ コピー用サンプルコード

    const puppeteer = require('puppeteer');
    
    const scrapeing_proengineer = async () => {
      const browser = await puppeteer.launch();
    
      // プロエンジニアのエンジニア転職ガイドを開く
      const page = await browser.newPage();
      const url = 'https://proengineer.internous.co.jp/content/career/';
      await page.goto(url,{ waitUntil: 'domcontentloaded' });
    
      // 各記事のタイトルを取得
      const target = '#CONT_AREA > ul > li > div > div > h3';
      const links = await page.$$eval(target, links => {
        return links.map(link => link.textContent);
      });
    
      // 各記事のタイトルを一覧で出力しブラウザを閉じる
      links.forEach( function( item ) {
        console.log( item ); 
      });
      browser.close();
    }
    scrapeing_proengineer();
    

    ▼ 保存場所

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    なお今回は「複数記事のタイトル」を取得しているため、タイトルを取得するコードがやや難しく感じたかもしれません。もしもデータを取得するページを変更する場合は、targetの値を確認しましょう。

    今回の場合は「CONT_AREA(id)→ulタグ→liタグ→divタグ→divタグ→h3タグ」の順で取得したいタイトルがあったため、「#CONT_AREA > ul > li > div > div > h3」を指定しています。

    ▲ページトップへ戻る

    2.5 手順5.プログラム実行

    ここまで準備が整ったら、実行してみましょう。

    Windowsの場合

    node scraping.js と入力

    ブラウザが起動し、以下のように記事のタイトルが表示されていれば成功です!

    ▼ 成功イメージ

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    もう一度画面を確認し、以下赤枠で囲ったようなタイトルが取得できていれば成功です。

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    3. スクレイピングを行う際の注意点

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    とても便利なスクレイピングですが、注意すべき点が3つあります。

    • 情報の取得先のサーバーに大きな負荷をかけていないか

    • 取得先のサイトは公式にAPIを提供していないか

    • 取得したデータの扱いは著作権法に違反していないか

    特に外部のWebサイトをスクレイピングするときは、注意が必要です。1つずつ詳しく見ていきましょう。

    ▲ページトップへ戻る

    3.1 情報の取得先のサーバーに大きな負荷をかけていないか

    スクレイピングは取得する情報量によっては、情報取得先のサーバに大きな負荷をかける可能性がある行為です。

    例えば、ECサイトに掲載している全商品(1万件)の商品名を取得する場合を思い浮かべてください。1万件のデータをスクレイピングすることは短期間に1万件のリクエストを行うことを意味します。

    仮にスクレイピングする側に悪意がなくとも、場合によっては"DoS攻撃" とみなされたり、「偽計業務妨害罪(参照:岡崎市立中央図書館事件)」に該当したりすることもあります。

    情報取得先に大きな負荷をかけないようリクエストを送る間隔を開けたり、必要最低限の情報のみを取得するような配慮が必要です。

    ▲ページトップへ戻る

    3.2 取得先のサイトは公式にAPIを提供していないか

    そもそもスクレイピングしなくても、情報を取得する方法が用意されているケースがあります。

    その代表例が、API(Application Programming Interface)です。
    APIは特別なアクセスキーのようなもので、指定の書き方でデータを取得できます。

    外部に公開している情報とはいえ、スクレイピングは自分の管理していないサイトの情報を取得する方法です。APIを利用することで情報取得先のサーバへのリスクを最小限に抑えたうえで自分の欲しい情報を取得することができます。

    スクレイピングを実施する前に、情報取得先のサイトが公式APIを提供しているか否かを確認するようにしましょう。

    ▲ページトップへ戻る

    3.3 取得したデータの扱いは著作権法に違反していないか

    スクレイピングが完了したあとのデータの保存場所や利用方法についても、注意が必要です。

    スクレイピングは利用目的が「解析」である場合は問題ないです。
    しかしWebサイト上の情報は、サイト運営者の「著作物」に該当します。スクレイピングで取得したデータを自社サーバ等に保存したり、そのまま他人に譲渡したりすることは著作権法違反となるケースがあるので注意しましょう。

    スクレイピング後のデータ利用については、事前に情報取得するWebサイトの利用規約等を確認し、法律に違反しないかを明確にしましょう。

    ▸ 参考:スクレイピングは違法?3つの法律問題と対応策を弁護士が5分で解説|TOP COURT

    ▲ページトップへ戻る

    4. JavaScript関連のおすすめ資格

    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    JavaScriptでおすすめの資格は、以下の2つがあります。

    いずれもJavaScriptでWebデザイナー、フロントエンジニアなどの職種で人気の資格で、就職・キャリアアップのきっかけとなります。

    今後の就職をお考えの方は「HTML5プロフェッショナル認定試験」から取り組むことがおすすめです。充実した学習環境、2段階のレベルに分けられた試験内容であることからチャレンジしやすく、着実に能力がつくためです。

    実務経験がある方でキャリアアップや転職をお考えの方は「CIW JavaScript スペシャリスト」がおすすめです。運営団体がMicrosoftと知名度の高く、実践的な能力があることを証明できます。

    ▲ページトップへ戻る

    5. JavaScript関連の求人動向

    JavaScriptを用いる案件は、

    • ゲームエンジニア
    • フロントエンドエンジニア
    • サーバーサイドエンジニア

    などさまざまな案件があります。案件の例を見てみましょう。


    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    案件情報:フロントエンドエンジニア★HR企業での人材管理プラットフォーム開発

    HRテックや医療テックなどで活躍している企業にて、新規開発を行う案件です。
    Vue.jsなどの経験も求められることから、JavaScript + フレームワークを活用した、フロントエンドエンジニアとしての経験が求められそうです。月額単価は50万円~60万円となっています。


    JavaScriptでスクレイピングは可能?環境構築やコードも紹介【フリーランスエンジニア案件情報 | プロエンジニア】

    案件情報:フロントエンドエンジニア★eスポーツにおけるプラットフォーム開発

    eスポーツのプラットフォーム開発をしている、スタートアップ企業のフロントエンドエンジニア案件です。
    小規模のチームで開発しているため、フロントエンドエンジニアですがバックエンドの経験もできます。月額単価は60万円~70万円です。


    求人情報を見てみると、月額単価50万円以上の企業が多いです。プロエンジニアでは、他にも多くのJavaScript関連の求人を紹介しておりますので、気になる方はぜひ以下からチェックしてみてください。

    プロエンジニアの求人情報はこちら

    ▲ページトップへ戻る

    6. まとめ

    今回は、

    • JavaScriptでスクレイピングするための環境構築の流れ

    • サンプルコードを用いたスクレイピングの例の紹介

    • スクレイピングを行う際の注意点

    などについてお伝えしました。

    スクレイピングができると本格的なデータ分析だけでなく、ちょっとしたリサーチの効率化にもつながります。また、スクレイピングのスキルを鍛えてデータアナリストなどを目指すことも可能です。

    今回ご紹介した方法を参考に、ぜひJavaScriptでスクレイピングしてみてくださいね!

    ▲ページトップへ戻る


    最新の求人情報をチェック!

    月額単価70万円〜80万円
    勤務地 東京都 港区
    月額単価90万円〜100万円
    勤務地 東京都 渋谷区
    月額単価70万円〜80万円
    勤務地 フルリモート

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【Java/JavaScript】PL/PM/フルスタックエンジニア★タイヤメーカー向けECサイト・システムの開発

    Salesforce等を中心に受託開発や自社パッケージの導入カスタマイズなどを行っている企業にて、 タイヤ...

    月額単価:90万円〜100万円

    フリーランス

    【PHP/Laravel】バックエンドエンジニア★Fintech領域セルフレジプラットフォームの開発

    同社は自社でクラウド型POSプラットフォームやセルフオーダーシステムの開発、運営を行っている企業です...

    月額単価:70万円〜80万円

    フリーランス

    【Ruby】システムエンジニア★マーケティング・メディアPR事業会社の会員基盤システム開発

    様々な分野でのSNSマーケティングやメディア、創作活動支援プラットフォームを手掛ける上場企業にて、各...

    月額単価:90万円〜100万円

    フリーランス

    【Ruby/PHP】バックエンドエンジニア★受託開発企業での開発

    主にxRやVtuber関連、その他にも企業のDX化に伴うWeb開発プロジェクトを強みとする受託開発企業にて、Ru...

    月額単価:70万円〜80万円

SCROLL TOP