【React Native】Componentとは?
この記事の内容
はじめに
ComponentはReact Nativeの基本要素の一つです。classとfunctionの2つの種類のComponentがありますが、今回はclassのComponentについて説明していきます。Componentを使う時はJSXで書くのでJSXについてはこの記事に参考してください。
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つ使用していてViewとTextです。
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を作りました。
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とは?
この記事の内容
はじめに
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> 子要素 </コンポーネント名>
- コンポーネント名:Importしたコンポーネントでも同ファイルで作ったコンポーネントでも使えます。
- Props: Propsの数は0、1、複数でも使えます。
- 子要素: 普通のテキストでも他のコンポーネントでも入ります。
例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を使用してフォームチェックをしよう!
この記事の内容
はじめに
入力フォームはウェブでもモバイルアプリでもよく使用されますが、ユーザーが情報を入れる場合は間違いを入れないように入力チェックは必要です。React NativeではYupというパッケージで簡単に入力チェックできます!YupはJavaScriptの入力チェックのためのパッケージです。
今回はFormikを使用して作成したフォームでチェックを行いますが、YupはFormikを使っていなくても使用できます。
前回の記事ではFormikでフォームを作りましたので必要な方は参考にしてください。
使用するための準備と参考コード
今回は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で作るメリットとデメリット
この記事の内容
はじめに
フロントエンドエンジニアはどんなシステムでもよく入力フォームを作っています。ウェブではフォームの作り方が色々ありますが、React Nativeも色々な作り方があります。パッケージなしで作ったら自分でstateなどを処理しなくてはいけないのでパッケージを使ったら便利です。最近人気Formikというパッケージを使う方法を検証してみました。
FormikはReactとReact Nativeのフォーム作成の為のパッケージです。
結論から
React NativeではFormikの全てのコンポーネントが使えるわけではないが、stateなどを処理してくれるのでとても便利です。 Formikの使用できないコンポーネントはパッケージなしで作れば問題ないので、Formikの使用をおすすめします。
メリット
軽い
Formikは色々な機能や派手なコンポーネントがあるパッケージではなく、シンプルで面倒な処理をしてくれるパッケージなので比較的軽いです。
下記のような面倒な処理をしてくれる
- Stateの値の処理
- 入力チェックとエラー出力
- フォームのサブミット処理
パッケージの使いたい部分だけ使えるのでカスタマイズしやすい
例えば、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';
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-1handleChange、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】じゃんけんゲームを作ってみよう!
この記事の内容
はじめに
React Native環境構築設定は前回の記事を見てください。
今回はコーディングについての記事なので、React Nativeのコードが書ける環境であれば大丈夫ですが、オススメは「Snack」あるいは「VS Codeテキストエディター」と「expo cli」です。
この記事の内容では「じゃんけんゲーム」のポイントを説明します。その他の詳細はドキュメンテーションを見てください。
【ドキュメント】
Getting Started · React Native
下記リンクは日本語翻訳ですが、一部翻訳していない箇所があります。
React Native ドキュメントの日本語訳 – 1日ひとつ、強くなる。
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]}のコードはスタイルは2つのスタイルを配列で割り当てします。配列でしたら、最後のスタイルが優先されます。上のコードでopponentColorは優先なのでbackgroundColorは#588280になります。widthはopponentColorで指定していないのでcircleで指定している100になります。
以上でじゃんけんゲームが完成しました!React Nativeが初めて使う方は難しいと思いますが、自分でコードを変更したり色々作ってみてたら分かりやすくなると思います。
次回
次回はReact Nativeでフォームを作ります。
参考のリンク
【React Native】基礎知識とExpoを使用した開発環境構築!
この記事の内容
React NativeはJavaScriptでAndroidとiOSアプリを作るためのオープンソースのフレームワークです。AndroidとiOSのコードにコンパイルせずに、デバイスでJavaScriptを実行することができます。React NativeはReactJSを使いますが、ReactJSを知らなくてもReact Nativeでアプリが作れます。Facebookによって2015年3月にリリースされました。 開発環境構築をする前に、まずはReact NativeがどんなものかExpo Snackというサービスで試してみましょう。 Expo Snack はReact Nativeのコードを書くことができ、HTMLのcodepenと同じようにすぐに画面を確認できるサービスです。 Expo Snack のリンクをクリックしたら下記のような画面が見えます。右にあるWebのボタンをクリックして、コードを変更したら結果が見えます。 下のようにコードを書いたら右に見えます。snackはReact Nativeの勉強の時と早く結果みたい時も便利そうです。 自分の携帯でもテストができます。 まず携帯にExpoのアプリをインストールしていきます。 上の画面のRunをクリックして、iPhoneを使っている場合はGet iOS Appをクリックして、Androidを使っていたらGet Android Appをクリックしたら、必要なアプリが表示されます。 今回はiPhoneなのでアップストアから携帯にダウンロードします。アプリを開いて、左側「Projects」をタップすると下の画面のようにDevice IDがあります。そのIDを入れたら、携帯でブラウザーと同じようにコードの結果がすぐ確認できます。 では、さっそく準備をしていきましょう。 今回はExpoというオープンソースのReact Nativeで開発するための無料ツールを使用します。 ExpoはXcode(iOSの統合開発環境)やAndroid Studio(Androidの統合開発環境)を使わなくてもアプリを作れる便利なツールです。React NativeのオフィシャルサイトでもExpoがすすめられています。1.React Nativeとは?
i.React Nativeのメリット
ii.React Nativeのデメリット
2.React Nativeを試しましょう
3.開発環境設定
i.開発環境
今回の開発環境は下記の通りです。こちらはWindowsとiPhoneですが、MacとAndroidの開発との違いは大きくないと思います。
環境設定前の環境
この記事でインストールするもの
- Expo モバイルアプリ
- Node.js 12.13.0
- Npm 6.12.0
- Expo-cli 3.4.1
ii.Node.js とNpmのインストール
node.jsからインストールできるのでLTS推奨版をダウンロードします。
許可にチェックしてください。
ここは保存先です。変更する場合は「Change」から変更してください。
CustomSetupは下記のようにデフォルトのままで大丈夫です。
下に書いていることは「C/C++からコンパイルが必要なnpmモジュールがあります。このようなパッケージが必要であればPython 2、Visual Studio Build Toolsなどツールが必要です。チェックしたらツールをインストールします。」という内容なので今回はチェックを外しても大丈夫です。
インストールが終わったらコマンドで確認できます。下記のコマンドを実行して、バージョンが表示されたら、インストールは成功です。
node --version
npm --version
iii.Expo-clのインストール
次は、npmを使ってexpo-cliをインストールしましょう。
管理者としてコマンドを開き下記のコマンドでインストールできます。
管理者ではない場合、エラーが出てくるので気を付けてください。
npm install expo-cli --global
これですべてインストールは完了です。
4.最初のアプリを作ってみよう
expo-cliのインストールが完了したらアプリを作りましょう。
i.セットアップ
使いたいフォルダに移動します
cd フォルダへのディレクトリ
下のコマンドを書いたらオプションが選べます。
expo init my-new-project
プロジェクトのテンプレートが選べます。どれを選択してもいいですが一番目のblankを選びました。
次に、アプリの名前が変更できます。
最後にnpmに必要なパッケージがダウンロードされて、セットアップ完了。
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 をスキャンできます。
携帯でこんな画面が見えます。
iii.修正してみよう
App.jsをVS Codeで開いてなにか変更し保存をすると、自動に携帯に再ビルドされて変更後のアプリがすぐ見えます。例えば、App.jsのbackgroundColorは#fffから”yellow”に変更したら黄色のアプリになります。
補足: -wのフラグを使ったらウェブでもビルドできます!
expo start -w
5.React Nativeのコードについて
このコードを見たらJavascriptコードのように見えないですが、HTMLと似ている <view>と<text>があります。これはJSXというマークアップ言語です。React Nativeの開発のほとんどの場合はJSXを使います。ビルドしたら自動的にJavaScriptのコードになります。
JSXについては下記の記事で説明しています。
モバイルアプリを作るときはReact NativeとExpoを使いたいと思います。XCodeとAndroid Studioを使うのはややこしいので自動に処理されるのは楽だと思いました。ビルドのスピードもいい印象があります。悪い印象はExpoのエラーがでてきたことだけです。まだ若いツールだから他のバグもあるかもしれません。6.印象
次回はReact Nativeで簡単なアプリを作ります。7.次回
8.参考のリンク