JAMstack な静的サイトジェネレーター（Static Site Generator）を試してみたかったので、雑記を書くためのサイトを作ってみました。（JAMstackってなによ？ という方はこちら）
その名も「R note」。このブログ「Rriver」のノートという意味です。
いまのところ、主にGatsbyJSを使ったサイト制作についてメモを書き残しています。あと、このブログでは書かないような小ネタとか、その瞬間思ったことを、勢いにまかせてちょこちょこメモっていこうと思います。
GatsbyJS
GatsbyはReactベースの静的サイトジェネレーターで、Reactで作ったテンプレートを静的なHTMLに書き出してくれるツールです。Reactの勉強にももってこいです。似たツールにJekyll 、Hexo 、Hugo 、Nuxt などがあります。他にもまだまだたくさん あます。
Gatsbyを選んだ理由は、以下の4つが大きかったです。
- ReactベースなのでReactの勉強にもなる
- データソースを選ばない（Markdownファイル、WordPress、Contentfulなど、ファイルでもAPIでも、柔軟にデータを引っ張ってくる仕組みが整っています）
- Gatsby自体の開発がアクティブ（最近バージョン2が出ましたし、出資も受けた とか）
- ドキュメントとチュートリアルが充実していて、しかもわかりやすい。チュートリアルは一通りやれば仕組みや作り方が理解できます。
Airtable
コンテンツはAirtableというサービスを使って管理しています。Airtableに入力したコンテンツがGatsbyを経由して静的HTMLに書き出されます。Airtableは「チームでオンラインで便利にデータを管理しよう！」というサービスで、APIが用意されていてGatsbyで容易にデータにアクセスできるようになっています。
似たようなサービスにはFirebase 、Contentful 、GraphCMS などがあります。FirebaseはAirtableとNetlifyを合わせたようなサービスですかね？Googleがやってるサービスで、なんか強そう（何が？）ですね。Kayacさんが「徹底比較！Firebase vs Netlify (2018年版) – KAYAC engineers’ blog 」という比較記事を出してます。今後、Firebaseあたりを突っついてみたいと思います。強そうなんで。
Airtableを選んだ理由は2つありました。
1. UIがわかりやすい
Contentfulも試したのですが、Airtableの方がUIが一般向けでフレンドリーでした。Airtable使いやすいです。Contentfulは、もっと技術者寄りな感じです。雑記サイトなので、サクッと書いてサクッと公開したいので、シンプルでわかりやすいのを重視しました。
2. マルチプラットフォームでアプリが用意されている
Mac、iOS、Android、Windows向けにアプリが用意されていて便利です。ウェブアプリもしっかりしてるんですが、モバイルだと若干使いづらかったり、アプリの方がサクサク動いたり優勢な面もあるのでありがたいです。いつでもどこでも手軽に雑記をつけたいので、ここは意外と大きい要因になりました。
あと、今後誰かのためにGatsbyサイトを作ることを考えて、コンテンツ管理の快適さも意識してみました。他の誰かに使ってもらう場合には特に大切です。Airtableではデータのインポートも簡単にできました。
Netlify
Netlifyのサーバ上でコマンドを走らせてサイトを構築（build）してデプロイ（deploy）、ホスト（serve）するというのを自動化してくれるサービスです。基本的にはGithubなどと連携して、リポジトリに変更をプッシュするとサイトをデプロイしてくれます。
「静的サイトのホスティングサービス」と説明されていることが多いですが、それだとちょっと説明が足りないような？Netlifyのウェブサイトには「プラットフォーム」と書いてあるんですけど、それも漠然としていてなんだかわからないですしね。説明の難しいサービスですw
似たサービスはHeroku あたりですかね？ビルドとデプロイだけならDeployHQ とかBuddy というサービスも見かけました。あと、Firebaseもありますね。Netflixは違いますw
さいごに
ということで、GatsbyJS + Airtable + NetlifyでJAMstackでモダンな雑記サイトを作ったことのご紹介でした。この辺のツールやサービスについては、それぞれについてもう少し掘り下げて整理して、このブログでも書いていければと思っています。
サーバがなくてもツールやサービスを柔軟に組み合わせて、データを引っ張ってきてウェブサイトを作れるって、すごい便利な時代ですね。JAMstackは、すごく柔軟で自由な感じが気に入りました。条件や状況に合わせてツールやサービスを選んで、より最適なソリューションが構築できそうです。
昔はデータベースにはODBC経由でしか接続できなかったんですけどね（たぶんウソw）
最後にもう一度、雑記サイトの宣伝。「R note」の方もよろしくお願いします。
では、Let’s enjoy JAMstacking!
2018年12月17日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。