Help us understand the problem. What is going on with this article?

Gatsby.js で簡単にSPAアプリ構築する!

:calendar_spiral: i-plug Advent Calendar 2019 の【10日目】の記事です:santa::tada:

Reactで手軽にSPA試してみたいなら

前回がんばってHUGOで作った静的サイトに無理やりReactを積んでSPAっぽいもの(=> この記事)を作成しました。

しかし!

そんな無理やりな構成を取らなくても、もっと楽にSPAが構築できそうな静的サイトジェネレーターがありました:joy: :joy:
それがGatsby.jsです。

今回はGatsby.jsを使って
別の構成のアプリを再構成してみようと思います〜:nerd::nerd:

どんな構成からどう置き換わりそうか?

すでに作成したアプリというものは
DynamoDBにスクレイピングなりで一覧にしたいデータを貯めておいて、それをREST APIから取得して画面に描画、フィルタリングもできるというものでした:nerd:

構成は
データの配信を DynamoDB + AWS Lambda + AWS Gateway
画面側は HUGO + jQuery でajaxを使ってデータを取得し Netlify でホスティングしてました。

それをGatsby.jsを使うことで
データの配信は DynamoDB + GraphQL(Gatsby.js)
画面側は Gatsby.js(React hooks) でとりあえず動くというところまで置き換えができました。

Gatsby.js リソースさえあれば良い感じ

置き換えたことで変わったところといえば
AWS Lambda + Gatewayで構築していたREST APIが不要になったところでしょう:joy:

代わりにプラグインを追加することでDynamoDBのデータをGatsby.jsに搭載されているGraphQL APIから取得データをできるようになります。

tarminal
$ yarn add gatsby-source-dynamodb

yarnで追加してきて、gatsby-config.jsに設定を書き込んで行きます。これ環境変数で渡さないとあかんやつですね:joy:

gatsby-config.js
    {
      resolve: 'gatsby-source-dynamodb',
      options: {
        typeName: '<ここに取得するための名前つける>',
        accessKeyId: '<Githubに上げたらあかんAWSのやつ その1>',
        secretAccessKey: '<Githubに上げたらあかんAWSのやつ その2>',
        region: 'ap-northeast-1',
        params: {
          TableName : "<テーブル名>",
        }
      }
    },

Dynamoから初期のデータを取得します。
そのままuseStateに入れてReact Hooksで動かします。

index.js
  const data = useStaticQuery(
    graphql`
      query {
       typeName {
          edges {
            node {
              info
              month
              date
              dayofweek
              created_at
            }
          }
        }
      }
    `
  )

 const [dataRepository, setDataRepository] = useState(data)
 const [displayData, setDisplayDate] = useState([])

React HooksでGraphQLってこれでいいのか?

GraphQLは、REST APIみたいに何度も問い合わせしてデータを都度取得するといった使い方はしないものだろうと思っています。(間違ってたらすみません:joy:

index.js
 const [dataRepository, setDataRepository] = useState(data)
 const [displayData, setDisplayDate] = useState([])

なので今回は初期にデータを一気に取得してきて、dataRepositoryにuseStateで値を保持しつつ、描画時は必要に応じてdataRepositoryのデータを加工し setDisplayData で格納してdisplayData をレンダリングするといった方法を取りました。:nerd:

ただ大規模・データ大量になったらこの構成は使えそうにありません。

もっとうまいことできる方法を探さないといけないですね。

はたしてお手軽なのか?

公式のチュートリアル(=> こちら)で3~4時間こなせばブログ投稿をしたりはできるようになります。
がっつりカスタマイズしたりはGatsby.js / GraphQLの仕組みやプラグインについて知らないといけないですね:joy:
当たり前ですがReactを全く触ったことないとGatsby.jsはきついでしょう。

結論:
お手軽かは疑問が残る。REST脳なわたしはGraphQLの仕様がわかるまでにコストかかりました。
ただ可能性を感じまくりのフレームワークです。
使いこなせば無理なくSPA構築ができそうです:nerd:。Web開発が捗りそう:nerd:

Gatsby.js 公式のチュートリアルをやる上で注意

プラグインのインストールはyarnで!!
(=> こちらの記事をご参考に)

yu9penguin
使用言語はPHP JavaScript。GoとElixirが好き。
i-plug
新卒逆求人サイト「OfferBox(オファーボックス)」シリーズの運営
http://i-plug.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away