LoginSignup
20
20

More than 5 years have passed since last update.

NodeJSでjQueryを使う

Last updated at Posted at 2018-12-19

昨今、マイクロサービス化が盛んな影響もあり、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"));
});
20
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
20