Wordpressって無駄に高機能なので重たいからもっと軽くて、 最低限の機能だけ持ったブログシステムを作りたいなと考えてて色々調べていると JAMstackという考え方が最近流行っていると知りました。

で、そのJAMstackってなんなの？って思って色々調べたので 個人的にわかりやすくまとめてみました。

JAMstackとは

完結にわかりやすく自分の為に書き残しておきます。

JAMstackとはアーキテクチャの名前になります。

って感じの頭文字を取ったものになります。 stackはそれが積み重なってるイメージだと思います。（たぶん）

結局の所なにをするものなのかというと、事前にデータを埋め込んだ静的HTMLに対して JavaScriptでAPIを叩いて動的コンテンツを扱うWebアプリだそうです。

リアルタイムで変動するタイプのコンテンツでなければデータは変化しないので 一度更新したら変化が無いようなブログやWebサイトなんかが恩恵を受けられそうな感じがします。

Wordpressとかとは何が違うのか

サーバーサイドの基本としてはアクセスした時には「index.php」というファイルそのもので そのファイルの中に書かれている処理をみて、サーバー側が自分の持っている他のソースコードやDBからデータを集めてきて 現在利用しているテーマを元に、表示部分を生成して返すという仕組みなのはご存知かと思われます。

JAMstackはそうではなく既に必要なデータなどを呼び出して形成したあとのファイルを読み込むので 余計な生成処理などが発生せずにシンプルに形成済みのHTMLデータを返すだけなので高速に表示されるわけです。

Wordpressだと土台がPHPなのでデータ送受信するときはサーバーに問い合わせて データを返すという流れになるのですが、JAMstackの場合はデータ取ってくる必要性がある場合は ローカルでJavaScriptが動いてそこに組み込まれている処理からAPIを叩いてデータ取るという仕組みになります。

最近の回線速度だとそこまで気にならない速度だと思うのですが、 積もりに積もっていくと合計時間は圧倒的にサーバーサイドCMSの方が長くなります。

メリット

JAMstackのメリットとしては以下のものが挙げられます。

先程もサーバーサイドCMSと比較のときにパフォーマンスが良いのはわかっていただけたと思います。

次にセキュリティが高いというのは、基本的にユーザーが触る部分は静的htmlになるので サイトを改ざんしたところで他の人にもサーバー側にも影響はないわけです。

APIは用意されたものしかないので攻撃対象をかなり減らせることに繋がります。

次に開発がシンプルになるのは単純にフロントとバックを完全に切り分けられるので フロントしかできない。サーバーしかできないという人にそれぞれ作業を割り当てたりしやすくなります。

サーバー側はフロントから貰ったデータをもとにDBに書き込んで値を返すのがメインになってくるので API作りと内部側の処理に集中することができ、ブラウザ等の差異に惑わされなくシンプルに処理を作ることができます。

フロント側はAPIに対して送るデータと返ってきた時のデータが明確になっているため フロントの処理に集中できるわけですね（設計がちゃんとしてる場合に限る）

CDNについて

CDNとはコンテンツデリバリーネットワークの略でおそらく自然とjqueryとかライブラリ、CSSフレームワークなど 気付かぬうちに使ってる人も多いのではないでしょうか。

CDNを利用して事前ビルドしたファイルを配信すれば送信時間を減らすことが出来ます。

正直このあたりに関しては実際にやってみてどれぐらいCDNの恩恵を受けられるかやらないとよくわかんないですね。

やろうと思えば開発者はgitにソースをpushするだけで後はgit側とホスティング（firestore等）と連携しておき 更新があったら自動ビルドをするようにすればサイトの更新ができてしまうというわけです。

デメリット

メリットはパフォーマンスが色んな面で良いということで デメリットとしては以下のことがあげられるようです。

ようはリアルタイムの変更を要するゲームとか動画サイトには向かないですね。

あくまで静的サイトなのでブログとかリアルタイムじゃないSNSとか会社のサイトとか 落ち着いてみられるようなサイトに適しているというわけです。

こうしてみるとWordpressでいいんじゃない？ってなりそうですね。

正直私もWordpressで事足りているならそれでいいと思います。

私は一応エンジニアとして生きているわけですから新しい技術に可能性を見出したいのと 単純にWordpressに飽きてなおかつWordpressの編集画面をほとんど使っていないため JAMstackという手法で作るやり方のほうが理想だなと感じました。

準備が必要なのでとりあえずNuxt.jsを学ぶ

今回はJAMstackという概念を学びたかっただけなのでここまでになります。

後はJAMStackの静的サイトジェネレーターとしてよく使われているのが

となっています。

NuxtはVueベースで後の2つはReactベースのフレームワークとなっています。

個人的に案件でNuxt.jsを使うことが多くなりそうなので 今後はNuxt.jsをメインに学んでいこうかなと思っています。

一応ラズパイ4と合わせて入門もしたことがあるので、 その学習過程を記事にしていきます。

いい感じになってきたらVPSサーバーなどを借りて公開していけたらいいなって感じですね。

とりあえずローカルでラズパイサーバーがあるのでそこで検証をしていくつもりです。

1つずつ強くなっていきましょう。

それでは。