ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

Labels:  JavaScript 投稿者:takepo

JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで

ランサーズ Advent Calendar 2017 23日目の記事です。

新卒2年目エンジニアでpookのフロントエンドの開発を担当をしているtakepo(@takepo0928)です。
私は新卒として入社をする前1年間インターンをしていました。その頃にReactを触り始めて、今はもう2年ほど経ちます。もともとはWebの知識すらあやふやで、JavaScript自体あまり書いたことないレベルでした。

今回はそんなJavaScript初心者だった私が、React×ReduxによるSPA開発チームの一員になるまでにやってきたことについて書きたいと思います。

やってきたこと🖥

主にキャッチアップ時のこと&React周りが多いです。

React, Reduxの公式のチュートリアル

最初にReactの概要を読みつつ、公式のチュートリアルをやりました。 ちょっと自分で改変してみたりしてなんとなーくReactこんな感じ?みたいな雰囲気をつかみました。

その後にReduxの公式チュートリアルをやりました。 そもそもFluxとはなんぞや?状態だったのでそこから調べつつ進めました。チュートリアルをやった後もう一度振り返ってデータの流れ方を図とコードを合わせてみながら確認をしていた記憶があります。

チームで輪読会                   

当時の開発チームみんなほぼ React初心者だったので、解説する人を回しながら毎日30分間、通称サムライ本と呼ばれている(?)O’Reillyの入門Reactを使用しました。
今だとReactもかなりバージョンアップしているので情報が古くなってしまっている部分もあるかと思いますが、とてもお世話になった本です。

ちなみにこの頃はリモートでインターンをしていたときだったので毎日skypeで参加していました。チームみんなで読むことで、チーム間の知識共有や目線を合わせることができたのでとても良かったです。

一人React.js Advent Calendar

@koba04さんが書かれた一人React.js Advent Calendar 2014を読みました。Reactの基本的なことをまとめてくださっていて初心者にはとても分かりやすく、また簡潔にまとまっているため、あとで調べる時も役立ちました。
初めの頃は、componentのライフサイクルの記事や一人アドベントカレンダーでいつでも調べれるように常にブラウザの固定タブで開いたりもしてました。  

オープンソースにコミット

社内で開発してオープンソース化したパッケージに機能追加するためにコミットを試みました。
残念ながらマージまで至ってないですが、初めて外に自分のコードやプルリクを公開する機会だったので良いチャレンジになりました。
今度は自分で1から作って上げたいし、もっとオープンソースも読んでいこうと思っています。  

最新情報のキャッチアップ

今まで何かプログラミング言語を学ぶときは、本を読んだり公式ドキュメントを読んで習得することがほとんどでした。しかし、Reactをはじめ、フロントエンド周りは進化のスピードがとても早いです。常に新しい情報をキャッチアップしていく必要があります。
そのため、はてぶ・qiita・SNSなどを毎日チェックしてキャッチアップしていけるようにしています。

実務での開発

ここまでいろいろ紹介してきましたが、なんだかんだで実務で開発していきながら学んでいったことが一番多いです。
つまづくたびにググったり、パッケージのコードも読んだりしながらなんとか開発し続けてきました。
あと、先輩にレビューで良い指摘をたくさんもらい鍛えていただいたり、つまづいても聞ける環境だったのが大きいです。   

まとめ📝

このように色々やってきましたが、最初触れたときは全然分からなくて、覚えることも多すぎて蕁麻疹を発症したこともありました。また、思ったより自分の開発スピードが全然上がらなくて苦労しましたが、今となってはいい思い出、いい経験です。
ちなみにES6自体はもともとJavaScriptの知識が自分にあまりなかったため、「こんな感じなのね!classとか使えて良いじゃん!」と意外とすんなり抵抗なくいけました。
今なら日本語でも情報たくさん出ているので、もっと楽に習得できるのでは?と思いますが、誰かのお役に立てれば幸いです。

React楽しい😊✨

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

PHPエンジニア
Rubyエンジニア
サーバーサイドエンジニア
SREエンジニア
フロントエンドエンジニア
その他採用情報

関連記事

thumbnail
react.js/redux/webpack/flowtype なプロジェクトでの stylelint の導入手順

こんにちは。森です。 最近コードレビューで「CSS の `:` のあとにスペースがあったりなかったりします」と指摘され、つい悲しくなって stylelint を導入しました。react.js/redux/webpack/flowtype なプロジェクトです。こ …

thumbnail
redux-persist でブラウザストレージに一部のデータを保存しつつ、ストアに復旧するまで render を防ぐには

森です。 課題 redux-persist を使っていて、ブラウザリロード時にブラウザストレージからストアにデータを復旧する前に render されるのを防ぎたい。ストアに値があることが前提のコンポーネントでエラーになるから。公式ドキュメントとしてレシピがあっ …

thumbnail
ランサーズ流 React.js/redux アプリ開発入門

はじめまして、森(@mori-dev) と申します。React.js/redux, Rails, Node を使ったアプリの開発を行っています。 このエントリーでは、ランサーズでの React.js/redux プロジェクトの設計/実装などの雰囲気がわかるよう …