MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
JAMstackってなに?もやもやするのでJAMstackについて調べてみた。

JAMstackってなに?もやもやするのでJAMstackについて調べてみた。

公開日:2021年03月08日
最終更新日:2021年03月08日
オンスタ運営
テクノロジー
プログラミング
ホーム > 全記事一覧 > 制作 > ディレクター > JAMstackってなに?もやもやするのでJAMstackについて調べてみた。

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
JAMstackってなに?もやもやするのでJAMstackについて調べてみた。
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!ゴリラ転生組のケイジャニスト山田です!
さて、今回はJAMstackとはなにか?というJAMstackそのもののご紹介と、その特徴、メリットデメリットについて紹介したいと思います!

それではいってみよ〜!

JAMstack 概要

JAMstackとはなんでしょうか?ここではJAMstackの概要を簡潔に紹介したいと思います。

JAMstackをざっくり

『JAMstack』という単語ですが、いろいろ調べていくとホスティングを提供している『Netlify創業者』のMatt Biilmann氏が提唱した言葉だそうです。

JAMstackなWebサイトの肝はサーバーに依存しないスタティックなサイトが対象です。
逆にJAMstackではないサイトとは以下のようなものを指します。

  1. サーバーでページを生成する(WordPressなど)
  2. サーバーサイドで生成されるWebアプリ

サーバーサイドで生成されるものは全て該当しません。
JAMstackとは後述の『JavaScript、APIs、Markup』で作られたスタティックなサイトで、動的コンテンツはすべてJavaScriptを通じ、API経由で取得する形のものを指します。

JAM = 『JavaScript、APIs、Markup』

その意味合いを理解するには単語の理解から入るといいかもしれません。JAMの略称は『JavaScript, API, Markup』の頭文字をとってJAMとなります。
『stack』ですが『LAMPスタック』や『MEANスタック』という単語に触れたことがある方なら、理解が早いかもしれません。
stackはシステム構成という意味ですが、要するに『JavaScrip、API、Markupで作るシステム構成』と考えると掴みやすいかもしれません。

JAMstackでのJavaScript

完全にクライアント上で稼働するJavaScriptであればvue.jsでもReact.jsでもいずれもOKです。

JAMstackでのAPIs

サーバーサイドでの処理やCRUDなどは、JavaScriptでAPI経由で行います。CDN提供等でも構いません。JAMstackを名乗るのであればサーバーサイドで処理しないということが肝です。

JAMstackでのMarkup

Pugや静的ジェネレーター等も含まれますが、ポイントはそれらを使ってビルドされた後のファイル、htmlファイルであることが重要です。JAMstackを名乗る上での肝は『スタティックなhtmlがビルドされている状態で公開されている』必要があります。

ヘッドレスCMSとJAMstack

先ほど動的コンテンツはAPI経由で取得すると書きましたが、コンテンツを動的に更新する場合はどうすればいいでしょう?

回答としては何かしらの手段で、例えばWordPressの投稿のようなデータを用意し、そのデータをAPIとして公開、公開されたAPIではjson等で配信しておいて、表示側のJavaScriptでAPIエンドポイントを叩いて取得するといったような枠組みが必要です。

当然、自前で作成するとなるとかなりの時間をそれだけで要します。
そこで、最近出現したのが『ヘッドレスCMS』です。

著名なヘッドレスCMSは以下です。

  1. Contentful
  2. microCMS

上記2つのヘッドレスCMSの解説は省略しますが、ヘッドレスCMSとは簡単にいうと、先ほど回答で紹介した枠組みを提供してくれるサービスで、サービス上で自由にフォームを作成しデータを登録することができるのですが、そのサービス上で作成したフォームからデータを登録してそのままAPIとして公開してくれるステキなサービスです。

JAMstackにおいて動的なコンテンツはなんらかAPI経由で用意する必要がありますので、ページの部位に関して、動的に更新するものが必要であればこのヘッドレスCMSを利用するのは手段となるでしょう。

上記2つであればmicroCMSは国産ですので取り入れやすいかもしれません。

JAMstack 特徴

JAMstackの概要は前述の通りです。JAMstackの解説を要約すると『スタティックなサイトで、動的コンテンツはJavaScriptを通じてAPI経由で取得していること。サーバーサイドではなにも行わないこと』となります。

このJAMstackで作られたサイトとそうでないサイトとではどのような違いがあるのでしょうか。違いは以下のような形であると言えます。

表示スピードが早い

まずは何と言ってもこれです。スタティックとは静的と言う意味ですが、htmlファイルだけで、サーバーサイドで生成処理等を行いません。よって表示速度が速くなります。

セキュア

セキュリティ面でも効果があります。なぜなら静的サイトであるため、セキュリティ面もある程度担保することが可能です。

他にもありますが、少なくとも上記二点は該当すると思います。

その他

ではデメリットはなんでしょう?以下のようなことが挙げられます。

  • まだ日が浅く、知見が溜まっていないためトラブルシュートやカスタマイズ幅は担当エンジニア次第である
  • 公開時サーバーレスな場合がほとんどなため、思わぬところでハマる。もしくは対応しきれない場合がある。
  • 要件で閲覧環境はモダンブラウザ以外だと利用が難しい


などが挙げられます。
また、WordPressなどのCMSのように、知見が結晶化された管理画面等がないため、コンテンツの更新を行うような管理画面を作る場合、1から作る/もしくはある程度が整備されたプラグイン等を探して導入を検討する必要があります。

あとは前述のヘッドレスCMSと呼ばれるスモールなCMSを導入する形ですが、microCMSやContentfulなど著名なサービスもあるものの、サービス自体も若いため。できること、できないことの仕分けは作成前によく検討しておく必要があるでしょう。

まとめ

ここまでJAMstackについて解説してきました。まずは自分のブログなど、スモールな形で導入して知見をためながら取り入れていくといいかもですね!

以上、ケイジャニストでした〜!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2022年01月17日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
[JavaScript_中級者への道]  プロトタイプについて – [2] クラスを定義して呼び出す
プログラミング
公開日: 2020年02月18日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] プロトタイプについて – [2] クラスを定義して呼び出す
  • # ES6
  • # JavaScript
  • # クラス
  • # プロトタイプ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
テクノロジー
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
requestAnimationFrameの基本的な書き方と使用例を学んでみた。
テクノロジー
プログラミング
公開日: 2021年06月30日
最終更新日: 2021年06月30日
requestAnimationFrameの基本的な書き方と使用例を学んでみた。
d.kitahama

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
テクノロジー
公開日: 2018年02月09日
最終更新日: 2018年02月09日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2022年01月17日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2022年01月17日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
プログラミング
マークアップ
公開日: 2017年10月20日
最終更新日: 2017年10月20日
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
テクノロジー
公開日: 2018年04月07日
最終更新日: 2018年04月07日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
WordPress
システム
テクノロジー
デザイン
公開日: 2020年06月29日
最終更新日: 2022年01月17日
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
  • # .htaccess
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。