GatsbyJSのチュートリアルやってみた
エンジニアリング
エンジニアリング-クライアントサイド
エンジニアリング-クライアントサイド-Gatsbyjs
エンジニアリング-クライアントサイド-JavaScript
エンジニアリング-クライアントサイド-React
きっかけ
ちょうどシンプルなWebサービスを作るお仕事があったので、ちょうど良さそうと思ったので試してみる事に。
何が良さそう？（やってみる前の印象）
GatsbyJS
他の静的サイトジェネレーター StaticGen | Top Open Source Static Site Generators
後発なので、採用されてる技術がモダンです。
私が使った事があるNuxt.jsも素晴らしいのですが、 GatsbyJSは静的サイトジェネレーターに特化していて、この用途に限定するのであれば機能も多く使いやすそうです。（Nuxt.jsはSSRとかもできる）
Reactベース
今だとほぼデファクトなので、色々便利。（雑） （個人的にはvue.jsの方が好きですが）
GraphQL
ローカルのリソースも基本GraphQLで取得する仕組みになっているそうです。 ということは、とりあえずデータをファイルで静的に持っておいて、将来的にはAWSのAppSync等のサービスとつないで拡張とかしやすそう。
aws-sampleでもサンプルコードを提供してくれていました。
AppSync自体がシンプルにDynamoDBからの取得もできるし、ちょっと複雑な事をする場合はLambdaを書けばいけるので、シンプルなWebサービスなら全然いけるイケてるやつ。
Netify
静的ファイルを置くだけならS3やfirebaseという選択肢もあるのだけど、静的ファイルに特化していて超使いやすい印象。
個人で使うならCDN付きで無料というのはすごい。
さらに、SPA系で困るSEO対策なのだけど、Prerendering機能もあるのでSEO対策もそこそこやってくれそう。
本気でやるとSSRしないといけなくて、ホスト環境からどうしようかという話になってなかなか大変なのだけど、こんな簡単にできるなら素晴らしい話。
まとめ
将来的な拡張をある程度は見据えつつ、Webサービスを最速で構築し、コスト（人もお金も）をかけずに運用するならとても良い組み合わせに思われます。
やってみた
公式チュートリアル（雑な要約付き）
0. Set Up Your Development Environment
完了後のソース
環境設定です。
もろもろ指定通りにインストールして、コマンド叩けばOKです。英語ですが、コマンドについての細かい説明もあって（cd の説明から）すごく丁寧です。
私はローカルにglobalで入れたくないのでdockerを使いました。
developコマンドで開発用のサーバを立ち上げる際は、
gatsby develop -H 0.0.0.0
とする必要があります。（チュートリアルにも記載があります）
これは、↓と同じ理由ですが、ENVからデフォルト設定を取ってくる実装になっていないので毎回指定する必要があります。
実装はここ。PR出したら通るかなぁ、、
prettier
チュートリアルではVSCodeがおすすめされていますが、私はJetBrainのIDE（今回はPHPStorm。PHP使わないけど）を使っているので、環境に合わせてprettierをセットアップしました。
docker上に入れるとIDEとの連携が面倒なのでローカルに入れちゃっています。
npm install --global
prettierへのpathをマニュアルと変えています。
1. Get to know Gatsby building blocks
公開したサイト
完了後のソース
JSX、component（ここまでReactの説明）と、surgeを使った公開まで。
surgeについてはこちらが詳しかったです。
2. Introduction to Styling in Gatsby
公開したサイト
http://untidy-balance.surge.sh/about-css-modules/
完了後のソース
cssの組み込みの説明。css-modulesを使ってscoped css実現。
3. Creating nested layout components
公開したサイト
http://obsequious-bean.surge.sh/
完了後のソース
layoutの説明。nuxt.jsのlayoutと同じでした。
4. Data in Gatsby
公開したサイト
完了後のソース
GraphQLとりあえず使ってみる編。
GraphQLの利用は必須じゃない（小規模ならcreatePages APIをつかえばGraphQL無しでできる。全然OKとのこと）
ここに限らず、npmパッケージのインストールはチュートリアルのコマンドだと遅いので、yarn使ったほうが良さそうです。（gatsby newではyarn使ってるので特にinstallは不要のはず）
yarn add gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
5. Source plugins
公開したサイト
http://gusty-word.surge.sh/my-files/
完了後のソース github.com
4を発展させて、Source pluginsを使ってfilesystemからデータをGraphQLを使って取得し、画面に表示する。ブラウザでGraphQLを実行できるページ（___graphql）も。
GatsbyJSの真骨頂という感じ。
6. Transformer plugins
公開したサイト
http://assorted-coast.surge.sh/
完了後のソース
5をさらに発展させて、マークダウンで書いたファイルを読み込んで、GraphQLで扱う。Transformer plugins を使う事で、元ファイルがマークダウンでもGraphQLでいい感じにデータを扱えるようになる。
ブログの一覧ページを作るところまで。
7. Programmatically create pages from data
公開したサイト
http://ordinary-able.surge.sh/
完了後のソース
6をさらに発展させて、各記事ページを作成する。 graqhQLを使う事で何でもできるんだけど、書くことがけっこう多いな、という印象。
ページの作成はここまで。
まとめ
全体的にReactとGraphQLをベースに使う事で、モダンにできてるな〜という印象です。できるものも、ユーザー体験として高速になるし。 プラグインも必要そうなものはかなり揃ってそう。
一方で非エンジニアにはまだまだ敷居が高そうで、wordpressの代わりにはほど遠い感じでした。（私はエンジニアなんでいいけど）
