先日、一人で新しいサービスを立ち上げました！
組織間でデータを送受信でき、受け取ったデータをノーコードでAPI公開できるサービスです。
自分あてにデータを送れば、自分用にAPIサーバーを立ち上げることもできます。
制限はありますが無料で始められます！
きっかけ
データを送るときって、普通メールで送ったり、独自で開発したシステムに入れたりしますよね。
でも、メールだとデータを取り扱えるように加工する必要がありますし、独自でシステムを開発するのもコストがかかるし、ということで、サービス化できないかなーと思ったのがはじまりです。
お役所さんとか企業とかで、データを相互にやり取りする環境があったら便利だろうなー
で、それをそのままAPIとして公開できる仕組みがあったらいいなと思って作ることにしました。
開発スタート！
個人での開発
私は「ハーモニコム」という名前で、個人の趣味でWebサービスを作っているのですが、今回もその範疇で作ろうと思いました。
となると、仕事外の時間、つまり早朝と夜と土日祝日だけです。好きなゲームをやめ、寝食を惜しんでもくもくと開発してました。
ちなみに、私みたく個人でWebサービス作ったりするのが趣味な人っていませんか？
情報交換とかしてみたいなぁ。
技術選定
今回、私の好きなTypeScriptで書くのは決まっていたのですが、フレームワーク何使おうかな、と考えたときに、国産フレームワークの「Hono」を使ってみよう、ということになりました。
当初は「HonoX」というフロントエンドもバックエンドも持ったフレームワークが魅力的だったのですが、うまく動かなくて挫折。
結局、フロントエンドはReactを使うことにしました。
しかし私、Vueばかり使っていたもので、ReactはGatsbyで使ったぐらいでほとんと未経験。
プログラムの基盤を作るだけで2週間近く使ってしまいました……
でも、Reactの良さもわかってきて、React Hook FormやMUIなども活用できて、なかなか楽しい基盤づくりでした。
ORMマッパーは最近イチ押しの「Drizzle ORM」を使いました。
これ、メソッドチェーンでSQLチックに書けるのでわかりやすくていいです。
型にも対応していて、スキーマ作ればTypeScriptでも使えます。
Prisma ORMのように独自記法でスキーマ書かなくてもいいですし。
私はSQLを書いてマイグレーションして、それをexportしてスキーマを作成するようにしています。
TypeScriptのランタイムはいつもの「Bun」です。
TypeScriptを直接実行できるのは便利ですね。ロゴもかわいいｗ
リファクタリングにつぐリファクタリング
慣れないフレームワークということもあり、自分の中でベストプラクティスが無い。
「こっちの方がいいかなー」「この方が作りやすいよなー」などとコードをこねくり回して、あーでもないこーでもないとやっていました。
あとからモジュール追加したせいで全部書き方変えちゃったりとか。
バックエンド用のモジュールがフロントエンドで読まれちゃってエラーになったりとか。
せっかくだから型もバリデーションもフロントエンドとバックエンドで共通化できないかな、と思ったりとか。
おかげでさらに1週間費やすことに……
でもいい感じにベストプラクティスができたんじゃないかなと思います。
AIをフル活用！
今回、仕事で使ってていい感じだったAIコードエディタ「Cursor」を、個人でも契約して使ってみました。
これがすごくいい！
とにかくコード補完がありがたい！
これから入れようとしていたコードを先読みして入れてくれる。他のファイルでこうしていたから、このファイルでもこれを入れるだろうな、というところまで推測してくれるので、他のファイルを参照する頻度が減りました。
整形などもお手のもの。テキストをペーストしたら気を利かせてオブジェクトやJSONにしてくれたり、今まで手でちまちまクォーテーション入れたりしてた手間がかなり削減。
また、サンプルデータとか翻訳とか、AIに指示して作ってもらいました。
おかげで日本語だけでなく英語版も楽に作ることができました。
ただ、使いすぎると月の使用上限に達してしまったりして、ハラハラしていました。
あと、ロゴマークなどもAIで生成しました。
細かな指示を与える必要がありましたが、なかなかいい感じに思ったようなマークができてよかったです。
インフラ
ドメイン
とりあえずドメインは取らないと、と思って、サービス名を決めたらさっそくドメインを取りまくりました。
「Packetbase」という会社さんが以前あったらしくて、「packetbase.com」だけ押さえられていたので、「s」を入れて「packetsbase」としてみました。
.com、.net、.jpなど取りまくって、ついでにpacketbaseのドメインも空いてた.net、.jpは取っておきました。
ひとまず同名のサービスが作られる対策は取っておきました。
サーバー
で、サーバーどうしよう、となりまして……個人の趣味の活動なのでお金がない。
しかたなく「さくらのVPS」で安いサーバーを借りました。
しかし、メモリ2GBだとメモリ不足でフロントエンドのビルドができない！
……泣く泣くプランを上げてメモリ4GBにしました……
VPSでサーバーを立てる時は、Dockerで立ち上げちゃいます。
開発環境と同じ環境で本番環境も立てられるので便利便利。環境変数はcompose.override.yamlで設定しています。
いずれアクセスが増えてきたら、VPSなり「さくらのクラウド」なりを用意して、Kubernetesで束ねて使おうかな、と思っています。
なるべく国内で環境を整えたいので、クラウドはあまり使いたくないんですよね。
円安だし、国内産業もっと盛り上がってもらいたいですもんね。
課金のしくみ
今回、使われるかどうかもわからないのに、課金のしくみを導入してみました。
しかしこれが意外といろいろ気をつかう。契約を追加したり削除したり、契約が切れたらどうするのか、とか、サブスクリプションの延長処理どうするか、とか、決済代行サービスとの連携とか、かなり考慮することが多くて、ここでも実装に1週間以上かかってしまいました。
あと、個人で気軽に使える決済代行サービスってなかなか無いんですよね。
クレジットカードの審査とかいろいろあるので、個人事業やってたり法人化していた方が確かにやりやすいですよね。税金もあるし。
ゆくゆくはそれも考えないと。
今回は、海外も視野に入れているので「PayPal」を入れてみましたが、微妙に使いにくいところがあるのが難点……
サブスクリプションにも対応しているので使えると言えば使えるけど。
さいごに
そんなこんなで、ひと月半もくもくと開発してサービスを立ち上げました。
制限はありますが基本無料でも使えるので、よかったら使ってみてくださいね！