Gatsby.jsとAnt Designを組み合わせてカスタムテーマを設定する方法 #JavaScript

概要

Gatsby.jsをお使いの方、どれほどいらっしゃるのかわかりませんが、通常webpackでやっているようなツールの設定や初期化系の話しはReactの知識をそのまま使えたりはしないので、時々困ります。
今回は、Ant Designを使ってCustom Themeを設定するのに若干ハマりまして、解決したので皆さんと共有します。

Gatsby.jsにAnt Designを設定する

色々な方法がありますが、gatsby-configやらgatsby-node.jsに設定を書くことになりますね。以下の設定により、ビルド時にAnt Designを読み込みソースコードで使えるようになります。デフォルトのテーマで行くなら以下で十分です、

公式サイトで紹介されているテンプレートの方法

信頼できるソースとしては、公式サイトでテンプレートとして公開されているgatsby-starter-hero-blogのgatsby-node.jsのこの設定が参考になるかもしれません。
見た感じ動きそうですが、私は実際に試してませんので動かなかったらごめんなさい。

プラグインを使う

私はこちらでやりました。gatsby-plugin-antdを使います。このプラグイン、実はgatsby-plugin-antd-v2というものもあります。同じ作者が２つ作っています。ソースコードを読んだところ、v2の方がシンプルになっており、機能制限があります。今回はバージョンなしを使いました。
以下、設定です。まあ、READMEのとおりです。

gatsby-config.jsに以下のように書きます

gatsby-confog.js


module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
    }
}

optionsでstyleをtrueにするのがポイントです。
テーマは設定しない人は、styleはfalseにしましょう。

lessの上書き

さて、Ant Designの公式ヘルプにもあるように、customテーマを設定するには、デフォルトテーマであるdefault.lessの設定をオーバライドする必要があります。これを行うのは、gatsby-plugin-lessです。
gatsby-plugin.lessでJSのObjectで設定した変数を上書きすることが可能です。

設定方法

gatsby-config.jsに以下のように書きます。
gatsby-plugin-antdの設定と同時に書いておきます。

gatsby-config.js


module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-react-next',
    {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
    },
    {
      resolve: `gatsby-plugin-less`,
      options: {
        theme: `./src/layouts/theme.js`,
      }
    }
  ]
}

optionsのthemeで読み込んでいるのがカスタムテーマが書かれたjsファイルです。
例えば以下のようにすると、primary-colorとfont-familyが変更できます。
MacではSFFontを使う設定です。

theme.js

module.exports = {
    'primary-color': '#722ed1',
    'font-family'  : 'Monospaced Number, -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, sans-serif'
};

これで自由にテーマを変更できるようになりました。

補足

ちなみに、上で紹介したgatsby-starter-hero-blogでもテーマを変更しているのですが、この方法は親Componentからテーマを伝搬させて、Componentごとに細かく設定を行っています。チームで開発をしているときなど、必ず忘れてしまうところが出てしまうので、個人的には公式でもご推奨のオーバーライド形式が好みです。

Ant DesignとMaterial UIの比較

以下、あんまり関係ない文章ですが、せっかくなんで私見を書きます。
プロジェクトでは２年ほどMaterial UIを使ってきました。
私見ではMaterial Designにきちんと従ったWebアプリは少ないと思っていて、デザインが良かったり、使いやすいアプリは独自の設定を行っていると感じます。
自分のプロジェクトでもMaterial UIのソースをかなり深く読んで、独自でテーマを変更する仕組みを作って運用していました。
結構Deepに使っている方じゃないかな？と自画自賛しています。
次のプロジェクトでは、ついにβがとれた新Material UIを導入しようとしました。２年ほど使っていた旧バージョンよりはるかに良くなっていたのですが、相変わらずのヘルプの薄さと、旧バージョンのときに頻繁に食らった、APIの互換ブレークとの戦いが嫌になり（新バージョンはβじゃないので、互換ブレイクには気をつけると作者は明言されていますので安心だとは思いますがトラウマです）色々迷っていたところ、前から気になっていたAntを使ったところ、見事にヒットしました。

Material UIを捨て、Antを選んだ一番の原因は、このテーマ変更とインラインCSSの書き方の違いです。
Material UIはCSS in JSでCSSを書く場合に、
https://material-ui.com/customization/css-in-js/
のように、独自のAPIで色々書くわけですが、これが結構辛い。
いまどき、styled-components使いたいわけですよ。
で、公式サイトにwith styled-componentsという説明があって、
そのとおり書いたら、案の定、動かない。
旧Material UI時代によくあった、ちゃんと昔のコードメンテしてない問題かもしれないので、
音速で諦めて、その勢いでAntを使ってみました。
公式ヘルプどおりにstyled-comnponentsを書くと普通に動く。
これは楽だと思って今回試験導入したんですが、ヘルプも充実していて
あっという間にUIができました。
懸念だったテーマ変更もヘルプ読んで、簡単にできそうだな？
と思っていたのですが、今回Gatsbyを使っても解決したので、
webpackでやるともっと簡単にできるはずです。
デザインもカスタムしたMaterial UIのような感じで今時だと思います。
あと、中国のフレームワークだけにlocalizationの説明がちゃんとあるのが素敵。
しばらく使ってみようと思います。