BETA

TypeScriptなNode.jsでスクレイピングしてもいいじゃない

投稿日:2020-06-25
最終更新:2020-06-25

はじめに

ググってもPythonを使った方法ばかりが出てきたので。
Node.jsでやってもいいじゃないか!
TypeScriptでやってもいいじゃないか!

概要

  1. node-fetchを使ってWeb上からfetch
  2. jsdomを使ってパース
  3. 必要な情報を得る

詳しくは私のGitHubリポジトリを参照して。

環境

  • Node.js v14.4.0

package.json

{  
  "dependencies": {  
    "jsdom": "^16.2.2",  
    "node-fetch": "^2.6.0"  
  },  
  "devDependencies": {  
    "@types/jsdom": "^16.2.3",  
    "@types/node": "^14.0.14",  
    "@types/node-fetch": "^2.5.7",  
    "typescript": "^3.9.5"  
  },  
  "type": "module"  
}  

本編

今回は試しに、Qrunchの新着記事ページから新着記事を得てみる。

main.ts

import fetch from 'node-fetch';  
import jsdom from 'jsdom';  
const { JSDOM } = jsdom;  

(async () => {  
  // 今回のターゲット  
  const targetUrl = 'https://qrunch.net/entries';  

  // fetchする  
  const res = await fetch(targetUrl);  
  if (!res.ok) return;  
  const txt = await res.text();  

  // DOMを構築(URLも渡す)  
  const dom = new JSDOM(txt, { url: targetUrl });  

  // 記事の情報を整理  
  const entries = [  
    ...dom.window.document.querySelectorAll<HTMLAnchorElement>('.entry > a'),  
  ].map((elem) => ({  
    link: new URL(elem.href, dom.window.location.href).toString(),  
    title: elem.querySelector('.title h3')?.textContent,  
  }));  

  // JSON形式で出力  
  console.log(JSON.stringify(entries, undefined, 2));  
})();  

以上。
ここには出力結果は載せないが、うまくいった。

おわりに

node-fetchがすごい。
jsdomもすごい。

Pythonわけわからん。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

おかゆりぞっとのさほど技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう