Otsuka Keisei

【プロジェクトの概要】 歯医者の医院にむけたWeb予約システム開発。 利用シーンとしては、 Webでの予約受付 医院内での予約受付 医院の医者による患者データ参照 【チーム構成】 フロントエンド：6人 バックエンド：4人 【担当領域】 フロントエンドのコンポーネント設計からAPIとの連携を担当 フロントエンドコーディングのライブラリーとしてはstyled-componentsと、Material-uiを採用した。 styled-componentsを使った拡張性の高いコンポーネントを作成。 Material-uiではアイコン、サイドバー、トースト、モーダルなどの導入コストは低く、リッチなUIを提供するところのみの採用をし、Material-uiを普段触らないメンバーでも学習コストがないよう意識をして導入をした。 【フロントエンド側のプロジェクトの流れ】 フロントエンドの技術選定 環境の構築（Prettier、ESLint、Redux、Mateiral-ui、styled-components、etc...） ATOM部分の細かいボタンやフォームパーツ、Atomsを組み合わせたMolecules 、共通のコンポーネント、処理をラップするTemplateとなるコンポーネントの実装 バックエンドのAPIの実装が済んでいるところの連携を行う。フォームライブラリでformikを採用（プロジェクトのリーダーの案）formikのstateの管理によって通常のuseStateの管理とは違い、簡潔な管理ができた印象がある。 【苦労した点】 ver2として使われているアプリケーションのリプレイスになり、ve2のデモ画面を触りながら挙動を確認し、バックエンド側メンバーとの連携をしながらのAPI連携はコミュニケーションコストもかかる点で大変だったポイントだが、スラックのテキストと、goオンラインで随時コミュニケーションを取りながら実装をして対応することができた。 【プロジェクトによる学び】 今回初めてTypeScriptを使った実装を行った。型を意識した実装をすることでエラーハンドリングにかける時間、型を定義することによるアプリケーション全体の可読性が上がったことを体験できたことがよかった。