こんにちは、ウェルスナビの土本です。
私がウェルスナビに入社してから、もうすぐ1年が経とうとしています。
ウェルスナビに入社してから様々なことを経験させていただきました。
配属したての6-8月にかけて、前回の記事に記載した、LPサイト作成やLaravelアップグレード。また9月〜12月にかけてとあるプロジェクトのリードをすることになりました。（後日詳細を記載したいと思います）
そして、本年から新規プロダクトのNext.jsとTypeScriptを使用したフロントエンド開発に取り組んでいます。
今までは、既存のプロダクトの開発・運用がメインでしたが、今回初めてゼロからの開発ということで、開発を進める中で、私の当時の状況、課題、やって良かったことをまとめてみました。
1. Next.js x TypeScriptが何もわからない
当時の状況
- できること
- HTML、CSS、JavaScript、React(JSX)
- 課題
- Next.jsについて何もわからない。Reactも1年ぶりで覚えてない&最新のバージョンについていけていない
効果的だった取り組み
- 動画学習
- Udemyの動画で基本的なReact、Next.js v14、TypeScriptの書き方を学習。倍速再生や隙間時間を活用して学べるところが良い
- 書籍
- 「実践Next.js——App Routerで進化するWebアプリ開発」を読む。現環境のNext.js機能を一通り網羅されており、アプリケーションのサンプルコードがあるので実践的でわかりやすい
- Next.jsを使ったWebサイトを作成
- プライベートでWebサイトの焼き直しをする機会があったためNext.js で作成
やったけど自分には合わなかったこと
- インプットを完璧に覚えるまでアウトプットしない
- 開発する上でそのフレームワークなどの知識は最低限必要なのですが、永遠とインプットだけしても忘れてしまうと感じた。またものづくりしながらの方が吸収速度は早いと感じた
2. 環境構築周りで苦戦する時期
当時の状況
- できること
- Next.js x TypeScriptについて基本的な書き方を理解し、調べながら実装可能
- 課題
- 各ディレクトリをどのような役割で管理すればいいかわからない
- ライブラリのインストールや環境構築に関する社内のドキュメントが更新されておらず、記載通りに動作しない
効果的だった取り組み
- ディレクトリごとの役割をどのようにまとめるか記事を調べたり、同じチームのエンジニアに相談
- 関心事を分離、コロケーションを意識、単方向データフローなど
- 最新のNext.jsの公式ドキュメントを参考に社内のドキュメントを更新
3. 認証認可のライブラリ（Auth0）と戦う時期
当時の状況
- できること
- 軽微な修正や簡単な処理なら実装可能
- 課題
- 認証認可の実装は初めて
- Auth0がわからない。OAuth2、OpenID Connectすら知らない
- 一緒に頑張っていたもう一人のフロントエンドエンジニアの先輩が私用により帰国
効果的だった取り組み
- 動画学習
- Udemyの動画でOAuth2、OpenID Connectを体系的に理解
- 公式ドキュメントを見て実装
- 公式が提供しているこちらのNext.js用の記事を参考に認証フローの理解、実装をすすめた
- 質問できる体制づくり
- 他のフロントエンドエンジニアの方に質問できるよう上長に相談。不在の間は、別のエンジニアの方に相談し、問題解決を図るようにした
4. 初めての設計
現状
- できること
- コードを読む上で最低限の知識はついており、ライブラリのドキュメントなどを見ながら実装可能
- 課題
- テックリードと開発陣が集まる仕様の意見交換の場で会話に入れない
課題に対する取り組み
- コーディングする前に方針を洗い出す
- なぜこのタスクを実装するか、どう実現するか、ボトルネックになる要素はあるか、コンポーネント、データの受け渡しをどうするかなどをまとめる
さいごに
入社当初を振り返ると、社会人1年目としてはなかなか経験できない貴重な機会をいただいていると感じています。これからもそのことを意識し、新規プロダクト開発を通じて自分がどのように成長したいのか、いつまでにどのような状態になりたいのかを考え、新しい技術や知見を積極的に吸収しながら、日々の業務に取り組んでいきます。
Discussion