Reactの勉強方法について

こんにちは!株式会社GEEXの小池です。今日は私が取り組んでいるReactの勉強方法について紹介しようと思います。

Reactに限らず、今後別言語に挑戦してみたい方にも参考になればと思っていますので是非読んで頂けると嬉しいです。

 

きっかけ

 

「フロントエンドとバックエンドどっちが得意?」

 

多分エンジニアなら1度は聞かれたことがあるかと思うのですが、私はどっちも得意とは言えないです・・・。

今までJavaとC#で色々なサービス開発に携わってきましたが、どちらも程よく書いていたのでこっちが得意と自信を持って言えない・・・。

エンジニア歴も中堅ぐらいになってきたので、何か得意な分野を作って今後の武器にしていきたい!!

どちらかというとフロントエンド書く方が好きなので、フロントエンド側の知見を伸ばそうと思い昨年の秋くらいからReactの勉強を始めました。

 

なぜReact?

 

当時、Javascriptのフレームワークの中で一番人気だったので選択しました。

 

勉強方法

 

ちなみに、勉強前のフロントエンドスキルはこんな感じです

 

Javascript→6年くらい。主にjQueryで画面の表示制御や非同期通信作ったりしてた。ES6以降でほぼ書いたことない。
TypeScript→できません
CSS→基本的なものなら大体わかる

 


①:Javascriptの基礎を抑えてからReactの書き方を学ぶ

今までES6以前の書き方やjQueryを利用してフロントを書くことが多かったため、ES6以降の書き方を改めて復習しました。こちらの参考書を利用したのですが、Reactの基礎の前にReactでよく利用するES6以降のJavascriptについて抑えてあるのでおすすめです。

 

②:自分で勉強会を開く

フロントエンド開発やReactに興味がありそうな人に声をかけて、社内で勉強会を立ち上げてみました。誰かとやるとモチベーションも維持出来たり、人に教えたり説明したりすると知見がより定着するので効果絶大でした。

 

③:簡単なアプリを作ってみる

ある程度自分の中で理解できたなと思ってから、取り組み始めました。

 

作ったものその1 都道府県の人口構成表示アプリ

とある企業様のコーディングテストのお題を参考にさせて頂き、都道府県の人口構成をグラフで描画するアプリを作ってみました。(データはこちらのAPIを利用しています。)

 

ここまで色々勉強してきましたが、実際作ってみるとどう書けばいいのかなかなか出てこなくて大変でした。ただ、1本作り上げるたことで、少し自信が持てた気がします。

 

作ったものその2 ポモドーロタイマー

ある社員さんからポモドーロテクニックの話を聞いたのをきっかけに思いついたアプリです。(ポモドーロテクニックについてはこちらを参照ください。)前回よりは少しスムーズにコードを書くことが出来ました。

 

今後の予定

まだきちんと理解して使えているのか微妙な部分や、今後作ってみたいものも色々あるので、②、③をこれからも続けてより理解を深めていこうかなと思ってます。今後、別言語に挑戦してみたい方、Reactやってみたい方への参考になればと思います。