Gatsby+TailwindCSS:最低限のファイル構造を解説

kiharay
2021年6月23日
読了時間: 3分

Gatsby+TailwindCSSでシンプルなコーポレートサイトを作ろうとチャレンジする中で、学んだことを書き留めていきます。コーポレートサイトを作ろうとしたきっかけはこの記事を参照してください。

今回はReactの基礎おさらいから、Gatsby、Tailwind CSSの基本的な構造を理解するためのファイル構造を解説していきます。

全体のレイアウトを決めるコンポーネント

コーポレートサイトの基本的な全体のレイアウトを決めるコンポーネントとして、Layoutコンポーネントを作成して適用するのが良いようです。Gatsby公式ドキュメントでも推奨されています。

まずはディレクトリ構造と当該箇所のソースコードを見ていきましょう。

コンポーネントはReactの基本的な考え方で「再利用可能な部品」を意味します。詳しくはReactのMain Concept を確認してください。

src/
├ pages/
│   ├ index.js
│   └ ・・・
│
└ components/
    ├ layout.js
    ├ header.js
    ├ footer.js
    └ ・・・

componentsディレクトリにあるlayout.jsが、全体の構造を決めています。全てのページで{children} の前にHeader、後にFooterが来る、という記述になっていますね。シンプルなコーポレートサイトであれば、必ず設定する内容ではないでしょうか。

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import '../utils/global.css'

const Layout = ({ children }) => (
  <> 
    <Header />
    {children}
    <Footer />
  </>
)

export default Layout;

Layoutコンポーネントを適用したページ（例として、pageディレクトリにあるindex.js）は以下のようになっています。Layoutをインポートして、サイトの中身を<Layout>で囲んでいます。全てのページで同じ内容を表示するヘッダーやフッターは、この方法で記述するのが良いです。

import React from "react"
import Layout from "../components/layout"

const Index = () => (
  <Layout>
    <div>
     {/* サイトの中身をここに記述する */}
    </div>
  </Layout>
)

export default Index;

ページごとに内容が異なるコンポーネント

ページごとに内容（テキストとか画像）が異なるけど、部品としては共通か出来るものもあります。コーポレートサイトならば、Meta情報、問い合わせボタンなどがあります。ここでは例としてMeta情報のソースを提示します。

src/
├ pages/
│   ├ index.js
│   └ ・・・
│
└ components/
    ├ meta.js
    ├ button.js
    └ ・・・

Meta情報を記載するのに、react-helmetを使用しています。タイトルや説明はページごとに異なるので、props.title や props.desc のように変数化して定義されています。Meta情報はSEO対策で重要なので、ここでは基本的なタイトルと説明のみ記載していますが、コーポレートサイトとして運営する場合にはキーワードなども追加するべきです。

import React from "react"
import { Helmet } from "react-helmet"

const Meta = props => {
    return (
      <Helmet>
        <html lang="ja" />
        <title>{props.title}</title>
        <meta name="description" content={props.desc} />
      </Helmet>
    )
  }

export default Meta;

このmeta.jsをindex.jsに組み込むと以下のようになります。メタ情報については、もっと詳細で丁寧な説明をしているサイト（【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた）がありますので、こちらを参考にしてください。

import React from "react"
import Layout from "../components/layout"
import Meta from "../components/meta"

const Index = () => (
  <Layout>
    <Meta title="トップページ" desc="このページは・・・" />
    <div>
     {/* サイトの中身をここに記述する */}
    </div>
  </Layout>
)

export default Index;

スタイル（CSS）をTailwind CSSで適用する

GatsbyとTailwind CSSをインストールする手順は、Tailwind CSSの公式サイトでも提示されています。Install Tailwind CSS with Gatsby

インストールの手順は公式サイトに任せて、この記事では省略しますが、公式サイトの手順通りにインストールしていくと、tailwind.config.js、postcss.config.js、gatsby.config.js に適切な設定がされます。最初に設定してしまえば、これらをいじることはもうないと思います。

そしてglobal.cssを作成して、それを各ページ（もしくはLayoutコンポーネント）で読み込めば、各ページでTailwind CSSのクラスを使えるようになります。

@tailwind base;
@tailwind components;
@tailwind utilities;

import '../utils/global.css'

・・・

実際のTailwind CSSのクラス適用は、また別の記事で紹介します。

全体のレイアウトを決めるコンポーネント

ページごとに内容が異なるコンポーネント

スタイル（CSS）をTailwind CSSで適用する

コメント