SPAの具はGraphCMSにおまかせ

2018年のお勉強のテーマを年末から考えていた。ひとまず決めたメインテーマはSPA。自分の理解ではWebサーバーからHTML+CSS+JSをパッケージングしたもの(Single Page)をブラウザにダウンロードして、その後は殆どWebサーバーの助けなしにDOMを自在に書き換えて画面遷移するAppなのだが、2012年頃から流行りだしたみたいで最新の技術ではない。言い換えれば公開サーバーにはPHPもRubyも不要で静的コンテンツを高速に配布するCDNも使えるというお話。

かなり前からWebアプリをJSだけで作りたいという願望がありそれにはSPAがぴったりだと直感。（以前はNode.jsをちょっとかじって、NodeベースのフルスタックフレームワークのMeteorに巡り会った時は「すげー」と感心したのだがMeteorはちょっと手が込みすぎているのとサーバーのMongoDBとクライアントのキャッシュを同期させるという重装備なので大規模なデータ処理ができるのかという不安がありかじりっぱなしで終わっていた。）

データの保存が殆ど不要（あるいは少量をlocalStorageに保存）な具のないスパゲッティのようなSPAなら簡単にできそうだが、実用的な具のあるアプリならDBが必要だ。しかしブラウザのJSからアクセスするのだからクライアントにドライバをインストールするわけにいかず、必然的にHTTP経由のAPIとなる。となれば従来ならばRESTしかなかったのだがここで登場するのが2016年以降人気急上昇のGraphQLだ。

RESTとGraphQLの比較はここにある日本語のスライドがわかりやすい。後はGraphQLサーバーをどうするかだがそれには今流行りのHeadless CMSサービスのGraphCMSが良さそうだ。このサイトでも「 We build a headless CMS for your content creators」と宣伝しているが要するにFirebaseのようなBaaSからデータベース機能だけ切り出したようなサービスだ。もちろんSQLベースのDBでなく、JSからのアクセスを想定してJSON形式のコンテンツを扱うサービスでそのAPIもGraphQLの方がしっくりくるわけだ。同様のHeadless CMSとしてはContentfulが実績があるようだがここはGraphQLが標準装備ではないみたいで、その比較がGraphCMSのブログに説明してある。

サービスを運営するのはGraphCMS社で有償のサービス提供もあるが、個人で試すにはサイズが1GBで2ユーザーの無料版で十分。早速登録して使ってみると実に簡単。スキーマ定義もコンテンツ登録もわかりやすいGUIで全然headlessではない。モデル用のフィールドタイプもAsset(イメージや動画のURL)、ロケーション、Color、リレーション、JSONオブジェクトまであるので大抵のものはぶち込める。早い話個人のデータベースならこの管理用画面で十分使える。インフラとなる クラウドのロケーションもアジアを含む3カ所から選べるし、Enterprise版はオンプレミスのクラウドにもインストール出来る。ドキュメントやサンプルも充実していてReactやVueをフロントに使うためのチュートリアルもある。残念ながらご多分にもれず本家サイトは英語だしまだまだ日本語情報は少ないがとにかく触っていてワクワクするサービスに久々に巡り会ったので思わず超久々にブログを投稿してしまった。