年末なので
最近気になっていたサービス・ライブラリを使ってサイトを作成・公開しました。
2営業日分くらいの稼働で作ったので、めっちゃ凄いサイトは作っていません。一覧をフィルタできるシンプルなものを作成しました。
色々触って全部おもしろかったので紹介と感想を書きます！！
今回試したサービス・ライブラリは以下の記事 のパクリ に影響をめちゃくちゃ受けています。
（この記事よりこっち見た方が良いかも）
GitHub Copilot in VS Code
VScodeにCopilotがFreePlanありで統合されました！！！
cursorは気になっていたんですが、移行だなんだめんどくさく、様子を見ていたんですがVsCode公式がうごいてくれました！
大きく2つの使い方を利用しました。
1つ目は普通にチャット。
便利なのが、デフォルトで今見ているファイルを参照してくれる点です。
AIに投げる時にいろいろコピペして・・・という今までのストレスから解放され、しょっちゅう相談できるようになりました！
2つ目の機能がサジェスト機能。
これヤバいです。ほんとに
上記画像のようにコードをサジェストしてくれるのですが、怖いくらい精度が高いです。
こういう処理書くか～って少し書き出すと、あれこれリアルタイムにサジェストしてくれます。
我々にできることはただ従うことだけです。ささやき女将 を思い出しました。
これまでのVSCodeとAIとを行ったり来たり・コードのコピペで報連相、といった体験が全てひっくり返りました。おもろすぎる。
とはいえ、AIのコードをはいよろこんでと100%信頼するのはアレなので、今回はTDDで実装しました。
テストなどのガードレールを用いて、AI産コードと上手く付き合いたいです。
Nextjs
Reactのおにいちゃん、Nextjsです。
パスベースのルーティングや、強力なキャッシング、サーバサイドでのレンダリングなど多数の機能を持つフレームワークです。
複雑な仕様もあることから、今回のケースや、簡単なアプリ・POCだと明らかにオーバーテクノロジーですが、過去やったことを思い出す意味も含めて復習しました。
API層との通信はサーバサイドで行うことでエンドポイントを隠しつつ、その情報を埋め込んだhtmlをフロントに返却する、みたいな処理を書いたんですが、楽しかったです。
React SPA構成だとどうしてもAPIエンドポイントが露出してしまうので、その不安から解放されるのが良かったです。
また、後述する V0, Vercel といったサービスがデフォルトとしてこのNextjsの使用を想定しているので、その意味でも使用しました！
Vercel
無料で使えるCI/CDサービスです。語弊あったらごめんなさい。
Githubと連携することで、gitへのpushをトリガーに自動でCI/CDが走ります。
AWSだとAmplifyでも同じようなことができるのですが、色々違いがあります。
Amplifyはビルド環境の準備に1分くらい待たされるところ、Vercelは一瞬でビルドが始まり、びっくりしました。
あとは今回使いこなせていないですが、ログやモニタリングなど、全体的に見やすく、レスポンスが速くて良いです。
（Amplifyは他サービスとの高速連携が売りなので、比較は良くないかも。。。）
Biomejs
LintとPrettierが合体して、更に早くなって帰ってきました！！！
なんで合体してその上速くなるんだ？
あんまり語ることがないけど、早いだけでもう快適で楽しかったです。
速さは正義。Vercelが高速でデプロイしてくれるのもあって、commitやpushも早くしたかったです。重いLintから卒業！
shadcn/ui
なんかかっこいいUI！デザイナーさんもこれ使ってくれないかな～。
後述するデザインAIのv0がデフォルトで出力するUIコンポーネントです。
UIコンポーネントライブラリではないのが特徴です。
node_modules配下にUIコンポーネントが置かれるのではなく、src配下にコピペして持ってくる、という利用方法になります。
あくまで公式の書いたコードをコピペして利用するだけ、という使用感です。
嬉しさはいろいろあります！
- コピペしたソースを使うので、細かくいじれる
- tailwindなので記述が楽
- v0がこれ使うから使っておこう
- デフォルトでかっこいい。素人はとりあえず従っておくと丸い
v0
無茶ぶりやコードベースの会話を振って良いAIデザイナー！！！
上述したNextjs, shadcn/uiベースで良い感じのデザインを出力してくれる、それらに特化したAIです。
GptやClaudeよりもセンスある気がします。しっかり鍛えられてます。
デザインできる人に無茶ぶりしたり、コードの話をしたりするのは全エンジニアの夢だと思うのですが、結構かなって楽しい！！
良いんだか悪いんだか分からない思想ですが、AIは良い意味で人間ではないのが良いですね。デザイナーさんとの仕事、ムズイ
今回は試してないですが、Vercel社のサービスなので、VercelのCI/CDと高速で統合できそうな雰囲気のボタンがありました。
hono
型補完最高！！
みんな大好きhonoに入門しました。
honoは簡単にAPIをデザインすることができる良い感じのライブラリです。今回は機能少ないので活かせなかったんですが、事前の調査で感動しながら使ってたことを覚えています。
分かりやすいRoute定義！
APIへのリクエストやその形式が型補完される！
これヤバない？
あと、validation追加したら、型補完の聞く範囲で事前に叱ってくれるようになりました。凄すぎて笑いました
もう今後バックエンド作るならこれで行きたい。これでええわ
supabase Database
タダ？のDB！！！
supabaseというBaaSの、タダでpostgresqlを使わせてくれるサービスです。
自分は普段AWS上でいろいろ遊んでいるんですが、RDBを用意しづらい問題がありました。
VPC必要・高価・作成時間長い・DynamoDBは要件あわない、などなど・・・。
supabase Databaseだと、この問題を解決しつつ、タダで簡単にDBが用意できてめっちゃ感動しました！！
あと、TypeScriptにも対応してて最高でした。
X
感想つぶやきは記事内容の記憶を補助してくれる気がします！（n=1なので世迷言かも）
この活動でも多くのqiita、zennの記事に助けられました。
そんな時、以前チームのメンバーに、「suiwaveさんは読んだ記事の引用が速いし多い。よく覚えてますね」と褒められたことを思い出しました。
今回改めて、なぜ読んだ記事の思い出しが得意なのか考えてみました。
学生時代の暗記科目の成績は悲惨だったので、記憶力が優れている、という線はなさそうです・・・。
なんとなくこれかな？と感じたのがXでの記事感想つぶやき活動です。
私は一日最低でも1記事はXで感想をポストする、という習慣を行っています。
ただ感想をポストするだけでも地味に頭を使います。
- 記事の内容の理解
- 学んだことの整理
- 自分の行動・思考をどうアップデートするか？の考察
この習慣のおかげなのかな～と感じました。感想をポストすると、書いた人への恩返しにもなるし一石二鳥でおすすめです！
さいごに
開発体験が良いと、色んなことがうまくいきます。
うまくいくと、楽しくなります。
楽しいと、熱中できます。
熱中できると、集中や習慣づけ、高い生産性やエモさが生まれるとおもいます。
エモく開発していきたいですね！！！！