3分で読む静的ファイルジェネレータGatsbyチュートリアル（前編）

React Gatsby

Gatsby？

f:id:zuckey_17:20180514000616p:plain

Reactで静的Webサイトジェネレーターといえば、Gatsbyがあげられます。 公式サイトでは「高性能な静的PWAをReactで作ることができる。」と謳っています。

本エントリではPWAなどの詳細については述べません*1。

Gatsbyチュートリアル

Gatsbyの公式チュートリアルでは、開発時に使うReactやGraphQLなどの基本的な知識は必要ないとされており、かなり丁寧に書かれています。
ざっくりとした理解のため、取りあえず動かしたければあまり必要のない部分もあるかなと思ったので、かいつまんで書いてみました。
全部で8パートあり、0~3パートでサイトの見た目を作る部分、4~7パートでGraphQLを用いたデータの取得周りの解説をしています。

今回は前編ということでGatsbyでサイトの見た目を作るところです。

環境

スタート

1

  • gatsby-cliをインストールして、gatsby newでプロジェクトを作る
    • $ npm install --global gatsby-cli
    • スターターセットを使うとよくあるプロジェクトの雛形を用意してくれる
    • $ gatsby developでローカルで立ち上げる
    • $ gatsby buildでデプロイ用の静的ファイルを生成
  • Reactの構文が使える
    • JSX
    • CSS in JS
    • State、setState
    • etc
  • 複数ページにする
    • gatsby-linkというライブラリを使う
    • import Link from "gatsby-link"
    • <Link to="/コンポーネントのリンク">リンクとなる文字列</Link>
    • src/pages/以下に指定のページで表示するコンポーネントを作成する

2

  • グローバルなスタイル
    • typography.jsを例に
      • gatsby-plugin-typographyというプラグインを使う
      • プラグインを利用する場合はgatsby-config.jsというファイルをプロジェクトルートに作成しmodule.exportsオブジェクトにpluginsの配列で宣言する
      • するとそれらしいCSSが生成されているのが確認できる
      • 詳しくはそれぞれのpluginで
  • コンポーネントのCSS
    • CSS Modulesでやるのが推奨（とはいえ1でも書かれている通り、CSS in JSも使える）

3

まとめ

すごくあっさりで、文字ばかりになってしまいましたが、概要はつかめるのではないかなと思います。
Gatsbyのチュートリアルは英語も簡単ですし、1でも書いてある通り、スターターをベースにしっかり手を動かせて学べるので、これで興味を持った方は、触ってみてはいかがでしょうか？
次回は、後編をまとめます。

感想、ご指摘などあれば、コメントもしくはTwitter @zuckey17まで連絡いただけますと嬉しいです！！

*1:述べられません、勉強しておきます