コピペでOK！WordPressテーマ開発でJavaScriptファイルを1つにまとめる方法を解説

2025年4月10日

WordPressでテーマ開発をしている際、JavaScriptファイルを分割出来ずに悩んだことはないでしょうか？

僕もWordPressテーマ開発を初めて行った際、JavaScriptファイルを分割して管理する事ができなかったです。

しかし、ある方法を使えばとても簡単にJavaScriptファイルを分割する事が出来ます。

それがViteです。

まだWeb制作初学者の方からすると難しそうに聞こえるかもしれませんが、意外と簡単です。

しかも基本的にコピペするだけでOKです。

この記事では、

Viteとは
Viteの使い方

について解説していきます。

ぜひとも最後までご覧ください。

Viteとは

いきなりViteの使い方を解説してもいいのですが、念の為Viteとは何かを解説します。

Viteとは簡単に言うとJavaScriptやSassなどのファイルをまとめて自動で反映してくれるビルドツールです。

ビルドツールといえば、GulpやWebpackなどもあります。

しかし、GulpやWebpackは少し使い方や設定が複雑で難しいです。

Webアプリの開発になってくるとWebpackが必要になる場面もありますが、Web制作では少しオーバースペックです。

一方Viteは使い方や初期設定も簡単で、扱い方を覚えると開発効率もグッと上がります。

ぜひこれを機会に導入する事をオススメします。

Viteの使い方

ここからはいよいよWordPressテーマ開発でViteを使ってJavaScriptファイルを分割する方法について解説していきます。

基本的にはコピペでOKです。

Node.jsをインストール

Node.jsをすでにインストールされている方は読み飛ばしてもらって大丈夫です。

もしまだNode.jsをインストールしてなかったら最初にNode.jsをインストールしましょう。

Node.jsとは簡単に言うとJavaScriptをサーバー上で動かす事が出来る実行環境です。

こちらからNode.jsをインストールしてください。

Node.jsをインストール出来たか確かめたい場合はこちらをターミナルに入力してください。

node -v

もしインストールが完了していたら、

v20.19.0

このような現在のNode.jsのバージョンが表示されると思います。

バージョンは人それぞれ違うので、上のバージョンと合ってなくても気にしなくて大丈夫です。

Viteをインストール

次にViteをインストールします。

こちらはプロジェクト毎に毎回行う作業です。

まずpackage.jsonを作成するために以下のコマンドを入力します。

npm init -y

これでpackage.jsonというファイルが作成されたかと思います。

次に、

npm install vite --save-dev

こちらをコマンドに入力します。

おそらくこれで、

  "devDependencies": {
    //バージョンは違う可能性アリ
    "vite": "^6.2.5"
  }

このようなプロパティがpackage.jsonに出来たかと思います。

これでViteのインストールも完了です。

JavaScriptファイルをモジュール化

ここからはJavaScriptファイルをモジュール化します。

1つのJavaScriptファイルに機能ごとのJavaScriptファイルをインポートしましょう。

main.jsに全てのJavaScriptファイルをインポートします。

書き方はこんな感じです。

import './sample.js';

sample.jsはサンプルのファイル名です。

こちらはあなたがインポートしたいファイル名で大丈夫です。

vite.config.jsでViteの設定

次にvite.config.jsでViteの設定をしていきます。

まずvite.config.jsというファイルを作成してください。

次にvite.config.jsの中に以下のコードを記述します。

こちらはコピペでOKです。

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: './js/main.js',
      output: {
        entryFileNames: 'bundle.js',
      },
    },
  },
});

ビルドを実行

次にビルドを実行します。

こちらをコマンドに入力してください。

npx vite build

これでOKです。

dist/bundle.jsが生成されてる事を確認してください。

WordPressにJavaScriptを読み込ませる

次にWordPressにJavaScriptを読み込ませましょう。

次のコードをfunctions.phpに記述してください。

こちらもコピペでOKです。

function my_enqueue_scripts() {
    wp_enqueue_script(
        'my-theme-bundle',
        get_template_directory_uri() . '/dist/bundle.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

これで、WordPressでテーマ開発をする際にJavaScriptファイルを一つにまとめる事に成功です。