【個人開発】少人数向け対話・雑談イベントアプリ「SingleOnes」を作ったキッカケと技術スタック【React Native x AWS-Amplify】

初めまして。みながわです。

私は、東京のITスタートアップで働いて3年になり、主にReactやTypeScriptなどのWebアプリケーション開発のフロントエンドを担当しています。

https://x.com/minagawatt/status/1723985079486284001?s=20


また、妻は中央アジアのキルギスという国出身で、子供は2人で、一年のうち何ヶ月かは福岡市、何ヶ月かはキルギスの首都ビシュケクに、という謎の2拠点生活を送っています。

最近は韓国のT-wayというLCCのおかげで、期間限定ではありますが、福岡ーソウルーキルギスというルートでだいぶ移動が安く楽になりました。

みなさま、ぜひ福岡かキルギスでお会いしましょう。

さて、それでは本題の個人開発アプリ「SingleOnes」についてです。

## なぜアプリを作ろうと思ったのか？キッカケ。

### エンジニアの大人数イベント

私は仕事柄ひきこもりです。

この3年間というもの、ありがたいことにフルリモートとという環境で、ITエンジニア未経験の状態から、来る日も来る日もバグに悩まされ続けて家で一人悶絶する、という生活を送っております。

また、会社では週に一度のミーティングと、週に一度のペアプログラミングもありましたが、特にプライベートの話などすることもほとんどありません。

そんな、家族以外の誰ともコミュニケーションを取らない発狂しそうな日々ですが、ありがたいことに私は日本でも有数のスタートアップ都市、福岡市に住んでいます。

福岡市は、東京や大阪に比べたら少ないかもしれませんが、ITエンジニア向けの各種イベントが多く開催されています。

ですので、良さそうなイベントがある度にいそいそと参加させていただいているのです。

ただ、ここで最大の欠点があるんですよね。SOU、私、コミュ障なんです。LINEの大人数グループなんかも一言も発したこともないし、たまにそっと退会しちゃったりするくらいです…

大人数のイベントでは、参加者の方々と楽しくお話しさせていただくのですが、ただ、やっぱり結構HPがだいぶ削られてしまって、帰宅時にはメンタル的にかなりキツくなってしまいがちになります…

ですので、イベント前日にはしっかり寝て体調を万全に整えなければなりません。

### 自分の少人数のITイベント

そういうこともあり、もっと気軽に、というか文字通り、「気が楽に」参加できるイベントがあればいいのに、ということで、エンジニアカフェさんで、2、3週間に一度「もくもく × 雑談」ITミートアップ福岡、というイベントを開催しています。

https://it-meetup-fukuoka.connpass.com/

このイベントは最大8人までで、大体平均して3、4人の方が参加していただいております。

そこでのトピックは、参加者さんの好きなこと・ITに関する悩み事などで、人数が少ない分いろいろと掘り下げて雑談をすることができるのが良い点です。

また、大人数のイベントのようにスタンディング形式で、彷徨い歩きつつ誰か話す人を見つけることもしなくていいので、非常に楽です。

結果的に、人数が少ないせいからなのか、自分がイベントを主催できる安心感からかなのか、イベントが終わった後に、いろんな方と関係性が築くことができてよかったという満足感だけが残ります。

## このアプリで実現したいこと。みんな忙しいのよ。

そんなこともあり、meetup.comやPeatix、connpassなどのイベントアプリがある中で、少人数に特化した雑談イベントアプリ「SingleOnes」を作ることにしたのです。

私がSingleOnesで実現したいことは、スキマ時間に、誰かと、特に家族や学校、会社など、自分の所属するコミュニティ外の人に興味を持つこと、対面で時間を共有すること、関係性を築くことです。

普段、私たちは、家事・育児・勉学・労働など、日々の作業に追われ、他人や世界のことにまで関心を寄せたり、関係性を築こうなんて考える余地もありません。

限られた貴重な時間の中で、せいぜい自分の日々の飯のタネ、金、人によく見られたいがためのSNSのフォロワー数くらいにしか時間を割けていませんよね？

ただ、もし自分たちがいつも無関心をキメ込んでいる、自分の近くにいる人々に、興味を持ったり、話したり、友達になったりできたらどうでしょうか。

世界を広げるというのは、別にどこか遠くに行かなくてもいいんじゃないか。自分が気づかなかっただけで、実は身の回りに面白い人がいるんじゃないか、そんな人と時間を共有すること、関係性を作ること。

1日の終わりに、今日は良かったな、と思えること。

それを、当たり前の文化にまで落とし込むのが、このアプリの最終目標地点です。

## アプリの使い方

では、アプリの使い方について簡単に。

①プロフィールを登録 
②イベントを作る 
③SNSでシェアする 
④参加申請を承認 or 拒否
⑤雑談する
⑥レビューを書く

以上、6ステップです。

### オススメの使い方

オススメは好きなこと、悩み事をプロフィールに書き込んでおき、それを対面で掘り下げてみることです。

### イベント開催可能な日にちについて

イベント作成可能な日にちは今日か明日のみ！僕のようなズボラ人間、予定調整不能人間のために、思い立ったがなんというか、ということで、今日か明日から選んで時間をセットしましょう。
⬇️
今日、明日だけではなくいつでもイベントを作ることができるようにしました。
ただし、イベント検索画面には今日から1週間のイベントのみ表示されるようになっています。

### 参加人数最大4人まで、の意味

基本的に、イベントを企画するとなると、面倒なのがなんといっても会場の予約です。めんどくさくないですか？

で、先日コメダ珈琲に行ったのですが、なんと4人までなら特に予約なく入れるということじゃあないですか。

さらに、他のカフェでも大体2〜4人くらいなら予約なしでも入店だということに気づいたからです。

### その他

ちなみに、自分のイベントに参加申請が来て拒否したとしても、相手には「保留中」と表示されるため、安全です。

拒否されました、などは表示されませんのでご安心ください。

## 各種機能について

### SNSでのシェア

イベントやプロフィールはX（Twitter）でシェアできます。アプリもリリースしたばかりなので、最初は他者のイベントはほとんど作られていません。

ですので、作ったイベントはXなどでシェアすると、それをポチった人が参加してくれるかもしれません。

### レビュー

イベント開催後は、参加してくれた人にレビューを書きましょう。他の人も参考にしてくれるはずです。

### ミュート

なんかもういいかな、と思ったら他者をミュートすることが可能です。ミュートされた相手はあなたのプロフィールは見えますが、開催予定のイベントは表示されないため、「参加する」ボタンが押せません。

### プレミアムプラン

本アプリの無料プランは、自分でイベントを作る分には、月に無制限で可能です。ただし、他者のイベントに参加できるのは月に3回までとなります。

プレミアムプランですと、他者のイベント参加も無制限に可能となります。

## 技術スタック
Qitaということで、ざっくりとではありますが、実装の辛かったことなどを共有します。

### フロントエンド
- React Native
- Expo
- TypeScript
- Recoil

### バックエンドとその他サービス
- AWS-Amplify
- Stripe
- Google Map

SingleOnesを作る前までは、AWSのサービスに関しては、ほぼノー知識でした。使ったことがあるのはCognito、CloudWatch、Dynamodb、Lambdaくらいで、それ以外のAWSサービスにはほとんど触れた経験がありませんでした。

## 悩んだこと、時間がかかったこと
#### Dynamodbのシングルテーブル設計: 
Dynamodbを使用する際にシングルテーブル設計を採用しましたが、この設計パターンが初めてで、理解するのに時間がかかりました。それまではJavaの職業訓練校でPostgresを使ったSQLしか勉強していなかったので、新しいデータベースの設計パターンに慣れるのに苦労しました。

#### StripeのWebhook: 
決済システムを統合する過程でStripeのWebhookを実装しました。これはセキュリティと信頼性を確保する上で重要な部分で、実装には多くの時間と注意が必要でした。そもそもWebhookを実装したこともなかったし、あまり理解してなかったので、新たな技術に対応する過程で多くを学びました。

#### ディープリンク: 
アプリとウェブサイトの間のシームレスな連携を実現するためにディープリンクを実装しましたが、これは技術的に難しい課題でした。特に、Expoの公式ドキュメントを見ても、YouTubeなどを探索してもなかなかうまく実装できず、結局、アプリのLPからモバイルの方にReact Navigationを使って実装することにしました。

#### Solitoの導入: 
Solitoを導入しようとしましたが、期待した効果を得られず失敗しました。特にAWS-Amplifyとの連携が難しく、SolitoのDiscordグループで質問しても解決しなかったため、結局AWS-AmplifyのReact Nativeのチュートリアルに書いてある通りに実装し直しました。ルーティングなどもすべてやり直す必要があり、時間がかかりましたが、この経験は新しいツールへの適応という面で価値のある学びとなりました。

#### Solitoについて: 
Solitoは、React Nativeアプリのルーティングを効率化するためのライブラリです。これを使用することで、React Nativeアプリ内での画面遷移やデータのやり取りをより簡単に管理することができます。しかし、特定のバックエンドサービス、特にAWS-Amplifyとの連携には課題があったため、Solitoの導入は難しかったです。

#### 公式ドキュメントの徹底的な読み込みと無駄な実装: 
新しい技術を学ぶ過程で、公式ドキュメントを徹底的に理解することが必要でした。これは時間がかかる作業であり、また無駄な実装もいくつか行いました。Stripeの実装でAmplifyのfunctionに環境変数を使う際、無駄にAWS KMS keyを自分で実装していたが、公式ドキュメントを完全に理解していれば、無駄な実装を避けることができたと思います。

## 良かったこと
#### Appsyncの利用: 
AWS-Amplifyで、Appsyncを使ってスキーマを書くだけで、フロントエンドから容易にデータを呼び出すことができました。これは開発の効率化に大きく貢献しました。

#### Mentaでのメンタリング体験: 
Mentaを利用してメンターとの話し合いを通じて、直接的な問題解決には至らなかったものの、新しい視点で問題にアプローチするきっかけを得ることができました。これにより、異なる方法で問題に取り組むことができました。

## これからやること
#### テストの実装: 
ソフトウェアの品質を保証し、安定性を高めるためにテストの実装を行います。React NativeでUIのテストやインテグレーションテストもサービスを使いつつ、これから実装する予定です。これにより、バグの早期発見と修正、および機能の信頼性の向上が期待しています。

#### 英語対応と国際化: 
より多くの国のユーザーにアプリを利用してもらうために、英語対応と国際化に取り組みます。


## ダウンロード

上記を読んでいただき、もしご興味がありましたらぜひご使用のほどよろしくお願いいたします。こちらがiOS, Androidのダウンロードリンクです。

### iOS

https://apps.apple.com/jp/app/singleones-%E5%B0%91%E4%BA%BA%E6%95%B0%E5%90%91%E3%81%91%E9%9B%91%E8%AB%87%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/id6470361270


### Android

https://play.google.com/store/apps/details?id=dev.thesingleones.singleones


私の技術不足によりバグ等ふんだんに含まれている可能性があります。その時は、アプリ内の設定画面の「バグを報告する」から、ご連絡いただけると幸いです。

また、なにとぞ、何卒App storeやGoogle playなどでアプリのレビューを書いていただけると励みになります。

あと、Xで #singleones 、など書いていただけるととんで見に行きます。

また、福岡市内で、「アプリ試してやってもいい、少しけど雑談してやってもいい」という方がいらっしゃいましたら、是非コーヒーとかゴハン奢らせてください。

駆けつけます。Xでいいねをつけてくれた方にDMします。

https://x.com/minagawatt/status/1723985079486284001?s=20

以上、今回は最後まで読んでいただいてありがとうございました。