Jamstackとは？
近年のJavaScript開発の中で、注目を集めている技術。
Jamstack(ジャムスタック)
JavaScript、API、Markupの略語でもある、新しい技術分野Jamstack。
今回は、Jamstackには一体どういうメリットがあり、どんな仕組みで動くのかを深掘りする。
このブログもJamstack
現在ご覧いただいているブログに選定した技術スタックもJamstackの仕様で開発している。
動作の具合などを実際に体感していただきたい。
当ブログの技術構成
NEXT.js
Vercel
目次
Jamstackが選ばれる理由とは？
近年の大規模なeコマースサイト、SaaSアプリケーション、個人ブログなどにはJamstackの技術が用いられるようになった。
安易に、最先端やオシャレだから取り入れている訳では無い。それだけだと開発者は疲弊するだろう。
開発手法から維持コスト、閲覧利用するエンドユーザーに対して多大なる恩恵をもたらすからだ。
Jamstackのメリット
Jamstackを取り入れるメリットは大きく4つ
- 高性能
- 高セキュリティ
- 低コストかつスケーリングが簡単
- 開発者体験の向上
それぞれのメリットについて詳しく見ていこう。
高性能
昔ながらのWebサイトは、クライアント側の閲覧できる状態になるまで時間がかかっていた。
従来のサイト
クライアント
↕︎
Webサーバー
↕︎
アプリケーションサーバー
↕︎
データベースやCMS
ページが表示されても中身はビルドしなければ見れないままということ。
次にJamstackのサイトだと以下のようになる。
クライアント
↕︎
CDNやマイクロWebサービス
CDNを介して提供されるビルド済みファイルに勝るものはないということだ。
2つしかないシンプルな構造にも関わらず、従来の主流技術を大きく覆す状態になっている。
高セキュリティ
サーバー側のプロセスがマイクロサービスAPIに抽象化されることで、攻撃の表面積が減少。専門のサードパーティサービスの専門知識を活用することできる。
低コストかつスケーリングが簡単
普及段階の技術であるため、低コストで開発者は利用・運用することができる。デプロイ先の多くは、すべてのプランにスケーリングが含まれている。
※デプロイとは？
Webサービス・アプリケーションなどを一般ユーザーに見える・使える状態にすること。簡単に言えばアップロードして公開する。(多くの場合は定義が曖昧)
※スケーリングとは？
スケーリングは増減させるといった意味。エンジニア界隈での使われ方は、サーバーを自動的に増強する時などに用いられる。
SNSでバズったりすると、多くのユーザーがWebサイトなどに訪れてサーバーダウンし、見れなくなったりする。そこで、スケーリングさせることで、多くのユーザーが来ても処理を捌けるようになる。
逆も然りで、ユーザー数が少ない時は低コストで運用できるようにサーバー台数を減らすことも可能だ。
開発者体験の向上
いわゆる疎結合な開発が行えるため、タスクの切り分けが簡単。
今まで、MVCモデルのLaravelやRails、PHP製のワードプレスなどのCMSであれば、一つの大きなシステムに膨れ上がり、デプロイ先特有のエラーが発生したりと柔軟な選択肢は生まれなかった。
Jamstackであればデプロイ先の選択肢が広がり、コスト調整などに長けていると言える。
さらに、コンテンツとマーケティングのために別個のスタックを維持する必要が無い。
Jamstackのデメリット
Jamstackは多くのメリットがある反面、どうしても拭えないデメリットが存在する。
開発コストが非常に高い
今までのCMSやブログシステムは、ほとんどプログラミングを学んだことが無い者でも大丈夫なように進化してきた。
しかし、Jamstackを取り入れた場合、多くは海外ドキュメントを読みながら開発をしなければならない。
つまり、全く開発をした事ない人からすれば、通常翻訳できない単語を解読しながら実装するのは辛い。そこで、専門のエンジニアが必要になってくる…
ShibaEmonでは、Jamstackに関する技術を用いて、最高のパフォーマンスを発揮するWebサービスを開発することも可能だ。
技術が固まらない
幸いにも、Jamstack技術が少しずつ世の中に浸透してきたおかげで、公式ドキュメントさえ読めれば、Hello Worldはシンプルに行えるようになった。
ただし、ここにも罠が潜んでいて、ある程度JavaScriptの記述方法や解読、Reactの仕様などを理解しておかなければ、何をどうしたら良いか手詰まりになる。
また、導入が主流になりつつあるTypeScriptの理解・使用についても学習コストが発生しているなど、Jamstack界隈の進化は止まらない。
枯れた技術の方が安心するという場合は向いていないだろう。
逆に捉えれば、成長分野であるため、挑戦し新たなユーザー体験を生み出したいチャレンジ精神を持てば好機だ。
ブラウザに対応しない可能性を持つ
開発時に、多くの便利で新しいプラグインを取り込みがちになるが、それには危険も伴う。
例えば、Google Chromeでは動作しているのに、Safariだと動かないという現象もある。
これに関しては、技術力+αで綿密な環境テストが必要ということでもある。
モダンな開発を突き詰めるあまり、過去のレガシーシステムには対応できないという側面もあるので、そこは丁寧に実直に作っていく必要がある。
Jamstack開発元
Jamstackに関しては、現在多くのベンチャー企業が集い開発を盛んに行なっている。
Jamstackとして定義されたのは2016年ごろで、Netrifyの創設者Matt Biilmann氏が提唱している。
以下、数多くのOSSや企業が開発に携わっている。
Netlify
Netlify (=ネトリファイ)
Netlifyはサンフランシスコをベースとするクラウドコンピューティングの企業
React
React (=リアクト)
Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリ
Vue
Vue (=ビュー)
Vueは、Evan Youが制作したWebアプリケーションにおけるユーザーインターフェイスを構築するためのオープンソースJavaScriptフレームワーク
HUGO
HUGO (=ヒューゴ)
Goで記述された静的サイトジェネレーター Steve Franciaによって2013年に開発開始
NEXT.js
NEXT.js (=ネクストジェイエス)
Next.jsは、Node.js上に構築されたオープンソース開発フレームワーク
Angular
Angular (=アンギュラー)
Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワーク
Gatsuby
Gatsuby (=ギャツビー)
Reactベースの静的サイトジェネレーター
11ty
11ty (=イレブンティー)
Node.js製の静的サイトジェネレーター
まとめ
Jamstackが未体験という方は、是非触れて欲しい。
開発手法を習得できれば、疎結合な仕組みと高機能で便利な開発体験の虜になる。
