私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。

また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。

特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。

そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。

なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。

開発体験最高だよ

フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。

ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。

ホスティングは迷うならNetlify一択

firebase, Amplifyなどがあるけど迷うならNetlifyで良い。

デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。

ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな？？やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。

ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。

これはゆくゆくは解決されるのではと思っているけど・・・。

webhookでSlackに通知は怠るな

デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし

NetlifyへのデプロイをSlackに通知する | Unselfish Meme

【Netlify】Forms機能を利用して問い合わせフォームを作成する - Qiita

2021/01/14 追記
どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。

アカウント持っている方はホスティングしたサイトを選択 > Site settings > Build & Deploy > ページ下部のDeploy notifications > Add notification で確認した方が良い。
notificationができるのであれば下記のように選べるようになっている。



もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。

Netlify Pricing and Plans

microCMSを選ぶべし

microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い

日本語だし、UIも日本人にわかりやすく受け入れられやすい

microCMS | APIベースの日本製ヘッドレスCMS

プレビュー機能は絶対入れとけ

どのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか？」

そんなに難しいことをせずに実装できるので絶対に入れるべし

`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。

microCMSとNuxtでプレビュー画面を作成する

記事更新などでデプロイが走るようにするのを忘れるべからず

APIのエンドポイントごとの設定なので注意すべし

これやっておかないと「記事更新したのにサイトに反映されてないんですけど！」と連絡来てしまう。

Webhook機能がパワーアップしました

lighthouseで満点狙うべし

私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る

基本的にはlighthouseで採点 > 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。

hanford/next-offline: make your Next.js application work offline using service workers via Google's workbox

あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。

画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。

Jamstackの泣きどころ

これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。
graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い！！！)

https://graphcms.com/docs/environments#environment-endpoints

## 個人的に今後やっていきたいこと

今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。

• storybookを入れて別ドメインにデプロイして共有するようにしたい
• reviewdog の導入（TSのチェックをPR作成時などでチェックするようにしたい）
• ガイドラインなどのドキュメント作成