【超初心者向け】Node.jsのインストールから始める！WordPressテーマでDartSassを使う方法

2025-06-07

当ページのリンクには広告が含まれています。

【超初心者向け】Node.jsのインストールから始める！WordPressテーマでDartSassを使う方法のブログ記事のアイキャッチ画像

WordPressでオリジナルテーマを開発する際、「Sass（サス）」を使ってCSSを効率よく管理したいと考えている方も多いのではないでしょうか？
私自身も事業サイトを制作するにあたり、Dart Sass（ダートサス）を導入して開発を進めました。

Dart Sassは、VSCordの拡張機能（プラグイン）を使うことで、設定やインストールの手間をかけずに手軽に利用することも可能です。

DartJS Sass Compiler and Sass Watcher

今まではプラグインを利用してDard Sassを使っていましたが、今回はより本格的に開発を行うために、ターミナルを使ってNode.js経由でDart Sassを導入する方法にも挑戦してみました！

この記事では、WordPressのオリジナルテーマ開発に役立つ「Dart Sass」を使うために必要な、Node.jsのインストールからDart Sass導入までの手順を、超初心者の方にもわかりやすく解説します。

また、私自身の学習の振り返りも兼ねています。

DartSassとは？そしてNode.jsはなぜ必要？

Dart Sass公式サイトより引用　https://sass-lang.com/dart-sass

DartSassって？

Sassとは、CSSをより効率よく書けるようにする拡張言語です。
CSSを書くのが苦手な人でも、Sassを使うとコードが整理しやすくなって便利です。変数やネスト、ミックスインなどが使えて、スタイル管理がグッと楽になります。

DartSassは、「Sass（サス）」というCSSをもっと書きやすくする言語をコンパイルして、普通のCSSに変換するツールです。WordPressテーマの開発では、DartSassを使ってスタイルを管理するのが一般的になっています。

DartSassは現在もっとも推奨されているSassの公式実装で、以下の特徴があります。

Node.jsやスタンドアロン（Node.jsなどの開発環境がなくても単独で動くソフトウェア）で動作
LibSass（旧仕様）はすでに非推奨です。DartSassが公式サポートされている唯一のSass実装です
すべての最新機能に対応している

💡現在はDartSass一択といっても過言ではありません。

Node.jsとは？

Node.jsは、JavaScriptをパソコン上で動かすためのソフトウェア環境のことです。
DartSassはNode.jsの中で動くプログラムの一つなので、DartSassを使うにはNode.jsを先にインストールする必要があります。

ターミナルとは？基本の使い方

ターミナルは、パソコンのコマンドを打ち込む黒い画面です。
Macなら「ターミナル」、Windowsなら「PowerShell」や「コマンドプロンプト」と呼ばれます。
ここでコマンドを入力して、ファイル操作やプログラムの実行をします。

Macの場合、「Launchpad」→「その他」→「ターミナル」で開けます。

Node.jsのインストール方法

Node.js公式サイトにアクセス

Node.jsのサイトより引用　https://nodejs.org

「LTS版」をダウンロード

「LTS」と書かれたボタンを選びましょう。インストーラーを起動し、画面の指示に従いながら作業を進めます。

インストールできたか確認してみよう

ターミナルを開く
　- Mac：Launchpad → その他 → ターミナル
　- Windows：スタートメニュー → PowerShell またはコマンドプロンプト
下記を入力し、それぞれNode.jsとnpm（Nodeのパッケージ管理ツール）のバージョンが表示されれば成功です。
もし表示されない場合は、インストールがうまくいっていません。

node -v
npm -v

WordPressテーマフォルダに移動する方法

まず、テーマのフォルダの場所を知ろう

まず、ターミナルでWordPressのテーマフォルダに移動します。

通常、ローカルのWordPressは Local by Flywheel や MAMP, XAMPP を使っていることが多いので、パスの例をいくつか紹介します。

WordPressをローカル環境で動かしている場合の例

環境名	テーマフォルダの例パス
Local by Flywheel (Mac)	~/Local Sites/サイト名/app/public/wp-content/themes/テーマ名
MAMP (Mac)	/Applications/MAMP/htdocs/wordpress/wp-content/themes/テーマ名
XAMPP (Windows)	C:\xampp\htdocs\wordpress\wp-content\themes\テーマ名

フォルダ移動のコマンド（例）Local（旧 Local by Flywheel）を使っている場合

cd ~/Local\ Sites/サイト名/app/public/wp-content/themes/オリジナルテーマ名

※スペースが含まれるパスは "ダブルクォート" で囲むと安心です。

cd "~/Local Sites/サイト名/app/public/wp-content/themes/オリジナルテーマ名"

cd は「Change Directory（フォルダを移動する）」の意味。
フォルダのパスは、自分の環境に合わせて書き換えましょう。

💡 cd（change directory）コマンドは、指定したフォルダに移動するための基本的なターミナルコマンドです。
テーマフォルダの正しいパスが分からない場合は、Finder（Macの場合）でそのフォルダを開いてドラッグ＆ドロップすることでパスを取得できます。

Node.jsプロジェクトを初期化しよう

テーマフォルダに移動したら、次のコマンドを入力します。

npm init -y

これで、package.json という設定ファイルが自動作成されます。
ここに後でDartSassを管理する情報を追加します。

生成されるファイル	説明
`package.json`	このプロジェクトで使いたいパッケージ（機能）のリストを書く。開発者が手動で編集する。例：`sass` を使いたい。

DartSassをインストールしよう

npm install -D sass

これでテーマの中にDartSassがインストールされます。
-Dは「開発用」の意味です。

生成されるフォルダ・ファイル	説明
`node_modules/`	Dart Sass を含むすべての依存パッケージがここにインストールされます。
`package-lock.json`	実際に使われたパッケージの正確なバージョン情報を記録。`npm install` 時に自動生成・更新される。

Sassのビルドコマンドを登録しよう

package.json をテキストエディタで開き、 "scripts" の中に次を追加します。

"scripts": {
  "sass": "sass --watch scss:css"
}

scss フォルダ内の .scss ファイルを監視して、変わると自動で css フォルダにCSSを書き出すコマンドです。

scss・cssフォルダ、style.scssファイルの作成とビルド開始

テーマのフォルダ内に scss フォルダを作ります。
その中に style.scss ファイルを作成します。ここにscssを書いていきます。
出力先となる css フォルダも 事前に手動で作成しておきます。コンパイルを実行すると、この中にstyle.css ファイルが生成されます。
ターミナルで下記を実行し、監視とコンパイルを開始します。
style.scss を編集・保存するたびに、自動で css/style.css が更新されていきます。