『state』を用いて、文字数カウンターを作成しよう!

React
とんぺい
とんぺい

今日は、前回の続きでstateについて教えてもらうぞ〜

師匠、こんにちは〜

師匠
師匠

とんぺいくん。こんにちは。

じゃあ早速stateについて一緒に勉強していこう。

stateとは?

師匠
師匠

ReactのComponentではComponentの内部で状態(数値、文字列、配列など)を持つことができるんだ。

この内部の状態のことをstateと言うよ。

とんぺい
とんぺい

う〜ん…

それは前回習ったpropsとは何が違うブゥ?

師匠
師匠

propsは親のComponentから値を渡されたのに対して、stateはComponentの内部でのみ使用されるという点でpropsとは異なるんだ。
またpropsは変更不可能な値なのに対して、stateは変更が可能だよ。

とんぺい
とんぺい

なるほど…

stateはComponentの内部のみで使用されて変更が可能っと!

うん!propsとの違いがわかったブゥ!

師匠
師匠

いいね!

じゃあ早速、簡単なアプリケーションを一緒に作ってみよう。

文字数カウンターを作ってみよう!

師匠
師匠

create-react-appコマンドを使用してアプリの準備をしよう。

やり方を忘れていたら、この記事を見直そう。

とんぺい
とんぺい

もうcreate-react-appコマンドに関しては完璧ブゥ!

師匠できたよ!

師匠
師匠

よし。それでは、デフォルトのページを全て消してindex.jsとApp.jsを新しく作成しよう。やり方はこの記事と同じだね。

とんぺい
とんぺい

そこも問題ないブゥ!

うん!できたブゥ!

師匠
師匠

じゃあ、ここからが本番だね。

まずはsrcフォルダの直下にComponentsフォルダを作成して、その中にApp.jsを移動し、Counter.jsファイルを以下のように作成しよう。

とんぺい
とんぺい

師匠できたよ!

おぉ!

入力した文字数がカウントされているブゥ!

師匠
師匠

うまくいったようだね。

それでは今日のプログラムのポイントを解説しよう。

今日のポイントを解説

師匠
師匠

まずはCounter.jsの5行目に注目。

ここでstateを定義しているよ。

とんぺい
とんぺい
state = {count: 0, textValue: ‘initial value’};
の部分ブゥね!
師匠
師匠

そうだね。

ここで定義し、19行目のように書くことでstateの値を取得できるんだ。

とんぺい
とんぺい
なるほど、この形式でstateを取得できると…
<label>文字数: {this.state.count}</label>
師匠
師匠

そして、stateの値を更新するときには必ず8行目や12行目のようにsetStateを使おう。

ここで『count = 4』『textValue=”とんぺい”』のように書くとエラーが起こるので注意だよ。

とんぺい
とんぺい

わかったブゥ。必ずsetStateを使うと…

this.setState({textValue});
師匠
師匠

そしてtextareaonChange属性onKeyUp属性を付与してあげれば、今回の文字数カウンターは完成というわけさ。

とんぺい
とんぺい

ほうほう…

onChange属性onKeyUp属性はそれぞれどういうものなんだブゥ?

師匠
師匠

onChange属性textareaの内容が変化した際に、onKeyUp属性はある文字を入力しようとしてキーボードから指が離れた際に、それぞれイベントを起こす属性のことだよ。

とんぺい
とんぺい

なるほど!

じゃあ、23、24行目にあるeってのはなんなんだブゥ?

師匠
師匠

eと言うのはeventの略だよ。

その中でe.targettextareaの範囲を指しており、e.target.valueとすることでtextareaの中に入力された文字を取得できるんだ。

とんぺい
とんぺい

なるほどブゥ!

じゃあe.target.value.lengthと言うのは文字列の長さを取得していると言うことブゥね!

師匠
師匠

そうだね。

それぞれ、textareaの中身と文字数をhandleTextChange()handleCountChange()に渡して、その中でstateを更新してるってロジックだよ。

とんぺい
とんぺい

うんうん。今回の文字数カウンターでは何をしているのか理解ができたブゥ!

またこれで一つ賢くなれたな。

師匠ありがとう!

師匠
師匠

それはよかった。

それではいつものように、今日習ったことのまとめをして、今日の勉強を終わりにしよう。

まとめ

stateとはComponentの内部で保持する状態(数値、文字列、配列など)のこと

propsとは違いComponent内部で動的に変更が可能

コメント

タイトルとURLをコピーしました