小谷 涼太

### プロダクトの概要 クーポンがもらえるかも！？「鹿ちゃんアンケート」を作成しました。 アンケートはスマートフォンを想定し、作成しました。アンケートに最後まで回答すると、暮らしのアドバイスや、クーポンが画面上に表示されるようになっています。 アンケート結果画面では、PCを想定し作成しました。表に回答数だけでなく、%を表示し、グラフを円グラフとすることで、割合の分析に特化した表示にしています。 今回のハッカソンでは、奈良市の方々からハッカソンテーマをいただきました。 今回のハッカソンのテーマが奈良市が取り組んでいる”奈良市買い物⽀援ネットワーク”という⽇常の買い物に困っている⽅への⽀援についての課題を解決して欲しいというものでした。 今回のハッカソンでは事前に奈良市の方々から課題に対するヒアリングがあり、その事前ヒアリングで奈良市の方々との課題点についての擦り合わせをしました。しかし、実際には課題点が幅広く、把握しきれていないという問題があったり、実際に需要があるのかどうかといった問題があり、買い物支援というサービスの問題点ではなく、そのサービスを使っている上での需要や課題点の把握などのサービスの課題を明確化するところにまず課題があるのではないかと感じ、今回の鹿ちゃんアンケートを作成しました。 ### チーム体制と役割 四人チームで行いました。 フロントエンド：3人 デザイン：1人 使用技術：Next.js, ChakraUI, Chart.js, firebase 自分の役割はフロントエンド、チームの進捗管理、技術選定、デプロイなどを行いました。 ### やったこと フロントエンドの実装では、主にUI実装、firebaseとの連携、vercelを用いたデプロイに取り組みました。 - アンケート画面のUIの実装 - 質問項目をfirebaseで保存、その項目をアンケート画面に反映させる - 回答をfirebaseで保存する。 - firebaseに保存された回答を元に結果画面のグラフで表示できるようにする。 ### 成長したこと 自分は特にReact,Next.jsを用いてのwebフロントエンド開発に取り組んでいますが、徐々にバックエンドの開発などにも力を入れていき、フルスタックに開発できるようになりたいと考えており、その中で、今回はfirebaseを用いて、データを実際に保存し、呼び出し、グラフで表示するといったことができ、デプロイまですることができたので、成長につながったと思います。 また、TypeScriptによる型定義も以前までは詰まることが多かったのですが、徐々にできるようになってきており、nullをif文でしっかり条件分岐をして処理を実装するなどができるようになってきました。 さらに、今回の実装では、useStateで状態管理したデータをuseContextを用いて管理し、アンケートの最終画面でfirebaseに保存するようになっているのですが、この過程で、useStateでしっかり管理できていることをuseEffectで確認してから実装するという点を新しく学びました。 最後に、今回は自分がハッカソン経験者で、チームメンバーの他3人がハッカソン未経験者ということもあり、一緒に実装を考えながらチーム開発を行うことで、チームでの実装中のコミュニケーションも円滑に進んだり、実装中に開発物のよくない点を発見し、改善することができました。ただ別々の機能を実装して協力するのではなく、一緒に実装を考えながらチーム開発を行うという新しいチーム開発の取り組み方を経験できたことが自分の視野を広げ、後輩が続々と入ってくる中で、活かすことができそうな経験をしました。 ### 関連リンク Github：https://github.com/K-Ryo-ta/narahackathon