JAMスタックとは何か
JAMスタックの公式サイトによると、ビルドが自動か手動か、もしくはフレームワークがNext, Gatsby, Hugoどの種類でも共通しているのはサーバーに依存しないということであると説明されています。ではではJAMの頭文字について説明していきます。
Javascript
上記で「サーバーに依存」しないため、メイン使用することになるのはフロントエンドで大活躍しているJavascriptです。Angular, React, Vueなどのフレームワークやライブラリを使用したものももちろん含まれます。
API
全てのサーバーサイドの処理やデータベースアクションは再利用可能なAPIとして抽象化されており、JavaScriptによるHTTPS経由でアクセスされます。
Markup
デプロイ時に静的サイトの生成ツールやアプリケーションのビルドツールによって事前にビルドされていなければい。
JAMスタックを始めるのは難しいか？
これまで技術構成を表す用語として下記のようなものがありました。
- MEANスタック(MongoDB + Express + Angular + Node.js)
- MERNスタック(MongoDB + Express + React + Node.js)
- LAMP(Linux + Apache + MySQL + PHP)
プログラミングを始めたばかりの入門者が上記のような技術を全て学ぼうとすると、習得にかなりのコストと時間がかかるので、JAMスタックも同様に難しいと思ったのですが、実際に触ってみると、簡単に開発ができ、しかも高パフォーマンスなアプリケーションができてしまうので、エンジニアの転職を考えているかたや、ブログやコーポレートサイトを作ってみたいが「Wordpressか...」なんて思っているかたにかなりマッチするのではないでしょうか。
何から始める？
Javascriptフレームワーク御三家のAngular, React, Vue.jsに対応する静的サイトジェネレータがそれぞれあるので、下記の3つのうちどれかから入るといいと思います。上記3つもそうですが、それぞれの長所、短所があるので、業務で使っているものや実際に書いてみて楽しいものを選ぶのがいいと思います。
1. Scully
GDEのAaron Frostさんらのチームによって開発されたフレームワークです。Angularのサービスや、コンポーネント、モジュールといった概念も使用できるようです。 次に紹介するGatsbyやGridsomeなどの静的サイトジェネレータの人気の高まりを受けて、昨年終わり頃に公開となったため、日本語情報はもちろん、関連記事の絶対数がかなり少ないですが、今後期待が高まるフレームワークだと思います。
2. Gatsby
Reactベースの背的サイトジェネレータです。私はまだ使ったことがないのですが、上で紹介したScullyと次に紹介するGridsomeが、まだまだ日本語の記事やドキュメントが少ないのに対して、わりと記事が充実しているイメージです。
Reactを使い慣れたかたはもちろんですが、3大フレームワークの使用経験がなく、今から静的サイトジェネレータを使いたい人にとってもマッチするのではないかと思います。
3. Gridsome
Vueベースの静的サイトジェネレータです。Page, リンク, コンポーネントなどほぼ全てがVueコンポーネントとなっています。データのやりとりはGraphQLでおこなわれるため、とっつきにくそうに思いますが、一度学んでしまえば素早く開発ができてしまいます。
多くの部分でGatsbyに似ていますが、公式サイトもGatsbyそっくりで、かなりリスペクトがあるみたいです。
日本ではVue.jsやNuxt.jsの採用事例が急激に増えている中で、Gridsomeを使用して手軽にサーバーレスなサイトを作る事例も多くなるのではと思います。
ちなみに私の個人ブログもGridsomeを使用して作成しましたが、かなり早く開発できしていて気持ち良かったです！
まとめ
- まずはJAMスタックから初めてみよう！
- 自分にあったフレームワークを選んでみよう!
- 入門者にもおすすめ。