ID:69535さん

### プロジェクト概要 運用・保守の観点から現在のホームページをアトミックデザイン設計を用いてコードを再構成した。 ### チーム情報 経験豊富なフロントエンドエンジニアの先輩１名と私自身のみ。 ### 使用した技術 TypeScript, React.js, Next.js, microCMS, TailwindCss ### 開発・実装内容A 【概要】アトミックデザイン設計を用いたディレクトリ構成にする。 【課題・問題点】molecules、organismsディレクトリに関し基準が曖昧となり、ファイルの分配に頭を悩ませた。 【打ち手】moleculesディレクトリを作成せずにorganismsディレクトリのみに絞り、開発には関係のない無駄な議論を避けた。 ### 開発・実装内容B 【概要】コンポーネントをステートレスに保つ。 【課題・問題点】テスタビリティ、再利用性を高められたものの、不要なレンダリングが発生した。 【打ち手】useMemo等を使い不要にレンダリングされる部分を無くすことに成功した。 ### 開発・実装内容C 【概要】見た目専用とそれ以外（ロジック）でコンポーネントを分ける。 【結果】ディレクトリそれぞれで責任の分担ができるようになり、メンテナンスしやすいコーディングができた。クライアント側の状態管理に関してより上の階層で行い、再利用性・テスタビリティを高めることができた。

### プロジェクト概要 プログラミングスクールRareTechサイトの完全リニューアル。 私は講師陣が講義登録を行えるようzod, react-hook-formを利用したフォームの実装を担当した。 さらには、個別カウンセリング予約ページの実装を担当。ユーザーがカレンダーから予約日程を選択し、クライアント側の状態管理を用いて次ページに選択した日程を表示させつつ、ユーザーの情報をフォーム入力していただくというもの。 ### チーム情報 PdM・PjM２名、デザイナー３名、フロントエンド３名、バックエンド２名、インフラ２名 ### 使用した技術 TypeScript, React.js, Next.js, GraphQL, TailwindCss ### 開発・実装内容A 【概要】講師陣が講義登録を行えるようzod, react-hook-formを利用したフォームの実装を行なった。 【課題・問題点】GraphQLを利用し、バックエンド側のデータベースからプルダウンのリストを取得する点。 一方、登録をする際に入力した情報をデータベースにPOSTする点。 【打ち手】バックエンド側のデータベースからリストを取得することに関し、pages配下でSSRを実装し、apollo ClientによりGraphQLのクエリを用いてバックエンド側のデータベースから取得した。一方フロントからバックエンド側のデータベースにPOSTすることに関し、axiosを用いてNext.jsにデフォルトで存在しているNodeサーバーへHTTPリクエストを送り、apollo ClientによりGraphQLのクエリを用いてバックエンド側のデータベースへミューテーション処理を行うことで実現できた。 ### 開発・実装内容B 【概要】個別カウンセリング予約フォームの実装を行なった。 【課題・問題点】ユーザーがカレンダーにより日時を選択し、予約フォームページに飛び、ユーザーの名前・メールアドレス・年齢等入力し、予約するという実装。予約フォームページでユーザーが選択した日時を表示する点。 【打ち手】リロードした際に個別カウンセリングTOPページに遷移するという実装であったため、Redux, Contextという概念をなくした。その場でのクライアント側の状態管理で良いということに気づき、React hooksのuseStateを用いて実現できた。