This is my daily life log.
Next.js, Typescript, NotionでJamstackな個人ブログを開発しました。
この記事 is なに？
タイトルに有る通り、振り返りの意味も込めて、ブログの開発過程を書いていきます。いままで、Mediumで英語のみでテキストベースの情報発信をしてきましたが、下記の理由からブログを作ろうと思い、開発をスタートさせました。13個も作る理由があると、4週間ぐらいはモチベーションが続くみたいですね。このブログの仕組みについての詳細は、こちらの記事をご覧ください。
目次は、以下の通りです。
✔ なぜつくった？
✔ なにをつくった？
✔ どうつくった？
✔ なにがどうなった？
✔ つぎ、なにをつくりたい？
なぜつくった？
- Mediumで公開した記事の検索がしずらかった。たまに執筆中のレンダリングにもたつきがある。
- Mediumで日本語記事かくのは抵抗があった。
- いままで日本語での情報発信は避けてきたが、そろそろ、日本語でも情報発信はじめてもいいんじゃないか。
- 次の職場の仕事が始まるまでの間で時間ができた。
- 次の職場で広く浅くの知識が求められそうだった。
- 今まで以上に、WEB業界のエンジニアの働き方が全体の業務内容内訳のうちエンジニアリングコミットの割合と同じ、もしくはそれ以上の割合のコミュニケーションコミットが求められるようになってきたので言語化の練習大事。(と個人的に思っている)
- 時間と気持ちに余裕があるときに自分が食わず嫌いしていた技術に手をだしておきたかった。
- テクニカルタームの言語化の練習場所がほしかった。
- フロントエンド技術とTypescriptの練習ができるサンドボックス的な場所がほしかった。
- いくらデータ系界隈のエンジニアだからと言っても、JS周りのモダンな技術スタックについてちょっとちょっとわかる程度は知っておかないとヤバいでしょ、という気持ちがずっとあった。
- 日頃、まとめていたノートを自分のブログで公開する場所がほしかった。
- 年齢のせいかわからないが、いざ話そうとおもったときに忘れてて言葉にでてこなくなってきた。トークスクリプト代わりにも使いたい。
- 昔の文章をみて振り返りをしたい。SNSでも振り返りができるが、写真がメイン。
- Mediumだとちょっと堅苦しいのとちゃんとしたやつ書かないといけないみたいな圧を感じる。もっとライトにサクッと書きたい。スマホで移動中とかに書きたい。
なにをつくった？
このブログです。とはいっても今回作るのは、昔からみんなが勉強がてらにつくるCRUDアプリケーションのごく普通のBlogなので、WEB上にはサンプルリソースがたくさん転がっています。アプリケーションコードやデザインの実装は、既にheadless cms各社提供のデモコードや先人の方々のリポジトリやら記事で勉強させて頂きながら作りました。
要件
- ライトに日本語でも英語でもかけるブログ → notion databaseを各言語ごとにつくった。⭐
- なるべく、システムの保守運用のみならず記事そのものメンテも最小限にしたい。→ notionとvercelを採用することで達成。⭐
- お金は、かけたくない。→ notionとvercelを採用することで達成。⭐
- スマホからでも書きやすい。→ notionのスマホアプリからかける。⭐
- view数とか諸々の数値周りはモニタリングしておきたい → GA4実装。⭐
- 余計な機能やデザイン、画面は、不要でなるべくシンプルで早くて安くてさくっと投稿できるブログ → SSGベースの実装とvercelとnotionで達成。⭐
設計
抽象化したざっくりとした設計は、こんな感じです。普通のJamstackな感じの設計です。
参考になったリポジトリとドキュメント
- Contenful社のデモ用リポジトリ
- Datocms社のデモ用リポジトリ
- Datocms社の公式ドキュメント - API reference
- Notion blogのサンプルリポジトリ maintained by ijik
- Notion社の公式ドキュメント - API reference
- Nextjs公式ドキュメント
- Tailwindの公式ドキュメント
- Tailblocks.cc
- Building a blog with Notions public API | Samuel Kraft
- (その他にもありますが数が多いので省略)
どうつくった？
(他の人はどうかわからないですが)時間とお金は、有限だと私は思っているので限られた時間と限られたリソース内でできる限りいいモノを開発しきる(*手段は問わないが長期視点でのメリット・デメリットも考慮する)、を日頃意識しています。そのため、開発期間と開発過程、技術選定について、今回の開発全体の振り返りの意味を込めて書いておきます。
■開発期間
およそ4週間(1/20 - 2/20)：
- 一日平均2時間から5時間ぐらい。もちろん、全くやっていない日もある。
- 5h * 28 day = 140h
- 毎日、5時間もできていないと思うので少なく見積もって120時間ぐらい、つまり15人日から20人日ぐらい。＊開発時間のみならず、学習時間も含む
■開発過程
1周目(1/20 - 1/31)：
- 初手、りきみすぎてコーラーこぼして個人PC壊す。レンタルしてNextjsのローカル開発環境つくる。
- javascript, gatsby, contentful, styled compornents, github pageで途中までブログ開発
- 仕事もあってそんな時間をかけていない
- contentfulのslackチャンネルで質問しまくり
- contentfulを断念
2周目(2/1 - 2/6)：
- javascript, gatsby, datocms, styled compornents, gatsby cloudで途中までブログ開発
- 毎日病院行っててそんなに時間かけていない
- datocmsのコミュニティのQAボードで質問しまくり
3週目(2/7 - 2/13)：
- javascript, gatsby, datocms, styled compornents, gatsby cloudで途中までブログ開発
- 毎日、不動産見に行っててそんなに時間かけていない
- datocmsのコミュニティのQAボードで質問しまくり
- gatsbyで躓く、断念
4週目(2/14 - 2/20)：
- javascript nextjs, datocms, tailwind, vercelで途中までブログ開発
- 本気だし始めた。
- notionがヘッドレスCMSに代替できそうなことに気づいた。
- typescript, nextjs, notion, css modules, vercelでブログ開発
- 「React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発」と「実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義」をざっと3時間ぐらい読んでマーカーひいた。
■技術選定
フロントエンド周りの技術のキャッチアップは、全くできていなかったので色んなものをひたすら触っていきながら、選択していきました。下記には、調査してきた技術を書いていきます。
言語：
Javascript
理由：Javescript途中まで利用していたが、本来のTypesciptを勉強したい、という目的があったので途中から型をつけはじめた。
Typescript → 採用⭐
理由：いうまでもない。
アプリケーションサーバー ：
Nodejs → 採用⭐
理由：いうまでもない
フレームワーク：
理由：一言でいうと、ブラックボックスと対面し、躓いてしまった。それをきっかけに次のやめる言い訳を考え始めた。GatsbyはStatic Site Generator(静的サイトジェネレーター)に特化しておりReactをベースに開発されているフレームワークだが、他のレンダリングの実装もしたいと思うようになった。また、Gatsbyではデータを取得する際にはGraphQLを利用することが多いのですが、ORMやSQL慣れしている私には、GraphQLは辛く感じた。
Next.js → 採用⭐
理由：上のGatsbyやめた主な理由をきっかけとし、同じReactベースの新しいフレームワークって考えたらNextjs一択になった。また、勉強目的の開発なので英語での情報量を重要視して採用。
ホスティングサービス：
ホスティングサービスの技術調査には、なるべく時間を使いたくなかったのと、個人ブログ開発用途では大した差分はないと思ったので、言語との相性とオペレーションが直感的でわかりやすそうなものを選んだ。
理由：定番だが、いまいち何が特別で何がすごいのか、わからんかったので特に選ばなかった。プラクティスやドキュメントは多いので使う上で困ることはなさそう。
理由：個人ブログ開発の範疇を超えたら、コスパがよさそうだったが今回は、不採用。
理由：これもよかったが、Gatsbyを使わなくなったので使うのやめた。
理由：記事をGithubで管理するとなるとスマホから記事書きづらい。
Vercel → 採用⭐
理由：デプロイしてホスティングするのに時間をなるべく使いたくなかったため、Next.jsの開発元であり、一番オペレーションが簡単だったので選んだ。
DNS / ドメイン：
Google Domains→ 採用⭐
理由：Google CloudはつかっていたのでもともとGoogleのサービスに慣れている。お値段も普通で検索性の体験が他のよりよかった。
理由：迷惑メールたくさん来る。Whoisお金かかる。SSLお金かかる。二年目以降お金かかる。
理由：安いし、よさそうだったが、ドメインのオペレーションにも時間を使いたくなかったので自分が慣れているGoogle Domainを選んだ。
理由：ちゃんとしてそう。そんなに調べていない。
ヘッドレスCMS：
理由：日本語と英語で記事をかくときに、同じ投稿画面が縦に2つ並ぶのがライティングエクスペリエンスに影響あり。私は、どうしても気になってしまった。
理由：私の中では、一番よいと感じた。コミュニティもすぐ返事がくるし、多言語対応ばっちりだし、データモデリングも簡単にできるが、notionのテーブルで情報管理できるUXには勝てなかったという感じ。歴史もあり、デモコードもソリッドな感じでちゃん書かれていて、かつプロダクト自体が有名な各企業にも使われており、25000以上のユースケースもあるので、信頼と安心ができそうだった。
理由：スタートアップで勢いある感じがひしひしと伝わって使い心地も悪くなかった。一方でデモコードとかみても人数少なめで急いで書いていてる感じがして、これからなんだなーという印象もありつつ、プラクティスやドキュメントもまだWEB上になかったので、私の本職がフロントエンドエンジニアでプライベートプロジェクトで使うとしたら、採用していた。
Notion API → 採用⭐
理由：ヘッドドレスCMSではないが、十分ヘッドレスCMSになる。notionつかっていた。そのままかいていたのを移動して、取得しにいけばいいだけ。しかも、オフラインでも書きっぱにしておくことができるし、スマホでもアプリでさくっとかける。要件を満たす以上のいいところがある。色々書ききれない理由はたくさんある。notion自体がそもそも便利。
なにがどうなった？
Mediumと比較して記事投稿がどう便利になったかという振り返りは、これから使ってみてどう感じるか次第なので、自分がどれだけ成長できたかに焦点を当てます。
開発始める前のわたし
- お仕事の経験では、データとPythonとGoogle Cloud、K8Sと戯れてきて、API開発やインフラ開発が大半でなにか描画するならstremlitか、タブローか、Redashか、matplotlibかという感じでした。使ったとしてもJinja2をつかうぐらい。
- 世代がばれてしまいそうですが、大学学部の授業でjQuery、HTML4、CSSで簡易な静的サイト書いたレベル。HTML5もなければReactもまだ存在しない時代。
- 新卒一年目時代にクライアントPCのUAからシステム環境対応判定スクリプト書いたレベル
- 基本的にECMAScript2015前の知識。つまり、2015年以降は触ってこなかった。
- Nextjs、Nuxtjsかー、聞いたことあるなー、ちょっと公式チュートリアルを目にいれたことあるというレベル。
- 1週間ぐらいで作れると思っていた。2/5にリリースしようとおもっていた。
開発が終わった後のわたし
- Fluxアーキテクチャ、コンポーネント志向について書籍読んで理解した。
- Reactのディレクトリ構成パターンについて理解した。
- SSG、SSR、CSR、ISRについて理解した。ブログの記事が上手く反映されてない問題のデバックで理解した。
- ブラウザ / クロームの仕組みの復習ができた。
- Headless CMS全般について実際に時間つかって使ってみたのでよしあしが理解できた。
- javascript, React, nodejs, Nextjsの実装は、した。まだ、身についたとはいっていない。
- jamstackのエコシステムについて理解。
- CSS modules, Styled Compornents, Tailwindowを一通りみようみまねで実装は、した。もうやりたくない。
- ES2015以後のJSとNextjsの書き方に見慣れた。
わたしの振り返り
- 一番時間かかって苦労したのが、レンダリング周りとCSS。レンダリングについては、時間かけてよかったが、CSSに関しては時間かけるべきではなかった。
- 普段からnotionを使っていたにもかかわらず、notionをheadless cmsとして使うアイデアがなかった、情報にたどりつけなかった。一方であらゆるheadless cmsに右往左往しなければ、notionをheadless cmsとしてつかう良さにもきづけなかった。
- 今の自分が、ほぼ白紙のような分野をゼロからキャッチアップするのにどれぐらいの時間かかる、計測できたのはよかった。
- ホスティングサービスやheadless cmsの仕組み、フロントエンドのアーキテクチャ、ブラウジング / レンダリングの仕組み、については、興味を持てたが、デザイン周りは、相変わらず年取ってもあんまり興味持てないことがわかった。Tailwindowは、いい。
- TypescriptとNext.jsは、時間と慣れの問題。お金貰えるレベルには、あと1,2ヶ月間ぐらい戯れ時間が必要。
- 今後、全くの経験や知見がないプロジェクトの場合、ワーストシナリオとして、学習時間含めて準備からリリースまでの見積もりで、直感見積もりの4倍の期間と2倍の工数感を想定しておいたほうがいい。
- 所感として、JS周り、フロントエンド周り、はパッケージやらフレームマークやら想定していた以上に種類が多く感じた。色々使い方を知る必要があり、一気に色んなゲームの取り扱い説明書を読んでる気分だった。ただ、自分の食わず嫌いが原因だとも思う。一方で、脳内にインデックスを貼ることに成功はしたので、今後のキャッチアップは爆速になる。
- バックエンド、フロントエンド、インフラ、機械学習、データ分析以外の食わず嫌いな分野で、自分がどれくらいのスピードで学習するかは、計測してみたい。次やるならWeb3系かエッジ系あたり。技術以外で言うと、水泳とサーフィンあたりか。
- 日本語での情報に関して、具体性がなくふわっとした説明や間違った理解のもと書かれてる情報がわりと多く散見された。これは、DS/ML系も同じ印象で、エンジニアリングのライト層が手を付けやすい分野には共通するものだなと。ブラウザとnodejsとReactの仕組みの理解が抜け落ちてるとふわっとした知識になるという所感。
- 学習のコアになるのは、モチベーション。開発前に10個以上洗い出しておくことで、「それって本当に必要なんだっけ」っていうのを事前に洗い出せる。そして、以外と10個以上でないもん。
つぎ、なにをつくりたい？
- Notion APIは、引き続きアップデートがあり次第、組み込んでいく。
- 音声や動画での情報発信やり始めたら画面追加
- View数が増えてきたらPWA対応
- 記事が溜まってきたら記事の簡易なレコメンド機能の追加
- Notion APIがもっと充実してきたらダッシュボード画面の追加 ex) 日々の湿度の可視化, oura ringのapiを利用して睡眠時間の可視化, 体重と体脂肪の可視化