知らないキーワードについて調べてみる(Jamstack、Next.js、Gatby.js、Nuxt.js、TypeScript)

フロントエンドの実装から離れて久しく、Twitterで何となく聞いたことはあるけど…という言葉が増えてきたので時間をとって調べてみました。

Jamstack

Jamstackは従来のようにリクエストの度にコンテンツを生成するのではなく、JavaScriptとAPIを使用して事前にHTMLを生成しておき、リクエストがあった際は生成済みのHTMLを返却するのみとすることで高速な表示を実現できる方法のことです。 また、HTMLを事前に生成することによりCDNに乗せることが可能になるため、地域問わず高速に配信することが可能になります。

Jamstack自体が何かの製品名なわけでもなく、特定の技術の名前でもなく、考え方や方針に近いため、Jamstackを実現する方法は数多くあり、一応上記のように理解をしてみたものの、今ひとつふんわりしています。

Next.js

Reactベースのフレームワーク。 SSG(静的サイト生成)とSSR(サーバサイドレンダリング)に対応している。 ReactにWebサイトを作る上での機能をセットにパッケージのようなもの、と理解している。

Gatby.js

Reactベースのフレームワーク。
SSG(静的サイト生成)に対応している。 テーマやプラグインが充実しており決まったもの(ブログとか)をとても早く作ることができる。

Nuxt.js

Vue.jsベースのフレームワーク。 SSG(静的サイト生成)とSSR(サーバサイドレンダリング)に対応している。 Vue.jsにWebサイトを作る上での機能をセットにパッケージのようなもの、と理解している。

microCMS + Next.jsでJamstackブログを作ってみよう

Netlify / Vercel

どちらもコンテンツのビルドとホストを行ってくれるサービス。 他にもFirebaseなどがある。

VercelとNetlifyの違いが分からなかったので実際に比べてみた。 - Qiita

TypeScript

TypeScriptはMicrosoftが開発したJavaScriptを拡張して作られたプログラミング言語です。TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。JavaScriptには無いデータ型が明示できることが最大の強み。明示できることによって人の手で書く中で発生するミスを軽減できる。自作で関数を作った際の引数、戻り値の型の明示、APIの戻り値の型の明示などが行えることで複数人で開発を行う際に便利。