昨今、マイクロサービス化が盛んな影響もあり、WebAPIで情報をやり取りできるRESTfulなWebAPIサービスが多く提供されているが、世の中にはまだHTTPリクエストに対し、サーバレンダリング方式でHTMLを返すことでしか情報を取得できないサイトも存在する。
そんなサイトに対して「必要な情報だけほしい」となると、HTMLを解析して、欲しい情報部分だけを抜き出す処理が必要になるのだが、そんなときjQueryはとても便利なわけで、ブラウザでなくネイティブのJavaScript(Node.js)でHTMLを解析するプログラムを書くときに、jQueryを使う方法はないものか試してみた。
必要なパッケージ
jQuery
言うまでもなく必要なのでnpmでインストールしてrequire
する。
npm install jquery
jsdom
Node.jsでDOM操作することができるパッケージだ。これを使うだけでも目的を達成できることが多いのだが、今回はjQueryのインタフェースで使いたいので、合わせてインストールする。
npm install jsdom
サンプルコード
とても簡単なコードだが、とりあえずはこれで動くことを確認した。
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const dom = new JSDOM(`<html><body><div id="aaa">AAA<div></body></html>`);
const { document } = dom.window;
const jquery = require('jquery');
const $ = jquery(dom.window);
console.log($("#aaa"));
console.log($("#aaa").text());
console.log($("#aaa")[0].id);
jQuery { '0': HTMLDivElement {}, length: 1 }
AAA
aaa
jQueryの全機能の動作を確認したわけではないので、動かない機能もあるかもしれないが、とりあえずセレクタが使えればなんとかなる!
追記:TypeScriptでトライ
せっかくなので、TypeScriptでトライしてみた。
import fs from "fs";
import jq from "jquery";
import { JSDOM } from "jsdom";
fs.readFile("read.html", "utf-8", (err, data) => {
const dom = new JSDOM(data);
const $: JQueryStatic = <any>jq(dom.window); //ここがポイント
console.log($("div"));
});