はじめに
会社に wordPress の案件があるので React baseでThema の構築はできないかなぁ🤔と思って調べたら Gatsbyjs + WordPress の組み合わせで WordPress の post データをAPIで習得がでる。
ところで WordPress と Gatsbyjs はどんなものかメリットとデメリットを簡単に調べてみた。
WordPressとは
WordPress (ワードプレス) は、ブログから高機能なサイトまで作ることができるオープンソースのソフトウェアです。
公式での説明は簡単すぎて分かりにくいにくい様は コードが分からなくても サイトを作成したり、Blog記事の追加、更新が簡単にできるソフトウェアだ。
WordPressのメリット
- CMS(コンテンツマネージメントシステム)と呼ばれる管理ツールがあるので管理が簡単にできる
- HTMLが分からなくても記事更新や追加が簡単にできるできる
WordPressのデメリット
- ページの表示するためにはデータベースから呼び出して表示しているためHTMLと比較したらスピードが多少遅い。
- セキュリティー面で不正な操作や攻撃を受けやすいのでバージョン管理が必要。 - バージョンの管理が面倒い。
- Themaの作成をするためにはPHPの知識＋ワードプレス言語の知識が必要。
Gatsbyjsとは
GatsbyjsはReactベースの静的サイトジェネレーター
Webサイトの公開・構築に良く使われるWordPressなどのCMSは、記事の「閲覧時」に動的にサイト内容が生成されるが、静的サイトジェネレータは閲覧時ではなく「ビルド時」にHTMLやCSSなどがあらかじめ生成されていることが特徴。つまり SSG（Static Site Generator） 仕様。
下記のイメージは公式から持ってきたGastby動作のイメージ図。
ウェブサイトを作成するには、データが必要ですが、Gatsbyjs でデータを取得するのためにはデータソースと呼ばれ、データソースは例えば WordpressのようなCMS ツールもあれば他の静的なサイトジェネレータのように Markdown ファイルになることもありAPIなどを介して他の場所で取得することもできるようだ。Gatsbyjs ではプラグインシステムがよくできているのでさまざまなデータソースからデータをインポートすることができる。
基本的に GraphQL は Gatsbyjs に含まれているので非常に簡単必要なデータだけインポートすることができます。
GatbyjsはReactベースで作られていてコンポーネントを作成するように 使用するこができて、共通のレイアウトを管理したり、ページを作成したり、データソースとコンポーネントを接続したりする機能を Gatsbyjs で提供していて、簡単に実装ができ、作成したプロジェクトをビルドすると、静的なサイトにしてくれて、ここでSPAではなく、静的サイトにするという部分が重要 だがCMSやファイルなどのデータソースからGraphQLで取得したデータを作成する際に、すべて取得し、静的ファイルのデータに含まれる。
Gatsbyjs 単独で構築する場合は静的なサイトを作ってくれるので、ビルド時 GraphQL にデータをインポートして作成された配布ファイルに含目られるのでサイトを運営する際に、データソースとして利用したAPIサーバーやファイルは提供しなくても大丈夫。
Gatsbyのメリット
- 表示スピードが速い
- とにかく速い
- 非常速い
- TypeScript 設定は既にされている(拡張子をtsx変更で済む)
- 外観変更が自由に変更できる
- graphQL から必要なデータだけ習得することができる
- SEO 最適化に強い
Gatsbyのデメリット
- graphQL知識が必要 Ractの学習が必要(Reactはjavascritなので勉強すればすぐ習得できるかと)
WordPress変わりヘットレスCMS
WordPress の代わりでもGastbyjsと良く相性があるヘットレスCMSもあります。
このサイトも contentful + Gatsbyで 作られてカテゴリー別で分けられるので非常にデータの管理しやすい。個人的には contentful 一つでサイト別に分けてLPの様な簡単などもサイトデータ化して管理しても良さそうな気がした。 自分はそこまで気にしないけど上記のヘットレスCMSは英語しかできない気がする。 WordPress で管理したい場合はサーバーが一つ必要なきがするけどヘッドレスCMSとして使うから個人の場合は無料レンタルサーバーでも十分できる気がした。
まとめ
Gatsbyjs では上記のさまざまなプラグインの中 WordPress と繋げてくれるプラグインができ、WordPress デメリットを Gatsbyjs が補完しながらThemaの開発をすることができる。つまり、フロントエンドは WordPres のデメリットを考えなくてフロン開発に重力ができてハッピーになる！👍