こんにちは。JMDCプロダクト開発部で社内向けの運用システムを開発している中澤です。
本記事はJMDCアドベントカレンダー2日目の記事になります。
エンジニアであればキャリアのなかで、まったくさわったことがない言語やサービスを短期間でキャッチアップして開発に入ることはよくあることだと思います。 今回、web開発をほとんど経験してこなかった筆者が、短期間でフロントエンド技術を学んでプロダクト開発を行う機会があったので、開発途中のタイミングではありますが、その経験を言語化し、整理してみます。
背景
学習開始時点の筆者のスキル感については次のような感じです。
- エンジニア歴6年
- キャリアの大部分でC#クライアントアプリケーションの開発をしている
- web技術については研修や、vue.jsのちょっとした修正の経験などはあり
このたびチーム構成の都合で、フロントエンド側の開発を単独で進めることになりました。 もちろんPMからまったくの無茶ぶりを振られたわけではなく、以下のような形で進めることを計画しました。
- 社内テックリードの協力を仰ぎ、学習支援、開発方針決め、コードレビュー、コードベースやCIなどの構築を依頼
- PJ開始に先駆けてフロントエンドの開発を開始
PJ準備期間
-7月頭-
テックリードとの顔合わせを行い、学習する対象を整理しました。 そのとき出された課題図書と期間は以下の通りです。
プロを目指す人のためのTypeScript入門
この本で、TypeScriptの基本文法を叩き込みました。練習問題が用意されており進めやすかったですね。 学習期間は2週間程度。
React 公式ドキュメント
項目ごとにチャレンジ問題が充実している点もよかったです。 問題はjsxでしたが、欲張ってTypeScriptで記述していたこともあり、時間がかかっています。 学習期間は1ヶ月程度。開発が開始してからもときどきこのあたりのチャレンジ問題にお世話になっています。
Tailwind CSS実践入門
こちらは写経向きではないので、ときどき開いて眺めてました。リファレンス寄りの使い方ですね。
学習期間に特に意識していたこと
土日に一気に進めようとしないこと
- 毎日コードを書くこと。
これは著者の性格によるところが大きいですが、土日にがっつり学習を進めようとすると長続きしないので、毎日進めることを意識しました。
書いたコードはGitにコミットし、疑問点や不明点を記述しておくこと
書いたコードをすべてコミットし、疑問点があれば、テックリードにすぐコードを見てもらえる状態を整えました。 副次的な効果として、Githubのアクティビティがハビットトラッカーのように機能し、今でも毎日コードをコミットし続けています。
このあたりはt-wadaさんの Write Code Every Day に影響を受けています。 （厳密にここにある4つのルールを守れているわけではないですが）
Githubに毎日コミットをすることを目的にすると、あまり本質的でないハックのようなコミットも発生してしまいます。
ですが、日常の業務のなかで理解の甘い分野を拾って、自学で潰すサイクルが生まれたことや、 とりあえずプライベートで開発環境を開いてコミットできるコードを書けないか考える習慣が身についたので、多少のハックは許容しています。 毎日コミットする習慣は5ヶ月たった今でも続いています。
AIを活用できないか考えること
学習の過程で開発や学習へのAIの活用は意識しました。部としてCopilotを活用していく方針であることと、開発担当が単独であり、アウトプットを増やすことが理由です。 AIを使いつつ、何ができるか、AIツールとどうつきあうかを考えながら進めました。
- AIが大量のコードを提案してくれる
- 自分は提案されたコードを採用するか、採用しないか決断する必要がある
- 決断のために、仕様を読むのに時間をかけている
特にフロントエンド初学者の視点ではどのフレームワークがどんな機能を提供しているか、よく理解できていない部分があったので、 どんな機能を使えばよいか（つまり仕様書のどこを読めばいいか）をAIの回答からあたりをつけやすい点が助かっています。
こちらもtwadaさんのスライドに影響を受けています。
PJ開始
-8月半ば-
この時期にコードベース構築が完了し、開発に入りました。 マークアップから開始し、そのときどきの課題感に応じて、tailwindcss(やピュアcss)、reactの特定のhookなどの学習を行っています。
-9月頭-
実装&ペアプロ開始
ペアプロではドライバー／ナビゲーターのような区分がきっちり分けずに進めています。
テックリードとVSCodeのLiveShareをつなぎ、自分がコードを打ち込むこともあれば、テックリードがコードを記述することもあります。
意識していることは次の通り。
- 自分がコードを書く場合、どういうコードを書こうとするか言語化してすすめる。
- コードを書いてもらったり、正解を提示してもらった場合は、テックリードが考えていることを言語化してもらったり、解の導き方の思考の流れを質問する。
このあたりは直感でやってるので言語化が難しいですね。
まとめとこれから
このブログを書いている現在地点です。
- プロジェクトとしてはユーザーレビューをしつつ細部を詰めていくことを意識する。
- 細かなバリデーションや異常系より、レビューのための正常系の実装を優先する。
- 単純な開発技術だけでなくヒューマンスキルが必要な分野になるので、適宜手法を言語化しつつ改善のサイクルを回していく。
- 学習について、テックリードに組んでもらったコードベースやCI周りは理解しきれず使っているものもあるので、ナレッジを整理し、チーム内に展開していく。
こんなところになります。
普段から言語化することや改善のサイクルについて意識していたつもりでしたが、こうして言語化してみると、ペアプロ周りなどは雰囲気でやってることがわかりますね。 このあたりもナレッジをまとめつつ改善できるようにしていきたいですね。
明日3日目は、新倉さんによる「JMDC 基幹システムにおけるプロジェクトマネジメントの話」です。お楽しみに！
JMDCでは、ヘルスケア領域の課題解決に一緒に取り組んでいただける方を積極採用中です！フロントエンド /バックエンド/ データベースエンジニア等、様々なポジションで募集をしています。詳細は下記の募集一覧からご確認ください。 hrmos.co
まずはカジュアルにJMDCメンバーと話してみたい／経験が活かせそうなポジションの話を聞いてみたい等ございましたら、下記よりエントリーいただけますと幸いです。 hrmos.co
★最新記事のお知らせはぜひ X（Twitter）、またはBlueskyをご覧ください！
