20200928_javascript.md

title	emoji	type	topics	published
Javascriptすらろくに書かない人が2週間Reactを勉強してみたから勉強方法を振りかえる	😀	tech	20200928 javascript react	true

タイトル通り、Javascriptすらまともに書いたことがない自分が2週間でReactを勉強してみました。 色んな教材をやってみた結果、この記事では皆さんにお勧めできる教材や勉強の流れを返っていきます。 他の方への参考になるだけではなく、自分が教材の内容を振り返りたい時にも参考になればと思います。

下の教材に番号が振られているので、その通りにやると効率が良いと思います。

なぜReactを勉強したの？

クロスプラットフォームでスマホアプリやPCアプリを書きたいから。 つまり、最終目標はReact Nativeです。 まずReactを勉強してからReact Nativeをやっていきたいと思っています。

これまでのプログラミング経験や言語は？

主な言語はC言語、Python、C#です。 つまりWebのフロント、バックエンド系のプログラミング言語はほぼ未経験です。 Javascriptもほぼ書いていないので、そこから勉強が必要でした。

Javascriptの勉強方法

Javascriptすらまともに書いたことがないので自分の場合はここから勉強が必要でした。 ここで注意したのはES6で追加された機能を使った書き方なのかということでした。 仕事で使うわけではないので、基本的にES6の書き方に沿って行きたいと思っています。 古い教材だとES5での書き方で書いてあったりするので、注意が必要です。

教材１：progateのJavascript ES6のレッスン

https://prog-8.com/languages/es6 まず初めにしたのはprogateのJavascript ES6のレッスンです。 progateのメリットはなんといっても手軽に行えることですね。 本当はもっといろいろな教材を使ってきちんと勉強すればよりよいと思いますが、私はこれでポイントだけつかんで、下でやる本格的なReactの勉強をしながら覚えて言った感じです。

Reactの勉強法

早速Reactを勉強していきます。 ここで注意が必要なことは下記2つです。

• Reduxを使っているものは避ける Reactを用いてある程度の規模のソフトウェアを作る場合、ReactだけではなくReduxを使用することが多いです。 ですが、ここではReactのみを使用した教材を使用し、Reactの使い方の学習のみに注力すべきだと思います。

• React Hooksの使用有無を確認しながら行う Reactは2019年にReact Hooksという機能を追加してきました。ですのでReactを利用したプログラムの書き方はReact Hooks以前の「典型的なクラスコンポーネント・関数コンポーネントを使用した方法」と「React Hooksを使用した関数コンポーネントを使用した方法」の2通りがあります。 最終的にはReact Hooksを利用した方法をとることになると思いますが、まずはクラスコンポーネントも使用した方法をメインにして勉強しましょう。 クラスコンポーネントを使用する機会もあると思いますし、過去を分かっていないとReact Hooksの恩恵やメリットを実感しにくいです。 教材によっては、典型的なクラスコンポーネントをReact Hooksに置き換えるものも多いです。 その部分をやる場合は、「これがクラスコンポーネントを置き換える新しい書き方なんだ」ということを頭において勉強していきましょう。

教材２：progateのReactのレッスン

https://prog-8.com/languages/react まず雰囲気をつかむためにprogateのレッスンを行いましょう。 やっぱり、環境構築をしなくてもブラウザベースでできるので雰囲気を使うためにはちょうどいいと思います。

教材３：Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

https://www.udemy.com/course/react-application-development/ 次はUdemyの教材です。 3章からはReduxが入ってくるので、まずは「Reactアプリケーション基礎編」まで行います。 ここでソフトのインストール含め、環境構築から何となく動くものを作ってみます。

教材４：トラハックのエンジニア学習ゼミ【とらゼミ】日本一わかりやすいReact入門

https://www.youtube.com/watch?v=Otrc2zAlJyM&list=PLX8Rsrpnn3IWKz6H5ZEPWBY8AKWwb9qq7&index=1 Reactの勉強ではこのYoutubeにとてもお世話になりました。 プログラムの書き方だけではなく、背景や考え方などもわかりやすく教えてくれているのでとてもおすすめです。 まずはクラスコンポーネントを使って開発していて、そのあとにReact Hooksを使って置き換えるという流れになっています。

教材５：トラハックのエンジニア学習ゼミ【とらゼミ】日本一わかりやすいReact入門【実践編】

https://www.youtube.com/watch?v=MzJkWO73S70&list=PLX8Rsrpnn3IVOk48awq_nKW0aFP0MGpnn&index=1 入門編が終わったら、実践編に映りましょう。 こちらも解説が分かりやすいです。JavascriptやReactの勉強はもちろんですがFirebaseの使い方まで学べてお得です。

React+Reduxの勉強法

ここでやっとReduxも使ったやり方を勉強していきます。 ポイントになるのはReduxを勉強し始める前に、しっかり上のReactの勉強を十分に行うことです。 Reduxが入ってくると様々な役割のファイルを作る必要があり混乱しがちで、どこまでがReactの機能なのかReduxの機能なのかを区別しにくいと感じました。 頭がぐちゃぐちゃにならないように、Reactの地盤をきちんと作ってからやることをお勧めします。

教材６：Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

https://www.udemy.com/course/react-application-development/ 前回は2章までしか行っていなかったので、3章からやっていきましょう。

教材７：トラハックのエンジニア学習ゼミ【とらゼミ】日本一わかりやすいReact-Redux入門

https://www.youtube.com/watch?v=FBMA34gUsgw&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=1 こちらの教材も良くできていると思います。プログラムの書き方だけではなく、Reduxを使う理由やフォルダ構成のところの説明があるので考えをまとめるにはとても良いと思います。 後半の実践編はそこそこのWebアプリを作成していくのでReact+Reduxの必要性がとてもよくわかると思います。

やってみて思ったこと

今回JavascriptやReactの勉強をしてみて思ったことは、

• できるだけ新しい教材を使う やっぱりWeb系のプログラムやライブラリは流れが速いので古い教材だと書き方が古かったり、そもそも実行できないなんてことが多々あります。 ですので、できるだけ新しい教材を使いましょう。

• Reactについてはクラスコンポーネントを使った方法とReact Hooksを使った方法があることを踏まえて、どちらの方法も勉強する 上の内容を打ち消してしまいそうな内容ですが、Reactはクラスコンポーネントを使ったやり方をやってからReact Hooksを使ったやり方を行いましょう。 そして両者をきちんと区別して考えることができるようになった後に、React+Reduxを導入し、ReactとReduxを区別して考えながら学習が必要だと思います。