見出し画像

Reactチュートリアルをやってみた新卒デザイナーの話

kibayashi

この記事は freee Designers Advent Calendar の 24日目(あと2記事！)です。

はじめまして。こんにちは。今年の春(2021年)に新卒入社したプロダクトデザイナーの木林です。社内ではkiba-chanと呼ばれています🦜

最近のマイブームは髪を伸ばすことです。髪が長いと強そうなデザイナーに見えるんじゃないかと思って、入社してから伸ばし続けています。しかし残念ながら、今のところ貫禄が身についた実感は少しもありません。

さて本題ですが、この記事では、プロダクトデザイナーとして新卒入社後すぐにReactチュートリアルをやってみた話を紹介します。途中、freeeの新卒研修に関しても軽く触れるので、興味がある方は是非参考にしてみてください！

4月新卒入社、研修が始まる

freee2021卒の新卒研修は以下のように進みました。

  • 4月初旬 ~ (2週間)：全職種の合同の研修

  • 4月中旬 ~ (2週間)：プロダクトデザイナー職のみの研修

  • 5月初旬 ~ (1ヶ月間)：エンジニア職プロダクトデザイナー職の合同の研修

（毎年改良されているようなので、来年以降は違った形になっているかもしれません）

今回の記事ではそれぞれの研修について深く触れませんが、どの研修も貴重で充実した経験ができました。(去年の研修の様子) 同期とわいわい議論したり、一緒にプロダクト作りをするのは非常に楽しかったです。

5月から始まったエンジニア職プロダクトデザイナー職合同の開発研修では、4人の新卒で1組のチームになり、1ヶ月かけてアプリケーションのコンセプト決めから実装までを行います。コンセプト決めや情報設計、UIデザインなどのアプリケーション開発の前半のフェーズでは、プロダクトデザイナーの経験を活かして、ある程度活躍できそうな気がしました。しかし後半のフェーズになると、私がUIを作っても、そのUIを実装する時間があるかどうか分かりません。それなら私もコードを書いた方が最終成果物のクオリティは上がるだろうし、必ずどこかでコードを書く必要があることを薄々感じていました。

しかし、現状の私のコーディングスキルでは開発研修で足を引っ張ってしまうのではないかと、少し不安になりました。そこで改めて基礎を学ぼうと、今回の主題であるReactチュートリアルへの挑戦を決意しました。

開発研修で活躍したい前提があるので、開発研修が始まる5月までにはReactチュートリアルを終わらせる必要があります。業務後に集中して行い、4月中旬から4月末までの約2週間弱ほどでの完走を目標に進めました。

チュートリアルの進め方

さて、本題のReactチュートリアルについてです。

Reactチュートリアルでは、3×3マスのマルバツゲームを作成します。フロント(React)のみで動作し、サーバーとの通信等は行わない簡易的なアプリケーションです。

以下は公式が出している最終成果物です。

https://codepen.io/gaearon/pen/gWWZgR?editors=0010 より

上の画面のような機能を揃えるのを最低限の目標として、以下のように進めることにしました。

  1. チュートリアルのサイトを読み込んで一旦完全理解()する

  2. 仕様を整理する

  3. 実装の方針考える

  4. 手動かして書く

私の性格の問題もありますが、公式の通りにチュートリアルを進めるよりも、チュートリアルに書いていないことをいくつか試した方が学びになるし、なにより楽しいのでは？と考えました。あくまで趣味の学習だし、楽しんでやるのが一番でしょ！の精神です。

とはいえ自身がReact初心者であることは重々承知しているので、調子に乗りすぎないように注意しました。上記の1.2.3の工程を踏んで、自分に実装可能そうな範囲で実装の方針を考えました。とはいえ、新しく追加した仕様の箇所で沼にハマることが多かったです...(知ってた)

同期に助けてもらいながらコーディング

やりたいことの大枠が決まったので、実際にコードを書き始めました。具体的に躓いた箇所を挙げるとキリがないので省略しますが、一進一退の繰り返しでした。

悩んでいるところ、どう解決したかなどをslackの自身のtimesで呟いていると、通りすがりの心優しきエンジニアが何度も助け舟を出してくれました。

slackで、21卒の同期エンジニアに教えてもらっている様子
slackで、21卒の同期エンジニアに教えてもらっている様子

だいたいのことはReactチュートリアルの公式ページで解説されていますが、日本語が難しくて理解できない箇所も多かったです。理解できない箇所にぶち当たるたびtimesに呟いて、それを見た同期が親切に分かりやすく解説してくれました。

研修で忙しい中で貴重な時間を割いて、コーディングを教えてくれた同期の大先生たちには本当に感謝してもしきれません🙏 同期、本当に優秀で優しくて最高です。

実装で詰まってる様子。自己解決できた
実装で詰まってる様子。自己解決できた

終盤は「二次元配列」「参照渡し」などの単語も覚えて、自分自身でググって問題を解決できるようになってきました。成長を感じます。

完成！！！！！！！

チュートリアル着手から10日…なんとか動くものができました！

slackで、チュートリアルが完成した様子を報告している様子
slackで、チュートリアルが完成した様子を報告している様子

想定していた挙動通りに動いた時はすごく嬉しかったです。実際に動作するので、figmaなどでデザインデータを作りきるのとは少し違った感動がありました。（デザイナーなのにUIの見た目がイケてない件に関してはご愛嬌、ということで）

感想

チュートリアルを通して、コンポーネント間でのpropsの渡し方やstateの更新の仕方など、Reactの基礎をしっかり学ぶことができました。チュートリアルに逆らって我流の仕様を挟んだせいで大きく躓いてしまったものの、JSで配列を操作すると沼る可能性が高いという教訓を得ることができました。こっそり成果物のGitHubも貼っておくので時間があればご覧ください。

そして肝心の開発研修では、Reactチュートリアル完走のおかげもあり、たくさんのPRを出すことができました。PRの数だけフィードバックをもらうことができたし、自分にとってすごく充実した研修になりました。

PRが41個マージされていることを示すGitHubのテーブル

開発研修では、41個のPRを作ってマージしました。頑張った👍

こうすれば良かったな〜って点

始める前は気づかなかったけど、こうした方が良かったな〜と思った点を、最後に２点書きます。

  1. 関数型で書けばよかった

    1. チーム開修では関数型でコードを書いたので。useStateってなんぞ!?ってなった。結局追加で勉強することになった

  2. typescriptで書けばよかった

    1. チーム開発ではtypescriptでコードを書いたので。型ってなんぞ!?ってなった。結局追加で勉強することになった

Reactに詳しい人に相談せず、見切り発車でチュートリアルを始めてしまったが故の失敗です。どうせ勉強するなら、事前に目的を明確にしてから、勉強内容を計画することが大事であることを学びました。

おわりに

いかがだったでしょうか？この記事が、読者の皆様にとってReactチュートリアルを始めるきっかけに繋がれば、最高に嬉しいです。私としても、早くデザイナーとしての貫禄を身に付けられるように、引き続き成長に励もうと思います！

明日はいよいよアドベントカレンダー最終日。ブランドチームに参加して4ヶ月のmegさんがfreeeにjoinした2つの理由について書きます！お楽しみに！


この記事が気に入ったらサポートをしてみませんか？