マリーとジョーのIT研究ブログ ( ロックシステム)

株式会社ロックシステムの技術研究チームのマリーとジョーです。IT研究ブログを色々更新していきます!

【React Native】Componentとは?

f:id:rocksystem6611:20191205105916p:plain

はじめに

ComponentはReact Nativeの基本要素の一つです。classとfunctionの2つの種類のComponentがありますが、今回はclassのComponentについて説明していきます。Componentを使う時はJSXで書くのでJSXについてはこの記事に参考してください。

rocksystem6611.hatenablog.com

React NativeのドキュメンテーションHello Worldのコードを参考にしながら説明していきます。

Componentの使い方

ComponentをReactからインポート

Componentを使用する為に、まずはReactからComponentをインポートする必要があります。

import React, { Component } from 'react';

これはReactとComponentをインポートしています。

ReactをインポートするのはJSXを使用するためで、JSXを書いたらReact.createElementにコンパイルしてくれます。

ComponentはComponentを使用するためにインポートします。Reactと一緒にインポートする必要があるので注意してください。

使用したいReact NativeのComponentをインポート

使用したいReact NativeのComponentをインポートします。

上記のコードではComponentを2つ使用していてViewTextです。

import { View, Text } from 'react-native';

TextとViewを使ってみる

Textは普通のテキストを表示するためのComponentです。ここで表示するテキストは「Hello, World!」です。

<Text>Hello, world!</Text>

ViewはHTMLのdivのようにComponentを集めるためのComponentです。下記のViewの子要素はTextです。

<View>
  <Text>Hello, world!</Text>
</View>

Componentを続けて書く場合

Componentは続けて書く場合、親のComponentが必要です。例えば、下のコードは「Adjacent JSX elements must be wrapped in an enclosing tag.」というエラーが出ます。

return (
  <Text>Hello, world!</Text>
  <Text>Hello, world!</Text>
)

View Componentに入れたら問題ありません。

return (
  <View>
    <Text>Hello, world!</Text>
    <Text>Hello, world!</Text>
  </View> 
)

Componentの定義の方法

ComponentはReact NativeのComponentだけではなく、定義して使用することができます。

Componentを定義する時の必要な関数はrender()です。renderは表示することをリターンする関数です。通常はJSXで書きます。

先ほどのHelloWorldAppもComponentで、その中でViewとTextのComponentを使用していました。

Componentは下記のように記述します。

import React, { Component } from 'react';

class コンポーネント名 extends Component {
  render() {
    return ( ...表示内容... );
  }
}

また、Componentを直接インポートしない場合の記述方法もあります。

import React from 'react';

class コンポーネント名 extends React.Component {
  render() {
    return ( ...表示内容... );
  }
}


下記のコードにHelloBobというComponentを作りました。「Hello Bob!」のテキストを表示するComponentです。HelloWorldApp Component内のView Componentの中で使います。

export defaultとは?

export default class HelloWorldApp extends Component

このexport defaultはなんでしょうか?exportはjavaScriptの別ファイルから読み込まれるためのキーワードです。defaultは別ファイルから読み込まれた時にオブジェクト名(今回はクラス)を指定しなかったらこのオブジェクトになるという意味です。

App.jsファイルの場合は、ReactのソースからApp.jsが読み込まれることで実装されており、export defaultがアプリのメインクラスを指定する役割なのでdefaultがなかったらエラーが出ます。エラーメッセージは「No default export of 'App.js' to render!」です。

下記のように記述するとメインのクラスとして指定できます。

export default class コンポーネント名 extends Component {
  render() {
    return ( ...表示内容... );
  }
}

もしくは下記のような記述もできます。

class コンポーネント名 extends Component {
  render() {
    return ( ...表示内容... );
  }
}

export default コンポーネント名;

結論

今回はHello Worldのコードを参考に説明しました。ComponentはReact Nativeのとても大切な基本です。これから自分のReact Nativeのコードを書けると思います!React Nativeの他のことを知りたかったらドキュメンテーションを参考にしてください。functionのコンポーネントはまた後の記事で記述しようと思っています。次回はpropsでComponentをカスタマイズします。

参考

【React Native】JSXとは?

f:id:rocksystem6611:20191205105916p:plain

はじめに

React Nativeのコードを初めて見たら分かりにくいことが多いと思います。例えば、下記のコードを見てみましょう。

<Text>Hello, world!</Text>

このReact Nativeのコードはなんでしょうか?HTMLとXMLに似ていますが、これがJSXと言います。

今回はこのJSXについて説明していきます。

JSXとは?

JSXはJavaScript の構文の拡張です。React JSとReact NativeのJavaScriptコードの中にJSX構文が書けます。コンポーネントを作るコードは一般的にJSXで書かれています。

JSXの構文

まずはJSX構文の形を見ましょう。HTMLを知っている方はこのような構文に慣れていると思いますが、HTMLを知らなくてもすぐに慣れると思います!

コンポーネントを使う場合、importするか定義することが必要です。下記のコードはViewとTextというReact Nativeの元々あるコンポーネントをimportします。

import { View, Text } from 'react-native';

JSXの書き方を見ましょう。

<コンポーネント名 Props>
    子要素
</コンポーネント名>
  1. コンポーネント名:Importしたコンポーネントでも同ファイルで作ったコンポーネントでも使えます。
  2. Props: Propsの数は0、1、複数でも使えます。
  3. 子要素: 普通のテキストでも他のコンポーネントでも入ります。

例1:テキストを表示する

<Text style={blueStyle}>
    Hello World
</Text>
  • TextはReact Nativeからimportしたコンポーネントです。
  • ここでのPropsは一つで、prop名はstyleで値はblueStyleです。
  • 子要素はHello Worldです。

子要素のところでコンポーネントも入ります。

例2:子要素にコンポーネントを入れる

<View>
    <Text style={blueStyle}>
        Hello World
    </Text>
</View>

ここでのViewのコンポーネントの子要素は例1のコンポーネントです。こういう風に子要素はコンポーネントでも大丈夫なので、子要素で何層も階層が作れます。

例3:親要素と子要素を理解する

<A>
    <B>
        <C>
        </C>
        <D>
        </D>
    </B>
</A>

例3では下記が正解です。

  • Aの子要素はBです。
  • Bの子要素はCとDです。

例4:閉じタグがない書き方

子要素がなかったらJSXをこのようにも書けます。

<コンポーネント名  Props/>
<Button color="#ff5c5c" title="button" />

例5:式を埋め込む

JSXの中にJavaScriptの式が書けます。JavaScriptを書く場合は{ }の中に記述します。例えば、例1でstyleの値はJavaScriptのオブジェクトなので、{ }の中に記述しました。

<Button color="#ff5c5c" title={2+2} />

例5で{ }の中はJavaScriptが実行されるので、ボタンのtitleは4になります。{ }がなかったらエラーになります。

{ }の中で式しか書けないので、ifやforなどを使いたい場合はJSXの中で書けません。

JSXはJavaScriptにコンパイルされる

JSXを書いたらJavaScriptのコードにコンパイルされるので、JSXを書かなくてもReactJSとReact Nativeが書けます。

例えば、下記のJSXは下記の通常JavaScriptにコンパイルされるので、下記のJSXと通常JavaScriptは等価です。

JSXで書く方が一般的で、見やすいのでお勧めです。

JSXはReact JSとReact Nativeしか使えない?

React JSとReact Native以外でJSXが使えるかどうか調べました。使えるけど、そんなケースは便利かどうかまだ分かりません。理解できたことはJSXはReact JSと関係なく実装できるということです。

結論

JSXはReact JSとReact Nativeで使えるJavaScript構文の拡張です。構文はHTMLと似ていますが、本当はJavaScriptのコードにコンパイルされます。JavaScriptとJSXを混ぜることは最初に汚いと思うかもしれませんが、JSXなしのコードを見たらJSXを使った方が割と綺麗なコードだと思います。

参考

【React Native】Yupを使用してフォームチェックをしよう!

f:id:rocksystem6611:20191205105916p:plain

はじめに

入力フォームはウェブでもモバイルアプリでもよく使用されますが、ユーザーが情報を入れる場合は間違いを入れないように入力チェックは必要です。React NativeではYupというパッケージで簡単に入力チェックできます!YupはJavaScriptの入力チェックのためのパッケージです。

今回はFormikを使用して作成したフォームでチェックを行いますが、YupはFormikを使っていなくても使用できます。

前回の記事ではFormikでフォームを作りましたので必要な方は参考にしてください。

rocksystem6611.hatenablog.com

使用するための準備と参考コード

今回はvalidationSchemaというpropを使います。

使用するための準備

まずはYupをimportします。

import * as yup from 'yup';

次にvalidationSchemaを準備します。

const validationSchema = yup.object().shape({
//ここにはチェックの設定
});

Formikを使用する場合はFormikの中にvalidationSchemaをセットします。

<Formik 
    validationSchema={validationSchema}
>

参考コード

前の記事のフォームのvalidateはvalidationSchemaに変えたら下記のコードになります。

YupでvalidationSchemaのオブジェクトを作るだけでエラーチェックができます。

Yupでいろいろなチェックをしましょう

※まとめているフォームのコードはこの項目の下にあります。

最大桁数

maxは最大桁数チェックができます。

text: yup
.string()
.max(10, '10文字以下を入れてください')  //11文字以上だったらerrors.textは「10文字以下を入れてください」になる

入力必須のインプット

requiredは必須項目の確認を追加します。

text: yup
.string()
.required('メッセージを入力してください') 

メールアドレスチェック

Yupはメールアドレスチェックがあるので正規表現を使わなくて大丈夫です。

email: yup
.string()
.email('正しいメールアドレスを入力してください')

パスワードを非表示

TextInputのsecureTextEntryというpropにtrueを代入したら文字が隠せます。

<TextInput style={styles.input}
                value={values.password}
                onChangeText={handleChange('password')}
                placeholder="パスワード"
                onBlur={handleBlur('password')}
                secureTextEntry={true} //文字を非表示
 />

正規表現

matchesで正規表現チェックができます。全角文字など正規表現で色々なチェックができます。

例:全角文字の場合

zenkaku: yup
.string()
.matches(/^[^\x20-\x7e]*$/, '全角文字のみ') //全角文字のみ(空文字OK)

例:半角英数字の場合

yup
.string()
.matches(/^[0-9a-zA-Z]+$/, '半額英数字のみ') //半角英数字のみ(空文字OK)

型チェック

型のエラーのメッセージを指定する場合、typeErrorを使用します。

文字列

文字列のチェックはstringが使えます。

string: yup
.string()
.typeError('文字列を入れてください')

数字

数字のチェックはnumberが使えます。

number: yup
.number()
.typeError('数字を入れてください')

日付

date型はdateにキャストされて、失敗であればエラーになります。普通の数字は日付にキャストできることが多いので、typeErrorのみはあまり効果しないと思います。※日付型チェックは正規表現や日と月を分けるなどの方が多いと思います。

date: yup
.date()
.typeError('正しい日付を入力してください')

使用例まとめ参考コード

他にチェックしたいことがあればドキュメンテーションで詳しく書いています。

補足

コードが長い...整理してみる!

上記のコードは同じようなコードを何度もかいてる箇所が多いので、下記のコードでInputクラスを作って整理することでコードは読みやすくなりました。values、handleChangeなどのpropsはhelpersというpropを代入しました。Inputクラスの作り方はケースバイケースですので、ケースによって自由に作れます。

ボタンをdisabled(無効)にする

コードでエラーがでたらボタンを押せなくします。Formikで簡単にエラーのステートでボタンをコントロールできます!

disabled={!props.isValid}

JavaScriptのスプレッド構文

JavaScriptのスプレッド構文(...)でpropsはオブジェクトから代入できます。上記のコードは {...this.props.other} でotherのオブジェクトからpropsを作ります。

 {...this.props.other} 

印象

FormikとYupでフォームを作るとまだ自分で処理することが多いですが、結構フレキシブルなパッケージです。今回はInputというクラスを作ったけど、ケースによってカスタマイズできます。handleChange、valuesなどを使うのは慣れるまで難しいので初心者向けのパッケージがあればいいと思います。

参考

【React Native】フォームをFormikで作るメリットとデメリット

f:id:rocksystem6611:20191205105916p:plain

はじめに

フロントエンドエンジニアはどんなシステムでもよく入力フォームを作っています。ウェブではフォームの作り方が色々ありますが、React Nativeも色々な作り方があります。パッケージなしで作ったら自分でstateなどを処理しなくてはいけないのでパッケージを使ったら便利です。最近人気Formikというパッケージを使う方法を検証してみました。

FormikはReactとReact Nativeのフォーム作成の為のパッケージです。

結論から

React NativeではFormikの全てのコンポーネントが使えるわけではないが、stateなどを処理してくれるのでとても便利です。 Formikの使用できないコンポーネントはパッケージなしで作れば問題ないので、Formikの使用をおすすめします。

メリット

  • 軽い

    Formikは色々な機能や派手なコンポーネントがあるパッケージではなく、シンプルで面倒な処理をしてくれるパッケージなので比較的軽いです。

  • 下記のような面倒な処理をしてくれる

    1. Stateの値の処理
    2. 入力チェックとエラー出力
    3. フォームのサブミット処理
  • パッケージの使いたい部分だけ使えるのでカスタマイズしやすい

    例えば、handleBlurを使うか使わないか選べます。

デメリット

  • 下記のFormikのコンポーネントはウェブでは動きますがモバイルではエラーがでて動かない(ReactJSでは使えます)

    • Field
    • Error Message
  • シンプルなフォームを作ってもお決まりのソースコードが必要で、それは結構長いので自分でコンポーネントを作ることになる
  • React Nativeは新しい為、Formikの記事やパッケージはReactJS向けが多い
  • Formikなしとありを比較してみよう

    入力欄と送信ボタンがあるフォームを作ります。

    パッケージなしでフォームを作る

    このコードではstateは自分で処理します。stateは入力した内容(text)とエラー(error)があります。

    Formikを使ってフォームを作る

    パッケージをインストールする

    ローカルな開発でしたらパッケージをインストールしないとFormikが使えない為、プロジェクトのダイレクトリに移動して下記のコマンドを実行するとFormikをインストールできます。

    npm install formik --save

    Snackでもnpmのパッケージが使えるのでsnackでコードを試すのは便利です。Formikのimportのコードを書いたら、エラーメッセージが出て、ADD CTRL+ をクリックしたらパッケージはsnackで使えるようになります。

    import { Formik}  from 'formik';
    
    f:id:rocksystem6611:20191205093629p:plain

    Formikでコードを書く

    先ほどのフォームをFormikを使って作り直しました。

    最初はFormikコンポーネントを見ましょう。上のコードでFormikのpropsをセットする部分があります。下記が使用しているpropsの説明です。

    • initialValues: フォーム変数の最初の値
    • onSubmit: submitをクリックしたら関数を実行する
    • validate: 入力チェックの関数。エラーがあったらonSubmitは実行されない

    全部のpropsはこのリンクで見えます。

    https://jaredpalmer.com/formik/docs/api/formik#props

    Formikタグの中で色々なステートやヘルパーがpropsとして使えます。下記は説明です。

    • values: フォーム変数の値
    • touched: フォームインプットに触れたかどうか
    • errors: validateによってエラーの内容
    • handleChange: テキストが変わったらvaluesを更新するためのヘルパー
    • handleBlur: インプットに触ったらtouchedを変更するためのヘルパー
    • handleSubmit: サブミットの処理

    全部のpropsはこのリンクで見えます。

    https://jaredpalmer.com/formik/docs/api/formik#props-1

    handleChange、handleBlurなどを使わなくてはいけませんが、詳細はFormikが処理してくれるし、エラー出力のコードはエラーがある場合にボタンが押されたり入力欄のフォーカスが外れたら出力してくれるのでとても便利です。

    コンポーネントのFieldとError Messageは使えない

    FormikはFieldとError Messageというコンポーネントがあるけど、使ってみたらウェブしか使えなかったです。(2019/12 現在)調べたらこの2つはReact NativeのサポートはなくReactJSだけが使えるそうです。なので、今は長いフォームを作る人は使えないコンポーネントの代わりに自分のカスタムコンポーネントを作るのお勧めます。

    モバイルで使えませんが、FieldとError Messageでフォームを作るコードは下にあります。いつかこのコードはサポートができればフォームは作りやすくなりますね。

    ※モバイルでエラーが出るけどウェブで動きます。

    比較してみる

    上記の2つのパッケージなしとパッケージありのコードを比較してみると、長さはほぼ変わらないですがFormikのコードが分かりやすいと思います。

    パッケージなしのコードは細かく見ないとエラーの値があっているかどうか不安になると思いますが、FormikでhandleChangeとvalidateを使っているのでタイミングを考えずに使えます。

    シンプルなフォームを作ってもお決まりのソースコードが必要でそれは結構長いので、Formikで長いフォームを作る場合は、コピペをよくする、あるいは自分でコンポーネントを作る必要があります。しかし、そのためカスタマイズしやすいです。

    印象

    React Nativeでフォームを作るのは思ったより難しかったです。React Nativeのメリットはカスタムコンポーネントが使えることですが、デメリットはちょうどいいコンポーネントを探すのは時間がかかるし、なかったら自作でコンポーネントを作ることになります。時間の経過とともに、パッケージが増えるのでReact Nativeはだんだん使いやすくなると思います。

    次回

    次回はYupというパッケージで入力チェックを追加します。

    参考

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

f:id:rocksystem6611:20191119154227p:plain

はじめに

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

rocksystem6611.hatenablog.com

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

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

【ドキュメント】

Getting Started · React Native

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

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

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

必要な知識

※下記コードのプレビューを見る場合はPCで下のf:id:rocksystem6611:20191119174110p:plainを押して別タブで開いてください。

コンポーネント

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

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

rocksystem6611.hatenablog.com

STEP1のコードの中にはView、TextのコンポーネントとActionButtonのカスタムコンポーネントがあります。クラスを作って、Componentクラスをextendしたらカスタムコンポーネントになります。クラス内にrender関数を使用し、リターンした内容が画面に出力されます。

スタイル

HTMLはスタイルはCSSでしますが、React NativeはJavaScriptのオブジェクトでします。CSSのプロパティと同じ名前が多いのでCSSが慣れている人なら分かりやすいと思います。React Nativeはキャメルケースを使うのでそれはCSSと違います。STEP1はborderRadiusのプロパティで丸を作りました。

STEP2:画像を入れましょう

必要な知識

  • Props
  • <Image>

※下記コードのプレビューを見る場合はPCで下のf:id:rocksystem6611:20191119174110p:plainを押して別タブで開いてください。

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で下のf:id:rocksystem6611:20191119174110p:plainを押して別タブで開いてください。

Touchable

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

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

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

必要な知識

  • State

※下記コードのプレビューを見る場合はPCで下のf:id:rocksystem6611:20191119174110p:plainを押して別タブで開いてください。

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:結果を表示しましょう

必要な知識

  • スタイルが配列の場合

※下記コードのプレビューを見る場合はPCで下のf:id:rocksystem6611:20191119174110p:plainを押して別タブで開いてください。

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

スタイルが配列の場合

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

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

次回

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

参考のリンク

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

f:id:rocksystem6611:20191205105916p:plain

1.React Nativeとは?

React NativeはJavaScriptAndroidiOSアプリを作るためのオープンソースフレームワークです。AndroidiOSのコードにコンパイルせずに、デバイスJavaScriptを実行することができます。React NativeはReactJSを使いますが、ReactJSを知らなくてもReact Nativeでアプリが作れます。Facebookによって2015年3月にリリースされました。

i.React Nativeのメリット

  • Facebook社が作っており、Facebook, Skype, Instagram, Uber Eatsなど人気なアプリはReact Nativeで作られているので未来的にサポートは続きそうです。
  • 一つのプログラムを書いて、iOSアプリにもAndroidアプリにもなるのでOSを選ばずにみんなが使えるアプリになります。React Nativeは最初はAndroidiOSのためのものでしたが、コミュニティーがサポートしているプラットフォームはWindowsmacOS、ウェブ、tvOSなどもあります。
  • JavaScriptと「JSX」というマークアップ言語だけでアプリが作れるのでJavaScriptができる人にはとても使いやすいです。
  • React Nativeの開発のビルドは早いです。コードを更新した結果を早く見ることができます。
  • node.jsの環境なのでnpmにあるパッケージが全部使えます。Node.jsはサーバーとして使われているJavaScriptを実行するものです。npmはnode.jsのパッケージマネージャで、色々な人によって作られたオープンソースの関数が使えます。日付フォーマットなどよく必要になるパッケージもReact Native向けのパッケージがあります。

ii.React Nativeのデメリット

  • React Nativeはまだ歴史が浅いのでツールやパッケージはエラーがでる可能性があります。エラーをグーグルで検索してもまだだれも対応方法が分からない可能性があります。
  • 歴史が浅いフレームワークなので、もし必要な特定の機能がReact Nativeで作れない場合、自分で作らなければいけません。React Nativeで使えるネイティブな機能は多いですが、特別な機能が必要ならiOSAndroidのエンジニアが必要な時もあります。

2.React Nativeを試しましょう

開発環境構築をする前に、まずはReact NativeがどんなものかExpo Snackというサービスで試してみましょう。

Expo Snack はReact Nativeのコードを書くことができ、HTMLのcodepenと同じようにすぐに画面を確認できるサービスです。

Expo Snack のリンクをクリックしたら下記のような画面が見えます。右にあるWebのボタンをクリックして、コードを変更したら結果が見えます。

f:id:rocksystem6611:20191112143825p:plain

下のようにコードを書いたら右に見えます。snackはReact Nativeの勉強の時と早く結果みたい時も便利そうです。

f:id:rocksystem6611:20191112143832p:plain

自分の携帯でもテストができます。

まず携帯にExpoのアプリをインストールしていきます。

上の画面のRunをクリックして、iPhoneを使っている場合はGet iOS Appをクリックして、Androidを使っていたらGet Android Appをクリックしたら、必要なアプリが表示されます。

f:id:rocksystem6611:20191112143838p:plain

今回はiPhoneなのでアップストアから携帯にダウンロードします。アプリを開いて、左側「Projects」をタップすると下の画面のようにDevice IDがあります。そのIDを入れたら、携帯でブラウザーと同じようにコードの結果がすぐ確認できます。

f:id:rocksystem6611:20191112143845p:plain

3.開発環境設定

では、さっそく準備をしていきましょう。

今回はExpoというオープンソースのReact Nativeで開発するための無料ツールを使用します。

ExpoはXcodeiOS統合開発環境)やAndroid StudioAndroid統合開発環境)を使わなくてもアプリを作れる便利なツールです。React NativeのオフィシャルサイトでもExpoがすすめられています。

i.開発環境

今回の開発環境は下記の通りです。こちらはWindowsiPhoneですが、MacAndroidの開発との違いは大きくないと思います。

環境設定前の環境

この記事でインストールするもの

  • Expo モバイルアプリ
  • Node.js 12.13.0
  • Npm 6.12.0
  • Expo-cli 3.4.1

ii.Node.js とNpmのインストール

node.jsからインストールできるのでLTS推奨版をダウンロードします。

f:id:rocksystem6611:20191112143850p:plain

許可にチェックしてください。

f:id:rocksystem6611:20191112143854p:plain

ここは保存先です。変更する場合は「Change」から変更してください。

f:id:rocksystem6611:20191112143858p:plain

CustomSetupは下記のようにデフォルトのままで大丈夫です。

f:id:rocksystem6611:20191112143902p:plain

下に書いていることは「C/C++からコンパイルが必要なnpmモジュールがあります。このようなパッケージが必要であればPython 2、Visual Studio Build Toolsなどツールが必要です。チェックしたらツールをインストールします。」という内容なので今回はチェックを外しても大丈夫です。

f:id:rocksystem6611:20191112143907p:plain

インストールが終わったらコマンドで確認できます。下記のコマンドを実行して、バージョンが表示されたら、インストールは成功です。

node --version
npm --version

f:id:rocksystem6611:20191112143916p:plain 

f:id:rocksystem6611:20191112143912p:plain

iii.Expo-clのインストール

次は、npmを使ってexpo-cliをインストールしましょう。

管理者としてコマンドを開き下記のコマンドでインストールできます。

管理者ではない場合、エラーが出てくるので気を付けてください。

npm install expo-cli --global

f:id:rocksystem6611:20191113134358p:plain

これですべてインストールは完了です。

4.最初のアプリを作ってみよう

expo-cliのインストールが完了したらアプリを作りましょう。

i.セットアップ

使いたいフォルダに移動します

cd フォルダへのディレクトリ

下のコマンドを書いたらオプションが選べます。

expo init my-new-project

プロジェクトのテンプレートが選べます。どれを選択してもいいですが一番目のblankを選びました。

f:id:rocksystem6611:20191112143750p:plain

次に、アプリの名前が変更できます。

f:id:rocksystem6611:20191112143754p:plain


最後にnpmに必要なパッケージがダウンロードされて、セットアップ完了。

f:id:rocksystem6611:20191112143757p:plain

ii.アプリスタート

次に、新しく作られたダイレクトリーに移動したらアプリをスタートできます。パソコンと携帯のネットワークは同じであれば--tunnelが必要じゃないですが、--tunnelを追加したらネットワークの設定を考えずに接続できます。

cd my-new-project
expo start --tunnel

※エラーが出た場合

「Metro Bundler process exited with code 1」のエラーがでてきたら「~\my-new-project\node_modules\metro-config\src\defaults\blacklist.js」のファイルで14行目くらいにある コードを修正したらエラーがなくなります。このエラーはWindowsだけのエラーらしいです。

修正前のコード

var sharedBlacklist = [
    /node_modules[/\\]react[/\\]dist[/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/ ];

修正後のコード

var sharedBlacklist = [
   /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
   /website\/node_modules\/.*/,
   /heapCapture\/bundle\.js/,
   /.*\/__tests__\/.*/ ];

問題なければQR Codeが表示されます。Expoのアプリ(snackで使用した同じアプリ)は携帯にインストールしていればQR Codeをスキャンしたらアプリはビルドされて携帯で使えます。iOSは普通のカメラアプリで、AndroidはExpoのアプリでQR Code をスキャンできます。

f:id:rocksystem6611:20191113093914p:plain

携帯でこんな画面が見えます。

f:id:rocksystem6611:20191113094300p:plain

iii.修正してみよう

App.jsをVS Codeで開いてなにか変更し保存をすると、自動に携帯に再ビルドされて変更後のアプリがすぐ見えます。例えば、App.jsのbackgroundColorは#fffから”yellow”に変更したら黄色のアプリになります。

f:id:rocksystem6611:20191112143812p:plain

f:id:rocksystem6611:20191112143809p:plain

f:id:rocksystem6611:20191113094244p:plain

補足: -wのフラグを使ったらウェブでもビルドできます!

expo start -w

5.React Nativeのコードについて

f:id:rocksystem6611:20191112143822p:plain

このコードを見たらJavascriptコードのように見えないですが、HTMLと似ている <view>と<text>があります。これはJSXというマークアップ言語です。React Nativeの開発のほとんどの場合はJSXを使います。ビルドしたら自動的にJavaScriptのコードになります。

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

rocksystem6611.hatenablog.com

6.印象

モバイルアプリを作るときはReact NativeとExpoを使いたいと思います。XCodeAndroid Studioを使うのはややこしいので自動に処理されるのは楽だと思いました。ビルドのスピードもいい印象があります。悪い印象はExpoのエラーがでてきたことだけです。まだ若いツールだから他のバグもあるかもしれません。

7.次回

次回はReact Nativeで簡単なアプリを作ります。

8.参考のリンク