JAMstack を調べている

4 min readOct 8, 2018

JAMstack という概念を知ったのはつい先日。すごく雑にいうとだだの静的サイトジェネレーター。それに名前をつけたのは偉い。

そもそもは GatsbyJS と Netlify が便利そうという所から調べ始めていた。

GatsbyJS

いろいろなデータソースから GraphQL を使って情報を引っ張ってきて React 使ってマッピングして静的サイトを生成するツール。

何が便利って gatsby-cli を使って gatsby コマンドでいろいろさくっと試せてしまうところ。自分の周りは React な人が多いのもあり、大変好感触。

ReactJS のサイトはこの GatsbyJS が使われてる。他にもいろいろあるので https://www.gatsbyjs.org/showcase/ を見ると良い。

JSON データから GraphQL を使ってデータを引っ張ってきて React でマッピングしたコードを書けばあとは gatsby build を打てば静的サイトが生成されるといった具合。

GitHub などにコードをプッシュすると自動でビルドして自動でデプロイして自動で CDN においてくれる素敵サービス。GatsbyJS と相性が大変良い。GatsbyJS でサイト作ったら GitHub にプッシュすると、あとは勝手にビルドしてデプロイしてくれるという仕組み。

HTTPS (Let’s Encrypt) も完備、カスタムドメインにも対応、これが無料の範囲でできる。

そしてブランチベースで別サイトをデプロイとかもサクッとできる。ステージングを悩まず実現できて、さらに有料版であればパスワードもかけられる。

なぜ GatsbyJS+ Netlify なのかというと、自社製品サイトや自社サイトをメンテナンスフリーにしたいという思いと、新しい技術は使っておきたいというのもある。

今はサーバは Vultr を使い、Nginx と Let’s Encrypt 、Python/Django で作っている。GitHub にプッシュすると CircleCI と Ansible でデプロイ。キャッシュや CDN などは一切使っていない。

まずはこの辺を GatsbyJS + Netlify に書き換えてしまいたい。最近 React がかけるデザイナーを捕まえたこともあり、色々チャレンジしてみたい。

実際自社製品サイトは定期な更新と改善が必要だと思っている。製品がアップデートするに合わせて色々やっていきたい。React であれば動的なサイトも実現可能になる。

GastbyJS のいいところは JS ベースで静的サイトでも色々できるというところ。例えば WebRTC の機能などを組み込むのも可能になる。つまり、やりたい放題できる。

更新情報を YAML 化してしまったりしたい。テキストと表示を分離するというのはやりたかったことの一つでもある。製品の特徴を markdown で書いたら、綺麗なデザインがあたり、静的サイトとして自動で公開、ステージングもさくっといく。最高ではないだろうか。

今は一通り試してみて、これは行ける。と判断したところなのであとはこんなことがやりたいをまとめて、丸投げするつもりだ。

www.netlifycms.org

Netlify ではなんと CMS を用意している。静的サイトに対する CMS、よくわからない。ただ GatsbyJS にも対応している。動的に JSON データを生成するという仕組みなんだと思うがまだ調べられていないので調べようと思う。

使っていきたいと思う。