はじめに
アプリ開発の経緯
株式会社ドクターメイトの長期インターンの最終成果発表として、リアルタイムチャットアプリの開発を行いました。
使用技術
ドクターメイトで使用されているTypescript/React/Next.jsで作成します。
目次
1.アプリ概要について
2.アプリ構成について
3.作成時・作成後に感じたこと
4.今後の課題
5.インターンの感想
6.ドクターメイトへの感謝とお礼
作成者
- 開志専門職大学に通う学生
1.アプリの概要
同じ症状で悩んでいる人たちが悩みの共有・意見交換ができるチャットwebアプリケーション
医療機関にかかるほどではないけど、慢性的に続く体の不調(頭痛や倦怠感、筋肉痛...)
誰しもが一度は体験したことがあるのではないかと思います。
このような悩みを解決する際に以下のような困りごともあります。
我慢が聞く範囲なので有効な解決方法を見つけるモチベーションがわかない。
同じ症状を持つ人たちと気軽に状況を共有できない
医療機関に受診しようにも良さげな医療機関がわからない。
このような症状を共有したり・意見交換する際の困りごとを解決したいという思いからアプリを開発しました。
(2)アプリの特徴
チャット部屋
症状別に部屋を作成したり、オープンルームや承認しないと入れない部屋を作成できます。
チャット画面
アプリの機能一覧
メイン機能
- チャット部屋作成 (React × Typescript)
- 承認制機能
- 人数制限
- チャット投稿機能
- ユーザブロック
- 画像投稿機能
- 写真ファイル容量制限機能(5MB)
- プロフィール画面
認証機能
- ユーザー登録・ログイン・サインアウト
- Googleアカウントを使用したユーザ登録・ログイン
- メールアドレス認証
サインアップ画面
サインイン画面
2.アプリ構成について
使用している技術については以下のようになっています。
フロントエンド
- Typescript
- React 18.2.0
- Next.js 13.1.1
- Chakra UI
- Figma
Figmaで全体のデザインを作成して、処理動作や画面の遷移の仕方について予め決めた後に実装をおこないました。デザインにはChakra UIを使用して、簡潔に実装できるようにしました。
認証機能
- Firebase Authentication
- Firebase Realtime Database
- Firebase Hosting
Firebaseを使用することで、本来必要なバックエンド側の処理を不要にしました。
コード整形・静的解析
- EsLint
- Prettier
自動的にコード整形を行うようにEsLint・Prettierの設定し、一定のコードの読みやすさや統一性を持てるようにしました。
その他
- Github
- Slack
- Gitflow
チーム開発の行う際に、好き勝手にブランチを作成し混乱することを防ぎます。
githubにプッシュした際に、slackに通知をおくり進捗確認のミスを無くせるようにしました。
(2)アプリ構成図・フロー図
-
アプリ構成図
-
アプリ開発フロー図
3.アプリ作成前後に感じたこと
(1)アプリ作成時に意識したこと
① チーム開発のルールを遵守する
② タスクを洗い出し細かくする
③ Atomic Designをなるべく守る
①チーム開発のルールを遵守する
今回は、GitFlowに沿ったチーム開発を心がけました。
新しく機能をつける際には,ブランチ名をfeature/issue番号とする。
バグの修正にはbug/issue番号としました。
個人開発ではあまり行わない、ブランチを切ってプルリクエスト(PR)を出してレビューしてもらう動作が手早く行えるように意識しました。
②タスクを洗い出し細かくする
実装方法がわからないことが多々あったため、それを解決する際に実装したいものを細かく動作別に分けたり、実装できそうな部分を明確にし、わからない部分と分かる部分の境界を鮮明にする。
③Atomic Designをなるべく守る
Typescript・Reactによる実装で、コンポーネントごとに機能をつける際に、Atomic Designに沿ってコンポーネントを分けるように意識し、使い回しがしやすいコンポーネントの作成ができるようにしました。
作成時に苦労したこと
1.フロントエンドについて
フロントエンド側の技術について殆どが少し触った程度であったり、全く触れたことのない技術での実装になったため、実装の際にどの技術を使用して実現するのかという根本が不明であったり、コードエラーが出た際に、エラーを解決するためにどこを直せばいいのかについて余計に迷い苦労しました。
Typescript×Reactで理解できない原因の一端に、Javascriptの理解が足りていない問題が有りました。学習し直す際もJavascriptのどこまでを理解しているのかという、記録を残していないために余計な労力がかかりました。
2.Githubについて
基本的な動作(add,commit,push)はスムーズに行えるようになりました。
PRやissue、ブランチの作成についてもルールに沿って作成することができました。
コンフリクトを起こした際に、Github上で簡単に直せることに気づきました・
以上の一連の操作を、習慣的に操作できるようになるまでは戸惑うことが多く、何回も調べ直しが発生したのが苦労しました。
4.今後の課題
エンジニア像として、自走ができるエンジニアになることが課題だと思いました。
そのために以下の点を優先的に身につける課題として考えてます。
①質問力
②アウトプット量
③学習習慣の定着
④土台となる知識全般
①質問力
相手にどこで困っているかを明確にして、引き出したい答えを引き出すことが求められます。特にスピーディーに事を為すためには、ことさらに質問する力が重要だと思いました。
人に自分がしていることを説明するために整理切り出しをすることで、相談しなくても解決することがままありました。そのため、質問されたらどう答える？、質問する際にどうする？という意識をもって理解すること、実装を行うことで素早い理解や実装につながるのではないかと考え、これを課題としました。
②アウトプット量
インターンを行い、否が応でもアウトプットとして開発をする中で、今までのインプット>アウトプットの構図がインプット<アウトプットの構図になりました。この構図になってから、自身のできる範囲の部分が明確になり自分の力になっていることが実感できました。
このアウトプットを主体とした構図を維持するために、簡単な開発やブログで発信することで保つようにしていくことが課題です。
③学習習慣の定着
社会人になっても学習が必要だと言われているいましたが、これを行っている社会人を身近に見ることができないため実感がわきませんでした。しかし、インターンで社会人と間近に接する機会が生まれ、交流する中で、学習をする必要性を感じて、実践しようとしている人たちが大多数であったことから社会人からの学習が重要である身にしみて感じました。
そのため、学生のうちに社会人として生活を体験し、その後の学習をどのように行えるかを確立していく方法を課題としました。
④土台となる知識全般
知識や実装の力がまだまだ足りない事を感じました。特にフロントエンドのTypescript×Reactや、ネットワーク、セキュリティ,web技術についてさらなる学習を進めていくことが課題です。
(1)今後の学習方針
-
アウトプット主体の学習にする
- Notionでエラー解決方法や実装方法を自分なりにまとめ備忘録とする。
- Githubにログとして残し、継続的な学習のモチベーションを保てるようにする。
- 簡単な個人プロジェクトや身の回りの困りごとをなるべく簡単に解決する方法を探り開発を行う
-
学習習慣の見直し
- 社会人になったときの生活でも毎日の継続的な学習が行えるような方法や習慣を確立する。
- 学生のうちに、1日..１週間..１ヶ月でペース維持できる学習時間を把握する。
-
質問力の養成
- 質問する際のテンプレートを決めておくことで、質問するハードルを下げる
-
質問されたら？ということ念頭に置き、自分の学習していることを質疑応答で答えられるように意識しておくことで理解力を上げる。
5.インターン感想
４ヶ月弱の長期インターンでチーム開発を体験でき、実際にIT技術を社会にどのように活用していくかを間近で見ることができたのは大きな収穫でした。
自分の足りないことや課題となった部分も見つかり、自身のITスキルをどう活かすかの指針が生まれました。
学習面やビジネス面で特に言われている、スピード感をもって達成すること。これを自身で成長を感じ必要だと思えたことは今後の学習において大きなアドバンテージでは無いかと思います。
社会生活においては、「労働」の認識が大きく変わったことです。メディアで見聞きした「労働」というものは、ネガティブなものでしかなく辛いことという認識を持っていたが、入る会社の方針や空気感が合えば、労働はポジティブな面も内包することを感じました。
6.ドクターメイトへの感謝とお礼
この度は長期インターンで様々な面でお世話になりました。
インターンにおいて、最初から支援していただいた永妻様、大城様には心より感謝を申し上げます。
この貴重な体験を通して、自分のなりたいエンジニア像の方針を定めることができました。
今後はそれに近づけるよう精進してまいります。
今回のインターン本当にありがとうございました！！。