オウンドメディア開発途中で、WordPressからGatsby+Netlifyに乗り換えた理由

こんにちは、よっしーです！

自社のオウンドメディアを開発したので、その経験を共有しようと思います。

これからオウンドメディアや個人のブログ等を開発しようと考えている方の参考になれば、幸いです。

主に、初期開発段階のお話です。

概要

当初はWordPressを利用し、オウンドメディアの開発を進めていました。

その中で問題に直面し、構成をGatsby+Netlifyに変更することになりました。

すでに開発を進めていたので、手戻りはありましたが、WordPressでの開発に比べると、爆速で開発が進んだので、結果的に良かったです。

乗り換えに至った経緯

想定していたWordPressでの開発

WordPressの独自テーマからコンテンツを含めたサイト全体に至るまで、チーム開発を考えていました。

しかし、これまで個人開発してきたメンバーはいるものの、WordPressでのチーム開発経験者がおらず、その知見は皆無でした。

開発時にぶち当たった問題点

チームメンバーで手を付け始めたものの、WordPressが取り扱うデータベースが足枷となってしまい、開発が思うように進みませんでした。

例えば、特定の条件下でデータベースに依存したコードを書きたかったが、開発者それぞれの手元のデータベースの中身が統一出来ていないため、そういったコードの書き方には問題がありました。

また、データベースを共有する一般的な手法として、スクリプトを共有したり、それらスクリプトをマイグレーション管理することがあると思いますが、WordPressでそれを簡単に実現する術が無さそうでした。色々な手法にトライされている記事も多少見かけましたが、自分達にフィットするものが見つけられませんでした。

かといって、データベースそのものを共有しようとすると、どこかにデータベースを稼働させるサーバを立てる必要があったり、またそこのセキュリティや管理・運営が必要となってしまい、出来ればしたくないと思っていました。

その他問題点

• セキュリティ上の不安があるため、定期的なバージョンアップ等の管理・運用が必要になる。( 詳細 )
• チーム内にWordPress開発の経験者が少なく、WordPress独自の関数にてこずってしまった。

そこで近年、話題となっているサーバーレスで静的なサイトを生成するGatsbyへの乗り換えを検討しました。

新しい構成について

• Webサイトの作成生成

  → Gatsby

• ビルド＆デプロイ

  → Netlify

• 記事投稿管理

  → Netlify CMS

Gatsbyとは

Reactで作られた静的サイトジェネレーター。

内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。

Netlifyとは

静的サイトをホスティングすることができるWebサービス。

Gitリポジトリとも連携しており、pushするとこでビルド＆デプロイが容易に行うことができます。

Netlify CMSとは

Netlifyでホスティングされている静的サイトに、管理画面などのUIをCMSとして提供してくれるアプリケーション。

これによって、開発に携わっていない人にも、記事の投稿が容易になります。

開発してみた感想

WordPressでの開発時に発生していた問題点も解消され、コンテンツも含めすべてGitで管理できるようになり、チーム開発がスムーズになりました。

また、Gatsbyのドキュメント は英語ですが、とても整備されていて、開発で詰まっても調べやすい印象でした。

新しい技術に触れることで開発者のモチベーションアップに繋がり、積極的に取り組むようになったことも開発が進んだ要因の１つです。

なんといっても表示が爆速なので、ストレスフリーで開発していて気持ちがいいです。

まとめ

最後に改めてWordPressと比較したGatsbyの特徴まとめます。

• コンテンツを含めたソースのバージョン管理が可能
• CMSや配信サーバの部分的な乗り換えが可能
• 静的なサイトであるため、表示速度が爆速
• セキュリティ対策をあまり気にしなくてよくなった