React 学習コース I

Reactに触れてみよう

3. JSX
JSXの注意点
JSXはほとんどHTMLと同じですが、いくつか違いがあります。
左の図のように、return内に複数の要素があるとエラーになります。
複数の要素がある場合は、右の図のように<div>タグで囲んで、1つの要素にまとめてあげましょう。

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

4. imgタグ
imgタグの注意点
imgタグは、HTMLでは、<img src=’画像のURL’>のように閉じタグが必要ありませんでした。
一方、JSXでは閉じタグが必要になります。<img src=’画像のURL’ />のように、タグの終わりにスラッシュ「/」を記述します。

5. App.jsの構成
// Reactをインポートしてください
import React from ‘react’;

// Appクラスを定義してください
class App extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}

// Appクラスをエクスポートしてください
export default App;

6. JSXとJS
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のコメントは右の図のように文頭に「//」を書くと、その行はコメントとみなされます。

class App extends React.Component {
render() {
// 定数nameを定義してください
const name = ‘にんじゃわんこ’;

// 定数imgUrlを定義してください
const imgUrl = ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ninjawanko.png’;

return (
<div>
{/* 定数nameを用いてにんじゃわんこと表示されるようにしてください */}
<h1>{name}</h1>

{/* 定数imgUrlを用いて画像が表示されるようにしてください */}
<img src={imgUrl} />

7. 表示切り替えの準備
ユーザーがボタンをクリックしたときに、表示名が切り替わるようにするには、イベントとstateという2つの武器が必要なのじゃ。
<div>
<h1>こんにちは、にんじゃわんこさん！</h1>
{/* <button>タグ「ひつじ仙人」を追加してください */}
<button>ひつじ仙人</button>

{/* <button>タグ「にんじゃわんこ」を追加してください */}
<button>にんじゃわんこ</button>

</div>

8. onClickイベント
イベントの書き方
「ES6 学習コース Ⅲ」で学んだアロー関数を使って、タグ内に
イベント名={() => { 処理 }}と書くことで、指定したタイミングで処理を実行できます。アロー関数はJavaScriptなので、{}で囲むことを忘れないようにしましょう。
onClickイベント
今回は「クリックされた時に処理を実行する」onClickイベントを用います。
よって、イベント名にonClickを指定し、<button onClick={() => {処理}}>とします。
アロー関数の処理部分には、イベント時に実行する処理を書きます。

<button>タグに
onClick
イベントを追加し、その中で、それぞれのボタンの名前をコンソールに出力する処理を追加してください。
スライドで確認
ヒント
ヒント
イベント名={() => {console.log(‘表示したい文字列’)}}とすることで、イベント実行時に文字列をコンソールに表示することができます。

{/* buttonタグ内に、コンソールに名前を出力するonClickイベントを追加してください */}
<button onClick={() => {console.log(‘ひつじ仙人’)}}>ひつじ仙人</button>

{/* buttonタグ内に、コンソールに名前を出力するonClickイベントを追加してください */}
<button onClick={() => {console.log(‘にんじゃわんこ’)}}>にんじゃわんこ</button>

9. state
class App extends React.Component {
// constructorを貼り付けてください
constructor(props) {
super(props);
// stateを定義してください
this.state = {name: ‘にんじゃわんこ’};

}

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

「こんにちは、にんじゃわんこさん！」の「にんじゃわんこ」の部分を、stateのnameプロパティの値が表示されるように書き換えてください。
「こんにちは、{this.state.プロパティ名}さん！」に変更しましょう。

render() {
return (
<div>
{/* 「こんにちは、にんじゃわんこさん！」の名前の部分をstateを使って置き換えてください */}
<h1>こんにちは、{this.state.name}さん！</h1>

<button onClick={() => {console.log(‘ひつじ仙人’)}}>ひつじ仙人</button>
<button onClick={() => {console.log(‘にんじゃわんこ’)}}>にんじゃわんこ</button>
</div>
);
}

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

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

「ひつじ仙人」ボタンがクリックされたときに、setStateを用いて、stateのnameプロパティの値を
ひつじ仙人
に変更してください。

ヒント
this.setState({変更するプロパティ名: 変更する値})と書くことで、stateのプロパティの値を更新できます。

{/* onClickの処理に、stateを変更する処理を加えてください */}
<button onClick={() => {this.setState({name: ‘ひつじ仙人’})}}>ひつじ仙人</button>

{/* onClickの処理に、stateを変更する処理を加えてください */}
<button onClick={() => {this.setState({name: ‘にんじゃわんこ’})}}>にんじゃわんこ</button>

12. メソッドの作成
クリックで表示名が切り替わるメソッドを作ろう

メソッドはクラスの中で定義します。メソッド名() { 処理 }とすることでメソッドは定義できます。
メソッドは関数と似たようなもので、中括弧{ }の中に行いたい処理を記述します。

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

以下の手順で、「ボタンクリック時に表示名を変更する処理」をメソッド化します。
①メソッドの定義
②メソッドにstateを変更する処理を追加
③「ひつじ仙人」ボタンのonClickイベントでメソッドを呼び出す処理を指定
④「にんじゃわんこ」ボタンのonClickイベントでメソッドを呼び出す処理を指定

// handleClickメソッドを定義してください
handleClick(name) {
this.setState({name: name});
}

{/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換えてください*/}
<button onClick={() => {this.handleClick(‘ひつじ仙人’)}}>ひつじ仙人</button>

{/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換えてください*/}
<button onClick={() => {this.handleClick(‘にんじゃわんこ’)}}>にんじゃわんこ</button>

13. カウントアップ機能を作ろう（1）
stateの定義と表示
stateの３つのStepを使って、カウントアップ機能を実装しましょう。
まずは、「Step1: stateの定義」と「Step2: stateの表示」を実装していきます。

class App extends React.Component {
constructor(props) {
super(props);
// stateを定義してください
this.state = {count: 0};

}

render() {
return (
<div>
<h1>
{/* stateの値を表示してください */}
{this.state.count}

</h1>
{/* <button>タグを追加してください */}
<button>+</button>

</div>
);
}
}

14. カウントアップ機能を作ろう（2）
まずは、stateを更新するメソッドを定義してみましょう。
this.setState({count: this.state.count + 1})とすることで、stateのcountの値に1を足すことができます。

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

// handleClickメソッドを定義してください
handleClick() {
this.setState({count: this.state.count + 1});
}

render() {
return (
<div>
<h1>
{this.state.count}
</h1>
{/* <button>タグ内でonClickイベントを追加してください */}
<button onClick={() => {this.handleClick()}}>+</button>

</div>
);
}