はじめに・この記事の目的

私は職能デザイナーとして、フロントエンドの領域(React・Next)をベースとした自社サービスのフロントエンドの開発に携わっています。2024年の2月から約半年間で得た知識や経験を棚卸しして整理しておきたく、記事を執筆しました。

私について

2023年3月より、エイチームライフデザインにデザイナーとして入社し、自社の事業サービスにフロントエンドの業務を担当しています。
職能はデザイナーですが、デザイナーといっても人によって役割や得意領域は様々で、私はサービスのフロント側のコーディングやフロントエンドの実装を行っています。技術的にはHTML・CSS(モダンCSSも含めて)・React・Next等のスキルが必要とされる業務です。

2024年2月から自分の所属するサービスが変更し、フロントエンドの担当業務は大きな変化はしていないものの、よりReactやNextのスキルが実務で求められるようになりました。

今回の記事は2024年2月からの約半年間で、自分のスキルの伸びとやったことを整理しました。

スキルの上がり幅はどうだったか

2024年2月より前の状態はざっくりですが下記でした。

できていた&やっていたこと(before)

HTML・CSSでのマークアップでコーディング
検証を行い、不具合が起こっていないかパラメータやパスなど、パターンごとに確認する
React・Nextで構築されたアプリケーションでフロント側の表示・スタイリング
- 三項演算子で条件分岐によって出しわけを行う
- emotion(モダンcss)を使用してスタイリングを行う
- フロント側のリポジトリにオブジェクトデータを格納したファイルを作成し、読み込む
- 作成されたhooksを理解し、利用する
デザインデータ通りにコーディングする
MUI、Next UI、shadcn.uiなどのデザインコンポーネントを利用し、コーディングする

マークアップと検証で不具合が起こらないかのチェックがメインで、細かいところまで確認する力を積むことができました。
データを取得するまではすでに行われていて、その後のフロント側で表示するために調整するフェーズで必要とされるマークアップの技術を高めることができました。
レビュワーとして他の人のコードを見ることや管理画面を触る経験はまだありませんでした。

この半年間でできたこと(after)

GraphQLで取得されたデータを利用して、実装に必要なデータを取得する
取得したデータを仕様に合わせてfilter,mapし配列操作する
フロント側に必要なデータを表示できるように管理画面を触ってデータを追加する
Reactのhooksを自分で作成する
useContextを使用して、propsのバケツリレーを防ぐ
コンポーネント設計の見直し
他人の書いたコードをレビューし、不具合が起こっていないか・コーディングルールに則っているか確認
属人化を防ぐためにドキュメントを作成する

この半年間では、ReactやNextでのフロントエンドの実装をたくさん行い、基本的なスキルの基礎を身につけることができました。

具体的にスキルアップしたこと

施策面・保守面・運用面それぞれでスキルアップしたことを整理します。

施策面

施策面では新しくコーディングをする際に、保守性があり、品質の高いコーディングをすることを意識し、迷った際は相談しつつ実装しました。

例えばポップアップを作成し、選んだ選択肢によって配列の順番を変更する施策では、useContextとhooksを新規追加してpropsのバケツリレーを防ぎ、離れたコンポーネントでもvalueの値を取得できるような実装ができました。

保守面

品質の高いコーディングをするために、命名規則は誰が見ても理解できるようにしました。

コンポーネントや設計で改修できそうなところを施策の実装と一緒に改修したり、保守リストにまとめてあとからリファクタリングする時間をとりました。設計の見通しが良くなりました。

パフォーマンス面では、GraphQLが不必要に多く呼び出されている箇所を修正し、改善に繋げることができました。

運用面

ドキュメントがない部分は、属人化を防ぐために空いた時間にドキュメント作成を進めました。
例えば管理画面の触り方や追加の仕方・リポジトリのコーディングルールをまとめたものを作成しました。

運用ルールがあまり決まっていなかった場合は相談して方向性を決めて、議事録にまとめて共有しました。

スキルアップに繋がった理由

スキルアップに繋がった理由は以下であると考えています。

React・Next(PageRouter)の公式ドキュメントを全て取りこぼさず読了したことで基礎力が上がった。

公式ドキュメントを読むことで細かいところまで再確認でき、基礎力を身につけることができました。特にReactのドキュメントはサンプルコードも詳しく載っているので分かりやすいです。

輪読会で「プリンシプルオブプログラミング」の方を読み、保守設計の重要さを身につけた。

良いコードを書くためのプログラミングの原理原則が細かく書かれています。フロントだけでなくプログラミング全体のことが書かれていますがコードを書く上で知っておいた方が良いなと思うことばかりでした。

プリンシプルオブプログラミング3年目までに身につけたい一生役立つ101の原理原則

過去に自分の担当分を記事にしました。

ChatGPTを使用し、効率UP

AIチャットツールと仲良くなることで効率UPできました。(本当は頼らずに答えを出せたらいいけど...)

マージリクエスト(プルリクエスト)の概要を丁寧に記載することで、抜け漏れないかをレビュー前に再確認できた。

変更点をbefore/afterでスクショして貼り付けたり、どこに手をつけたかを概要やコメントを丁寧に書くことを意識しました。
自分でも漏れや不具合ない実装ができているかを再確認できること、レビュワーがレビューしやすくコミュニケーションを取りやすくなるのでメリットがあるなと思いました。

レビューされたことはメモしたり記事にまとめたりして、繰り返さないようにした。

基本的なことは、繰り返さないように自分で控えておくことで次から意識できるようになり、レビューを減らすことにつながります。

実務と自己研鑽で意識するポイントを明確にすることで、スキルアップに繋げられたと思います。

今後の目標

この半年間でスキルアップできたことをベースにして、今後の目標も考え中です。

パフォーマンスの観点で知識・経験を増やす
新しく入ってくるメンバーとの連携・サポートできるようになる
GraphQLの知識を身につける
React/Nextの基礎の見直し
APIでデータを取得するところの知識を増やす
GA4などイベント系のところも詳しくなる

などなど...できてないことはまだまだたくさんあるのでこれからも頑張っていきます。
お読みいただきありがとうございました。