React I

1.Reactを学ぼう

Reactを学ぼう
・このレッスンでは、JavaScriptのライブラリであるReactを学んでいく
・Reactはサイトの見た目の部分を作ることができ、Facebook、Airbnb、Dropboxなどの有名企業も多く使用している
・ProgateもReactを使用している

Reactに触れてみよう
・Reactは、サイトの見た目を作ることができるJavaScriptのライブラリ
・Reactのモバイル版であるReact Nativeを使うと、iOSとAndroid両方のスマートフォンアプリを作ることができる
・Reactは現在、世界的な広がりを見せている

目標物を見てみよう
・「React 学習コース Ⅰ」では、２つの目標物を作る
まずは、「ボタンをクリックすると表示名が切り替わる」機能を作っていく
・どのような動きになっているか確認しておく

2.ブラウザに表示しよう

・まずはReactを使って、ブラウザに文字を表示してみよう

Hello World
・App.jsというファイルのrenderメソッドのreturn内に、<h1>Hello World</h1>と記述すると、ブラウザに「Hello World」
・return以外にも色々書いてありますが、いまはApp.jsのreturnの中で記述するということだけ覚えておけば大丈夫

3.JSX

JSX
・見た目をつくるコードはほとんどHTMLと一緒
・ただし名前はHTMLではなく、JSXという

JSXの書き方
・JSXは、HTMLとほとんど同じように記述することができる
・見出しには<h1>タグや<h2>タグ、文章には<p>タグ、その他<div>タグなど、HTMLと同様のタグが使えるようになっている

JSXの注意点
・JSXはほとんどHTMLと同じですが、いくつか違いがある
・return内に複数の要素があるとエラーになる
・複数の要素がある場合は<div>タグで囲んで1つの要素にまとめる

JSXのコメント
・JSXを{/* */}で囲むと、その部分はコメントになる
・コメントにすると、そのJSXは表示されない
・正しくコメントにできている場合は囲んだ部分が灰色になる

4.imgタグ

imgタグの注意点
・imgタグはHTMLでは<img src='画像のURL'>のように閉じタグが必要
・一方、JSXでは閉じタグが必要になる
・<img src='画像のURL' />のように、タグの終わりにスラッシュ「/」を記述する

5.App.jsの構成

App.js
・App.jsのJSXの部分だけをこれまで触ってきましたが、他にもいろんなコードが書いてある
・一度、App.jsの構成について確認しておこう

App.jsの構成
・App.jsは以下の要素で構成されている
・App.jsを作成する時はいつもこのように書くので、丸暗記する必要はない
・「継承」や「クラス」といった単語を忘れてしまった時は、「スライド検索」を利用して、「ES6 学習コース」を復習しよう

6.JSXとJS

JSXとJS
・JSXとJavaScriptは記述する部分がはっきりと分かれている

JSXとJSの範囲
・JSXとJS ( JavaScript ) の記述部分は分かれている
・renderメソッドのreturn内のみ、JSXで記述する必要がある
・JSXで記述された要素はブラウザに表示される

JavaScriptを記述する
・renderメソッドの、returnの外にはJavaScriptを記述できる
・renderメソッドの中で、定数textをJavaScriptで定義しているが、returnの外なので記述することが出来る

JSXにJSを埋め込む
・returnの中でも、JSXにJavaScriptを埋め込むことが出来る
・JSXにJavaScriptを埋め込むには、JavaScriptの部分を中括弧{ }で囲む
・また、タグの属性の値も、同様に中括弧{ }を使ってJavaScriptを記述することが出来る

JSXとJSのコメント
・すでに説明したとおり、JSXを{/* */}で囲むと、その部分はコメントになる
・また、JavaScriptのコメントは文頭に「//」を書くと、その行はコメントとみなされる

7.表示切り替えの準備

ボタンで表示を切り替えよう
・HTMLと同じように書けて、JavaScriptも埋め込めるReactは便利
・Reactの便利な機能はまだまだこれから
・いよいよ最初に見せた目標物の1つ目を作っていく

クリックと表示の切り替え
・ユーザーがボタンをクリックしたときに、表示名が切り替わるようにするには、イベントとstateという2つの武器が必要
・2つの武器は順を追ってゆっくり学んでいくので、完成まで少し時間はかかるが、頑張っていこう
・まずは、クリックするボタンの用意から

ボタンを作ってみよう
・まずは、クリックするボタンを作っていく
・ボタンは<button>タグで指定する
・ボタンには<button>タグで囲まれている文字が表示される

8.onClickイベント

イベント
・ボタンをクリックした時に表示名が切り替わるようにすること
・そのためにまずは、ボタンをクリックした時に何らかの処理をおこなえるようにしていく
・ここで1つ目の武器であるイベントを使う

イベントとは
・イベントを用いると「何かが起きたときに処理を実行するように指定」することができる
・例えばボタンをクリックしたときに、にんじゃわんこがジャンプする処理を実行する

イベントの書き方
・「ES6 学習コース Ⅲ」で学んだアロー関数を使って、タグ内にイベント名={() => { 処理 }}と書くことで、指定したタイミングで処理を実行できる
・アロー関数はJavaScriptなので、{}で囲むことを忘れないようにしよう

onClickイベント
・今回は「クリックされた時に処理を実行する」onClickイベントを用いる
・よって、イベント名にonClickを指定し、<button onClick={() => {処理}}>とする
・アロー関数の処理部分には、イベント時に実行する処理を書く

onClickでコンソール出力
・クリックしたときに指定した処理が呼び出されることを確認するために、アロー関数の処理でconsole.logを行う

9.state

state
・ボタンを押して表示名を切り替えるためには、2つ目の武器であるstateを使う必要がある

stateとは
・今回はボタンを押すと、それに合わせて「こんにちは、◯◯さん！」の
◯◯という名前の部分が変わるようにする
・このように、ユーザーの動きに合わせて変わる値のことを、Reactではstateと呼ぶ
・ボタンを押すとstateが変わり、表示される名前が変わるようにしていく

stateを使った表示の変更
・stateを使って、表示を変えるには3つのステップが必要
・このページでは、Step1のstateの定義をしてstateを利用できるようにする

オブジェクトの復習
・stateの定義について学習する前に、少し「ES6 学習コース II」で学んだ
「オブジェクト」について復習する
・オブジェクトは複数の値をプロパティという名前をつけて管理できるもの
・stateの定義では、このオブジェクトを使っていく

stateの定義
・stateは、constructorの中で、オブジェクトとして定義する
・ここで定義したオブジェクトがstateの初期値となる
・その他の部分の、「constructor(props)」や「super(props);」といった処理はいつも同じ記述をするため、定型文として覚えておけば大丈夫

10.stateの表示

stateを表示してみよう
・次に、今定義したstateを表示できるようにしていく

stateの取得
・定義したstateは、this.stateで取得することができる
・stateの定義で学んだ通り、stateはオブジェクトなので、console.log(this.state)をするとオブジェクトが出力される
（コンソールには文字列がダブルクォーテーション（"）で囲まれて出力されるが気にしない）

stateを表示する
・this.stateはオブジェクトなので、this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できる
・this.state.nameで「にんじゃわんこ」を取得して、ブラウザに「こんにちは、にんじゃわんこさん！」と表示している

11.stateの変更

stateを変更してみよう
・最後に、stateの変更をして、表示されているstateが変更されると、名前の表示が切り替わるようにする
・ボタンがクリックされた時に、名前の表示が切り替わるようにするには、stateの変更とonClickイベントを使う
・ついに２つの武器を組み合わせる

stateの変更
・this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更される
・その結果、「this.state.name」で表示できる値も変更される
・今回はボタンがクリックされた時に、名前の表示を変えるために、setStateをonClick内で行う

state変更の注意点
・stateの変更には、注意点がある
・Reactでは、「stateの値に直接代入することで値を変更してはいけない」という決まりがある
・値を変更したい場合は、setStateを使う

12.メソッドの作成

クリックで表示名が切り替わるメソッドを作ろう
・最後に、ボタンクリック時に表示名を変更する処理をメソッド化していく
・メソッドって確か処理のまとまりを定義できるもの

メソッドの定義
・「ES6 学習コース IV」で学んだように、メソッドはクラスの中で定義する
・メソッド名() { 処理 }とすることでメソッドは定義できる
・メソッドは関数と似たようなもので、中括弧{ }の中に行いたい処理を記述する

stateを変更するメソッド
・今回は、「stateのnameプロパティの値を変更する処理」を行うhandleClickメソッドを作る
・handleClickメソッドを定義し、stateを変更する処理を追加する

onClickイベントでメソッドを呼び出す
・メソッドはイベント内で呼び出すこともできる
・onClick={() => {this.メソッド名()}}とすることで、クリックされたときに、App.js内の指定したメソッドを実行することができる

メソッドに引数を渡す
・ここではメソッドに引数を渡せるようにする
・まず、handleClickメソッドがnameという引数を受け取るようにする
・そして、handleClickメソッドを呼び出す部分で、引数を渡す
・最後に、受け取った引数「name」を使って、stateのnameプロパティの値を変更する

13.カウントアップ機能を作ろう（1）

これまでの復習（1）
・今回学んだstateはReactで最も大事な要素
・最後に今回学習したことを復習するために、もう一つ機能を作る
・もう一つの機能を作る前に、ここまでにやった「ボタンクリック時に表示名が切り替わる機能」のための2つの武器とstateの３つのStepを復習する

これまでの復習（2）
・ここまでに学んだ「ボタンクリック時に表示名が切り替わる機能」を作るための2つの武器とstateの３つのStep
・これから作る機能も、これらをもとに作っていく

カウントアップ機能を作ろう
・今復習したことをもとに、これからもう一つの機能を作っていく
・ボタンをクリックすると 数字が1ずつ増えていく機能を作っていく

stateの定義と表示
・stateの３つのStepを使って、カウントアップ機能を実装する
・まずは、「Step1: stateの定義」と「Step2: stateの表示」を実装していく

14.カウントアップ機能を作ろう（2）

カウントアップしよう
・次にボタンをクリックした時にカウントアップするようにしていく
・クリックした時のイベントなのでonClickイベントを使えば良い

メソッドの定義
・次にstateの３つのStepの「Step3: stateの変更」を実装していく
・Step3では、stateのcountの値に1を足すメソッドを定義して、+ボタンをクリックしたときに、そのメソッドを呼び出すようにする
・stateのcountの値に1を足すことで、表示されるカウントも1足されたものが表示される

メソッドの呼び出し
・最後に、+ボタンをクリックしたときに、handleClickメソッドを呼び出す