エンジニア未経験のプロダクトマネージャーが、エンジニア留学のために勉強したこと

こんにちは。プロダクトマネージャーのmikiです。今回はじめての投稿ですので、簡単に自己紹介をさせていただきます。

私は4年ほど前にfreeeに入社しました。最初の2年はカスタマーサクセスとして、会計事務所さん・IPOユーザーさん・API連携希望ユーザーさんなどの様々な導入支援を担当し、その後、アライアンス事業部にて、パートナープログラムの策定・パートナー企業内でのカスタマーサクセスチームの立ち上げのご支援をしてきました。そして最近プロダクトマネージャーに異動になり、公式アプリを担当しております。

そして実は、現在はプロダクトマネージャー業務はお休みしていて、エンジニア留学の1期生として1月からAPIチームに参画し、エンジニアとして働いております。

エンジニア留学とは

freee社内の留学制度でエンジニアではない人が、3ヶ月間、エンジニアチームに一時的に参画し、エンジニアとして業務を遂行し、学習を深める制度です。

エンジニア留学へのマネージャーからの期待値(ミッション)

  • プロダクトマネージャーは開発チームと技術的なコミュニケーションができる必要がある。特に公式アプリはデベロッパーと直接の技術コミュニケーションが多いので業務知識に加え、より深い技術理解が必要である。 そのために必要な技術や開発プロセスおよび開発の勘所(仕様を一つ追加することの開発的なリスク、リファクタの必要性、どこまで詳細に仕様つめる必要があるか、開発にかかる工数など)を座学に加え、実務経験を通して学習してくること。

1週間の過ごしかた

マネージャーからの受け取ったミッションを達成するべく、現在の1週間のスケジュールはこんな感じで、なるべく起きている時間のほとんどはプログラミングの勉強に当てるようにしています。

1週間のスケジュール。朝6時から9時までは勉強、土日はほとんど勉強。

社内のイベント登壇用に作成したもので、少し時間のメモリが粗いことは多めにみてやってください。

エンジニア留学に向けた準備

エンジニア留学の1期生として年明けからエンジニアになるよ!とマネージャーから話をもらったのは12月の上旬のことでした。それから留学をするにあたって、少しずつ準備をはじめました。

PCをWindowsからMacに変える

エンジニアのほとんどの人がMacを使っていて、技術の解説はMacであることが多いとのことで、環境は合わせた方がいいと思い、変更しました。

仲間を作る

留学にあたって、基礎力となるプログラミング言語は独学での習得が不可欠でした。私は、なにかを学習するときは決まって、仲間を作るとうまくいくタイプだったので、オンラインのもくもく会に参加したり、もくもく会を開催したり、2月末を目標にHTML/CSS/JavaScript/Reactまで一緒に勉強したい人を募集して学習グループを結成してみたりと、積極的に駆け出しエンジニアの仲間を作る活動を行いました。

自己育成計画書を作成し学習を進める

これは新しい部署に異動するときには必ずやっていることです。自分がなにか新しいことを吸収してる期間は目に見えるアウトプットを出しづらいため、自分は世の中の役に立ってるんだろうかという気持ちが蔓延し、必要以上に自己肯定感が下がりやすい傾向にあると自己理解しています。トップスピードのまま3ヶ月間を駆け抜けられるように、自分がどれくらい昨日より今日、進歩したのかわかるようにスプレッドシートにて計画とその進捗管理を行い、モチベーションが下がらない工夫をしました。

今回は、上記3つの中でも、自己育成計画をピックアップし、 計画を立てる上で、非常に参考になりましたフロントエンドのロードマップ に沿ってどのように学習したかをご紹介させていただきます。

フロントエンドのロードマップ

roadmap.sh

これは@kamranahmedse さんが作成されたフロントエンド開発・運用に必要なスキルや知識・ツールなどをひとまとめにしてくれているロードマップ です。 上記のサイトに定期的にバージョンアップされながら公開されているようです。

ありがたいことに@TetsuKinomuraさんによる日本語版もあるので、こちらも貼っておきます。

さらに、親切なことにYouTuberのトラハックさんがこのロードマップについて解説もしてくれていました。これにより何を勉強しなければならないかという全体像をとてもよく理解できました。

youtu.be

エンジニア留学が決まったとき、何から手をつければいいのかわからず、勉強しておくといいと言われたものを手あたり次第に学び始めていました。あとからこのロードマップや解説動画に出会い、自分のやってきていたことがそんなにずれていなさそうで、ほっとしたのを覚えています。

また初学者にとって、自分の歩み方がずれていないか?という不安は日々ついてまわるので、学習のスタート時点でこういったロードマップがあると、とても安心だなと思いました。いつかfree初学者向けに、会計freeeの使い方やfreeeのAPIを叩くために必要な最低限の知識等をロードマップ にして公開してみたいです。

ロードマップ を眺めて立てた自己育成計画

下記はロードマップ とにらめっこし、1月〜12月にかけて立てた計画の一部抜粋です。

自己育成計画の一部抜粋。スプレッドシートに基礎的な内容から並べている

以降は、フロントエンドのロードマップにそって、どのように学習したかをご紹介します。

Internetについての学習

APIチームのマネージャーから年末に冬休みの宿題として、『Real Word HTTP』を紹介され、PdMのマネージャーからは『Webを支える技術』を紹介してもらいました。 しかし、いずれも読むための知識が圧倒的に足りなくて、音読はできるが理解ができない状態に陥ってしまいました。 そのため、もう一段レベルを下げて、『Web技術の基本』という文系の人向けにわかりやすくしてくれていそうな本を見つけたので、この本からまず入って学習を進めました。

HTML,CSS,JavaScriptの学習

この領域は、ドットインストールとYouTuberのしまぶーさんの動画で学習を進めました。 各領域はドットインストールは抜け漏れなく学習できるので、ざっと1回勉強をして、実践でじゃんけんアプリなどを作って、わからないことが出た場合は2回目を2倍速で見るという感じで活用していました。 ドットインストールは受講を終えていくとどんどん緑の棒が長くなっていき進捗がわかるので楽しかったです。

ドットインストールのキャプチャ

一方でドットインストールだけでは全体像や技術の背景・現在の開発現場でどこまで使われているのかなどはわからなかったので、そのあたりはしまぶーさんによる解説動画を見て理解していきました。もはやモダンな開発ではCSSや素のJavaScirptは書かないという事実は動画を見るまで知らなかったので、出会ってなかったらひたすらCSSを特訓していたかもしれません。3ヶ月の学習時間の配分を見誤らないかったのはしまぶーさんのおかけでした。

youtu.be

バージョン管理システム(GitHub,Git)

この領域については、Udemyの「Git:はじめてのGitとGitHub」で学習しました。

freeeで使われている方法についてはAPIチームのエンジニアのまっつーさんからレクチャーを受け、会計freeeのコード修正・プルリクエスト作成の実践学習を通して理解を深めました。

www.udemy.com

パッケージマネージャーとビルドルール

この領域については、YouTuberのしまぶーさんの動画で学習を進め、パッケージマネージャー・webpackの誕生の背景をざっと理解しました。

youtu.be

フレームワーク(React,Angular,Vue)

freee公式アプリはReactを採用しているので、まずはReactに限定し、学習を進めました。 この領域はじゃけぇさんのUdemyの「モダンJavaScriptの基礎から始める挫折しないためのReact入門」を用いて、JavaScriptの基礎を復習しつつ、Todoアプリを作成しながら学習しました。

www.udemy.com

axiosについては、YouTuberあべちゃんのReact入門をもとに、JSONPlaceholderやpixabayを用いてAPI通信の学びを深めました。

youtu.be

以上、自己育成計画をベースに学習した内容のご紹介でした。

FirebaseでReactを用いてアプリを作る基礎力は徐々についてきたので、引き続きTypeScriptを学び、いつか個人としてfreeeアプリストアでアプリをリリースすることを夢見て技術力をさらに上げていきたいと思っています。

来週は自分が対応した公式アプリの不具合の修正や機能拡張が続々とリリースされるのでとても楽しみです。

エンジニア留学はあと残り2週間!最後まで駆け抜けます!