JAMstack
~新しい静的サイト開発のかたち~
2018/10/26 Creators Apartment vol.01
須藤 善達
Profile
- 須藤 善達（ストウ ヨシノブ）
- 八戸市在住
- フリーランスWebエンジニア
- 主にWeb制作
今日話すこと
・JAMstackとは？
・静的サイトと動的サイトの違い
・最新のサイト制作の風潮
※技術について詳しくは話しません。
サイト制作に深く関わっていない人にも雰囲気が伝わることが今日のゴールです。
JAMstackとは？
JAMstackとは？
「静的サイトを作る技術」です。
🤔
静的サイトと動的サイト
静的サイト
静的サイト
HTML、CSS、JavaScriptをファイルに
記述してサーバーに配置する。
静的サイト表示の流れ
阿部寛のサイト
見よう
HTMLを返す
静的サイトのメリット
・表示が早い。
・サイト制作の難易度は高くない。
静的サイトのデメリット
・更新が手作業なので面倒。
動的サイト
動的サイト
リクエストに応じてサーバーが
HTMLを動的に組み立てる。
代表例：
動的サイト表示の流れ
ブックセンター
のサイト見よう
HTMLを返す
・URLから表示する内容を決定
・DBから情報を取得
・HTMLを生成する
動的サイトのメリット
・更新がしやすい。
動的サイトのデメリット
・表示が遅い。
・サーバーの知識が必要。
最近のサイト制作の風潮
早さは正義！！
・ブラウザの機能の強化
・多様なホスティングサービスの出現
・JavaScriptの機能の強化
・PWAなどフロント技術の多様化
・強力なフロントエンドフレームワークの出現
新たな制作スタイルの出現
JAMstack
改めて、JAMstackとは何か？
JAMstack
JavaScript
Api
Markup
「静的サイトを作る技術」です。
「動的なデータから、
静的サイトを作る技術」です。
もうちょっと詳しく
JAMstackの構成例
CDN
静的コンテンツ
動的コンテンツはAPI経由
デプロイ
開発者
エディター
JAMstackのメリット
・表示速度が早い
・SEOに強い
・維持費が安い
・スケーラビリティが高い
JAMstackのデメリット
・来年には廃れる可能性もある
・お客さんへの説明の難しさ
・評価されずらい
今後もJAMstackやフロントエンドの
最新技術を広める活動をしていきます
ありがとうございました！
JAMstack概要
By Yoshinobu Suto
