Node.jsとは？WordPress開発で必要になる理由

WordPressの開発環境を快適にするには、まずNode.jsの役割を理解しておくとスムーズです。Node.jsはJavaScriptをブラウザの外でも動かせる実行環境で、Web制作では開発ツールを動かす土台としてよく使われます。

Node.jsでできること

Node.jsを使うと、ファイル監視、自動処理、ローカルサーバー、パッケージ管理などをコマンドで実行できます。WordPress自体はPHPで動きますが、制作中の補助ツールにはJavaScript製のものが多くあります。

• BrowserSyncでブラウザを自動更新する
• SassやViteなどのツールを実行する
• npmで開発用パッケージを管理する
• 繰り返し作業をコマンド化する

npmで開発ツールを管理する

npmはNode.jsと一緒に入るパッケージ管理ツールです。BrowserSyncのような開発ツールをプロジェクトごとに追加し、必要なときだけ実行できるようにします。

Node.jsをダウンロードして確認する

Node.jsは公式サイトからダウンロードできます。基本的には安定版として案内されているLTS版を選ぶと、学習中の方でもトラブルが少なく始められます。

LTS版をインストールする

Node.js公式サイトにアクセスし、LTS版をダウンロードしてインストールします。インストール後は、ターミナルからコマンドを実行できる状態になります。

バージョンを確認する

インストールできたか確認するには、ターミナルで次のコマンドを入力します。バージョン番号が表示されれば成功です。

node -v

npm -v

nodeはNode.js本体、npmはパッケージ管理ツールです。どちらも表示されることで、BrowserSyncを導入する準備が整います。

BrowserSyncとは？保存時にブラウザを自動更新する仕組み

BrowserSyncは、ファイルの変更を監視してブラウザを自動更新してくれる開発ツールです。通常はコードを保存したあとに手動でブラウザを更新しますが、その作業を自動化できます。

BrowserSyncで変わる開発の流れ

通常の流れは「コードを書く、保存する、ブラウザを更新する」です。BrowserSyncを使うと「コードを書く、保存する、自動でブラウザが更新される」という流れになります。

WordPress開発で便利な理由

WordPressではPHPテンプレート、CSS、JavaScriptなど複数のファイルを行き来しながら調整します。BrowserSyncで監視しておくと、毎回ブラウザを更新する手間が減り、表示確認に集中できます。

ホットリロードとは？修正をすぐ反映する考え方

ホットリロードとは、ファイル保存時に変更内容をブラウザへすぐ反映する仕組みです。制作現場では「保存したらすぐ画面に反映される状態」として使われることが多いです。

CSSの変更をすぐ確認できる

CSSを変更したときに、ブラウザを手動更新しなくてもデザインの変化を確認できます。余白、色、フォントサイズなどを細かく調整するときに特に便利です。

PHPやJavaScriptの変更も検知できる

PHPやJavaScriptを変更した場合も、監視対象に含めておけば保存のタイミングでブラウザを更新できます。画像案：BrowserSyncがPHP・CSS・JavaScriptの変更を監視し、ブラウザへ更新を伝える流れの図解。

BrowserSyncをインストールする方法

ここからはBrowserSyncをプロジェクトに追加します。まずはWordPressテーマや開発用フォルダでターミナルを開き、npmの管理ファイルを作成します。

プロジェクトフォルダでnpmを初期化する

npm init -yは、package.jsonを自動作成するコマンドです。package.jsonには、プロジェクトで使う開発ツールや実行コマンドを記録できます。

npm init -y

BrowserSyncを追加する

次にBrowserSyncを開発用パッケージとして追加します。–save-devは、本番サイトの動作ではなく開発時に使うツールとして登録する指定です。

npm install browser-sync --save-dev

インストール後は、npxコマンドを使ってプロジェクト内のBrowserSyncを実行できます。

WordPressでホットリロード環境を構築する方法

LocalなどでWordPressを立ち上げている場合、BrowserSyncではそのローカルURLをproxyとして指定します。proxyは、元のWordPressサイトをBrowserSync経由で表示するための設定です。

LocalのURLを確認する

Localのサイト画面でURLを確認します。例としてlocalhost:10000で動いている場合は、そのURLをBrowserSyncのproxyに指定します。実際には自分の環境のURLへ置き換えてください。

BrowserSyncを起動する

PHP、CSS、JavaScriptを監視する基本形は次のようになります。

npx browser-sync start --proxy "localhost:10000" --files "**/*.php, **/*.css, **/*.js"

重要なのは、proxyにWordPressのローカルURLを指定し、filesに監視したいファイルを指定することです。これで保存時にBrowserSyncが変更を検知し、ブラウザを更新します。

package.jsonにコマンドを登録する

毎回長いコマンドを入力するのが大変な場合は、package.jsonのscriptsに登録しておくと便利です。

{"scripts":{"watch":"browser-sync start --proxy "localhost:10000" --files "**/*.php, **/*.css, **/*.js""},"devDependencies":{"browser-sync":"^3.0.0"}}

npm run watch

スクリーンショット案：LocalのサイトURLと、BrowserSyncを起動したターミナル画面を並べた画像。

VSCodeのSassコンパイラーとオートセーブを組み合わせる

SCSSを使っている場合は、VSCodeのLive Sass Compilerと組み合わせるとさらに作業が速くなります。SCSSを保存するとCSSに変換され、そのCSS変更をBrowserSyncが検知する流れを作れます。

Live Sass CompilerでSCSSをCSSに変換する

Live Sass Compilerは、VSCode上でSCSSをCSSへ変換できる拡張機能です。テーマ内でSCSSを編集して保存すると、指定したCSSファイルへ出力できます。

オートセーブで更新の流れを短くする

VSCodeのオートセーブをONにすると、コードを書く、少し止まる、自動保存、CSS変換、BrowserSync更新という流れになります。保存ボタンを押す回数が減るため、細かい調整がしやすくなります。

静的サイト開発に近い感覚でWordPressを制作する

静的サイト制作では、Live ServerやGoLiveでHTML・CSS・JavaScriptを確認しながら作ることが多いです。WordPressでもNode.jsとBrowserSyncを使えば、かなり近い感覚で開発できます。

HTML・CSS・JavaScript制作との違い

静的サイトではHTMLファイルを直接開くことが多いですが、WordPressはPHPとデータベースでページを生成します。そのため、BrowserSyncではWordPressのローカルURLをproxyとして扱う点が大きな違いです。

導入するときの注意点

導入時は、いきなり本番環境で試さず、Localなどのローカル環境で確認しましょう。また、監視対象を広げすぎると不要な更新が増えるため、テーマ内のPHP・CSS・JavaScriptから始めるのがおすすめです。前回の記事はこちらを参照ください。Local sitesの便利な機能Blueprintを解説