jamstackを学ぶその1
はじめに
最近改めてJamstackを学ぶ機会があったので調べていました。 ちょっとだけ理解してきたので、Jamstackの特徴やそれを支える仕組みをまとめます
Jamstackとは
JamstackのJamはJavaScript/APIs/Markupの頭文字です
JavaScriptでAPIをたたいてMarkupを配信することを意味しています
これだけ見るとSPAなど単なるWebアプリのようですね
Jamstackの特徴としてパフォーマンスの高さとセキュリティの高さがうたわれています
Jamstack
Jamstackは静的なコンテンツを配信するだけなので高速です
静的なコンテンツだけなのでCDNから配信することで更に最適化を図れます
更に静的なコンテンツの配信しかしないためサーバの管理なども不要となりセキュリティ面での考慮事項もぐっと軽減するわけです
どうゆうときに使う
Jamstackはブログの閲覧サービスやコーポレートサイトの作成に向いているとよく紹介されます
Jamstackでよく使われるサービス
ヘッドレスCMS
まずは、何かしらの手段で記事の投稿のようなデータの登録作業をして、そのデータをAPIで公開する必要があります
自前で投稿システムを構築してもいいのですが、ここでピッタリのサービスがヘッドレスCMSです
ヘッドレスCMSはサービス上で自由に入力フォームを作成し、そのフォームからデータの登録ができます
ブログ記事であればタイトルと本文のフィールドを持ったフォームを作成するといった感じ
そのフォームから登録したデータをAPIとして公開するところまでヘッドレスCMSはやってくれます
代表的なサービスとしてContentfulやmicroCMSがあります
microCMSは日本で作られていることもあり日本語対応がされていたり、非エンジニアが投稿作業を行うような想定もして作られているので今後楽しみなサービスです
静的サイトジェネレーター
次は、HTMLを生成するライブラリが必要になってきます
ここで重要なのがビルド時にAPIをたたいてそのデータを取り込める必要があります
そういった機能を備えた静的サイトジェネレーターが必要になってくるわけですね
代表的なものとしてはReactベースのGatsbyやNext.js、VueベースのNuxtやGridsomeなどがあります
最後に、生成した静的コンテンツを配信できるサービスが必要になります
代表的なサービスとしてはNetlifyやNow、Firebase Hostingといったところでしょうか
これらのサービスのいいところは無料枠でもそれなりに使えるというところです
まとめ
閲覧専用でユーザごとにコンテンツの出し分けがないようなアプリは一番はまります
そうでない場合でも部分的な適用もありだと思います
ReactやVueベースのライブラリを使っていればJavaScriptによる処理もいつも通り書けるので
提供したいサービスの性質に応じて最適解を探していくといいと思います
Jamstackの特徴にして強みであるところは静的コンテンツを配信するだけでよいというところです
ビルド時にデータを取得し埋め込むことで外部データを取り込み可能にし、データ更新の都度ビルドデプロイすることで最新の状態を保つことができます
ユーザとの接点が静的コンテンツへのアクセスだけになるためパフォーマンスの高速化やセキュリティ面のリスク軽減につながるというわけです
これらを実現するためのサービスやライブラリもラインナップが揃っていることもありJamstackが流行っているということですね
Discussion