01. WordPressからGatsby.jsに乗り換えた流れと課題、メリット・デメリット

どんな記事

• HTMLやCSS、JavaScript、Python等の開発経験あり（個人）
• Node.js、React.js等は、聞いたことがある程度

という筆者が、Gatsby.jsを導入した際の記録です。

今後も、機能の追加に伴ってシリーズでお届けしていく予定です。

経緯

WordPressでサイトを運営して4年くらい経っていましたが、ここ数年、

• サイトが重い
• 思い描いた記事をスムーズに書くことができない
• アップデートしないプラグインがある

など、いくつかの不満を抱えていました。

「Gatsby.js ならすべて解決できそう！」

ということで、自分自身の勉強も兼ねて開発することにしました。

やりたかったこと

こんなサイトを目指して動き出しました。

実現できたこと

GitHubでの管理

WordPressのサイトの頃は必要性をあまり感じずほとんど使っていなかったのですが、今や手放せないツールのひとつになっています。

メモと記事の作成

日頃のメモは以前から使っていたScrapboxに行い、執筆時にコピペするという方法をとっています。WordPressの頃と比べると、記事を書く時間が半分以下になったイメージです。

• GitHubで管理コストが激減
• マークダウンでの記事の作成

というのが快適すぎて、運用サイトを増やす計画を立て始めています。

快適な動作

動作も、元のサイトと比較すると圧倒的に軽快になりました。満点とまではいきませんが、Lighthouseのレポートでも良い得点を出せています。

メリット・デメリット

以下は、実際に開発・運用してみて感じているメリットとデメリットです。

導入はWordPressの方が簡単です。Gatsby.jsは学習コストがそれなりにかかります。あと、Gatsby.jsは自分のミスに気づきにくい印象があります。

一方で、その代わりに得られるメリットは非常に大きいです。

他の、細かな機能に関する比較表はGatsby.js公式が用意してくれています。気になる人は以下を確認してみてください。

やったこと

以下は、「Investment Tech Hack」というサイトをGatsby.jsで構築するにあたって筆者が取り組んだことです。

① リサーチ～学習

静的サイトジェネレーターもいくつか種類があり、かなり迷いました。Gatsby.jsの決め手は、世界シェアの多さだったと記憶しています。

最も参考になったのは「静的サイトジェネレーター活用入門」でした。効率良く理解が進みました。

② 開発

最初はサイトの大枠の作成です。

苦労したのはReactでのフォームやモーダル、Webツール、目次等の実装でした。いくつかの機能については、今後、別の記事で解説していきたいと思います。

③ コンテンツ作成

続いてサイトのコンテンツを作成していきました。

ページの作成

「記事の移行」は作業の半分を手動で行いました。数十記事あったので、なかなかしんどかったです。

htaccess

カテゴリーの構成もいじったので、リダイレクトも設定しました。

面倒になり適当にやったため、一部失敗してしまいました。上位記事だったため見事に検索流入が減っています。ちゃんと対応表を作成して確認するべきでした（せめて上位の記事だけでも・・）。

④ 公開後の実装

公開後、以下のような対応も行っています。

開発における課題のまとめ

開発過程で、筆者自身が直面した疑問・課題のまとめです。

普通に開発すればSPAになるのか？

Linkコンポーネントをつかって作成すればSPAになります。

Qiita風の目次と Scroll to Top

いくつか試しましたが、MDXでの実装において参考になったのは以下の記事でした。

記事ページ

次のサイトリニューアルを見据えてマークダウンを採用したかったのですが、拡張性を考慮してMDXにしました。マークダウンの中に<ModalTest />等と記述することで、あらかじめ用意したものを挿入することができます。リニューアルの際の制限は増えましたが、割と気に入っています。

アイキャッチ

マークダウンのfrontmatterで実装しました。frontmatterに記述した情報はGraphQLで取り出すことができます。

大きなテーブル

マークダウンの記述で、横に大きなテーブルは横スクロールで対応。スマートフォンでも同様の表示。

シェアボタン

react-shareというプラグインで実装。

Twitter、youtubeの埋め込み

react-lite-youtube-embed と react-twitter-embed で実装。

モーダル

モーダルは少し苦労しました。Reactのプラグインをいくつか試しましたが気に入るものがなく、以下のサイトを参考に実装しました。

フォーム

メールスタンドのフォームを埋め込んで、送信後のリダイレクトまで実現する方法が分からずハマりました。

• React-Final-Form
• axios

などで、フォームデータの送信はできたもののリダイレクトが上手くいかず、

• react-router
• createRedirect

などを試すも、見当違い。

結果、普通のフォームを作成し実装しました。Validationは以下の記事を参考に実装しています。

デプロイ

この辺りも知見がなく時間が掛かりました。ローカルからXserverにrsyncでアップロードする流れにしています。

選択肢としては以下のようなものがありました。

Netlifyは日本では少し遅いようです。

SEO

構造化マークアップについては、react-helmetで自作。

その他

新プラグイン gatsby-plugin-image への対応

SmartNewsのfeedに対応

まとめ

総論としては「非常に快適」です。

向こう1年くらいかけて、量より質のサイトを2つくらい作成していく予定です。今は企画段階ですが、この構想も思った通りのサイトを短時間で作成できるGatsby.jsという前提があってこそです。

人知れずワクワクしながら企画を進めています。

楽しみ！

タカハシ　ユウヤ

投資やプログラミング、動画コンテンツの撮影・制作・編集などが得意。元・日本料理の板前。更新のお知らせは、Twitterで。