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

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よりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

TestCafeでのE2EテストをBrowserStackでやろう

ランサーズCTOの横井です。 最近、個人でE2Eの画面テストを書く際にSeleniumからTestCafeに乗り換えつつあります。導入が(個人的には)Seleniumより楽っていうのと、要素の出現とかをよしなに待ってくれるので、テスト書くときにあんまりその辺を …

thumbnail
某お笑い番組っぽい結果発表シーンを JavaScript CSS で再現してみた

tsuyoshi(@numanomanu)です。ランサーズアドベントカレンダ−3日目の記事です。前回 React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 を書いたので、今回も引き続き javascript 周りについて書きました。 …

thumbnail
レスポンシブ対応の LP を簡単に作れるツールを React Redux で作った。ソースコードあり

pook チームの tsuyoshi です。レスポンシブ対応の LP を簡単に作れるツールへのニーズが社内で高まってきたので React Redux の練習がてら先日の開発合宿で作りました。社内でもランディングページの制作を依頼されたり、発注したりするわけです …