XENEXE

GatsbyJS (React) を用いて生成した静的サイト上で UIkit が動作しない問題を解決する


heroImage

1. はじめに

GatsbyJS は,テンプレートエンジンとして React を採用している静的サイトジェネレータであり,UIkit はコンポーネント指向の CSS フレームワークです。GatsbyJS と UIkit を組み合わせた際,GatsbyJS を用いて生成した静的サイト上で UIkit が動作しない問題が発生します。本記事では,この問題を解決する手順について記述します。また,本記事内で行っている作業は,以下の環境下で実行したものです。

2. 環境構築

本記事では,実験環境として公式テーマの gatsby-starter-default を使用します。公式サイトに記述されているインストール方法に従って任意の場所にインストールした後,gatsby-starter-default/src/pages/index.js を以下のように書き換えます。

gatsby-starter-default/src/pages/index.js
1
import React from 'react'
2
import Helmet from 'react-helmet'
3
4
const IndexPage = () => (
5
<div>
6
<Helmet>
7
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css" />
8
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
9
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
10
</Helmet>
11
<div className="uk-child-width-expand@s uk-text-center" uk-grid>
12
<div>
13
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
14
</div>
15
<div>
16
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
17
</div>
18
<div>
19
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
20
</div>
21
</div>
22
</div>
23
)
24
25
export default IndexPage

3. 動作確認

上記のソースコードを実行した結果を以下に示します。正常に実行された場合,1 行 3 列で表示されます。しかし,実行結果では 3 行 1 列で表示されてしまっています。

4. 問題解決

Chrome DevTools を用いてデバックすると以下のようなエラーが見つかりました。どうやら 11 行目の uk-grid タグが JSX の記法にそぐわないようです。

上記のエラーを解決するために,11 行目を以下のように書き換えます。

1
import React from 'react'
2
import Helmet from 'react-helmet'
3
4
const IndexPage = () => (
5
<div>
6
<Helmet>
7
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css" />
8
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
9
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
10
</Helmet>
11
<div className="uk-child-width-expand@s uk-text-center" uk-grid="true">
12
<div>
13
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
14
</div>
15
<div>
16
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
17
</div>
18
<div>
19
<div className="uk-card uk-card-secondary uk-card-body">Item</div>
20
</div>
21
</div>
22
</div>
23
)
24
25
export default IndexPage

修正したソースコードを実行した結果を以下に示します。すると,正常に 3 行 1 列で表示されていることが確認できました。

5. おわりに

ここまで,GatsbyJS (React) を用いて生成した静的サイト上で UIkit が動作しない問題を解決する手順について記述してきました。UIkit の公式サイトに掲載されているサンプルコードで正常に動作しないものは,本記事で記述した方法で解決することが可能です。また,本記事では CDN 版の UIkit について記述してきましたが,Less 版や Sass 版でも同様の方法で解決可能です。