Sassyブログ

好きなことで暮らしを豊かにするブログ

WordPressはもう古い?ヘッドレスCMSとは?WordPressとどう違う?JAMStackによる新しいWebサイトの在り方

どうもSassyです!

最近JAMStackについて興味を持っています。

JAMStackを調べていると出てくるのがヘッドレスCMSですね。

CMSと聞くと真っ先に思いつくのがWordPressかなと思います。

CMSとはContentsManagementSystemの略でWebサイトのコンテンツを管理するための仕組みです。

WordPressはユーザーに見せる画面を持つ他に管理機能を備えた管理画面を持っています。

皆さんはブログを作ったことはあるでしょうか?

小さな会社や個人事業主、またはブロガーさんであればWordPressを使って自社のサイトやブログを作成したことがある方が多いと思います。

例えば自社サイトのページやブログの記事を管理画面から作成して、ユーザーが見えるように公開できたりします。

ざっくりとですがCMSとはこういったコンテンツを管理できる仕組みを持ったソフトウェアです。

今回はこのCMSのヘッドレス版はどういうものなのか?

また、WordPressとどう違うのか?

そしてJAMStackとは何かをご紹介していきたいと思います。

私もまだまだJAMStackは勉強中であるため認識の間違い等があるかと思いますが、ざっくりとどういうものかを知っていただければと思います。

ヘッドレスCMSとは

上記でCMSについて述べました。そして代表的なものがWordPressです。

WordPressではユーザーに見える画面管理画面管理機能を持っていますね。

ヘッドとはユーザーに見える画面を指していて、それがレス(無い)なので、ヘッドレスCMSとは 管理画面と管理機能 を持ったCMSになります。

ではユーザーに見せる画面が無いCMSでどのようにサイトを作ればよいのでしょうか?

そもそもヘッドレスCMSは単体で使用するものではありません。

ユーザーに見える画面をJavaScriptなどのプログラミング言語で作成し、その管理機能としてヘッドレスCMSを用いて組み合わせて使います。

コンテンツのデータはAPIで通信を行います。

なのでヘッドレスCMSとはWordPressのように一式揃っているわけでは無く、画面を自分自身で別途作る必要があります。

JAMStackとは

JamStackはJavaScriptAPI、MarkUpの頭文字を取った言葉です。

JavaScriptを使って構築し、ビルドというプロセスの中でAPIと通信してデータを取得して、それをJavaScriptで書いたテンプレートと組み合わせてページを生成します。

JAMStackで作られたサイトのページはすべて静的なページであり、プログラムの実行はされません。

厳密にいうと、プログラムの実行はファイルをサーバーにアップロードする前に行います。

JAMStackサイトはWordPressサイトとどう違うのか

では次に違いを説明していきます。

従来のWebサイト制作はHTMLやCSSを利用したサイト構築から、お客様側でコンテンツの追加や更新をしやすいようにWordPressなどのCMSを使ったサイト制作が主流でした。

WordPressを使ったサイトは動的サイトと言われており、アクセスしたタイミングでプログラムを実行しデータを取得してページが生成されます。

しかし、JamStackサイトでは予めビルドという工程で生成したページを公開フォルダに配置します。

そのためユーザーがサイトへアクセスした時点では、すでにページが生成されておりこれをサーバーがブラウザに返すだけなので、動的サイトよりも高いパフォーマンスを出すことができます。

なので、WordPressよりもJamStackで作られたサイトは 高パフォーマンス高セキュリティ高スケーラビリティ です。

JAMStackがお客様に与えるメリット / デメリット

JAMStack構成でサイト制作をした場合の お客様 へ与える価値を考えてみました。

メリット

  • 高セキュリティ
  • SEO対策(高パフォーマンスであるため検索エンジンに評価されやすい)
  • ユーザー体験の向上

デメリット

  • 維持費(フロントのホスティング費用とHeadlessCMSを稼働させるサーバー2つ必要)
  • 改修による追加費用がWordPressと比べて高くつく
  • デザイン変更をするには直接HTML、CSS、JSを編集する

JAMStackが開発者に与えるメリット / デメリット

JAMStack構成でサイト制作をした場合の 制作者 へ与える価値を考えてみました。

メリット

  • 現在Webフロントエンドで主流となるReactやVueを使った制作が行える
  • Gitで管理できCIと組み合わせて自動化を行いやすい
  • 開発環境と本番環境での分離がしやすいので、WordPressのように本番環境を直接いじって改修というのを無くせる。

デメリット

  • 学習工ストの増加
  • 十分な知識が無いとお客様への営業トークが難しい(WordPressとどう違うのか、そのメリットを伝えにくい)

最後に

JAMStackには様々なメリットがあります。

WordPressは手軽に導入できる反面様々なデメリットがあり、当然危険が多いです。

少し手間はかかりますがJAMStackでより安全なサイトを作りをしてみませんか?

私もまだまだ勉強途中で書籍を探していますが、紙の本はあまり見つからなくおススメどころでいくつかの電子書籍をご紹介しますので読んでみてはいかがでしょうか?