Reactをなんとなく理解できるようになるまでのステップ

わたしはフリーランスのWebコーダーとして約2年半ほど活動していて、スキルの前提としては、HTMLやCSS、WordPressで使うために簡単なPHPや、ちょっとしたアニメーションを加えるためにJavaScript（jQueryが触れる）といったレベルです。

技術者としての幅を広げるために現在はReactのフレームワークを勉強しています。

その過程でいろんな本を読んだり勉強をしているのですが、自分なりに「これは良かったな」ってポイントがいくつかあるので共有しようと思いました。

これからReact学ぼうって方はぜひ参考にしていただけたらと思います。また一緒に勉強がんばりましょう！（ゆくゆくはzennのようなサービス作りたい...）

またもしReactの先輩が見ていただけたなら、「こうしたら効率いいよ」みたいなことがあれば教えてもらえると嬉しいです...。

今年（2020年）の6月頃から本格的に勉強しようと決めて、以下のようなサービスは頭の中でイメージして作れるうようにはなりました。
https://codebox.jp/button/button-background

まだまだ勉強の途中ですが、自分の整理のためにも学習方法をまとめていきます！

Reactの土台となる知識を整理する

Reactは土台となる技術それぞれのレベルが高いので、どこでつまずいているか分からない問題が発生します。

なので、まずはReactがどういった技術で成り立っているかを把握し、それぞれの概念をイメージできるようになるところからですね。

Reactは主には以下の4つから成り立っています。それぞれがどいった役割をしているのかを把握しておかないと、つまずいた時に整理ができなくなります。

• JavaScript（Node.js）
• JSX
• Babel
• webpack

JavaScript（Node.js）

そもそもJavaScriptを理解していなかったら、Reactの構文で間違っているのか、JavaScriptの構文で間違っているのか分かりません。

PHP等の順次・選択・繰り返しくらいの基本的な概念は理解しているので、まあいけるでしょって感覚でしたが、JavaScriptは書き方が特殊すぎてちょっと分からんのですよね。。。特にアロー関数やコールバック関数とか「書き方の癖がすごい...（千鳥ノブ）」

ということで、圧倒的なJavaScript力の低さを痛感したわたしは、一旦Reactを手放してJavaScriptの基礎本を読み始めるのでした。
→ JavaScript Primer 迷わないための入門書

JSX

Reactはさらに表示部分でJSXという構文が使われています。

JavaScript内でHTMLを記述しやすくするための言語です。JSXで書かれているということを認識しておくことが大事で、JSX内ではJavaScriptの長ったらしいif(){}みたいなブロック系の構文を基本的には書くことができません。

ここは特に勉強しなくてもHTMLやCSS、WordPress等でコーディングできる方でしたら直感的にコーディングできると思います。

Babel

BabelはJavaScriptの過去のバージョンを担保してくれるものと理解しています。特にIE用としての役割が強い印象で、ES6（※ ESほにゃららは、JavaScriptのバージョンです）からだいぶ書き方が変わったんですね。その書き方だと古いブラウザでは動かないから、Babelによって新しいブラウザでも古いブラウザでも両方で動くようにES6（新しい方）の記述をES5（古い方）で書き換えてあげる、といった動きをしてくれます。

JSXからJavaScriptへの変換もBabelが担っています。

Reactと勉強し始めると、Babel、JSXといった用語の説明が冒頭に始まるので、そこでまず面食らった記憶がありますね...。

webpack

webpackは、JavaScriptを依存関係を考慮してひとまとめにしてくれるツールですね。Reactで複数に分けたファイルをひとまとまりにして、1つのJavaScriptファイルとして生成してくれます。その過程で、Babelを通すとJSXをJavaScriptになおしてくれますしES5の書き方に直してくれたりします。

また、webpackは拡張性が高く、lintツールを導入して自動整形させたり、SassをCSSにコンパイルしたりと、いろんな作業を管理し実行させることが可能です。

Reactをなんとなく理解するために必要な学習

個人的にここを勉強することでReactの理解が進んだと感じた部分を共有していきます！

モジュールの概念

Reactではやたらと、import、exportしているのですが、そもそもこれが何か分かってないと、一生雰囲気のまま実装することになります。{}で読み込む場合もあるし、,で区切って読み込んだりします。

JavaScriptを1つのファイルにどかーっと書くのではなく、機能や役割ごとにファイルを分割することで、保守性や再利用性を高めるといった役割があります。そして、他のファイルの関数やオブジェクトを読み込むときの書き方がimport、「わたしは他のファイルから読み込んでもらっていいわよ！」って指定がexportとなります。

Reactではコンポーネント毎に分割して書くことが多く、import、exportが大量に発生するので、覚えておく必要があります。

JavaScriptの基本

JavaScriptの基本は一通り抑えておかないと、永遠につまづき続けることになるかと思います。どこかで腹をくくって入門書をガッツリ勉強する期間は必要になってくると思います。

個人的には作りながら足りないところを補う派ではありますが、Reactに関してはJavaScriptが使えて当たり前のところからスタートするので、そもそもJavaScriptが理解できていないとReactの理解も遅くなると思っています。

わたしのおすすめは、既に紹介していますが、JavaScript Primerという本で、網羅的でめちゃくちゃ勉強になります。
→ JavaScript Primer 迷わないための入門書

動画で学びたい方は、
【JS】初級者から中級者になるためのJavaScriptメカニズムがおすすめです（空いた時間でサクッと見れる）

※ 自分はPHP等の基本的な経験がある上で本を選んでいるので、もしプログラミング自体が初めての場合は、より基本的な書籍から始めた方がいいかもしれません。

JavaScriptの歴史

JavaScriptって謎に複雑なんですよね...。そもそも使われる用語が多すぎたり...。ES6って言われたり、ES2015って呼ばれたり、ECMAScriptとは？ってなるし、サーバーサイドのJavaScriptであるNode.jsってなんぞや...？みたいな...。

その辺のなんで複雑なのかといった部分や用語の整理は、JavaScriptの歴史を知ればスッキリします。

なので、JavaScriptの基本的なところで頭がごちゃごちゃしている人は、JavaScriptの歴史を知るといいかもしれません！自分はめっちゃ救われました...。

React標準のstateとprops

Reactの最低限レベルでいうと、状態を保持するstateと値を受け渡すpropsの2つですね。

教材でいうと、以下のセクション3までがちょうど理解しやすい部分です。
→ 最短で学ぶReactとReduxの基礎から実践まで

自分が冒頭で紹介したようなCodeBoxの機能だったりは、これだけの理解で作れたりします。

ReduxよりHooks？

Reduxを保留しまくっていたわたしですが、「さすがに紹介されまくってるし次のステップとしてやるか...」って調べていたら、「今はHooksでいい」みたいな話があって、Hooksの方から勉強し始めました。（どんどん保留になるRedux...）

これまでクラスコンポーネントで書いていたことが、すべて関数コンポーネントで書けるようになり、状態の管理も分かりやすい...ってことで好んで使っています。

ちょっと説明不足な部分もあるのですが、自分は以下の教材で勉強中です。
→ 最短・最速で学ぶ React Hooks 完全ガイド！基礎〜応用編 最新のReact開発+ステート管理をマスターしよう!

はにわ的Reactの勉強の流れ

自分は以下のような流れで勉強を進めています（現在進行系なう）。

1. 入門書どおりコピペで動かす
2. JavaScriptの勉強しながら、1からサービス作る
3. メンターに頼る
4. 空きあらばJavaScriptの基礎
5. 自分でサービスを作ってみる
6. （今後）勉強会に参加する

のような感じで、1つずつ自分の経験を交えて細かく見ていきましょう。

入門書どおりコピペで動かす

まずは、Reactの入門書を頭からやってみました。本の選び方としては、実際の成果物が出来あがるタイプのものがいいですね。

自分は以下のものをやっていましたが、まじで意味不明なままひたすらコピペしてた記憶があります。
→ React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

その後Udemyやりましたが、こっちの方が好きかもです。
→ 最短で学ぶReactとReduxの基礎から実践まで

その中でJSXとかBabelとかwebpackの設定とかよく分からんものがたくさん出てきますが、とりあえず「そんなものもあるんだなぁ」くらいの感覚でコピペしながら動くものを作っていくような感じですね。

実際にコードを書くと、ファイルの構成からコマンドの実行の仕方、ここにこう書いたらこういう動きになるのか、みたいなことが漠然と分かってきます。

大事なのは最初から全部を理解しようとせず、まずはコピペで動かす。そして余裕があったら、自分でコードを変換してみて動きを確認するといった感じですね。

JavaScriptの基礎を学びながら、1からサービス作る

入門書を読めば、どういったものが作れるかがおおよそイメージできると思います。そこからインスピレーションを得て、「自分だったらこういうの作ってみよう」みたいな想像もできるはずです。

似たような機能のサービスを自分なりに考えてみて、それを1から自分で作っていきます。自分の場合は途中でJavaScriptの知識がなさすぎることに気づき、JavaScriptの基礎学習も平行しながら行っていました。
→ JavaScript Primer 迷わないための入門書

Reactで何か作ろうと思ったら、やはりJavaScriptの基本的な理解が必須になってきます。なので、アロー関数（() => {}）とかコールバック関数とか、非同期（new Promise、async await）、この辺の単語が「なんのこと？」ってなっている方はJavaScriptの基礎から学ぶことをおすすめします...。

メンターに頼る

指摘してくれる人がいたほうが効率がいいと思ったのでMENTAでJavaScriptのメンターにお願いしました。

メンターに頼っていいなって思ったのは、指摘されたことは正解だと思えて勉強にも熱が入るということ。「async、awaitの方がスマートだよね」って言われて、勉強して書き直すみたいな。

作ってレビューしてもらって修正、というサイクルを3回くらいくらい返していました。印象に残っているのは「初心者もリファクタリング3回やればまあまあ読めるコードになる」って部分ですね。
（今は少しは見れるコードにはなったはず...）

ちなみに「みんなはどっち派？」というサービスを作っていました（諸事情あって公開はしていない...）

空きあらばJavaScriptの基礎

フロントエンドにおいてJavaScriptのスキルは基礎体力みたいなものだと思っています。

JavaScriptがベースとなり派生しているのがReactやVueといったフレームワークなので、ベースとなるJavaScirptをどれだけ書けるかっていう部分で発揮できる能力は変わってくるのかなと思い、空きあればUdemyで動画を見たり、動作を確認したりしています。

自分でサービスを作ってみる

1つサービスを作り終えたら、また1からサービスを作ってみる、みたいなサイクルですね。これが実案件だとなおいいかもしれません。

自分はまだ実案件のスキルはないと思いつつ、営業しながらサービス作りつつ勉強も平行しているような動き方をしています。

そんな感じで2つ目のサービスのCodeBoxを作って公開しました。ちなみに勉強中の身で公開するのは恥ずしいと思う人もいるかもしれませんが、今の自分の100%がどれだけ低くてもいいので、100%で世間に公開する癖をつけるといいかもしれません。

公開することで反応が分かりますし、運がよければフィードバックがもらえたりします。そこで気づきが得られて、また次の勉強や制作に繋げられるといったサイクルもできるので公開しない理由は基本的にはないって感じですね。

（今後）勉強会に参加する

最近は勉強会やReactやJavaScript系のイベントに登録しまくっているのですが、Reactの先輩方や同じく勉強中の人と繋がりたいと思って動いています。

現実的な話をすると、できる人と仲良くなっておいたほうが気軽るに聞けるなって思っていますし、勉強中の人と交流できたらモチベーションも維持しやすいのかなと思います。

もしこの記事を拝見してくれている、Reactの先輩や同じく勉強中の方がいたらぜひ仲良くしてください...！

まとめ

Reactは前提となるスキルが多すぎて、どれも理解していない人にとっては果てしなく長い道のりのように感じると思います。ただ、1つ1つの技術がどいった役割で、それぞれの使い方を理解していくと、パズルがハマっていくような感覚で、覚えていけると思います。

なぐり書きのような感じになったので、読みにくい部分もあったかと思いますが、ポイントとしては、最小の構成で考えるとことですね。
最初はコピペで全体を掴むのがいいと思いますが、しっかり理解しようと思ったら、それぞれの技術にいて、まずはそれぞれの技術を単体（に近いレベル）で動かしてみる。すると、その技術に関する動きや役割が理解できるようになりました。

「各技術がこういう動きをするから、組み合わせるとこうなるよな」っていうのが感覚的に分かってくるようになります。

Reactは「急がばまわれ」の表現が合うなって思っていて、JavaScriptの基礎、JSX記法、Babel、webpack、その先には、Hooks、Redux、TypeScriptが待ち受けています。学ぶべきことはどんどん出てくるので、

• とりあえず自分が今出せる100%で何か作る
• （この知識が足りないから勉強しなきゃ）
• 次に100%で作れるものは少しレベルアップしてる

みたいなサイクルでスキルアップできるんだと思います。

「もしこういった勉強方法もいいよ！」みたいなアドバイスありましたら教えてもらえますと嬉しいです！