「Gatsby + Contentful + Netlifyで誰でも簡単に爆速ブログが作れます！」みたいな記事を読んで「マジか！結構簡単にできそうやな！やったろ！」って思って実際にやってみたら想像以上に難しくて「どうして…」って感じになりました。
というわけで今回はGatsby + Contentful + Netlifyで爆速ブログを作る前に知っておきたかったことを言いたいと思います。
僕は普段からjsゴリゴリいじるフロントエンジニアでもなければ、つよつよエンジニアでもないのでこれから作ろうと思っている人に割と近い目線で話せると思います。
これから作ろうと思っている人は読んでみてね。
Reactできない人は無理
いきなりですが、Reactを自分でいじれないなら無理です。諦めてください。
GatsbyはReact製の静的サイトジェネレーターです。自分でコードをいじろうと思えば当然Reactをガリガリ触ることになります。Reactができない人は全くカスタマイズできません。
一応スターターキットみたいなのはありますが、カスタマイズできないならそれをインストールしてはい終わりみたいな感じです。GatsbyもContentfulも触らないみたいな終わり方です。
僕は「解説記事読みながらぽちぽちしてればいい感じにブログが作れるんじゃないか？」と思っていましたが、全くそんなことありませんでした。ライブラリの使い方とかもある程度知らないとどこで何が起きているのか把握できないです。
しかも、Gatsbyに書かれているコードは初心者にもわかる様な書き方じゃなくてかなり実践的な書き方になっています。技術書1冊やったくらいじゃ何書いてあるかさっぱりわかりません。
実力的には自力でReactで1からアプリを作れるくらいの力が必要だと感じました。
僕はReactの技術書を2冊読んで自分でタスクボードを作ったりしましたが、それでもReactの部分で詰まったりエラー連発してハゲそうでした。
Reactがガリガリ書ける前提の時点で誰でも簡単に作れるわけじゃないよね。誰だよ簡単に爆速ブログが作れるって言った奴。
GraphQLが中途半端にわからない
Gatsbyはデータを取得するのにGraphQLというクエリ言語を使います。
GraphQL自体はjsonみたいな感じでかなりわかりやすく、初見でもある程度対応できるのですが、実際に自分でGraphQLのコードを書こうとするとこれが中途半端によくわからないんですよね。何をどうしたらどうなるのか、何となくわかるけど何となくわからないみたいな。
普段からjs使い慣れてる様な人からすればわかりやすいのでしょうが、そうじゃない人からすれば微妙にわからない。
それと、スターターキットを使って始めるとGraphQLの部分が結構複雑に書かれているんですが、気になって全部調べていると全く先に進みません。調べても結局「よくわかんね」で終わります。僕はGraphQLの扱い方がよくわからなさすぎて心が折れかけました。
まあGraphQLに関しては初心者が詳しく理解しようとすると完全に泥沼にハマるなので、解説記事やスターターキットからコードをそのままコピペして「ふーん」程度に思っておくのがいいです。
そのうちサイト構築が進むにつれて「もしかしてこれってこういうことなんじゃね！？」とわかる様になってきます。これガチ。
GraphQLは最初は適当に流しておいて、必要になった時に向き合いましょう。じゃないと結構しんどい。
各種連携が面倒
Gatsbyでサイトを作って、記事はContentfulから引っ張ってきて、Netlifyでホスティング＋GitHubにpush or Contentfulで記事を更新したのをトリガーにNetlifyに自動デプロイ…各種API連携…。わけわからん。
4つも連携させるわけなので結構複雑です（少なくとも僕にとっては複雑でした）。
解説記事を読みながらやりましたが、途中から自分でも何をしているのかよくわからない状態でした。
とにかくAPIとかWeb hooksとかに馴染みがない人は結構大変だと思います。エラーが出たら対処もなかなか難しいし。
まあ完全に理解できなくても「ここをこうしたらよくわからんけど動く」程度で大丈夫だと思います。そのうちわかるよ。うん。
Contentfulの記事はマークダウンで書く。リッチテキストは×
Contentfulは記事をマークダウンで書くかリッチテキストで書くかを選択できます。
僕は「何となく見た目が分かりやすそう」という適当な理由で最初はリッチテキストで書こうと思っていたのですが、リッチテキストにするとGatsbyで記事を出力する難易度が途端にブチ上がります。
解説記事はググってもあまり出てこないし、GitHubやnpmの公式解説ページも読みましたが、あれは解説自体が玄人向けなので初心者には何書いてあるかよく分かりません。自分で解決するのも無理なので詰みです。
まあそもそもエンジニア系の人って大体マークダウンで書いてる印象あるし、実際そういう人がほとんどなのでしょう。ちなみにマークダウンなら解説記事いっぱい出てきましたよ。
Contentfulで記事を書くなら大人しくマークダウン使いましょう。
ライブプレビュー機能なんかもあるのでリッチテキストなんか使わなくても直感的に操作できます。
僕もマークダウンで書くようにしましたが、「別にリッチテキストにする必要全然なくね？」って思ういい感じの使い勝手でした。
全体的に思ったより難しい
React、GraphQL、各種連携などを考えると全体的に思ったより難しいです。「誰でも簡単に作れる！」みたいに思ってるとかなり面食らいます。
また、解説記事が初心者にとっては結構難しいなと感じることもありました。
記事を書いている人は普段からjsゴリゴリ書いているのか分かりませんが、「ここをこうしたらできます」みたいにあっさり書いてるけど、途中の解説が丸々すっ飛んでたり、「何でこうなるの？」って部分が解説されてない記事も多かったです。
記事を読んでもよくわからないことが結構あるので、「どこがどうなってこうなるのかよくわからないけど、とりあえずこの通りに書いたらできるらしい」みたいな状態が割と続きます。なので自分でエラー対処が難しかったりする（エラーの原因が特定できなかったりする）。
まとめ：Gatsbyは思ったほど簡単じゃなかった
Reactは使える前提だし、GraphQLの使い方も理解しないといけないし、APIやらWeb hooksやらで各種連携させたり、意外とやることが多いし初めてのこともたくさんあるので実際はそこまで簡単じゃないです。
細かくカスタマイズしたりやりたいことを実現する方法をググったりしてると無限に時間が解けるので気をつけましょうね。ただ、Gatsbyで作ったサイトはマジで早いです。
個人的にはいきなりGatsbyでサイト作り始めても頑張ればいけるかなって感じでしたが、「ちゃんと体系的に習得したい！」っていう人は技術書が出ているので手に取ってみるといいかもです。
