【PR】この記事には広告を含む場合があります。

【Progate】ゲームプログラマーがReact 1をやってみた感想

Progate React 無料
プログラミング

「Web制作を始めたい」

「今はReactも勉強しないといけないらしい」

Progateという学習サイトで無料で始められるらしい」

今やWeb制作は人気の職業なので始めてみようと思う人が増えています。

Progateという学習サイトも知られるようになり、気になる人も多いでしょう。

ゲームプログラミング経験者がReact 1(無料)をやってみた感想です。参考にしてください。

以下「JQuery(無料)」の続きです。

Progate JQuery 無料

【Progate】ゲームプログラマーがJQuery初級編をやってみた感想

2020年6月6日




Progate React1コース

Progateにログインすると、Progateが提供する学習コースの一覧が見れます。

コース詳細はいずれまとめ記事に書くとして、無料React 1を受けてみました。

レッスン内容

Progate React 1

開始するとレッスンのスライドが開きます。

項目ごとに、

  • 解説を読んで内容を理解
  • 課題で手を動かして覚える

で進めていきます。

Progate React 1

課題はProgateのサイト上でできます。

このようにコードを入力し、右のプレビュー画面で動作を確認できます。

タブの見本と見比べながら進めます。

特徴をまとめるとこんな感じです。

Progate 学習画面の特徴

(利点)

  • 開発環境の設定は必要ないので簡単
  • コードにコメントで何をすれば良いか書かれているので簡単
  • 命令は自動補完してくれるので
  • 入力する値は画面左の値をコピペするだけで
  • さっき学習した文法だけ一から入力するので記憶できる
  • 文法を忘れたらスライドを戻るだけなので簡単に思い出せる
  • 課題で記述中のコードは自動保存してくれるので安心
  • コードを入力すると即座に右画面にプレビュー表示なので分かりやすい
  • 右下に見本の完成と見比べながら学習できて間違いにすぐ気づく
  • 入力中のコードは常時エラーチェックされてるので間違いにすぐ気づく

初心者に超やさしい学習サイトです。

初心者向けにおいて欠点は特にないです。

Progate React 1

学習した項目は一覧で確認できます。

Reactコースは4章、14項目、学習にかかる時間目安1時間40分の構成です。

Web制作はほぼ初心者の僕がこのコースにかかった時間は1時間以下です。

Progate React 1

ここからReact 2に進みます。

Progate React 1

コンポーネントのレッスンから有料です。(2020年6月)

レッスン内容 ポイント

最初のレッスンはReactについての説明です。

Progate React 1

Reactで使う用語と概要の説明です。

  • Reactとは
  • JSXと書き方、注意点
  • App.jsの構成
  • JSXとJavaScriptの記述

HTML、CSS、JavaScriptの知識が必要ですが、基礎知識があればこのReact 1のレッスンもだいたい理解できます。

React 1で学んだ内容と手順はだいたいこんな感じです。

React 1で学んだ内容

  • 表示するためのHTMLタグをJSXに記述
  • JSXはApp.jsのrenderメソッドのreturn内記述する
  • JavaScriptはreturn外に記述する
  • JavaScriptを中括弧{}で囲めば、JSXにJavaScriptを埋め込める
  • return内に複数の要素があるとエラー。divで1つにまとめる
  • JSXでは閉じタグが必要。<img>は<img/>のようにする
  • JSX内のコメントは{/* */}で囲む、または、//
  • ボタン作成 は<button イベント名 = {() => {処理}}>ボタン名</button>
  • 保持する変数はstateで定義。初期値はconstractor内で定義。
  • stateの変更はthis.setState({プロパティ名: 変更する値});
  • 追加したいメソッド(処理)はclass App内に記述

学習のまとめに簡単なカウントアップのコードを書きます。

Progate React 1

感想 Progate React 1コース

とにかく、初心者に超やさしい学習サイトです。

優しすぎると感じる場合、JavaScriptは別の学習サイト、ドットインストールから始めてみるのも良いでしょう。

(執筆中)

このReact 1で「Reactを使うと何ができるか?」は分かるようになりますが、無料で学べることはほとんどないので有料版の登録が必須です。

なお、Web制作でAdobe製品(XD、Dreamweaver、Adobe Photoshop、Illustratorなど)を使う場合はAdobe Creative Cloudが必要です。

Adobe Creative Cloud

  • Adobe Creative Clound(通常版) 
  • Adobe Creative Clound(学生・教職員版)

社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。

ヒューマンアカデミー たのまな Adobe

ヒューマンアカデミー たのまな のAdobeオンライン講座の体験談【2020年5月】

2020年5月8日