フロントエンドエンジニア1年目としてやったこと

はじめに

初めまして、都内でフロントエンドエンジニアとして働くマンゴクです。
UdonTech Advent Calendar 2021 の21日目になります。

本記事では1年目のフロントエンドエンジニアが技術的なキャッチアップをどのように行なってきたか書いて行きます。
2021年4月からエンジニアに転職し、最近ではチームメンバーからReactの実装力は一定水準に達したと評価をもらえる様になったので、少しでも参考になる情報を共有できたらと思います。

業務内容

まずは簡単に業務内容を紹介します。採用関連のプラットフォームを構築しており、ReactとTypescriptとでフロントエンド開発を行なっております。　　
具体的には、入社初期のバグ改修タスクから始まり、現在では新規プロジェクトのライブラリ選定から実装まで幅広く開発に携わっています。

キャッチアップ方法

フロントエンドエンジニアとしての技術力を高めるために、下記の3つを上から順に取り組みました。
それぞれの項目を深ぼって見て行きます。

• エンジニアとして基本を固める
• Reactの構成概念を理解する
• Reactのベストプラクティスを理解する

1. エンジニアとしての基本を固める

まずはフロント・バック関係なく必要な普遍的なスキル向上に努めました。具体的にはコードの命名規則や読み易さなどです。現職では丁寧にレビューする文化
があり、入社初期は命名規則・可読性にかなり厳しく指摘を頂きました。(レビューコメントが80件を超える時もありました笑)

上記の背景からまずはエンジニアとしての基本を徹底的に固めようと考え、下記に取り組みました。

• レビューコメントを全てメモし次回以降必ず実践
• 書籍で知識を収集
  • リーダブルコード、リファクタリング等

どれもエンジニアとして当たり前のことですが、当たり前のことを徹底して行うという事は重要だなと感じています。

2. Reactの構成概念を理解する

次にReactを正しく使えるようにReactを構成する概念の理解を進めました。具体的には宣言型プログラミングや仮想DOM、差分検出処理などについてです。Reactはどんなコードでも実装はできてしまいますが、構成概念を理解することで読みやすくパフォーマンスの高いアウトプットを得られると思っています。

構成概念を学ぶ上で下記の文献や動画が役立ちました。

• りあクト！ TypeScriptで始めるつらくないReact開発
  • Reactの思想を全体的に学べる
• 差分検出処理(React公式)
  • React公式の差分検出処理解説
• Build your own React
  • Reactを自作して仮想DOM、差分検出処理、Fiberの理解を深められる
• A Cartoon Intro to Fiber - React Conf 2017
  • Fiberの仕組みに関して

これらの概念を知ることで次項目のベストプラクティスを理解するという点でも理解が進みやすくなったので結構重要なステップかと思います。

3. Reactのベストプラクティスを理解する

最後に質の高いコードを書くためにReactベストプラクティスの理解に努めました。具体的にはstate管理、コンポーネント分割、そしてパフォーマンス対策です。これらを理解する上で一番意識していることは、公式に近い情報に触れるという事です。
なのでFacebookでReactを開発するDanさんや,Danさんお墨付きのKCDという方の記事などを積極的にcheckする様にしています。

• Danさんの個人ブログ
  • Reactを作っている方のブログ
• KCDの個人ブログ
  • Reactの基本からベストプラクティスまで学べる一押しのブログ

これら以外にもReactのライブラリのGitHubを見るなども行なっています。

終わりに

フロントエンドエンジニアとして技術をキャッチアップする方法は様々だと思いますが、少しでも参考になれば幸いです。