前回の記事では、Reactでできることを勉強しました。
復讐としては、
- stateからpropsへ値を渡す方法
- ライフサイクルメソッドでできること(最近のReactでは、フックが使われている)
- JSXでのインラインスタイルの設定方法
- インラインスタイルをオブジェクト化する方法
について学びました。
今回は、Reactの応用 part1として、
React の render メソッドで高度な JavaScript を使用する
下記の例では、renderメソッド内で変数nameやageを定義して、message変数に条件に応じたメッセージを代入しています。また、JSXコードの中で変数やJavaScriptコードを使用する場合には中括弧{}で囲んでいます。
JSXコード内ではJavaScriptの条件分岐やループ処理も行えるようです。例えば、上記の例ではageの回数だけ<span>要素を生成しています。
このように、renderメソッド内ではJavaScriptコードを自由に利用することができるようです。ただし、JSXコードの中で使用する場合は今まで通り中括弧{}で囲む必要があるようです。
上記のコードで勉強になった記述として、
アンダースコアは、以下のような目的で使用されることがあるようです。：
- ダミー変数名: アンダースコアは、一時的な変数や未使用の変数を表すために使用されることがあります。たとえば、
Array.from({ length: age }).map((_, index) => ...)の例では、アンダースコアがダミー変数として使用されています。ここでは、配列の要素には興味がなく、インデックスだけが必要なため、アンダースコアが使用されています。 - インデックスやプレースホルダー: アンダースコアは、配列のインデックスやプレースホルダーとして使用されることもあります。たとえば、
Array.from({ length: age }).map((_, index) => ...)の例では、アンダースコアが配列の各要素を示すプレースホルダーとして使用されています。
ただし、アンダースコアの具体的な使い方はコーディングスタイルやコンテキストによって異なる場合があるので、プロジェクトやコードベースのガイドラインに従って使われることが一般的です。
また、特定の文脈やライブラリにおいて、アンダースコアに独自の意味が与えられることもあるようです。その場合は、その文脈での解釈に従う必要があるようです。
課題として、下記のようなものがありました。
ここに示したコードの render メソッドにある配列には、1980 年代のマジックエイトボールという玩具で映し出される答えを表す 20 個のフレーズが格納されています。 ボタンの click イベントが ask メソッドにバインドされているため、ボタンがクリックされるたびに乱数が生成され、randomIndex として state に格納されます。 52 行目の文字列 change me! を削除し、answer 定数を割り当て直して、コンポーネントが更新されるたびにコードから possibleAnswers 配列の別のインデックスにランダムにアクセスするようにしてください。 最後に、answer 定数を p タグの中に挿入してください。
解答としては、
If-Else 条件でレンダーする
JSX内でもif-else構文が使えるようでした。
課題として、下記のようなものがありました。
MyComponent の state に、UI に要素を表示するかどうかを追跡する boolean が含まれています。 button は、この値の state を切り替えます。 現時点では、毎回同じ UI をレンダーします。 render() メソッドを if/else ステートメントで書き換えて、display が true の場合に現在のマークアップを返すようにしてください。 それ以外の場合は、h1 要素のないマークアップを返してください。
注: テストを成功させるには if/else を記述する必要があります。 ここでは三項演算子を使用しても成功となりません。
条件をもっと簡潔にするために && を使用する
この章では、論理演算子を使用してif-else構文を簡潔な方法で書こうというものした。
下記が課題になります。
もう一度前の例を解決してください。display が true の場合にのみ h1 をレンダーしますが、if/else ステートメントの代わりに && 論理演算子を使用してください。
条件付きレンダーに三項式を使用する
Reactでは、三項演算子がよく使われるそうです。
理由として、
- JSXコードにif/else構文を直接書くことができないこと(return構文の外に書く必要があった)
つまり、JSXの中で条件分岐を実装したい場合に、三項演算子は便利らしいです。
下記が、課題になります。
コードエディターに 3 つの定数があり、CheckUserAge コンポーネントの render() メソッドの中で定義されています。 これらは buttonOne、buttonTwo、buttonThree という名前で、 ボタン要素を表す単純な JSX 式がそれぞれに割り当てられています。 まず、CheckUserAge の state を input と userAge で初期化し、両方に空の文字列の値を設定してください。
コンポーネントから情報がページにレンダーされると、ユーザーがそれらの情報とやり取りする手段が必要になります。 コンポーネントの return ステートメントの中で、次のロジックを実装する三項式を設定してください。ページが初めて読み込まれるときに、送信ボタン buttonOne をページにレンダーしてください。 次に、ユーザーが自分の年齢を入力してボタンをクリックしたときに、年齢に基づいて異なるボタンをレンダーしてください。 ユーザーが 18 より小さい数字を入力した場合は、buttonThree をレンダーしてください。 ユーザーが 18 以上の数字を入力した場合は、buttonTwo をレンダーしてください。
props から条件付きでレンダーする
今までif/else文、三項演算子を勉強してきました。
propsを使用してコードを条件式で書くことによって、何を表示するのか自動的に決めることができます。
下記のような課題がありました。
コードエディターに 2 つのコンポーネントがあって、一部が定義されています。1 つは GameOfChance という親で、もう 1 つは Results という子です。 これらを使用して、ユーザーがボタンを押して勝ったか負けたかを表示する簡単なゲームを作成します。
まず、実行のたびに異なる値をランダムに返す簡単な式が必要です。 これには Math.random() を使用できます。 このメソッドは、呼び出されるたびに 0 (含む) ～ 1 (含まない) の間の値を返します。 そのため、確率を 50/50 にする場合は Math.random() >= .5 という式を使用します。 統計的に言えば、この式は 50% の確率で true を返し、残りの 50% の確率で false を返します。 render メソッドで、null の部分を前述の式に置き換えて変数宣言を完成させてください。
これで、コードでランダムな決定を行うのに使用できる式ができました。 次に、この式を実装する必要があります。 Results コンポーネントを GameOfChance の子としてレンダーし、expression を fiftyFifty という prop として渡してください。 Results コンポーネントで、GameOfChance から渡される fiftyFifty prop に基づいて、You Win! または You Lose! というテキストを使用して h1 要素をレンダーする三項式を記述してください。 最後に、handleClick() メソッドで、各ターンを正しくカウントし、ユーザーが自分のプレイした回数を確認できるようにしてください。 こうすることで、2 連勝または 2 連敗した場合にコンポーネントが実際に更新されたことをユーザーに伝えることもできます。
解答としては、
今回は、
- if/else文を用いてJSXの出力を制御すること
- if/else文ではなく、三項演算子を使用するとJSX内でも条件分岐を使用できること
ということでした。
ちょっとずつ、コードを理解できるようになってきました。
まだ、関数コンポーネントやフックなど学びたいことが多くて時間がないですね
今日はここまでです〜