会員登録不要・匿名で話せるコロニー SNS「Colonet (ころねっと)」を作りました
会員登録不要・匿名で話せるコロニー SNS「Colonet (ころねっと)」というものを作りました。
Colonet
よかったら来てください。
…という宣伝文だけでは寂しいので、SNS の概要から、開発における技術的な話などを少し書いておきます。
どんな SNS？
会員登録不要、匿名で参加できます
アクセス数を見たいので Cloudflare Web Analytics を仕込んでいますが、これは個人を特定するような情報は収集しません
その他、IP アドレスや UA なども一切収集・保存していません
トークテーマに応じた「コロニー」を作れます
いわゆる掲示板における「スレッド」の単位です
どんなコロニーなのかをイメージさせる絵文字アイコンを設定できるのが、一風変わったところでしょうか
トップページの「ワールドグリッド」上に、コロニーの絵文字アイコンが漂います
好きなコロニーを場所で覚えても良いですし、気になった絵文字アイコンのコロニーにフラっと訪れても良いでしょう。行き先のコロニーをランダムに選べるボタンもあります
コロニーを作ったら「ノート」を投稿しましょう
いわゆる「レス」のことです
投稿から日が経つにつれて、投稿した文章が少しずつボヤけて見えるようにしています。過去のことは適度に忘れていったほうがいいかなと思い。
…ちょっとだけ「おもしろ機能」が付いていますが、基本的には「匿名掲示板」と思ってもらえれば大丈夫です。
何で作ったの？
作者は職業プログラマなのですが、現在仕事をお休みしているので、リハビリとして作りました。
どんなことを考えて作ったの？
自分は昔の個人サイトに置かれていた「掲示板」の文化が好きだったので、会員登録が要らないウェブサービスにすることを主眼に置きました。それだけです。
技術スタック (技術選定の経緯)
JavaScript が自分の第一言語なのと、後述するように Cloudflare Workers にデプロイしたかったので、Node.js・TypeScript でフロントエンドもバックエンドもまとめて書くことにしました。
フロントエンドに関しては、自分は元々Angular 贔屓なのですが、世界シェア的にも React から逃げられないので、今回はキャッチアップのためにReact を選定しました。
何も考えずに React を使うと色んなライブラリを入れないといけなくなる傾向にあると感じていたため、今回は依存ライブラリを最小限にすることを目指しました。
フロントエンドで使用したライブラリは以下のとおりです。
React Router v7 … SPA モードで使用。勝手にページ単位での Lazy Loading を実現してくれるのが便利ですね
Floating UI … ポップオーバーを実現するために使用
Frimousse … 絵文字ピッカー
ky … Fetch API の薄いラッパー。ないとダメなワケではありませんでしたが、エラーハンドリングや型システムとの連携が便利です
デザイン面では、今までBootstrap やMaterial Design (MUI) を使うことが多かったのですが、こちらも練習のため、今まで苦手としていたTailwind CSS を採用しました。
しかしやはりどうしてもセマンティックな CSS クラス名が欲しくなり、Tailwind CSS ベースで各種コンポーネントを提供してくれるdaisyUI を導入しています。
その他、アイコンにはLucide というものを今回個人的に初採用しました。
実行環境は無料で済ませたかったので、最初からCloudflare Workers とCloudflare D1 (SQLite データベース) を選定しており、これに合わせてHono をバックエンドに採用しました。キャッシュ設定や JWT 認証などのコンポーネントも含まれているので、バックエンド実装においては Hono 以外のパッケージを一切導入せずに済みました。
今回は小規模だったので、フロントエンドとバックエンドで共用できるバリデーションのコードを小さく書き、Zod などは利用しませんでした。また、DB 操作も簡単なものが多かったのでPrisma ORM のような ORM の類も導入しませんでした。
練習という意味では導入しても良かったかもしれません。
2025-11-27 追記 : 2025-11-25 の初稿執筆時点では Zod を使っていませんでしたが、本記事を書いた直後に「やっぱ使ってみたい」となり、Zod を導入しました。
若干の慣れ・学習は必要なものの、バリデーションと同時に preprocess による型変換やトリムなども行えて、型システムとの親和性も高くてとても使いやすかったです。これは早く導入するべきでした。
開発環境
Vite で開発サーバ起動、ESLint で構文チェック、Wrangler CLI でデプロイ、という感じです。
厳密には、React Router v7 のReact Router CLI が Vite をラップしており、Vite の仕組みを利用して Hono バックエンドと React フロントエンドを統合した開発サーバを起動してくれたり、ビルドを行ってくれたりします。
Hono バックエンド内で使用する Cloudflare Workers のバインディング参照などもうまく行えるように、なんやかんやプラグインやアダプタみたいなものも入れました。最終的にはなんとかなりましたが、どのプラグインをどうやって組み合わせたらいいのか調べるのに時間がかかりました…。
ESLint で import の整理とか Tailwind CSS のクラス名整理とかを行わせましたが、ESLint プラグインのみでは綺麗に行かないところがあったので、VSCode 拡張機能のTypeScript Import Sorter とHeadwind も併用しました。
Prettier を入れてもよかったのですが、自分はコード中の垂直方向を揃えたり、空行にもインデントスペースを書いたりする癖があり、これを強制的に修正されるのが嫌だったのですぐ外しました。仕事 (チーム開発) ではいつも入れています。
あとテストの類は今回全く書いていません。スミマセン。おかげで全体の依存パッケージはだいぶ少なく済みました。
開発の一部を AI に手伝ってもらってみた
時代の流れ的に、仕事でも各種 AI ツールを使うようになってきていましたが、そんなタイミングでお休みに入ってしまったので、自分でも使っておくことにしました。ケチなので無料プランがあるものしか使っていません。
プログラミングに限らず普段からよく使っています。ブラウザ上での対話形式でのみ使用し、IDE 統合などはしませんでした
サービスコンセプトの検討、技術スタックの選定などを相談し、計画の練り上げをしていくのがメインの使い方でした
コードを書いてみてもらうこともありましたが、ワークスペースのコードを読んでいるわけではないので、最小構成のコードを書かせてもそのままでは動かないケースが多かったです
無料枠の制限に引っかかり、今まで会話していたものとは違うモデルに切り替わると、以前の内容を忘れてズレた回答をする傾向は依然としてアリ…
技術用語の概要などを単発質問する際に多用しました。おかげで ChatGPT の無料枠を節約できました
VSCode 拡張機能として無料プランを使用
日本語で会話できる
プロジェクト内のソースコードを見てもらい意見出しをしてもらうだけ、といった使い方も可能。潜在的なバグなどをチェックしてもらいました
機能追加などをお願いすればコードも書いてくれましたが、その精度は次に紹介する Traycer の方が優秀だと感じました
VSCode 拡張機能として無料プラン (Pro プランの無料体験枠) を使用
日本語で会話できる (設定で優先する言語を選ぶ必要アリ)
既存コードの癖を真似して、それに溶け込むように精度の高いコードを書いてくれます
思考時間は Qodo よりちょっと長いかもですが、思考過程がしっかり出力されるので納得できます
React だと useHooks の宣言位置がちょっとデタラメだったり、後で人間で読み解く際の保守性としては低い部分もボチボチありましたが、ビルドが通らないようなコードはほぼほぼ出力しなかったです
Qodo や Traycer による AI コード生成は開発の後半になってから活用しましたが、それまでに約1万行ほど自分で書いていました。それら既存コードの癖を読み取って、イイカンジに提案・機能追加などしてもらえて、想像以上の精度で便利でした。
これが Vibe Coding とか仕様駆動開発とかいうヤツなんでしょうか？流行りに多少は乗れたのでしょうか。
あとは Favicon を作る際にFigma と Photoshop をちょっと使ったぐらいですかね。
以上です
個人的なリハビリのため、今まで使ってこなかった技術スタックをあえて選んでウェブサービスを作ったお話でした。
今は廃れてしまった「匿名掲示板」へのノスタルジーを込めて、個人を識別しない世界を作った次第です。
別にこれでサービス拡大や収益化云々などは考えていませんし、大体作り終わったので個人的にはこれでおしまいといったところですが、せっかく作ったことですし何人か遊びに来てくれたらいいな、という気持ちです。
よかったら記念カキコ、お待ちしております。
