Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

JamstackなWebサイトを作ってみる vol.1~Jamstackとは~

Webサイト制作

本記事の対象者

・Jamstackって何?
・どんなメリットがあるの?
・WordPress以外でもWebサイトを作ってみたい
こんな方向けです。

この記事を書いた僕は、このサイトをJamstack構成で制作しました。

流行っているようなのでとりあえず手を出してみたのですが、
いろいろメリットが多かったので、JamstackなWebサイトの作り方をシリーズで紹介していきます。

第一弾として、Jamstackの概要をまとめてみます。

Jamstackとは

Webサイト(サービス)の構築の方法を指します。
(J:JavaScript、 A:APIs、M:MarkUp、stack:構成)
文字通り、JavaScriptとAPIとマークアップ言語を用いた構築方法のことです。

これだけだと、ただの静的サイトでは?と思うかもしれませんが、
一般的に、ブログやニュース入稿といった動的機能を持ち合わせたサイトをこの方法で構築することをJamstackと指すことが多いようです。

「動的サイトをJavaScriptとAPIとマークアップ言語のみで構築。」
特徴を一言で言うとこんな感じです。

まだよく分からないかもしれませんので、Jamstackの対比となるものを紹介します。
Jamstackと対比されるのが、Lampstackというサイト構築方法です。
(L:Linux、A:Apache、M:MySQL、P:PHP)

文字通りこの4つを用いた構築方法ですが、短かな具体例がWordPressで作ったサイトです。
サーバーに上記のLAMPを置いて動的サイトを構築するのがLAMPstackです。

語源について

Jamstackは、静的サイトホスティングサービスNetlifyのCEO、Mathias Biilmann氏が提唱した言葉だそうです。(定かではありません)
Lampstackという言葉は元々存在し、それと対比する形で名付けられたようです。

Jamstackの公式ページが存在します。
”構築方法”を指す言葉なので定義が厳密では無いのですが、少なくとも公式に書かれていることは確かでしょう。

Jamstackで作ったサイトは何が違うの?

Jamstackで構築すると、サイトの全ページを予めHTMLに変換し、保管できます。

例えば、100個の投稿記事を持ったブログサイトをJamstackで構築すると、
100個のHTMLファイルを事前に生成しておき、ユーザーからアクセスがあったらそのHTMLファイルを返すだけ。という動作ができます。

LampstackであるWordPressの場合、ユーザーからアクセスがあるとデータベースにアクセスし所定の記事データを取得、PHPでHTMLファイルを生成して返すという動的処理が入りますが、これらの処理が必要なくなるのがJamstackです。

メリットとデメリット

メリット

  • サーバーには静的ファイル群を保管するだけなので、ユーザリクエストに対して静的ファイルをそのまま返すので表示が高速
  • サーバー側の処理をAPIを用いて外部と切り離すことで高いセキュリティ性を確保できる(ヘッドレスCMSの利用等)
  • フロントエンドとバックエンドが分離されるため、フロントの開発自由度が高い
  • シングルファイルコンポーネントでWeb制作ができる


とりあえず、ページ移動が超高速です。CDNからHTMLを読むだけなので、0.1秒以下ですw
本ページに上部にメニューバーを試しにいじってみてください。一瞬で移動します。
個人的にはこれだけでも使う価値ありです。

個人的には4つ目のシングルファイルコンポーネントでのサイト制作もかなり魅力的で、
1つのファイル内にHTMLとCSSとJavaScsriptを一気に書けます。
CSSもそのファイル外の要素には影響しないようにできるので、命名を簡素化できます。
例えばヘッダーで1つのコンポーネントファイルを作って、使い回すといった感じパズル式にサイトを組み立てることができます。



デメリット

  • Web制作初心者には学習コストが高め
  • コンテンツ入稿が必要な場合、ヘッドレスCMSの知識が必要
  • ビルド(静的ファイルの生成)が面倒&時間がかかる


学習コストですが、WordPressがまだまだ主流なので、情報量がWordPressほど多くありません。
静的HTML群を生成するためのツール(静的サイトジェネレータ)としてNuxt.jsやReact.jsといったJavaScriptのフレームワークが必要(というか無いと厳しい)で、やはりまだWordPressほど情報が多くなく、時には海外のサイトから情報を取らないといけないこともあります。

また、Jamstackサイトに入稿機能をつける場合、通常ヘッドレスCMSを用います。ヘッドレスCMSの説明はこちら。

API型、Saas型など言い方はあるかもしれませんが、
ヘッドレスCMSの特徴は、管理画面から入稿すると、APIで入稿データをJSONで返してくれる物です。
JavaScrptでのAPI処理の仕方を学ぶ必要があります。
(こういったところを、今回のシリーズで紹介していきます。)

またビルドという処理ですが、Nuxt等で作ったプロジェクトファイル群を静的ファイルに変換する処理のことです。
この処理に1回40〜50秒かかります。
ローカル環境で作業する場合はリアルタイムで処理してくれるので問題ではありませんが、
静的ファイルの保管先との相性で表示が崩れたりということもあるので、何度もビルド処理をして時間がかかるというところが少し大変です。

今後Jamstackが主流になるかも

私はそんな気がしています。

この開発方法は割と近代的で、Webアプリケーションにも用いられているようです。
Web制作ではローカルで開発してFTPでアップというのが主流だったりしますが、
Web制作分野にもこういったモダン手法が徐々に浸透していくかも、ですね。


このシリーズでは、Jamstackに関連する技術(SPA、SSR、SSG)といった内容や、
Jamstackサイトを実際に作っていく過程を紹介していきます。

構成は、
静的サイトジェネレータはNuxt.js、
ヘッドレスCMSにはmicroCMS、
静的サイトホスティングサービスにはNetlifyを用いていきます。

これらは、最近注目されている構成ですので、お見逃しなく。

それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ