【Progate】プログラミング学習〜初めてのReact.js【JavaScriptの次】

 

こんにちは、やまぴー(@Astro8754)です。

 

今回も「俺のプログラミング(おれぷろ)」の更新です。まだまだ更新していきますので、初学者〜興味がないけどいつかやってみようかな、という人は参考にどうぞ!

 

第5回目の今回は、2019年1月31日にProgateで「React学習コースⅠ」がリリースされたので、こちらの学習記録を残していきたいと思います。

 

React.jsはUI構築のための、JavaScriptのライブラリです。サイトに動きを加えたり、Webアプリケーションを開発できるようになります。多分。

 

 

ちなみに、僕がJavaScript編の2周目を終えた同日にProgateの公式アカウント(@prog_8)より下記のツイートがされました。超たまたまです。

 

 

こちらの「React学習コースⅠ」は、無料です!とはいえ、多少の予備知識はいるかと思いますので、HTMLやJavaScriptをちょっとだけ触れてみた後で、ぜひ。

 

今後公開予定の「React学習コースⅡ」以降は、有料会員用のコンテンツとのことでした。

 



 

React.js学習前の状況(初心者です)

 

学習前の状況は、以下のようなイメージです。

 

【HTML / CSS】 : Progateを全2周、Udemyでフルスタック・Webエンジニア講座を受講

【JavaScript】 : Progateを全2周、Udemyでフルスタック・Webエンジニア講座を30分程度受講

 

React学習コースのリリースが神タイミングでした。UdemyでJavaScript編を始めた直後のリリースだったので、一旦Progateに戻った感じです。

 

「React学習コースⅠ」は、ひとまずHTMLとJavaScriptの基礎知識があれば、何なりと進められました。

 

React学習コースの感想

 

JavaScriptの実装イメージをつけることができます。主な感想はこれだけですが、かなり重要です。

 

おれぷろの第3回でも書いたように、僕はJSの実装イメージがつかなくてモチベーションが上がらなかったので、、、良かったです。

 

学習コースⅠのみの段階ですが、マークアップ言語を学習済であれば、JavaScriptコースの延長線上の学習としてオススメです!

 


 

ちなみに、ざっくりと紹介すると、「React学習コースⅠ」では“ユーザーがボタンをクリックするとブラウザ上の表示が変わる”という簡単なアプリケーションを作ります。

 

ユーザーの動きに合わせて変わる値を、React.jsではstateというオブジェクトで定義して、そこに動きを記述していきます。

 

具体例は、こんな感じ↓です。

 

 

上記のようなhandleClickメソッドをコンストラクタ内に記述して、

 

 

JSX (ほぼHTMLの文法) を戻り値とするrenderメソッド内で、<button>タグにonClick属性(イベント?)を指定して、handleClickメソッドをアロー関数内の処理に記述します。

 

すると、Web上にはボタンを押すたびに数字が1ずつ増えていくようなアプリを実装できます。

 

この辺はぶっちゃけ僕の備忘録なのですが、コードを見ていただければ、HTMLとJavaScriptの知識で学習が進められそうだと分かるかと思います。

 



 

Progate、React学習コースの感想(まとめ)

 

いかがでしたでしょうか。

 

第4回に引き続き、第5回ではReact.jsの学習記録を記事にしました。JavaScriptを実装していくイメージもついたので、個人的には良かったと思っています。

 

今回学習に利用したProgateは以下の画像にリンクを貼っておきます。無料で学習できるレッスンも、今回の「React学習コースⅠ」のみならず、充実しています。ぜひ。

 

Progate 「Progate」トップページより画像引用 

 

今後も〇〇.jsは勉強していきたいですし、そのほかのプログラミング学習についても記事を書いていこうと思っています。

 

最後に過去記事のリンクを一部、貼っておきます!

 

 

やまぴー
Have fun!