React学習約2週間で、Reactの実務に参加した話 #React

はじめに

とある企業のアルバイトでReactを書いています。
幸運にも、Reactを学び始めてすぐにアルバイトを始めることができました。
その時の事や働き始めを思い出しながらまとめてみようと思います。

これからReactを学習する人やインターン参加したい人に少しは参考になるかなと思います。

自分について

自分は現在文系の大学3年生です。
プログラミング学習歴としては、1年半~2年の間くらいって感じです。
Reactを学び始めた当時は歴1年位でした。
4月から参加したのですが、3月3週目までは、JavaとかjQueryとか使うアルバイトに参加していました。

その時のことも少し記事にまとめてます
記事:めっちゃ初心者が地元の長期インターンに10ヶ月参加してみて感じたこと。

汎用的なスキル、基礎知識大事だって思って昔は資格の取得とかも頑張ってました。
記事:文系大学2年生が1年間で取得した資格5つ紹介

ちなみにアルバイトと資格取得に没頭していたので、この段階ではGitあまり使えなかったです。
2月途中まで、草ほぼ0です。

なので、ReactとGitを平行で学習って感じです。
(2月はJavaとGitを平行で学習してました)

会社について

学生が起業した会社です。
サービスリリース2ヶ月後に僕は参加しました。
エンジニアは、4名で全員が学生です。
フロントエンドとバックエンド別れて2名ずつで開発しています。
他部署も合わせると、当時は7名で現在は17名です。(ほぼ学生)

参加まで

Reactを学びたいと思って学習を始めた頃に「うちでやらないか」と声を掛けて頂いて参加しました。
その声を掛けてくださった方とは、元々知り合いでした。
自分がプログラミングの学習を始めた頃に、自分からTwitterでDMを送って会いに行ったことがあり、それからTwitterでゆるーく繋がっていた感じです。(たまにリプしたりw)

Twitter頑張るのって大事ですね。

初めて知り合ってから約1年後、アポイントとって会いに行き、久々にお話しに行きました(雑談)。

近況報告みたいな感じで、「ReactやGit学びたいから、今のアルバイトの会社を辞める予定で、とある会社(別の知り合いの人)にアルバイトのお願いしようと思う」みたいな話をしました。
その時に、うちもReact使っていて、人を探してるみたいな話を聞きました。

別の知り合いの人へ話をしに行ったりもしたのですが、色々考えて、結果的に、誘って頂いた今の会社に参加することになりました。(Twitterで繋がった人)

学習について

ここでは、参加するまでにどんな学習をしていたのかを紹介します。

学習の仕方

公式チュートリアルを軽くやる
静的なサイトを作ってみる
Todoアプリを作ってみる
色々気になる部分を学んでいく...

みたいな感じでした。
Todoアプリを作る前に、静的なサイト(部活用のホームページ的な奴)を作ったのはよかったかなと思います。
段階を踏んで理解していけます。propsとかstateの使い方、jsxの構文とかが使えるようになりました。

実際に手元で動かしてみるがやはり最強です。
ポイントは、なんでもいいから自分で変更を加えるだと思っています。
文言変えたり、処理を少し変更してみたり、機能を1つ加えてみたり、なんでもいいと思います。
写して動かすだけだとやっぱり分からないので！！

最初はよく分からなくて、classコンポーネントと関数コンポーネント両方学んだりしてたのですが、とりあえずは、関数コンポーネントだけ学べば大丈夫です。

あとは、よく分からなくてもTypeScriptで書いた方が絶対いいです。
あと、Redux入れると言語変わるレベルで、複雑になって変わってくるので、最初は学ばなくてもいいかなって思っています。
propsの使い方とか、hooksの使い方とか基礎的な部分に集中したほうがいいと思います。

学習に使ったもの

React公式ドキュメント

基本的に気になる部分があった時や深く理解したい時に読むとかそういう使い方です。
classコンポーネントで書かれたりして好きでは無かったんですが、最近関数コンポーネントで書かれてるみたいですね。

とりあえず、チュートリアルはやってみました。
これも確かclassコンポーネントで書かれていた気がします。
Qiitaの記事とかで、「関数コンポーネントに書き換えてみた」とかあると思うので、それを参考にしてもいいかもしれません。

Next.js公式ドキュメント

めっちゃすごいって話を聞いて面白そうって思って脱線してしまいましたw
でも基本的なReactの構文みたいなところは同じで学べます。
むしろ、色々といい感じにやってくれてるので、Reactのルーティングとか設定とか、そこら辺を苦労せずに効率的に基礎的なReactの構文みたいなところを学べた気がします。

チュートリアルの日本語訳とりあえずこれをやりました。

IT KINGDOM

Twitterで知り合った同じ23卒の人と3人でzoomしている時に、2人が入っていて自分も入りました。
だいぶ良いです。

いい所ポイント

実際のプロが書いたコードが見れる (真似とかしてました)
サロンオーナーに相談とかできる
newsとか良記事とか、色々な最新情報が紹介されている
解説動画めっちゃあって、めっちゃわかりやすい

ここの解説動画で、React, Next.jsの基本的なことはできるようになるんじゃないかなって思ってます。

JavaScript Primer

JavaScriptの基礎をざっと学び直したくて、使っていました。
部活までの時間とか、電車の時間とかにiPadを使って読んでいました。
気になった部分、不安な部分を一気にざっと学ぶのに使いました。

気になる部分だけざっと読んだらもう使っていません。

Qiita

React hooksを基礎から理解するシリーズの記事は何回か読んだ記憶があります
移動中とかトイレとか、部活の待ち時間とか、ちょっとした時間に読むみたいな感じでした。
他にもいい記事を見つけたら読むみたいな感じで、会いてる時間に色々読んでいました。

YouTube

しまぶーのIT大学
【とらゼミ】トラハックのエンジニア学習講座 -新・日本一わかりやすいReact入門【基礎編】
※ 僕が見てたのはこれの古いバージョンです。新しいやつが出てるようだったのでそっちを紹介しておきます。
やっすんのエンジニア大学-React入門未経験から1週間でマスターする

お風呂の時間とかにたまに見たりしていました。
全部は見ていないと思いますが、見たいなと思ったものを2倍速にして、流し見みたいな感じです。

しまぶーのIT大学さんはサロンメンバー限定公開で沢山動画があって、それもすごいわかりやすいです。
それ見て、あとは手を動かせば基礎的な大体のことできるんじゃないかなと思います。

参加してから

フロントエンドエンジニアは僕と同学年の人の学生2人だけなので、「初めは教えてもらいながら開発」とかではありませんでした。調べて、コード読んで、動作確認して、なんとか開発していくみたいな体制です。

業務委託契約で、好きな時間に開発って感じなので、質問したらすぐ教えてもらえるとかでも無いですが、相談とかは全然できる感じです。基本的には、ドキュメント読んで、コード読んで、ゴリゴリって感じです。

参加してまず感じたことは、約2週間学んだレベルでもやること、出来ることたくさんあると感じました。

例えば、ページ単位でのバグ改善や表示の修正。
ちょっとした凡ミスが原因ってことが多いです。
該当箇所に辿り着くのは、最低限のReactの知識があって、少しプロジェクトの構成やルールを教えて貰えれば、できると思います。

初めは、実際に表示されている文言をVSCodeの検索にかけてファイルを見つけたり、
文言変更して表示を確認して、対象のファイルかどうか確認したりしていました。

該当の箇所が見つかったら、console.logとか使って実際に値を確認しながら、おかしそうなところを探して直すみたいな感じでした。

1から作るのは難しいと思いますが、改修系は難易度が低い(だけど重要みたいな)ものも多いです。
また、機能追加とかも、参考にできるコードがあるので落ち着いてコードを読みながら書いていけばそこまで難易度高くないことも多いと感じました。

そんな感じで、難易度低めのタスクをいくつかこなすとどんどん慣れていきます。
Reactの知識もそうですが、そのアプリ自体の知識とか、アプリの構成に関する知識とかがついてきて、どんどんできることが増えていきます。

って感じで実際に、参加した月の間には、新しい(機能)ページを作ったり、改善提案して改善とかもしていました。スタートダッシュよかったなっと思っています。
自分がうまく行ったなと思う要因は2つです。(結構当たり前なことです)

アプリを色々触って、どんな機能があるか把握できたこと。
始まる前にコードもらって読んだりしていたこと。

アプリにどんな機能があるか把握することと、コード全体をみてどんな役割でディレクトリが分けられているのかを把握することで、開発の効率はすごく上がると思います。実際にタスクやっている時は、該当部分に集中してしまいますが、時間をとって全体の把握はすごく大事だなと思いました。

その後もどんどん開発をしていき、機能追加だったり、SEO対策だったり、僕主導で技術移行なんかもやったりしました。どんどんできることが増えていっていき、楽しいです。

達成したいことがあって、それを達成するために、調べて、コードを書いて、改善してを繰り返し、少しずつ成長していっています。

おわりに

React学習2週間くらいで、実務に参加している話を振り返りながら書きました。
本当に学習を始めたばかりの時って働くこととか開発することのイメージ全くわかないと思うので、少しでも参考になったら嬉しいです。

今はその会社と、このQiitaを作っている会社でインターン生として開発をしているのですが、「できるね」って言ってもらえることもあったりして、Reactの力はだいぶ着いて来ているなと思っています。

これからもどんどん成長していきたいです。
一緒に頑張っていきましょ！！＾＾

あと、初アドベントカレンダー参加でした。
記事書くって宣言すると、めんどくさくてもちゃんと書くので宣言って大事ですね。

ありがとうございました。

React学習約2週間で、Reactの実務に参加した話