TOP

BLOG

技術研究ブログ

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

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

2019-11-21

はじめに


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

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

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

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

【ドキュメント】

Getting Started · React Native

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

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

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

コンポーネントにはカスタマイズする目的で、パラメータを設定できます。このパラメータを 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

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

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


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


■必要な知識

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]}のコードはスタイルは2つのスタイルを配列で割り当てします。配列でしたら、最後のスタイルが優先されます。上のコードでopponentColorは優先なのでbackgroundColorは#588280になります。widthはopponentColorで指定していないのでcircleで指定している100になります。

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


次回


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

参考のリンク


他の記事へ