GatsbyJS でUIフレームワーク Material-UI を使用する

ishigaki

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、 Gaji-Labo のコーポレートサイトでも採用している React 用 SSG である GatsbyJS 上で、最近案件で採用しているUIフレームワーク Material-UI を使用する方法についてまとめたいと思います。

Material-UI の導入

GatsbyJS 上で Material-UI を使用するには、 gatsby-plugin-material-ui というプラグインが用意されているため、そちらを使用します。

このプラグインは Material-UI の持つスタイリングライブラリを GatsbyJS で使用できるようにするもので、 SSR のサポートに加えて自動 prefix の付与や minify を行います。

GatsbyJS に Material-UI そのものを導入するプラグインではないので、別途 @material-ui/core の導入も必要になります。

$ yarn add -D gatsby-plugin-material-ui @material-ui/core

プラグインを導入した後、 gatsby-config.js 上で読み込みます。

module.exports = {
  plugins: [`gatsby-plugin-material-ui`],
};

単純に GatsbyJS 上で Material-UI を使用するだけであれば、以上で導入は完了です。

Material-UI を使用する

導入した後は以下のように、通常 Material-UI を使う時と全く同じように使用することができます。

import React from 'react';
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import { Link } from 'gatsby';

export default function Index() {
  const theme = createMuiTheme({
    ...
  });
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm">
        <Box my={4}>
          <Typography variant="h4" component="h1" gutterBottom>
            example
          </Typography>
          <Link to="/about">
            Go to the about page
          </Link>
        </Box>
      </Container>
    </ThemeProvider>
  );
}

GatsbyJS のページコンポーネント上に Container, Box, Typography などの Material-UI のコンポーネントを組み込んで使用しています。

勿論 ThemeProvider や makeStyles を使用してのスタイリングを行うことも可能です。

上記の例では createMuiThemeThemeProvider を使用してのスタイリングを想定しています。

コンポーネントのスタイリング方法や Material Design の色の使用など、 Material-UI の基本的な使用方法については以前自分のブログで書きましたので、そちらもご覧いただけるとありがたいです。

まとめ

今回は React 用 SSG である GatsbyJS 上で、UIフレームワーク Material-UI を使用する方法についてまとめました。

GatsbyJS などの SSG や UI フレームワークは案件で扱う機会が多く、今後も増えていくと考えています。

そのために、今後も触りながら知見を溜めて社内・社外に共有していきたいと考えています。

Gaji-Labo は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応が可能です。「Jamstack にしたいが、社内調整ができるか不安」「Jamstack 開発がわかるエンジニアがいない」などのお困りごとに対して、メリット/デメリットの判断からお手伝いできます。まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。