Node.js インストール：ブラウザなしでサーバー上のボタン動作をチェック
サーバーでJavaScriptを実行するには、まずNode.jsのインストールが必要です。NginxとApache構成のWordPressサーバーにNode.js 24.21.0をインストールし、jsdom 30.1.3でブラウザなしにWebページのボタンスクリプトを検査しました。
標準リポジトリのnodejsは16.20.2ですが、スクリプトの検査に使うjsdom 30.1.3はNode.js 22.22.2以上を必要とします。そのため、dnfのモジュールストリーム24でインストールしました。
1️⃣ サーバーにNode.jsとjsdomをインストールする目的
サーバーでボタンのスクリプトを検査するには、Node.jsとjsdomの2つが必要です。
🔲 Node.js
JavaScriptは 普通はブラウザの中で実行されますが, Node.jsをインストールすると、サーバーでもJavaScriptを読み込んで実行できます。
Node.jsをインストールするということは、ブラウザの中にしかなかったJavaScriptの実行環境をサーバーにも1つ置くことです。そのためNode.jsは、Webサーバーを作ったり、多くのファイルを一度に処理するコマンドを作ったり、jsdomのようなパッケージを読み込んでページを検査したりするときに使います。GhostもNode.jsの上で動くCMSです。
🔲 jsdom
jsdomはNode.jsで使うパッケージで、HTMLを読み込んで、ブラウザのようにボタンを押せる文書にします。ブラウザがページを開くときに作る文書構造(DOM)を、画面なしでサーバーの中にそのまま作る仕組みなので、スクリプトは本物のブラウザにいるようにボタンを探し、文字を変えます。ウィンドウを開かないため、サーバーでコマンド1行で実行できます。
つまり、人がブラウザを開いて1つずつ押して確かめていた作業を、サーバーがコマンドで代わりに行うということです。そのためjsdomは、ボタンの動作を直すたびに自動でテストしたり、ページからタイトルやリンクのような内容だけを抜き出したり、記事のHTMLをまとめて手直ししたりするときにも使います。
PHPやcurlでページを取得すると、最初に届いたHTMLしか確認できません。ボタンを押したあとに変わる文字は、スクリプトが実行されて初めて現れます。
ブラウザは、ページを受け取る、ページを読む、ボタンを押してみる、画面に表示するの4つの段階を進めます。jsdomは画面に表示する段階だけを除いた3つの段階をサーバーで進めるため、ボタンの位置とサイズはブラウザで確認します。
2️⃣ インストール前の確認：標準リポジトリとモジュールストリーム
[dnf install nodejs]を実行する前に、インストールされるバージョンを先に確認します。AlmaLinux 9.8の標準リポジトリのnodejsは16.20.2です。
dnf list --available nodejsAvailable Packages
nodejs.x86_64 1:16.20.2-8.el9_4 appstreamモジュールリポジトリには18、20、22、24の4つのストリームがあり、確認日時点で22ストリームは22.23.2、24ストリームは24.21.0です。
dnf module list nodejsnodejs 18 common [d], development, minimal, s2i Javascript runtime
nodejs 20 common [d], development, minimal, s2i Javascript runtime
nodejs 22 common [d], development, minimal, s2i Javascript runtime
nodejs 24 common [d], development, minimal, s2i Javascript runtimenpmレジストリによると、jsdom 30.1.3が求めるバージョンは22系なら22.22.2以上、24系なら24.15.0以上、または26以上です。22と24のストリームはどちらもこの条件を満たします。
3️⃣ Node.js インストール：dnf module
今回は24ストリームをインストールし、実行前に[--assumeno]オプションでインストールされるパッケージの一覧を先に確認しました。
dnf module install nodejs:24 --assumeno一覧にはnodejsとnpm、nodejs-libs、nodejs-docs、nodejs-full-i18nの5つのパッケージだけがありました。Webサーバー、PHP、カーネルのパッケージは含まれていませんでした。確認したら[-y]オプションでインストールを進めます。
dnf module install -y nodejs:24Dependencies resolved.
==============================================================================================
Package Architecture Version Repository Size
==============================================================================================
Installing group/module packages:
nodejs x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 70 k
npm noarch 1:11.19.0-1.24.21.0.1.module_el9.8.0+321+1555b6a2 appstream 2.1 M
Installing dependencies:
nodejs-libs x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 24 M
Installing weak dependencies:
nodejs-docs noarch 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 5.3 M
nodejs-full-i18n x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 8.9 M
Installing module profiles:
nodejs/common
Enabling module streams:
nodejs 24
Transaction Summary
==============================================================================================
Install 5 Packages
Total download size: 40 M
Installed size: 185 M[Installing weak dependencies]は、一緒にインストールすると良いパッケージ(weak dependencies)を示します。ダウンロードサイズは40M、インストールサイズは185Mです。
node -vv24.21.0npm -v11.19.0cat /etc/dnf/modules.d/nodejs.module[nodejs]
name=nodejs
stream=24
profiles=common
state=enablednodeは24.21.0、npmは11.19.0でインストールされました。インストール後に変わった設定ファイルは[/etc/dnf/modules.d/nodejs.module]の1つだけで、24ストリームとcommonプロファイルが有効な状態として記録されます。
4️⃣ jsdomのインストールとボタンスクリプトの検査
jsdomはnpmで作業フォルダーにインストールし、作業フォルダーはWebルートの外に作ります。
mkdir ~/jsdom-test && cd ~/jsdom-test
npm init -y[npm init -y]は初期値でpackage.jsonを作り、続けて同じフォルダーにjsdomをインストールします。
npm install jsdomadded 36 packages, and audited 37 packages in 2s
8 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilitiesnpm ls jsdomjsdom-test@1.0.0 /root/jsdom-test
└── jsdom@30.1.3jsdom 30.1.3を含むパッケージ36個がインストールされ、既知の脆弱性は0件です。作業フォルダーのnode_modulesのサイズは26Mです。
node -e 'const { JSDOM } = require(`jsdom`); console.log(new JSDOM(`<h1>こんにちは</h1>`).window.document.querySelector(`h1`).textContent)'こんにちはh1タグ1つだけのHTMLをjsdomが文書として読み込み、その中の文字[こんにちは]を出力すれば動作確認は完了です。
ボタンスクリプトの検査とは、押したあとに文字が正しく変わるかをサーバーで確かめることです。例として、[コピー]ボタンを押すと文字が[コピーしました]に変わるHTMLファイルを作業フォルダーに作りました。
cat btn.html<button id="copy">コピー</button>
<script>
document.getElementById('copy').addEventListener('click', function () {
this.textContent = 'コピーしました';
});
</script>検査スクリプトはHTMLファイルをjsdomで読み込んでスクリプトを実行し、ボタンを押す前と押したあとの文字を出力します。スクリプトのエラーは[エラー:]で始まる行として出力します。
cat check.jsconst fs = require('fs');
const { JSDOM, VirtualConsole } = require('jsdom');
const vc = new VirtualConsole();
vc.on('jsdomError', (e) => console.log('エラー:', e.message));
const dom = new JSDOM(fs.readFileSync(process.argv[2], 'utf8'), {
runScripts: 'dangerously',
virtualConsole: vc,
});
const btn = dom.window.document.querySelector('#copy');
console.log('押す前:', btn.textContent);
btn.click();
console.log('押した後:', btn.textContent);node check.js btn.html押す前: コピー
押した後: コピーしました押したあとに文字が[コピーしました]に変わり、ボタンスクリプトが動くことを確認できます。
スクリプトに誤字が1つあると結果が変わります。getElementByIdの大文字Iを小文字lに変えたファイルで、同じ検査を実行しました。
sed 's/getElementById/getElementByld/' btn.html > btn-broken.html
node check.js btn-broken.htmlエラー: Uncaught [TypeError: document.getElementByld is not a function]
押す前: コピー
押した後: コピー1行目にエラーが出力されてスクリプトが止まり、ボタンを押しても文字は[コピー]のままです。
ボタンにCSSで幅120px、高さ40pxを指定してから、サイズを出力しました。
cat size.jsconst { JSDOM } = require('jsdom');
const dom = new JSDOM('<button id="copy" style="width:120px;height:40px">コピー</button>');
const btn = dom.window.document.querySelector('#copy');
console.log('高さ:', btn.offsetHeight, '/ 幅:', btn.getBoundingClientRect().width);node size.js高さ: 0 / 幅: 0jsdomには画面に描く段階がないため、高さと幅は0と出力されます。
🔢 FAQ & おすすめコンテンツ
ℹ️ 提携について
当サイトのコンテンツにはアフィリエイトリンクが含まれています。訪問者がこのリンクを通じて商品やサービスを購入すると、当サイトは販売元から手数料を受け取ります。この過程において、購入者が支払う金額（イベント割引適用で金額が下がります↓）は上昇しません。掲載されている価格・割引・在庫情報は作成時点のものであり、実際とは異なる場合がありますので、ご購入前に販売元にて最終確認をお願いいたします。商品の選定および評価は独自の基準に基づいて行われており、手数料の支払いの有無は紹介順や評価内容に影響を与えません。