アプリ概要
Gitコマンドを空打ちで練習できるアプリです。
メインターゲットは私同様の駆け出しエンジニアを想定しました。
始めはエンジニア版寿司打を想定していましたが、分からないコマンドは都度調べて欲しかった為時間制限は撤廃しました。
遊んでいるうちにGitが覚えられ、タイピングも早くなるアプリとして駆け出しエンジニアに愛されるアプリを目指しましたがユーザー数は50人程度。少し自信はあったのですがユーザー数を増やすのは簡単ではないと思い知らされたアプリ開発でした。
ロジックは正直ただのクイズアプリに近いですが、コマンドプロンプト感にはかなり拘って作りました。刺さる人には刺さってくれたようで、何件か感想のコメントも頂けて、今でもたまに遊んでくれているようでとても嬉しかったです。
簡単なアプリではありますが、私のユーザーエクスペリエンスへの拘りを示せる作品になったのではないかなと思っています
使用技術
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Firebase
- Jest
- Playwright
- storybook
- GitHub Actions
フロントエンドにはNext.jsを選択、バックエンドはFirebaseを選択しました。
バックエンドについて、ポートフォリオとしてはもっと難しい技術(Nest.js)や新しいSupabase等を使うべきか悩みましたが初めて作る人に使ってもらうサービスであるということとサービスの継続性の観点から安価（無料）で維持できるFirebaseを選択しました。現時点では全てフロントに持っていてもいい程度のデータ量ですが、今後のデータ更新や機能拡張を意識してFirebaseにデータを置いています。
Firebaseとの非同期通信ですが、Firebase SDKがedge runtimeに対応していなかった為REST APIでデータフェッチを行っています。中々マニアックなFirebaseの使い方で情報も少なかったのですが、Nest.js等サーバーサイドの勉強も含めた非同期全般の勉強が少しは実を結んだのか何とかedge runtimeで実装する事ができ、SSRながら中々のパフォーマンスを実現する事が出来ました。
対して、フロントエンドに関しては完全に興味本位でNext.jsのApp Routerを選択。サービスの継続性の観点からフロントもViteを使ってレンタルサーバーなどでもデプロイできるようにし維持費を抑えるべきと考えていましたが、React本家がこれからの方針としてNext.jsのようなレンダリングフレームワークを前提としていく発言をしたのもあってNext.jsでの開発にシフトしました。
App RouterとPage Router、名前から前者はwebアプリ、後者はweb制作に向いているのかと思っていましたが使ってみると思いのほかApp Routerのコンポーネント単位でのデータフェッチやメタデータの生成機能が便利で、これからはJamstackサイト制作もApp Routerでもいいのかなというのが今回使ってみた感想です。
テスト周りはロジックを最下層のコンポーネントに集中させていたのもあって単体テスト中心で殆どのテストがカバーできました。
その為、結合テストは控えめ。又、単体テストと結合テストでカバレッジカバー率100％となっていた為e2eテストも接続が確認できる最小限にしました。
今後の改良点
ノリと勢いで、初級編、中級編とそれぞれのページを名付けましたが上級編は思いつかず。何かいいアイデアがあったら上級編を追加する予定です。
X(旧Twitter)で軽く宣伝しただけとはいえ、ユーザーを伸ばしていくには開発も勿論ですがSEO等のマーケティングの知識も必要なのだと実感しました。
とはいえ、まだまだエンジニアとして学びたい事も沢山ある中マーケティングまで手を伸ばすのは難しいので現状では地道にXでポストを続け宣伝していこうと考えています。
一覧に戻る