ワードプレスのエディタGutenbergのカスタムブロック用にJSXを変換する方法 – WebpackとBabel

以前紹介したGutenbergにブロックを追加する方法に関連する、JSXとその変換方法に少し触れておきます。

「ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法」で紹介した方法と実際にブロックを追加する作業を比較すると大きく異なるのが、レンダリングされるHTMLを生成するJavaScriptの書き方です。

少しコメント付きでも触れたのですが、実際はJSXというHTMLのようなコードを書き、それを変換したJavaScriptをロードさせます。

ただ、書き方を覚えるのはそれ程問題では無いのですが、変換にはNode.jsとnpmというツールが必要になりますので、そのセットアップをしておく必要があるのをお忘れないように。

関連記事：初めてのNode.jsとnpm – インストールと使用方法

トランスパイルが必要なコードに慣れていない方が始める際、環境のセットアップに関する知識に乏しい時点では、コードを作成するよりも環境のセットアップが一番大変だと思います。

僕も自分でネットで調べながらやりましたが、結構色んな情報に振り回されながら手探りでやってて、モヤモヤした状態で数日もの間彷徨ってた記憶があります。

一応以下のバージョンで使用できるとは思いますが、うまくいかない場合は利用されているパッケージのバージョンの確認の他、npmでインストールしたパッケージの保存先や依存関係などもご確認ください。

• Webpack4
• babel-loader8

では、エディタとターミナル（コンソール）を開きましょう。

JSXをBabelで変換

JavaScriptにはブラウザやそのバージョンなどの環境により、コードが読まれて機能することが出来る構文も異なります。ええ、ブラウザ毎にDOM操作に差異があるように、構文そのものにも同様の差異があります。それに伴いJavaScriptをロードしてくれる環境なら、どんな環境でも読まれるだろうとされる、最も標準的なJavaScriptの形に変換してくれる便利なツールがいくつかありますが、「Babel」はよく使われるメジャーなツールの１つですので、知っておいて損はしないでしょう。

つまり、コードを書く時は、書いている人やそのグループで共通したルールに則った方法で書き、実際にアプリなどで読ませるのは、こういった「Babel」などにより生成されたコードとなるわけです。というか大体の人は、ReactやGutenberg云々関係なく、JavaScriptを書く上でこういったツールは既に利用していると思います。

Babelは設定に基づいたプリセット（JavaScriptの構文形式）を変換しますので、このプリセットをnpmでインストールしておきます。

npm install --save-dev @babel/preset-env @babel/preset-typescript @babel/preset-react

最初のはJavaScriptの開発環境構文形式ECMAScriptなどを対象に、次はタイプスクリプト、最後のはReactを対象にしたパッケージです。

Gutenbergではこれらがあれば問題無いでしょう。

次にプラグインのインストールです。

npm install --save-dev @babel/plugin-transform-react-jsx

こちらは本来ReactのJSXを別の環境にセットアップする事ができるもので、「React.createElement」ではなく「wp.element.createElement」用に変換してくれます。

また、Babelの設定ファイル「.babelrc」には以下のように書きます。

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry"
        }],
        "@babel/preset-typescript",
        "@babel/preset-react",
        "@wordpress/babel-preset-default",
    ],
    plugins: [
        [
            "transform-react-jsx", {
                "pragma": "wp.element.createElement"
            }
        ]
    ]
}

プリセットはキー「presets」に文字列の配列で指定します。オプションを付ける場合は「@babel/preset-env」の例のように更に配列にして、２つ目の値に設定オブジェクトを指定します。

ただ、上の設定方法はあくまで参考としてください。その時の環境や利用するパッケージのバージョンにも設定ファイルの書き方も左右されると思います。うまく行かない可能性も考えられますから、Babel公式ページにドキュメントが載っている筈ですので、念のためにご確認を。

それに自動化する方法を書いていきます。

恐らくそっちの方が楽だと思いますので、もう暫くお付き合いください。

Webpackの活用

まず、Webpackってなんだ？って方もいらっしゃるかもしれません。

簡単に説明すると、実用されるファイル

• CSS(SASS)
• JS(JSX TS TSX)
• node_modules
• などなど

を、設定ファイル「webpack.config.js」に基づいて、１つのJavaScriptファイルにまとめてしまうことができる開発環境のツールです。

これもnpmでインストール出来ますので、難しく考えなくて大丈夫です。

関連記事：初めてのWebpack – インストールと使用方法

「babel-loader」で変換

Webpackの前に紹介した「Babel」の変換を、Webpackのプラグインとして使用していきます。

そのために必要なパッケージが「babel-loader」となりますので、とりあえずインストールしましょう。

npm install --save-dev babel-loader

Webpackの案内ページで紹介した使用方法にも書いたように、ファイルを読んでくれるローダーの仲間で、Babelのトランスパイル機能を加えた「script-loader」だと思ってください。

次にWebpackの設定ファイルにおけるスクリプトファイル用のルールを定義しますが、案内で紹介したよりも少し複雑なオプションを加えた書き方です。Webpack4での書き方ですが、バージョンが更新されれば変更もあり得ますので、ご利用のバージョンも確認した上で参考にしてください。

const scriptRule = {
  // 対象ファイルを「.js」「.jsx」「.ts」「.tsx」に
  test: /\.(js|ts)x?$/,

  // 除外対象
  exclude: /node_modules/,

  // 使用するローダーの設定
  use: [
    {
      // 「Babel」+「script-loader」=「babel-loader」
      loader: 'babel-loader',
      options: {

        // 「babelrc」は「.babelrc」を適用するかどうかのフラグ（デフォルト値は「true」ですので、「.babelrc」でオプションを定義する場合は「false」に設定する必要はありません）
        babelrc: false,

        // 読み込むコードの構文定義です。他に必要なプリセットがあれば、「@babel/preset-typescript」などを追加してください。
        presets: ['@babel/preset-env', '@babel/preset-react'],

        // プラグインの使用
        plugins: [
          [
            // 「React.createElement」を使用する代わりに、Gutenberg用の「wp.element.createElement」を使用
            "transform-react-jsx", {
              "pragma": "wp.element.createElement"
            }
          ]
        ]
      }
    }
  ]
};

const _module = {
  rules: [
    scriptRule,
    //他にルールがあれば追加
  ]
};

const config = {
  // 「mode」やら「entry」やら「output」やら
  module: _module,
}

module.exports = config;

ルール設定のuseではローダーの指定に加えて、各ローダー毎のオプションが指定できます。「babel-loader」では「Babel」の設定を適用する方法がいくつか用意されていて、今回は直接Webpackの設定ファイル内に記述する方法を使っています。

では、JSXコードを用いて作成したカスタムブロックを追加するファイルで、この設定がうまく作用するか試してみてください。outputされるファイル名をカスタムブロック追加ファイルに設定しておきましょう。

ターミナルで以下のコマンドを入力します。

// ローカルにある場合は「npx webpack」
webpack

後は生成されたファイルをGutenberg使用時にロードし、カスタムブロックが追加されているかどうかをご確認ください。

Webpackの監視モードで自動化

作業している間の細かいチェックをする際、毎回コードを入力するのは面倒だと思いますので、設定ファイルが正しく機能していることが確認できましたら、JavaScriptファイルを編集する前に、編集・保存される度にWebpackが自動的に処理を行うように監視モードにしてみましょう。

コードは非常に簡単で１行のみ。

webpack --watch

停止する場合は「Control」+「C」です。

監視モードはコマンドを入力した時点での設定ファイルが適用されますので、ルールなど設定ファイルを編集する際は、一度監視モードを停止してから再度監視モードにしましょう。

まとめ

紹介した方法は「Reactで使用するJSXを変換する開発環境」+「プラグイン”@babel/plugin-transform-react-jsx”によるGutenberg適応処理」といった感じです。

「Reactで使用するJSXを変換する開発環境」は「”Babel”を使った変換」+「Webpackの監視モードで自動化」というもの。そして、Gutenberg適応処理はBabelのプラグインにより行っています。

あと、書き忘れていましたが、「npm run キー」が使えるように「package.json」にスクリプトの登録をしておき、コードを書く方に集中しましょう。