最近注目を集め始めている “JAMstack”、より良いパフォーマンス、より高いセキュリティ、より安価で簡単なスケーリング、より良質な開発者エクスペリエンスを提供するアーキテクチャ。
Riotz.works でも注目しており、実際に活用しています。今回は、この JAMstack を Riotz.works でどのように使っているかをご紹介します。
Riotz.works 公式ウェブサイト
公式ウェブサイトのトップページhttps://riotz.works、Works ページ、Engineers ページがGridsomeで JAMstack なサイト作りをしています。
Gridsomeは 2019年1月現在バージョン 0.4.5 で速いペースで開発が行われておりますが、必要な機能が未実装だったり、実行環境によってはさまざまな準備や設定が必要だったりします。
StaticGenでは 30位あたりになります。
数あるサイト・ジェネレーターからGridsomeを選んだのは、まずは Node.js で作られていること念頭に置きました。
これは Riotz.works では Node.js、主に TypeScript で開発を行っているため、スキルセットや開発環境を合わせたかったのがあります。
続いてVue.jsベースであることを選びました。
こちらも開発がVue.jsベースで行っているので合わせたかったものになります。
そうすると、比較的メジャーと思われるGatsbyJSやHexoなどが落ちてしまいます。
GatsbyJSは非常に興味深いのですが、いつかは使ってみたいと思っていますが、今回はVue.jsベースとしました。
選択肢としてはNuxt.js、VuePress、Gridsome、VueWebsite になります。
Nuxt.jsはアプリ作成で使っていますが、ウェブサイトやブログ構築よりアプリ向けに感じます。
そうなるとVue.js公式であるVuePressが最有力になりそうです。
もうひとつのGridsomも調べたところ、“highly inspired by Gatsby.js”とあり、またVue.jsベースであることが、まさに私たちの考えと一致するものでした。
そしてデータソースを GraphQL で扱えるところが魅力的です。
入力ソースは基本的に Markdown を使いたいと考えていますが、エンジニアによっては CMS を使いたいケースもあるでしょう。このような複数のソースを GraphQL で扱えるのが助かります。
このような経緯から Riotz.works 公式ウェブサイトはGridsomで構築することにしました。
ただし、これまでの開発経緯から Articles と Slides はGridsomとは異なる技術を使っています。
リンクを踏むとヘッダーが異なるのはこのためです。Gridsomへ意向を考えてはいますが、なかなか着手できてない状況です。。
Riotz.works Articles ページ
Articlesページは、Hexoで作られた JAMstack なサイトです。
この Articles こそGridsomが活用できる場所ではあるのですが、Gridsomが登場する以前にHexoで作ったものになり、いずれはGridsomへ移行したいと考えてはいますが、Gridsomはまだ初期開発中で Category や Tags などのページを自前で作る必要があり、作りこみができてないです。（いずれ公式でサポートされるとは思うので待ちたいのもあり。。）
HexoはStaticGenでもトップ５に入る人気のサイト・ジェネレーターです。
記事は Markdown で書けるので、エンジニア・フレンドリーといえるのではないでしょうか。
一方で表現力は落ちてしまう点がありますが、最後は HTML を直接書いて埋め込めるので、どうしても Markdown で表現しきれない部分は HTML でカバーできます。（あまりやりたくないので奥の手という感じですが）
ブログサイトをとても手軽に作ることができ、テーマも多数用意されているので好みのデザインにすることも簡単ですし、各種 Plugin もあるので簡単に拡張することもできます。
日本語の情報も多いので、比較的簡単にやりたいことや、困りごとを解決できます。
JAMstack なブログサイトをつくり始めるには、よい入口と言えるでしょう。
Riotz.works Slides ページ
[Slides](https://riotz.works/slides/ページは、静的サイトではありますが完全に手組の HTML で、”構築済みの HTML” とはなっておらず、アクセスを受けてから JavaScript で HTML を構築しているので JAMstack なサイトではありません。
こちらは、Markdown ファイルをソースとしたプレゼンスライドを作れるremark.jsを使っています。
仕組みとしては事前に用意された Markdown ファイルを、スライド形式の HTML に変換して表示なので、JAMstack とは相性が良く、JAMstack なスライドシステムがあったら使いたいと考えています。
Markdown からスライドを作るライブラリとしてはreveal.jsとremark.jsぐらいで、どちらも事前構築の HTML には対応しておらず、現時点では現状のままか、時間を作って自前開発をしたいところです。
JAMstack なスライドシステムがあったら使いたいと考えていますが、現時点ではなさそうなので、しばらくは現状のままでしょう。
スライドシステムについては時間を作って自前開発にチャレンジしたいとも思っています。
ソースは Markdown で書きたいのがありますし、カジュアルな勉強会ではリアルタイムなフィードバック機能を動かしてみたいなど、いろいろとやってみたいことがあります。
ラップ、タップ、アップ 🎶
最後にハッカソンで作ったラップ、タップ、アップ 🎶ですが、こちらも JAMstack なアプリです。
技術としてはNuxt.jsを使っていて SPA で静的サイトとして生成、ホスティングしています。（SSR、サーバサイドレンダリングにすると JAMstack ではなくなります）
これにより基本的な画面は “構築済みの HTML” となり、CDN に配置した際のメリットを出せます。
ラップ対戦のルーム作成はクライアントサイドのJavaScript から Web API を呼出しています。
また動画の中継と配信も JavaScript のライブラリからサービスを呼び出しています。
ハッカソンの 24時間という限られた時間の中で、フロントエンドとサーバサイドを分離し HTML をツールを使って生成する JAMstack のアーキテクチャがまさに活かせた瞬間といえるのではないでしょうか。
サーバサイドの機能が Web API 形式で提供されているため、ロジックの変更や UI の変更といったものが相互に依存せず最小限の修正で組み込みできました。
JAMstack は公式ウェブサイトのような完全な静的サイトのほか、ブログやアナウンスなどのニュースといった緩やかな更新が発生するサイト、そしてアプリといったさまざまなサイトが実現でき、Riotz.works の中でも多様な使い方をしています。
とくにラップ、タップ、アップ 🎶のような、サイト・ジェネレーターで静的ホスティングなサイトを作っていて、Web API を呼び出しているようなケースは意外とあったりするのではないでしょうか。
実は JAMstack なサイトを作っていたけど、JAMstack のキーワードが知られてなく、そんな名前がついていたんだというケースがいろいろありそうです。（実はラップ、タップ、アップ 🎶作成時点では JAMstack の言葉は知らなかったです）
ただ、これだけ JAMstack な サイトと書いてきましたが 実はホスティングが GitHub Pages で、JAMstack ベスト プラクティスの CDN に 乗ってなかったりも。。
これまでの経緯から GitHub Pages を使ってて、またカスタムドメインを使っているほか、４サイト（リポジトリ）がのっかっているので一斉に引っ越しする必要があり、作業時間を作るのに苦慮しているためです。