【React Native】じゃんけんゲームを作ってみよう！
この記事の内容
はじめに
React Native環境構築設定は前回の記事を見てください。
今回はコーディングについての記事なので、React Nativeのコードが書ける環境であれば大丈夫ですが、オススメは「Snack」あるいは「VS Codeテキストエディター」と「expo cli」です。
この記事の内容では「じゃんけんゲーム」のポイントを説明します。その他の詳細はドキュメンテーションを見てください。
【ドキュメント】
Getting Started · React Native
下記リンクは日本語翻訳ですが、一部翻訳していない箇所があります。
React Native ドキュメントの日本語訳 – １日ひとつ、強くなる。
STEP1：ボタンの見た目を作りましょう
必要な知識
- コンポーネント
- スタイル
※下記コードのプレビューを見る場合はPCで下の
を押して別タブで開いてください。
コンポーネント
HTMLはdiv、spanなどのタグがありますが、React NativeにはText、Viewなどのコンポーネントがあります。React NativeのコンポーネントをインポートしたらJSXのコード（HTMLタグのように見えるコード) で使うことができ、またカスタムコンポーネントが作れることもReact Nativeの強い機能で魅力の一つです。
JSXについては下記の記事で説明しています。
STEP1のコードの中にはView、TextのコンポーネントとActionButtonのカスタムコンポーネントがあります。クラスを作って、Componentクラスをextendしたらカスタムコンポーネントになります。クラス内にrender関数を使用し、リターンした内容が画面に出力されます。
スタイル
HTMLはスタイルはCSSでしますが、React NativeはJavaScriptのオブジェクトでします。CSSのプロパティと同じ名前が多いのでCSSが慣れている人なら分かりやすいと思います。React Nativeはキャメルケースを使うのでそれはCSSと違います。STEP1はborderRadiusのプロパティで丸を作りました。
STEP2：画像を入れましょう
必要な知識
- Props
- <Image>
※下記コードのプレビューを見る場合はPCで下のを押して別タブで開いてください。
Props
コンポーネントにはカスタマイズする目的で、パラメータを設定できます。このパラメータを Props と言います。上のコードでaction = {guu}があって、actionはpropの名前です。ActionButtonクラスの中でthis.props.actionの値はpropのactionの値ですので、ここでは「guu」「paa」「choki」を指します。このようにボタンによって違う画像が表示できます。
<Image>
最初に使いたい画像をフォルダーに入れます。今回はこのリンクからダウンロードしました。
3+ Free User:Clker-Free-Vector-Images Rock Paper Scissors & Scissors Images - Pixabay
Imageタグのsourceプロパティを割り当てたら画像が見えます。requireは直定数しか使えないのでImage <source = {require(variable)}>と書くとエラーが出ます。それに対してはimagesというオブジェクトを作りました。
//グウパアチョキの画像
let images = {};
images[guu] = require('./img/guu.png');
images[paa] = require('./img/paa.png');
images[choki] = require('./img/choki.png');
STEP3：ボタンに機能を追加しましょう
必要な知識
※下記コードのプレビューを見る場合はPCで下のを押して別タブで開いてください。
Touchable
タッチをしたら関数が実行される機能を追加するために、ActionButtonクラス内のコンポーネントをViewからTouchableOpacityに変更しました。TouchableのonPressプロパティを割り当て、タッチしたらonPressの値の関数が実行されます。上のコードの場合は_onPressButton関数です。
Buttonというコンポーネントもありますが、Buttonでは丸の形が使えないのでTouchableを使っています。TouchableOpacity、TouchableHighlightなどありますが、Touchableの種類についてはドキュメントを見てください。
STEP4：相手のアクションを表示しましょう
必要な知識
- State
※下記コードのプレビューを見る場合はPCで下のを押して別タブで開いてください。
State
Propsはコンポーネントをコントロールする方法の一つですが、もう一つのはstateです。Propsは一回指定して後で変更できない値ですが、stateは変更できるデータとして使います。一般的にはstateはコンストラクタで初期化して、変更時にsetState関数を呼び出します。
上のコードのstateはme（ユーザーのアクション）とopponent（CPU相手のアクション）です。最初は両方none(アクション無)に初期化します。AppのstateはActionButtonコンポーネントの中から変更したいので、そのコンポーネントから親のstateが変更できるための関数を引き渡します。PropsでsetParentStateとして関数を引き渡します。
React NativeではsetStateが実行される際にrender関数が再実行されて、画面が変更されます。じゃんけんゲームの場合はボタンをクリックしたら下記の流れで実行されます。
- this._onPressButton(this.props.action)を呼び出します。this.props.action はguu、paa、chokiの中の一つです。
- _onPressButton関数で親のstate（App）のmeに上記のアクション、opponentにランダムアクションを割り当てします。
- Appのstateは変更されたのでrenderを再実行されます。stateのopponentが更新されたので、opponentクラスの中のthis.props.state.opponentは新しい値になります。その新しい値は画像で反映されます。(this.props.state.opponentはAppクラスのstate)
STEP5：結果を表示しましょう
必要な知識
- スタイルが配列の場合
※下記コードのプレビューを見る場合はPCで下のを押して別タブで開いてください。
STEP1からSTEP4までが分かったらSTEP5のコードが分かると思いますが、まだ使っていないことはスタイルが配列の場合です。
スタイルが配列の場合
style={[styles.circle, styles.opponentColor]}のコードはスタイルは２つのスタイルを配列で割り当てします。配列でしたら、最後のスタイルが優先されます。上のコードでopponentColorは優先なのでbackgroundColorは#588280になります。widthはopponentColorで指定していないのでcircleで指定している100になります。
以上でじゃんけんゲームが完成しました！React Nativeが初めて使う方は難しいと思いますが、自分でコードを変更したり色々作ってみてたら分かりやすくなると思います。
次回
次回はReact Nativeでフォームを作ります。
