Jamstackとは?超わかりやすく

Jamstackについて調べた結果メモ。

初心者向けに書きます。

Jamstackとは

「JavaScript+API+Markupを使ってサイトとかを管理しようぜー」なこと。

頭文字を取って「Jam」。

 

例えば、Wordpressでサイトを公開する場合、

  • 管理者:AサーバーのWordpressで記事を管理する
  • アクセスするユーザー:AサーバーのWordpressに対して「この記事ちょうだい」とお願いする

という感じで、Wordpressがすべて管理します。

wordpressの仕組み

▲Wordpressだけでサイトを管理する場合。とてもシンプルです。

 

それに対して、Jamstackでサイトを公開する場合、

  • 管理者:
    • AサーバーのWordpressで記事を管理する
    • AサーバーのWordpressから記事データを取ってこれるようにするためのAPIをWordpressに実装する(そのためのプラグインがある)
    • WordPressのAPIから”自作のソフト”に記事データを抜き出して、そのデータを元にHTMLファイルを作成する。
    • 作成したHTMLファイル郡をBサーバーにアップする。(これでサイトが公開されたことになる)
  • アクセスするユーザー:
    • Bサーバーに対して「この記事ちょうだい」とお願いする

という感じの流れになります。

Jamstackの仕組み(簡易版)

▲Jamstackでサイトを管理する場合。ややこしいです。

上の図は簡略化していて

実際には以下のような流れで運用されると思います。

Jamstackの仕組み

▲実際にJamstackの運用で使われると思われる仕組み。ややこしい。

こういう感じで

  • WordPressからデータを提供する部分:API
  • HTMLの部分:Markup
  • HTMLから必要に応じて動的にコンテンツを取得したりする部分:JavaScript

みたいな感じで運用する形をJamstackと呼ぶらしいです。

データはAPIで提供されているので、他の媒体(例えばスマホアプリ)からもデータを取得できたりもします。

 

あと、ここではWordpressとしていますが、実際にはWordpressでなくて他のCMSでもいいですし、なんだったらCMSじゃなくて自作のAPIとかでも良いっぽいです。

なんだったら「自前でサーバーを用意してCMSをインストールする」みたいなことをしなくても

  • microCMS
  • Contentful

のようなSaasなCMSもあります。

 

 

 

おわり

 

関連Jamstack・Wordpress・静的化Wordpressのメリット・デメリット

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました