🎉

「三つのいいこと」作ってみた

2023/06/17に公開

Next.js

初めに

初めての投稿です。自分の中で期待通りのゴールに近づけたので記念に残しておきます。自分用の忘備録も兼ねているので、雑多な記録になっています。

Next.js、Vercel、Supabase を使って、3GoodThings についての記録簿を作ってみた。
Web でも可能、スマホでも可能、ログイン機能ありの感じです。

どんなサイトか？

「3GoodThings」は自分最適化へのいい手法だと思っています。ただ、自分にとって使いやすい「ツール」がない・・・・「入力」は会社・自宅間往復時に、電車中などにスマホで行う。家にいるときは、スマホでなく、デスクトップでやって方が、入力コストが低い。過去の情報の振り替えりのとききは、過去のデータを多く見れるようにしたい。どちらでも気持ちよく触れる状態が望ましい今まで触ったことがない技術セットにも興味があったので手を出した次第。
このツール利用できるまでは、Notion などで利用しました。やはり専用ツールの方が便利ということで現在は乗り換えています。

画面遷移

記録

今日の日付に記録を登録します。
名前の通り、３件がいいのですが、タイミング次第なので、上限はなしです。

ログアウト機能

画面の左上のメニューアイコンをクリックするとドロワーメニューが表示され、ログアウトが可能。クリックして、ログアウトした後はトップ画面に遷移します。

どんなフレームワーク・ライブラリーが使われているか？

React ＋ Next.js
https://nextjs.org/
Supabase・RDP・User
https://supabase.com/
RDB へのアクセス、ユーザー新規作成、登録、パスワード変更のパターン利用
Tailwindcss
https://tailwindcss.com/
CSS 頑張りたくないので、今のはやりでシンプルなものを選択
headerlessUI
https://headlessui.com/
できるだけ UI 部分で頑張りたくない。ある機能を使うべしということで採用
モーダル、ポップアップなども容易に利用可能でした。

どんな環境か？

Vercel
https://vercel.com/
NextJS と相性良さそうなので・・・
GitHub に Commit すれば、公開されるのはお手軽すぎ・・・
Vercel でビルド失敗するケースもありますが、ローカルで YarnBuild が通ればほぼ通るのかな？
Supabase・RDP・User
RDB 使いたかったのと、個人認証の機能もお手軽に使えそうだったので選択。

参考させていただいたサイト

やってみた結果

このパターンはそこまで難易度は高くない印象あり。不明な点あれば、Net 上で情報雄々しい学習コストもそこまで高くない。ランニングコスト、初期費用も不要で手間など含めても、コストに見合うもの作れたと思います（自分用ですが・・）
「容易に作れる」「容易に公開できる」ということ学びました

Bard？ChagGPT？
- おもに、Bard への問い合わせが主です。GPT も使いますが、８：２ぐらいで ChagtGPT から（Genesis の Bard 版心待ちにしてます）
- Net 上で、検索しなくても、オリジナルのエラーメッセージ、ソースの一部貼り付けたら推測でも答えもらえるのはありがたい。

この実装パターンは「楽」だと思います。

今後

Notion は優秀なので GTD 使えないかと四苦八苦している最中ですが、自分に最適な GTD いっそのこと作れたら幸せなだなと施行中。
AtomicDesign どこまでやるかは要検討。やりすぎると沼な気がする。
Auth0 を利用するかは要検討

総括

２か月ぐらいかかったかな・・・そこまで難しくなくできるので、各々のサービスが容易になってる印象が強い。
目的として自分自身心地よく使える仕組みを作成するということが目的なので、それには答えていると思います。
AWS,GAE など検討してきましたが、手順が煩雑で、コストもある程度必要という結論だったので、かなえられずに今まで来ました・・・
GitHub ＋ Vercel ＋ supabase の組み合わせが非常に容易で期待通りのコストで作りたいもの作れた印象あるので、自分がいいと思うツールは自分で作るというスタンスは今後もありだと思う。

初めに