ID:70642さん

# プロジェクト概要 ## 目的 個別指導塾のwebサイトの新規作成と保守運用 ## 規模 - フロントエンドエンジニア　3名 ## 担当した役割 - コーディング ## 開発環境 - HTML - CSS - SCSS - JavaScript - Gatsby - WordPress - Git ## 工夫した点や取り組み ### 1 Webサイトのコーディング 新規ページや既存ページのコーディングを担当。 約11ヶ月間で100ページ以上のコーディングを実施した。 運用していたサイトは主に2つあり、WordPressとGatsby.jsで運用していた。 ### 2 GoogleアナリティクスでABテストの実施 より顧客を増やすためにデザイナーやマーケッターの方々と案を出し合い、ABテストを実施した。 ### 3 CSSの整備 不要なCSSなどが混合しており、1つのファイルに1万行以上書かれていた。 この課題を解決するために、主に2つの取り組みをした。 - 1 CSSモジュール化 既存の大規模CSSファイルをモジュール化し、コンポーネントごとに切り分け管理した。 これにより、コードの構造が明確化され、個々のコンポーネントが独立して開発およびメンテナンスできるようになった。 - 2 不要なスタイルの削除 実際に使用されていないCSSを特定し、削除した。 これらの取り組みにより、サイトの保守性と開発効率が向上した。

# プロジェクト概要 ## 目的 既存で運用している、医療系のwebアプリのリニューアル新規開発を9ヶ月間行った。 ## 規模 - フロントエンドエンジニア　3名 - バックエンドエンジニア　2名 ## 担当した役割 - フロント開発 - テスト - コードレビュー - 技術的フォロー ## 開発環境 - React - TypeScript - Redux - C# - PostgreSQL ## 工夫した点や取り組み ### 1 パフォーマンス、可読性の向上 propsのバケツリレーを許容した開発だった為、可読性や無駄なレンダリング発生の問題があった。 可読性とパフォーマンスを上げるために、propsのバケツリレーをやめるべきだと判断した。 Reduxを導入し、グローバルなステート管理ができる構造に修正したおかげで、propsのバケツリレーをなくすことに成功。 しかし、それだけでは無駄なレンダリングを減らすことに限界があり、コンポーネント設計の見直しとmemo化やuseCallbackを使用する提案をし、パフォーマンスの向上に貢献した。 ### 2 フロント未経験エンジニアのサポート 2名のフロント未経験エンジニアをサポート。 技術面での質問を受け、解説する時に、その技術に対して正しい知識がないとうまく言語化して説明するのは、困難だと感じた。 まずは、自分自身が何となく使用していた技術をおさらいし、理解を深めてから解説するように心がけた。 全体の細かいコードのチェックは、コードレビューを行ないフォローした。 ### 3 チームの技術的な課題の解決 パフォーマンスに問題があり、無駄なレンダリングを極力なくしたい目的があったため、Reduxの導入やコンポーネント設計の見直した。 しかし、それだけではレンダリングを制御するのには限界があった。 そこで、memo化やuseCallbackを取り入れることを発案。 結果、チームで取り入れることに決まり、パフォーマンス面の問題を解決した。

# プロジェクト概要 ## 目的 テーマパーク関連webアプリの新規開発を10ヶ月間行った。 テーマパークのチケット販売システム、高速バスの予約、温泉の予約、ホテルの予約、クーポンなど ## 規模 - フロントエンドエンジニア　4名 - バックエンドエンジニア　8名 - PM 1名 ## 担当した役割 - フロント開発 - コードレビュー ## 開発環境 - Next.js - TypeScript - Nest.js - MySQL ## 工夫した点や取り組み ### 1 ディレクトリ設計を担当 フロントのディレクトリ設計を1人で担当。 アトミックデザインなどの仕組みを調査し、要素の再利用性を高めるために、最小単位のコンポーネントを使いまわせるように工夫。 プロジェクトの要件に合わせて、調整し、設計した。 結果、ボタンやテキストボックスなどは、再利用できるようになった。 ### 2 ライブラリの選定 プロジェクトの要件に最適なCSSフレームワークを選定するため、複数のライブラリの公式ドキュメントや技術ブログで仕組みを学んだ。 コンポーネントベースで、CSSを管理したかったのでCSS-in-JSでの記述に決定。 styled-componentsとemotionCSSを比較すると、styled-componentsでできることは、基本的にemotionCSSでも可能だったため、今後の将来性を考慮しemotionCSSに決定した。 ### 3 SWR使用した開発 SWRを使用することによって、useContextやReduxで管理していたグローバルなステート管理をしなくて済むのでコードの記述が大幅に削減できた。 サーバーから取得したデータをキャッシュに格納できるようになり、fetchの回数を減らすことができるようになった。

# プロジェクト概要 ## 目的 銀行のwebアプリのリニューアル新規開発を2023年6月から2023年12月まで行った。 ## 規模 - フロントエンドエンジニア　16名 - バックエンドエンジニアは別チームのため人数不明 - PM 1名 ## 担当した役割 - 詳細設計 - フロント開発 ## 開発環境 - Next.js - TypeScript - java - MySQL ## 工夫した点や取り組み ### 1 詳細設計 基本設計や画面設計を参照しながら設計。 開発以外の業務は未経験だったため、参考書なども読みながら設計を行なった。 同時に、これまでの開発を通して気づいた、理解しやすい設計書（データベースの詳細元を記述するなど）の作成を心がけた。 ### 2 フロント開発 チーム内のエンジニアのほとんどがフロント未経験者だったため、技術的な課題をフォローし解決した。 他にも、既存コードより品質向上ができる案があれば、積極的に提案している。