【楽しかった】最近気になってたサービス・ライブラリ使ってサイト立ち上げてみた

# 年末なので
最近気になっていたサービス・ライブラリを使ってサイトを作成・公開しました。

![cap0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/a98c5feb-4987-670e-db64-16a39f8c404e.png)

https://mc-battle-search.vercel.app/

2営業日分くらいの稼働で作ったので、めっちゃ凄いサイトは作っていません。一覧をフィルタできるシンプルなものを作成しました。

**色々触って全部おもしろかったので紹介と感想を書きます！！**

:::note info
今回試したサービス・ライブラリは以下の記事 ~~のパクリ~~ に影響を**めちゃくちゃ**受けています。
（この記事よりこっち見た方が良いかも）
:::

https://zenn.dev/uncode_jp/articles/4d2bd36aa03fc8

https://zenn.dev/hokuto_tech/articles/9e6e782312f240



## GitHub Copilot in VS Code
VScodeにCopilotが**FreePlanあり**で統合されました！！！
cursorは気になっていたんですが、移行だなんだめんどくさく、様子を見ていたんですがVsCode公式がうごいてくれました！

https://code.visualstudio.com/docs/copilot/overview

大きく2つの使い方を利用しました。
1つ目は普通にチャット。

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/c4d13f70-7fa2-8265-d3a3-4cf9a9d0e063.png)

便利なのが、デフォルトで今見ているファイルを参照してくれる点です。
AIに投げる時にいろいろコピペして・・・という今までのストレスから解放され、しょっちゅう相談できるようになりました！

2つ目の機能がサジェスト機能。

![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/af834103-557c-cc3f-0224-a44c0c7a7880.png)

これ**ヤバい**です。ほんとに
上記画像のようにコードをサジェストしてくれるのですが、怖いくらい精度が高いです。

こういう処理書くか～って少し書き出すと、あれこれリアルタイムにサジェストしてくれます。
我々にできることは**ただ従うこと**だけです。[ささやき女将](https://youtu.be/gq90N_ThP_k?feature=shared&t=101) を思い出しました。
これまでのVSCodeとAIとを行ったり来たり・コードのコピペで報連相、といった体験が全てひっくり返りました。おもろすぎる。

とはいえ、AIのコードをはいよろこんでと100%信頼するのはアレなので、今回はTDDで実装しました。
テストなどのガードレールを用いて、AI産コードと上手く付き合いたいです。

## Nextjs
Reactのおにいちゃん、Nextjsです。

https://nextjs.org/docs

パスベースのルーティングや、強力なキャッシング、サーバサイドでのレンダリングなど多数の機能を持つフレームワークです。

複雑な仕様もあることから、今回のケースや、簡単なアプリ・POCだと明らかにオーバーテクノロジーですが、過去やったことを思い出す意味も含めて復習しました。

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/475310a5-608a-1c49-07ab-c824aecec6e3.png)

API層との通信はサーバサイドで行うことでエンドポイントを隠しつつ、その情報を埋め込んだhtmlをフロントに返却する、みたいな処理を書いたんですが、楽しかったです。
React SPA構成だとどうしてもAPIエンドポイントが露出してしまうので、その不安から解放されるのが良かったです。

また、後述する V0, Vercel といったサービスがデフォルトとしてこのNextjsの使用を想定しているので、その意味でも使用しました！

## Vercel

https://vercel.com/

無料で使えるCI/CDサービスです。語弊あったらごめんなさい。

![cap4_5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/11e37819-faf2-95bc-f4a8-b1d9c2fdf14d.png)

Githubと連携することで、gitへのpushをトリガーに自動でCI/CDが走ります。

![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/20b8d125-98ff-0737-7a16-463bd9cedce7.png)

AWSだとAmplifyでも同じようなことができるのですが、色々違いがあります。
Amplifyはビルド環境の準備に1分くらい待たされるところ、Vercelは一瞬でビルドが始まり、びっくりしました。

![cap5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/d3243333-eca5-ff27-a917-80f758d063fb.png)

あとは今回使いこなせていないですが、ログやモニタリングなど、全体的に見やすく、レスポンスが速くて良いです。

（Amplifyは他サービスとの高速連携が売りなので、比較は良くないかも。。。）

## Biomejs
LintとPrettierが合体して、更に早くなって帰ってきました！！！

https://biomejs.dev/ja/

**なんで合体してその上速くなるんだ？**

あんまり語ることがないけど、早いだけでもう快適で楽しかったです。
速さは正義。Vercelが高速でデプロイしてくれるのもあって、commitやpushも早くしたかったです。重いLintから卒業！

## shadcn/ui
なんかかっこいいUI！デザイナーさんもこれ使ってくれないかな～。

https://ui.shadcn.com/

後述するデザインAIのv0がデフォルトで出力するUIコンポーネントです。

![cap8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/b2dd30c3-5f15-6962-c3fd-49101ccf0c17.png)

UIコンポーネント**ライブラリではない**のが特徴です。
node_modules配下にUIコンポーネントが置かれるのではなく、src配下にコピペして持ってくる、という利用方法になります。
あくまで公式の書いたコードをコピペして利用するだけ、という使用感です。

嬉しさはいろいろあります！
- コピペしたソースを使うので、細かくいじれる
- tailwindなので記述が楽
- v0がこれ使うから使っておこう
- デフォルトでかっこいい。素人はとりあえず従っておくと丸い

## v0
無茶ぶりやコードベースの会話を振って良いAIデザイナー！！！

https://v0.dev/

上述したNextjs, shadcn/uiベースで良い感じのデザインを出力してくれる、それらに特化したAIです。
GptやClaudeよりもセンスある気がします。しっかり鍛えられてます。

![cap6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/7db3095f-e46d-3322-eed0-a3c09b3c6f25.png)

デザインできる人に無茶ぶりしたり、コードの話をしたりするのは全エンジニアの夢だと思うのですが、結構かなって楽しい！！

![cap7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/6342ab0a-22b2-e5de-dab0-7185f293a156.png)

良いんだか悪いんだか分からない思想ですが、AIは良い意味で人間ではないのが良いですね。デザイナーさんとの仕事、ムズイ

今回は試してないですが、Vercel社のサービスなので、VercelのCI/CDと高速で統合できそうな雰囲気のボタンがありました。

## hono
型補完最高！！

https://hono.dev/

みんな大好きhonoに入門しました。
honoは簡単にAPIをデザインすることができる良い感じのライブラリです。今回は機能少ないので活かせなかったんですが、事前の調査で感動しながら使ってたことを覚えています。

分かりやすいRoute定義！

![cap10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/d7d2c98d-7f50-36a6-ae76-c28e5f219351.png)

APIへのリクエストやその形式が型補完される！

![cap9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/7ed51c18-5d4b-10d5-b3b2-dad4e819be18.png)

**これヤバない？**
あと、validation追加したら、型補完の聞く範囲で事前に叱ってくれるようになりました。凄すぎて笑いました

もう今後バックエンド作るならこれで行きたい。これでええわ

## supabase Database
タダ？のDB！！！

https://supabase.com/docs/guides/database/overview

supabaseというBaaSの、タダでpostgresqlを使わせてくれるサービスです。
自分は普段AWS上でいろいろ遊んでいるんですが、RDBを用意しづらい問題がありました。
VPC必要・高価・作成時間長い・DynamoDBは要件あわない、などなど・・・。

supabase Databaseだと、この問題を解決しつつ、タダで簡単にDBが用意できてめっちゃ感動しました！！

あと、TypeScriptにも対応してて最高でした。

![cap11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/6cb675a9-3509-8562-0d88-d5c2de34b17d.png)

https://supabase.com/docs/guides/api/rest/generating-types

## X
感想つぶやきは記事内容の記憶を補助してくれる気がします！（n=1なので世迷言かも）

この活動でも多くのqiita、zennの記事に助けられました。
そんな時、以前チームのメンバーに、「suiwaveさんは**読んだ記事の引用が速いし多い。よく覚えてますね**」と褒められたことを思い出しました。

今回改めて、なぜ読んだ記事の思い出しが得意なのか考えてみました。

学生時代の暗記科目の成績は悲惨だったので、記憶力が優れている、という線はなさそうです・・・。

なんとなくこれかな？と感じたのが**Xでの記事感想つぶやき活動**です。
私は一日最低でも1記事はXで感想をポストする、という習慣を行っています。

![cap12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/56466506-36fb-e5fd-8403-9f8a54395a81.png)

ただ感想をポストするだけでも地味に頭を使います。
- 記事の内容の理解
- 学んだことの整理
- 自分の行動・思考をどうアップデートするか？の考察

この習慣のおかげなのかな～と感じました。感想をポストすると、書いた人への恩返しにもなるし一石二鳥でおすすめです！

# さいごに
開発体験が良いと、色んなことがうまくいきます。
うまくいくと、楽しくなります。
楽しいと、熱中できます。
熱中できると、集中や習慣づけ、高い生産性やエモさが生まれるとおもいます。
エモく開発していきたいですね！！！！

https://github.com/suiwave/mc-battle-search