未経験エンジニアがNext.jsで作る自作マッチングアプリ

はじめに

本記事は就活に向けて自作アプリを作った際に考えたことをまとめた回顧録です。執筆時にまだ就職活動は始められていませんので、必ずしも就活の参考になるとは言えませんのでご了承ください。就活は関係ないけど、アプリ作ってみたいなという方も少しは参考になる部分があるかもしれません。

また技術的なことはあまり書いていので機会があれば書きたいと考えています。アプリについて詳しく知りたい方は下記の Github の Readme.md をご覧ください。初めての投稿で記述に一貫性がないなど拙い点が多いかもしれませんがお許しください。それではどうぞ！

今回作ったもの

注意点

• グーグルログインができますがこちらでメールアドレスが見えてしまいますので、避けた方が良いと思います。
• おひとりで触れて確認できる機能が新規登録、ログイン、プロフィールの編集ぐらいしかないことをご了承ください。二つアカウントを作れば友達登録、通知、チャットを確認することが出来ます。
• 告知もなくデータベースの中身を消すことがあるかもしれません。制作時のものをそのまま使っているので、もともとあった適当に作ったアカウントを消す際に間違って消す可能性があります。

https://sport-matching-app.vercel.app/

https://github.com/HaChi0624/sport-matching-app

使用技術

• Next.js、Rect
• TypeScript
• recoil
  • ユーザーデータの管理のために途中から導入
• firebase
  • Authentication、Firestore Database、Storage を使用
• vercel
  • デプロイ用
• chakra-ui
  • css フレームワーク
• Github

制作開始時のレベル

全体的に理解度が低く、わかっていないことだらけでした。制作前に作ったアプリはNext.jsとfirebaeを使ったTodoリストでした。

• Next.js、Rect
  • useEffect をどう使えばいいか分からない。コンポーネントはとりあえず分ければいい
  • next/link て便利だな…で、結局何のために使うのか
• TypeScript
  • とりあえず string は書ける…
• recoil
  • props すら使いこなせていないけど、使えるのか分からない
• firebase
  • とりあえずコピペで crud はできたけど何書いてるか分からない
• chakra-ui
  • css も軽く触れた程度で自分で考えて実装なんてできない
• Github
  • プッシュしてログだけはちゃんと残そう

だいたいこんな感じでした。

制作過程

何を作れば…

就職のためになにかしらアプリを作ろうと思い立ったものの、最初は本当に何も思いつきませんでした。趣味やこれまでやってきたことをメモリーツリーなどに書いてみたり、それらに関連するであろうサイトを見て回りましたが特に成果は上がりませんでした。

今思えば ToDo リストぐらいしか作ったことがないのにも関わらず、何かを作ろうにも実感が湧くはずがなかったのです。

見通しが立ったきっかけ

そんなこんなで途方に暮れていた私ですが、気分転換に wantedly を流し見していた時にあることに気付きました。最終的に自分が会社に入り、どんな物を作るかを今から逆算すれば自ずと最初に何をするべきかが見えるのではないかと思ったのです。そのために最初にやったことは、入ってみたい会社や面白い会社を見つけることでした。

中でも特に自社開発案件を持っている会社はやっていることが分かりやすく、知らないことを知る機会になり大変有意義でした。関西で就職することを考えていたため、必然的に見る会社も絞られてしまっていましたが、地域を絞らないことで様々な会社を見られたことも見聞を広げられて良かったポイントです。

その後も各会社のホームページを閲覧しながら自分が面白そうで作れそうなものはないかなと探し続けた結果、クイズアプリとマッチングアプリの二択に絞ることにしました。

何を作るか考える！

1. 目標設定

自分が納得できるものを作ることにしました。
就職後どれだけ勉強時間がとれるかも分かりませんし、そもそも評価してもらえない技術レベルだと悲しいので…。

2. 自分の手札を知る

今の自分に何が作れるか、作れそうかをまず洗い出しました。
できることはせいぜい認証、CRUD ぐらいしかないことに気付き、DB もまたどう使うか分からない状態でした。

3. どんなアプリにするか

就活のアピールもできつつ、自分らしいアプリとは何かを考えました。
塾講師をしていたので、生徒の宿題管理や成績管理をし、長期でデータを蓄積するようなアプリをはじめは作ろうと考えましたが、あまり目新しさや独自性を出せそうになかったので止めました。

次にマッチングアプリを考えましたが、正直使ったことがないものを作るのもどうなのかなと思い諦めかけていました。しかし時間をかけて考えていくうちに、男女のカップリングをしなければという固定観念に囚われていたことに気付きます。趣味が野球観戦ということもあり、最終的に野球観戦マッチングアプリを作ることにしました。

4. 機能を考える

機能に関しては未経験のレベルの技術では対してアピールにならないと思ったので、マッチングアプリとして大事な機能は何かというところにフォーカスしました。そして特に外せない機能と考えたのは、

• プロフィールが充実していること
• たくさんのユーザーから選べるようにすること
• チャットなどで意思疎通ができること

の三点です。これらがあれば、ユーザー同士が相手を選んで交流するという最低ラインを越えられそうです。

補足：独自性を出すには（結局実装できなかったことをまとめているだけです。）

この三点の基本軸に加えて「野球観戦」マッチングアプリとしての独自性を出すにはどうするかも考えました。ただし、時間の制約やモチベーションの有無によって実装できるか分からなかったので、必須な機能とはしませんでした。(なのであまり読まなくても大丈夫です。)

まずユーザーが期待していることは、「誰かと球場に行きたい」「友達を作りたい」ということと考えられます。それを実現するために必要なことは、まずはユーザーを確保することです。最初はユーザー数が少ないために、ニッチなユーザー層に受けるものが何かを考えます。すると自ずと、twitter に生息している人たちを呼び込むことが思い浮かばれますが、これは一長一短のようにも感じます。仮に彼らのような固定層を迎えることが出来たとしても、、、とあまり関係なく長くなりそうなので割愛させていただきます。

次にユーザーを確保出来たら、次に残った彼らが互いに魅力的なユーザーに見えるようにすることです。これはプロフィールが充実しているだけでなく、普段の様子が見えることも大事だと思います。ブログやタイムラインのような形式で野球に関することを語っていたり、球場やスポーツバー、居酒屋に言っている様子などが見えると相手の解像度が上がります。

そして、彼らがマッチングしたら試合を見に行くのか、好きな選手を語らうのかを勝手にチャットでよろしくしてもらえればいいのですが、これではあまりに雑すぎます。試合を見に行きたいのであれば、「どの試合にするのか決めやすくする、チケットを取りやすくする」といった点をチケットの情報にアクセスしやすい導線を作ったり、天気予報や路線図などの情報にアクセスしやすくするなども良いかもしれません。

また、選手について語るのであればチャットの機能はテキストだけでなく、画像の添付やリンクの貼り付けもやりやすいようにしたいところです。ブログやタイムラインとの連携もできるといいですね。

ここまでつらつらと書きだしましたが、妄想の範疇を過ぎず、就活のアピールとしては（時間的に）盛りすぎている気がしたので全然実装することはありませんでした。

5. 遷移図作る

（見えづらくてすみません…）

Figma でどのような遷移をするか書き出してみました。Figma がどんなものかが知りたかっただけではありましたが、必要なページ数や繋がりが見えたのでやってよかったと思います。

作るぞ！

とにもかくにも作れるところからはじめました。先ほど書いた考えも、作りながら考えたことです。ディレクトリ構成すらも最初はどうしたらいいか分かりませんでしたが、その都度調べてなんとなくこうだろうと手を動かしました。

そして、今回実装した機能は以下の通りです。(Github Readmeより抜粋)

• ユーザー登録、ログイン機能
  メールアドレス＆パスワード、グーグルログインの２種類
  x、instagramのログイン機能も追加予定です。
• CRUD
  プロフィール、チャットで使用しています。
• 画像投稿
  プロフィールで使用。チャットも実装予定。
• フォロー機能
  相互に認証することで友達になります。
• 通知機能
  フォローされたときにヘッダーの通知にバッジが付き、ログが追加されます。未読のチャットに関しても今後通知に追加されるようにする予定です。
• チャット機能
  友達になることでチャットが出来ます。現状テキストのみしか扱えていないので、リンクや画像などをアップロードできるようにする予定です。
• 検索機能
  名前による検索と選択式の検索を実装しました。
• レスポンシブ対応
  chakra uiで４種類実装しました。

画像投稿、フォロー機能、チャット機能に関してはだいぶ頭を悩ませました。基本的に悩んでいることの大半は、firebaseの使いかたが分からないときでした。そして、コピペではなく自分なりに工夫して書けたときは結構達成感がありました。

デザインどうしよ…

1. 最低ライン

デザインに関しては一番困りました。そもそも制作開始時点でデザインに関しては何も勉強できていなかったので、機能面を作りながら同時並行で自分にできそうなデザインを決めることにしました。

考えていく中で問題として挙がったのが、参考資料として PC ブラウザで開くマッチングアプリがどれ程あるかという点です。企業と個人がつながるもののような仕事よりのものはあるのですが、あまり「さわやか」で「楽しそうな」ものは見つけられませんでした。

そういった点でスマホ画面のみの実装にしようとも考えましたが、レスポンシブの練習もしてみたかったので自分なりに作ることにしました。（あとあと考えると、これが結構大きな失敗だったかもしれません。）

2. UI/UX

デザインは分からないなりに作りながら考えていくなかで、ページごとの導線だけは多少意識しながら作ることにしました。とはいえ、まだまだ突っ込みどころがたくさんあると思います。

3. トップ画面

機能をあらかた作り終えたころ、今の自分にはデザインをすることは難しいと気づき始めました。しかしどう見てもダサすぎる自分のページが嫌で何とかしようと考えたときに、トップページの大きなメインビジュアルでごまかせば何とかなるのではないかと思いました。

そもそも、アプリの場合はトップページすらない場合もありますが、今回はメインビジュアルを載せるためだけにトップページを作ることにしました。（後で気付いたことですが、LP（ランディングページ）だけデザインを盛って、通常使うページに関しては簡素なものにしても良かったと思います。）

また作ったときは意識はしていませんでしたが、LP っぽくサイトの概要が分かるような情報を載せられるようなデザインにしました。メインビジュアルの下には、このサイトをどう使うかを順番にアクセスできるようにしました。

メインビジュアルに関しては canva というサイトで、ないよりかはマシなものを作ることが出来ました。テンプレートが沢山あるので、どれを使うか考えるのが結構楽しかったです。

リファクタリングは大切

アプリを作っていく中で、リファクタリングはかなり大事なことだと思いました。制作途中で止めてしまって後から触ろうとしたときに、コードが分かりにくくて困ることが多くありました。特にディレクトリ名が適当な名前で、複数の機能が書かれていると後から確認し辛いことに気付きました。関数はできるだけカスタムフックで切り分けて、ディレクトリの名前もより明確なものにすることで、開発がスムーズになりました。

完成

ある程度機能を作り終えてから、デザインや細々としたことを考えてる時間が長く、進みが悪くなりましたが何とか形にはなりました。途中で参加しているコミュニティでのチーム開発に加わるなどしたことも遅れる原因にはなりましたが、一方で得られるものも多くたくさん勉強できたと思います。

制作後のレベル

• Next.js、Rect
  • props が使えるようになった
  • フックスを使えるようになった
  • Next.js の良さをまだ活かせていないです。SR,SSG,SSR,ISR の何かしらを活かしたかったです。
• TypeScript
  • props の型指定が出来るようになり、コンポーネントのプロパティが安全に渡されていると気付いたときに必要性に気付けました。
• recoil
  • ユーザーデータの管理のために途中から導入しました。グローバルな変数をあまり増やさない方がいいと聞いて、本当に必要だと思ったところだけ使いました。
• firebase
  • Authentication、Firestore Database、Storage を使用しました。
  • RDB のように id でドキュメントで繋げたり、サブコレクションを扱えるようになった時に成長を感じました。
• vercel
  • 割とあっさりデプロイできました。
• chakra-ui
  • css があまり分かっていなくても使えました。逆に css を理解するのに、順を追って出来なかったが故のしんどさが生まれてしまったかもしれません。作業後半になると module.css との併用をするようになりました。
• Github
  • issueを立ててブランチを分けることを制作終了間近に覚えました。

反省点

• 時間をかけすぎたこと
  • 内容に関しては就職前にやりたいことが出来たのでいいと思っていますが、他のこともしながらとはいえ４か月はさすがに長かったと思います。
• 考えることを増やしすぎたこと
  • やったことのないタスクが増えて、順序もぐちゃぐちゃになり効率がかなり悪かったです。もう少し簡単なアプリから作っても良いと思いました。

細かい反省点は多々ありますが、この二点は特に反省しています。

おわりに

いかがでしたでしょうか。これから始める人に何かしらのヒントになることがあればと思い書きました。技術的に困ったことはまた別の記事を書く予定です。

読みづらい点、おかしな点などお気づきの点があれば、教えていただけると幸いです。ここまで読んでくださりありがとうございました。また何かの記事でお会いできることを楽しみにしております。