Jamstackで作るWebサイトってどんな感じ？

記事

IT・テクノロジー

前回の記事は、WordPressで制作した場合とJamstackで制作した場合の比較をしつつJamstackのメリットを紹介させて頂きましたが、Jamstackでサイトを制作すると通常とは異なる部分も有りますので、その辺りに関して書いていきたいと思います。

静的サイトジェネレーターを使う

WordPressの場合、まずはベースコーディングを行い、静的なページを作成します。その後、それをWordPressに組み込んで構築します。

（既存のテーマを使うことを前提にしている場合、このベースコーディングの工程が無い場合も有ります。）

一方、Jamstackの場合は、ローカル環境で開発する際に静的サイトジェネレーター（以後 SSG）と呼ばれるツールを使ってコーディングを行います。

このSSGを使うことで様々な処理を行ってくれるので、これにより、ヘッドレスCMS等から投稿されたコンテンツを、APIを通じてデータを取得し、予めHTMLに埋め込むと言う事が可能になります。

しかし、SSGを使った場合は素のHTMLは書かないため、そのままではブラウザが解釈出来ないソースコードになっています。（CSSだと、SassやLESSがイメージしやすいと思います）

そのため、最終的に実行可能なファイル（HTML等）に変換する、ビルドと言う処理を行う必要があります。

ビルド処理を行うことで、静的サイトが出来上がるのですが、そうすると「そのビルドってのはどこで行うの？」と言う疑問が生じるかと思います。

毎回ローカル環境でビルドしてファイルをアップするなんてやってられませんので、Jamstackに適したホスティングサービスを利用します。

このビルドに数十秒から数分の時間が掛かるので、変更内容を即時反映することが出来ないと言うデメリットが有ります。

Jamstackに適したホスティングサービスが色々有るので、そのホスティングサービスを使うと簡単な設定だけでビルドをやってくれます。

有名な所だと、NetlifyやVercelなんかが有ります。

特にNetlifyは無料で使えるのでランニングコストを抑えることが出来ますし、フォーム機能も付いているので非常に便利です。

このホスティングサービスは、Jamstackなサイトでは非常に便利な機能が有りますが、レンタルサーバーと異なり、サーバーサイドでの処理（PHPとかデータベースとか）は一切出来なかったり、FTPやSFTP接続も出来なかったりします。

ただ、ホスティングサービスに寄っては、ドラッグアンドドロップでファイルをアップする機能が有ったりもします。殆ど使うことは有りませんが。

また、ヘッドレスCMSから更新した場合は、Webhookを使ってホスティングサービスに通知することで、ビルドが走ってサイトに反映されます。

そして、このホスティングサービスを利用する上で切っても切れないのが、ソースコードを管理するGitです。

Jamstackに適したホスティングサービスは、GitHub（Bitbucket、GitLabでも可）と連携することを前提に作られていますので、必ずGitを使う必要があります。

GitHubと連携してリポジトリにプッシュすると、ホスティングサービス側で自動的にビルドして、実際のサイトに反映してくれます。

少し余談ですが、ホスティングサービスを利用しなくとも、CI/CDツールを使えば、プッシュしたタイミング等で自動的にビルドをしてレンタルサーバーに転送や同期をする事も可能です。

ただ、設定とかは自分で書いたりしなきゃいけないので、手間が掛かりますし、テスト環境も用意したいとかになると面倒な感じです。

その点、ホスティングサービスの場合は、ブランチ毎にURLが発行されるので、本番は main ブランチで、テストする際は dev ブランチみたいにしておけば、簡単にテスト環境を用意できたりします。

ヘッドレスCMSで投稿されたコンテンツを取得するために、静的サイトジェネレーターを使って構築し、ビルドをするために、ホスティングサービスを使う。そして、ホスティングサービスはGitによるソースコード管理が必須になるのでGitHub等のサービスを使う。

ホスティングサービスを使わない場合も、CI/CDツールを使うのにGitHub使ったりするので、Gitは何れにせよ必須。

ざっくりこんな感じでしょうか。

WordPressだとWordPress内で履歴の管理も出来るし、サーバーも殆どのレンタルサーバーで問題ないし、プラグイン使えばフォーム等も簡単に実装できるので、Jamstackってなんか面倒そうだなって印象もあるかも知れません。

確かに面倒と言うか実装する工数だけで言えば、WordPressで構築するより増えてますが、ハイパフォーマンスや高セキュリティな点は非常に重要ですし、リポジトリにプッシュするだけで本番に反映されるのは開発者体験としては非常に良い部分です。

他にも、FTPでファイルをアップしていると、複数人が触る場合に先祖返り等の問題が生じますが、Gitでソースコードを必ず管理するので、誰が何をしたかも明確ですし先祖返りの心配が無いと言うメリットも有ります。

と言う事で、Jamstackで作るWebサイト制作のざっくりした紹介でした。

非常にメリットも多いので、WordPress以外の選択肢として、Jamstackによるサイト制作にご興味が有りましたら、お気軽にご相談頂けますと幸いです。