【React Native】じゃんけんゲームを作ってみよう！

はじめに

---

React Native環境構築設定は前回の記事を見てください。

【React Native】基礎知識とExpoを使用した開発環境構築！

今回はコーディングについての記事なので、React Nativeのコードが書ける環境であれば大丈夫ですが、オススメは「Snack」あるいは「VS Codeテキストエディター」と「expo cli」です。

この記事の内容では「じゃんけんゲーム」のポイントを説明します。その他の詳細はドキュメンテーションを見てください。

【ドキュメント】

Getting Started · React Native

下記リンクは日本語翻訳ですが、一部翻訳していない箇所があります。

React Native ドキュメントの日本語訳 – １日ひとつ、強くなる。

STEP1：ボタンの見た目を作りましょう

---

■必要な知識

• コンポーネント
• スタイル

コンポーネント

HTMLはdiv、spanなどのタグがありますが、React NativeにはText、Viewなどのコンポーネントがあります。React NativeのコンポーネントをインポートしたらJSXのコード（HTMLタグのように見えるコード)　で使うことができ、またカスタムコンポーネントが作れることもReact Nativeの強い機能で魅力の一つです。

JSXについては下記の記事で説明しています。

【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>

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 と書くとエラーが出ます。それに対してはimagesというオブジェクトを作りました。

//グウパアチョキの画像
let images = {};
images[guu] = require('./img/guu.png');
images[paa] = require('./img/paa.png');
images[choki] = require('./img/choki.png');

STEP3：ボタンに機能を追加しましょう

---

■必要な知識

• Touchable

Touchable

タッチをしたら関数が実行される機能を追加するために、ActionButtonクラス内のコンポーネントをViewからTouchableOpacityに変更しました。TouchableのonPressプロパティを割り当て、タッチしたらonPressの値の関数が実行されます。上のコードの場合は_onPressButton関数です。

Buttonというコンポーネントもありますが、Buttonでは丸の形が使えないのでTouchableを使っています。TouchableOpacity、TouchableHighlightなどありますが、Touchableの種類についてはドキュメントを見てください。

STEP4：相手のアクションを表示しましょう

---

■必要な知識

• State

State

Propsはコンポーネントをコントロールする方法の一つですが、もう一つのはstateです。Propsは一回指定して後で変更できない値ですが、stateは変更できるデータとして使います。一般的にはstateはコンストラクタで初期化して、変更時にsetState関数を呼び出します。

上のコードのstateはme（ユーザーのアクション）とopponent（CPU相手のアクション）です。最初は両方none(アクション無)に初期化します。AppのstateはActionButtonコンポーネントの中から変更したいので、そのコンポーネントから親のstateが変更できるための関数を引き渡します。PropsでsetParentStateとして関数を引き渡します。

React NativeではsetStateが実行される際にrender関数が再実行されて、画面が変更されます。じゃんけんゲームの場合はボタンをクリックしたら下記の流れで実行されます。

1. this._onPressButton(this.props.action)を呼び出します。this.props.action はguu、paa、chokiの中の一つです。
2. _onPressButton関数で親のstate（App）のmeに上記のアクション、opponentにランダムアクションを割り当てします。
3. Appのstateは変更されたのでrenderを再実行されます。stateのopponentが更新されたので、opponentクラスの中のthis.props.state.opponentは新しい値になります。その新しい値は画像で反映されます。(this.props.state.opponentはAppクラスのstate)

STEP5：結果を表示しましょう

---

■必要な知識

• スタイルが配列の場合

STEP1からSTEP4までが分かったらSTEP5のコードが分かると思いますが、まだ使っていないことはスタイルが配列の場合です。

スタイルが配列の場合

style={[styles.circle, styles.opponentColor]}のコードはスタイルは２つのスタイルを配列で割り当てします。配列でしたら、最後のスタイルが優先されます。上のコードでopponentColorは優先なのでbackgroundColorは#588280になります。widthはopponentColorで指定していないのでcircleで指定している100になります。

以上でじゃんけんゲームが完成しました！React Nativeが初めて使う方は難しいと思いますが、自分でコードを変更したり色々作ってみてたら分かりやすくなると思います。

次回

---

次回はReact Nativeでフォームを作ります。

参考のリンク

---

• React Nativeのオフィシャルドキュメンテーション
• Snack
• React Nativeのシェープの作り方
• propsでImageの使い方
• JSXの中でJSの使い方
• 親のステートがアクセスできるため
• グウパアチョキの画像
• ドキュメンテーションの日本語翻訳

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください