SAKURUG TECHBLOG

はじめに

こんにちは。SAKURUGのRyoです。

以前、「Next.JS学習を始めるための教本を買いました」という趣旨の記事を執筆しました。
現在Next.JSとmicroCMSでJamstackでブログを開発中です。

そこで今回は、

• JavaScriptフレームワーク＋ヘッドレスCMSでJAMスタック開発
• 従来型のCMS（WordPress）＋レンタルサーバー

で開発という2つのWEBサイト構築の方法を調べて比較し、それぞれどんなメリットやデメリットがあるのかをまとめてみようと思います。

Jamstack + JavaScriptフレームワーク + ヘッドレスCMS

メリット

1. パフォーマンス向上
   • あらかじめ生成した静的なページをユーザーに返す仕組みで、ページの読み込み速度が速い。
2. スケーラビリティ
   • 静的ファイルはスケールしやすいため、同時接続数が多くてもサーバーの負担が小さく、コンテンツ配信の最適化、ユーザビリティの向上が期待できる。
3. セキュリティ
   • ヘッドレスCMSはバックエンドとフロントエンドが分離されており、サーバーサイド処理が少なく攻撃対象が限られ、セキュリティリスクが低い。
4. カスタマイズ性
   • フロントエンドの開発に自由度があり、ReactやVue.js、Next.jsなど自分に合ったフレームワークを選べる。
   • ヘッドレスCMSはAPIを通じてコンテンツを取得するため、どのプラットフォームでも利用でき、将来的に他のサービスに簡単に切り替え可能。
5. モダンな開発体験
   • 開発者はより最新のツールやテクノロジーを使うことができ、モダンなフロント開発経験やスキルが得られる。

デメリット

1. 学習曲線
   • JavaScriptフレームワークやAPIの使い方を学ぶ必要があるため、初心者の学習コストが高め。
   • ヘッドレスCMSの設定や、API経由でデータを扱う方法、一回のリクエスト数制限などにも慣れが必要。
2. 初期構築が手間
   • WordPressなどのレガシーなCMSに比べテーマやプラグインが豊富ではなく、デザインを起こしたり機能をゼロから作る場合は手間が増える。
3. サーバーサイドの機能が難しい
   • ヘッドレスCMSや静的サイト生成はサーバーサイドの処理に制限があり、例えば動的なフォーム処理やユーザー認証などの複雑な機能を追加はさらに実装や学習にコストがかかる。

WordPress + レンタルサーバー（従来型CMS）

メリット

1. 手軽に始められる
   • テーマやプラグインが豊富で、少ないコードで簡単にウェブサイトを立ち上げることができ、特に初心者には馴染みやすい。
   • 設定が簡単で、ドメインの取得やレンタルサーバーなどのランニングコストも比較的安価。
2. 即時性
   • GUIが直感的でコンテンツの追加や変更が簡単。
   • 動的コンテンツがそのまま表示されるので、管理画面から即時に本番反映可能。
3. 大規模なエコシステム
   • プラグインやテーマが豊富で、機能の追加が容易。
   • SEOやセキュリティ対策、Eコマースなどの拡張機能も豊富。
4. サーバーサイドの機能も対応
   • 複雑な機能や動的な処理を容易に実装でき、ユーザー認証やカート機能などが組み込みやすい。

デメリット

1. パフォーマンス
   • ユーザーのアクセスに応じて動的にページを生成するため、Jamstackに比べて読み込み速度が遅くなる可能性ある。
   • 特にサーバーのパフォーマンスに大きく依存する。
2. セキュリティリスク
   • WordPressは非常に人気があるため、攻撃のターゲットになりやく、定期的なアップデートやセキュリティ対策が必要。
   • プラグインやテーマが原因でセキュリティリスクが高まることも。
3. スケーラビリティの制限
   • トラフィックが増えるとレンタルサーバーでのスケーラビリティに限界があり、高負荷に弱い。
4. 保守が大変
   • プラグインやテーマが頻繁にアップデートされ、その都度管理や調整が必要。また、プラグイン同士の互換性の問題が生じることもある。

まとめ

• Jamstack + JavaScriptフレームワーク + ヘッドレスCMSは、モダンでスケーラブルな開発環境を提供し、特にパフォーマンスやセキュリティ面での利点が多い。
• 初期学習のコストは高め。
• サーバーサイド機能に制限があり、フォームの設置などは別途専用ツールの導入やサーバーサイドの開発が必要。

• WordPress + レンタルサーバーは、簡単に始められ機能の追加が容易で、サーバーサイド処理が得意。
• パフォーマンスやセキュリティ、スケーラビリティに課題が生じる可能性がある。
• テーマを自作したいといったケースでは、PHPなどのサーバーサイドの学習が別途必要

デザインやコンテンツ部分はともかく、とりあえずWEBサイトを作りたい！というケースではWordPressの方が取り組みやすいかもしれませんが、将来的にモダンな開発を目指すのであればJamstack開発のアーキテクチャに挑戦し、認証機能やフォーム設置などサーバーサイドの機能を深掘りしたいのであれば、PHP / Laravelなどに進むのが順序的にはいいようです。

私は今作ってるサイトがもっと形になってきたら、Next.js + Firebase / Supabaseでフルスタック開発を目指してみようと思うので、もしまた書けるような内容がまとまりましたら執筆したいと思います。