web-dev-qa-db-ja.com

Node.jsでjQueryを使用できますか?

Node.jsを使用してサーバーサイドでjQueryセレクター/ DOM操作を使用することは可能ですか?

536
John

アップデート(27-Jun-18) :元の答えが機能しなくなる原因となるjsdomへのメジャーアップデートがあったようです。 jsdomの使い方を説明する this という答えが見つかりました。以下の関連コードをコピーしました。

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

注:元の回答では、npm install jsdomを使用してjsdomをインストールする必要があると言っていることに言及していません。

更新(2013年後半) :公式のjQueryチームがついにnpmのjqueryパッケージの管理を引き継ぎました。

npm install jquery

その後:

require("jsdom").env("", function (err, window) {
    if (err) {
        console.error(err);
        return;
    }
    var $ = require("jquery")(window);
});
535
Philippe Rathé

はい、できます。私が作成したnodeQuery https://github.com/tblobaum/nodeQuery というライブラリを使用します。

var Express = require('express')
    , dnode = require('dnode')
    , nQuery = require('nodeQuery')
    , express = Express.createServer();

var app = function ($) {
    $.on('ready', function () {
        // do some stuff to the dom in real-time
        $('body').append('Hello World');
        $('body').append('<input type="text" />');
        $('input').live('click', function () {
            console.log('input clicked');
            // ...
        });
    });
};

nQuery
    .use(app);

express
    .use(nQuery.middleware)
    .use(Express.static(__dirname + '/public'))
    .listen(3000);

dnode(nQuery.middleware).listen(express);
54
Thomas Blobaum

これを書いている時点では Cheerio のように維持されています。

サーバー専用に設計されたコアjQueryの高速、柔軟、かつスリムな実装。

50
Alfred

jsdomを使用する あなたは今できます。 examplesディレクトリにあるjqueryの例を見てください。

38
Benjamin Coe

Cheerioを使った簡単なクローラ

これはNode.jsで単純なクローラーを作成するための私の公式です。これがサーバーサイドでDOM操作をしたい主な理由であり、おそらくそれがここに来た理由です。

まず、 request を使用して解析対象のページをダウンロードします。ダウンロードが完了したら、それを cheerio に処理し、jQueryを使用するのと同じようにDOM操作を開始します。

作業例:

var
    request = require('request'),
    cheerio = require('cheerio');

function parse(url) {
    request(url, function (error, response, body) {
        var
            $ = cheerio.load(body);

        $('.question-summary .question-hyperlink').each(function () {
            console.info($(this).text());
        });
    })
}

parse('http://stackoverflow.com/');

この例では、SOホームページに表示されているすべての質問をコンソールに出力します。これが、Node.jsとそのコミュニティが好きな理由です。それ以上は簡単にはなりませんでした:-)

依存関係をインストールします。

npmインストールリクエスト

そして実行してください(上記のスクリプトがファイルcrawler.jsにあると仮定して):

ノードcrawler.js


エンコーディング

一部のページには特定のエンコーディングの英語以外のコンテンツが含まれているため、それをUTF-8にデコードする必要があります。たとえば、ブラジルのポルトガル語(または他のラテン語の言語)のページは、おそらくISO-8859-1(別名 "latin1")でエンコードされます。デコードが必要なときは、requestに内容を解釈しないように指示し、代わりに iconv-lite を使って作業を行います。

作業例:

var
    request = require('request'),
    iconv = require('iconv-lite'),
    cheerio = require('cheerio');

var
    PAGE_ENCODING = 'utf-8'; // change to match page encoding

function parse(url) {
    request({
        url: url,
        encoding: null  // do not interpret content yet
    }, function (error, response, body) {
        var
            $ = cheerio.load(iconv.decode(body, PAGE_ENCODING));

        $('.question-summary .question-hyperlink').each(function () {
            console.info($(this).text());
        });
    })
}

parse('http://stackoverflow.com/');

実行する前に、依存関係をインストールしてください。

npmインストールリクエストiconv-lite cheerio

そして最後に:

ノードcrawler.js


以下のリンク

次のステップはリンクをたどることです。あなたがSOの各トップ質問からすべてのポスターをリストしたいとしましょう。最初にすべての質問(上記の例)をリストしてから各リンクを入力し、各質問のページを解析して関係するユーザーのリストを取得する必要があります。

リンクをたどると、 コールバック地獄 が始まります。それを避けるためには、ある種の約束、先物、その他何でも使うべきです。私はいつも async を私のツールベルトに置いています。そのため、asyncを使用したクローラの完全な例を次に示します。

var
    url = require('url'),
    request = require('request'),
    async = require('async'),
    cheerio = require('cheerio');

var
    baseUrl = 'http://stackoverflow.com/';

// Gets a page and returns a callback with a $ object
function getPage(url, parseFn) {
    request({
        url: url
    }, function (error, response, body) {
        parseFn(cheerio.load(body))
    });
}

getPage(baseUrl, function ($) {
    var
        questions;

    // Get list of questions
    questions = $('.question-summary .question-hyperlink').map(function () {
        return {
            title: $(this).text(),
            url: url.resolve(baseUrl, $(this).attr('href'))
        };
    }).get().slice(0, 5); // limit to the top 5 questions

    // For each question
    async.map(questions, function (question, questionDone) {

        getPage(question.url, function ($$) {

            // Get list of users
            question.users = $$('.post-signature .user-details a').map(function () {
                return $$(this).text();
            }).get();

            questionDone(null, question);
        });

    }, function (err, questionsWithPosters) {

        // This function is called by async when all questions have been parsed

        questionsWithPosters.forEach(function (question) {

            // Prints each question along with its user list
            console.info(question.title);
            question.users.forEach(function (user) {
                console.info('\t%s', user);
            });
        });
    });
});

実行する前に:

npmインストール要求の非同期cheerio

テストを実行します。

ノードcrawler.js

出力例:

Is it possible to pause a Docker image build?
    conradk
    Thomasleveil
PHP Image Crop Issue
    Elyor
    Houston Molinar
Add two object in Rails
    user1670773
    Makoto
    max
Asymmetric encryption discrepancy - Android vs Java
    Cookie Monster
    Wand Maker
Objective-C: Adding 10 seconds to timer in SpriteKit
    Christian K Rider

そしてそれがあなた自身のクローラーを作り始めるためにあなたが知っておくべき基本です:-)


使用されているライブラリ

32
Lucio Paiva

2016年には物事ははるかに簡単です。コンソールでnode.jsにjqueryをインストールします。

npm install jquery

node.jsコードの変数$にバインドします(たとえば、私は慣れています)。

var $ = require("jquery");

やること:

$.ajax({
    url: 'gimme_json.php',
    dataType: 'json',
    method: 'GET',
    data: { "now" : true }
});

node.jsをベースにしているのでgulpでも動作します。

19
low_rents

私はこれに対する答えは今イエスだと思います。
https://github.com/tmpvar/jsdom

var navigator = { userAgent: "node-js" };  
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
17
rdzah

npm install jquery --save #noteすべて小文字

npm install jsdom --save

const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html>`);
var $ = require("jquery")(dom.window);


$.getJSON('https://api.github.com/users/nhambayi',function(data) {
  console.log(data);
});
10
Noah

jQueryモジュールは以下を使ってインストールできます。

npm install jquery

例:

var $ = require('jquery');
var http = require('http');

var options = {
    Host: 'jquery.com',
    port: 80,
    path: '/'
};

var html = '';
http.get(options, function(res) {
res.on('data', function(data) {
    // collect the data chunks to the variable named "html"
    html += data;
}).on('end', function() {
    // the whole of webpage data has been collected. parsing time!
    var title = $(html).find('title').text();
    console.log(title);
 });
});

Node.jsでのjQueryの参照**:

8
SUNDARRAJAN K

新しいJSDOM APIを使用してウィンドウを取得する必要があります。

const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
4
UnchartedWorks

私の作業コードは次のとおりです。

npm install jquery

その後:

global.jQuery   = require('jquery');
global.$        = global.jQuery;

あるいはウィンドウが存在するならば:

typeof window !== "undefined" ? window : this;
window.jQuery   = require('jquery');
window.$        = window.jQuery;
3
Roman

_ warning _

Golo Roden が述べているように、この解決法は正しいではありません。 Nodeアプリ構造を使用して実際のjQueryコードを実行できるようにするのは簡単な修正ですが、jQueryはまだサーバー側ではなくクライアント側で実行されているため、Nodeの考え方ではありません。私は間違った答えをして申し訳ありません。


Nodeを使ってJadeをレンダリングし、jQueryコードを中に入れることもできます。これが翡翠ファイルのコードです。

!!! 5
html(lang="en")
  head
    title Holamundo!
    script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js')
  body
    h1#headTitle Hello, World
    p#content This is an example of Jade.
    script
      $('#headTitle').click(function() {
        $(this).hide();
      });
      $('#content').click(function() {
        $(this).hide();
      });
2
Timbergus

モジュール jsdom は素晴らしいツールです。しかし、もしあなたがページ全体を評価し、それらのサーバーサイドでいくつかのファンキーなことをしたいのなら、私はそれらをそれら自身のコンテキストで実行することをお勧めします。

vm.runInContext

そのため、サイト上のrequire/CommonJSのようなものでも、Nodeプロセス自体に影響はありません。

ドキュメンテーション ここ を見つけることができます。乾杯!

1
Jakub Oboza

Jsdom v10以降、.env()関数は推奨されません。 jqueryを要求するためにたくさんのことを試した後、私は以下のようにそれをしました:

var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

これがあなたや、この種の問題に直面している人に役立つことを願っています。

1
Plabon Dutta

いいえ。ブラウザ環境をノードに移植するのはかなり大きな努力になるでしょう。

私が現在単体テストのために調査しているもう一つのアプローチは、セレクタが呼び出されるたびにコールバックを提供するjQueryの "モック"バージョンを作成することです。

こうすれば、実際にDOMを使わなくてもjQueryプラグインを単体テストすることができます。コードが実際に動作するかどうかを確認するには、実際のブラウザでテストする必要がありますが、ブラウザ固有の問題を発見した場合は、単体テストでも簡単に「モック」できます。

表示する準備ができたら、github.com/felixgeにプッシュします。

0

Electron を使うことができます、それはハイブリッドbrowserjsとnodejsを可能にします。

以前は、nodejsでcanvas2dを使おうとしましたが、やっとあきらめました。これはnodejsのデフォルトではサポートされておらず、インストールするのも難しすぎます(多くの...依存物)。私がElectronを使用するまでは、WebGLを含めて、以前のすべてのbrowserjsコードを簡単に使用でき、結果値(例えば、結果base64イメージデータ)をnodejsコードに渡すことができます。

0
gonnavis

まずそれをインストールします

npm install jquery -S

それをインストールした後、あなたは以下のようにそれを使うことができます

import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();

ここで完全なチュートリアルをチェックすることができます: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

0
Oyetoke Tobi