【React Native】フック useEffect()の使い方
この記事の内容
フックとは?
フックとは「関数Componentを作ろう！」でご紹介した関数ComponentでstateとライフサイクルメソッドのReactの機能を利用するための関数です。
2019年より前はフックがなかったので、関数Componentはあまり使われていませんでした。フックが登場するまではstateなどの一般的なReactの機能が必要な場合、クラスComponentで書く必要がありました。フックにより全ての関数Componentが関数で書けるようになりました。
関数ComponentはクラスComponentよりコーディングしやすく読みやすいものとなっています。
最近は関数Componentがスタンダードになっているので、フックを勉強しましょう！
一般的に使われているフックはuseState()とuseEffect()があります。今回はuseEffect()を紹介します。
日本語ではeffectは副作用と言われ、useEffect()を副作用フックと言われています。
useEffect()とは?
前回はクラスコンポーネントのライフサイクルメソッドを紹介しました。クラスコンポーネントはcomponentDidMountとcomponentDidUpdateとcomponentWillUnmountを使っていますが、関数ComponentはuseEffect()という関数一つでライフサイクルの中でコードの実行ができます。
useEffect()の使い方
useEffect()の最初の引数は関数です。この関数は副作用と言います。関数Component内にuseEffect()を書くと毎回レンダーされたら副作用が動きます。つまり、副作用はクラスコンポーネントのcomponentDidMountとcomponentDidUpdateが動くタイミングと一緒です。
前回は色が変わるアプリを作っていました。今回はほとんど同じですが、色が変わらずに表示される文字がひらがなと漢字が交互に繰り返すアプリを作ります。下記のuseEffect()を使っているコードを見ましょう。
※このコードはバグがあります。
このコードにはバグがありますが、どの部分でしょうか？答えはclearInterval()を使っていないところです。レンダーされると副作用が実行されて、前のintervalを消さずに新しいintervalを作成してしまっています。
クラス関数の場合はcomponentDidUpdate()の中でclearInterval()を使います。関数コンポーネントの副作用はcomponentDidMount()、componentDidUpdate()の二つと同じ実行タイミングなので、マウントか更新かどちらの場合の判定が必要になりそうですね。この判定は不可能ではありませんが、useEffect()の戻り値でマウントか更新かを考えずに綺麗に実装できます。
以下のブログでは本内容に加えて、引き続きuseEffect()、副作用のスキップについてまでを紹介しています。
是非見てね！
ロックシステム技術ブログ：【React Native】フック useEffect()の使い方
【Vue.js】基礎知識とvue-cliを使用した開発環境の構築（Windows）
はじめに
Vue.jsとは？
Vue.js（ヴュージェイエス）はWebアプリケーションにおけるUIを構築するための オープソンソースのJavaScriptフレームワークです。
GoogleでAngularJSを使用した開発に携わったEvan Youによって開発され、2014年2月にリリースされました。
Vue.js公式サイト
https://jp.vuejs.org/index.html
Vue.jsが使われているサービス一例
・LINE
・Retty
・note
Vue.jsの特徴
・HTML/CSSや、JavaScriptの知識がある場合の学習コストが低い
・シンプルで拡張性が高い
・コンポーネント単位で区切ることでの再利用性が高い
開発環境の構築
開発環境
本記事の開発環境
・Windows10
・VS Code 1.47.2
この記事でインストールするもの
・Vue CLI 4.4.1
前提として、Node.jsやNpmについては既にインストールがされているという環境を想定して記事を作成しています。
インストールされているかどうかが分からない方はコマンドプロンプトで以下のコマンドをそれぞれ実行し確認してみてください。
npm -v
node -vインストールされていなかった場合は、以下の記事を参考にNode.jsとNpmのインストールを実施してください。
【React Native】基礎知識とExpoを使用した開発環境構築！（【Node.js とNpmのインストール】項）
vue-cliのインストール
以下のコマンドを入力するとインストールが開始されます。
npm install -g @vue/cli
インストールが完了したら、念のため以下コマンドでインストールの確認を行います。
vue --version これでインストールは完了です。
以下のブログでは本内容に加えて、vue-cliをインストール後、アプリ実行～HelloWorld表示までを紹介しています。
是非見てね！
ロックシステム技術ブログ：【Vue.js】基礎知識とvue-cliを使用した開発環境の構築（Windows）
【React Native】ライフサイクルメソッドの使い方
この記事の内容
ライフサイクルとは？
React NativeとReactJSでコンポーネントの作成、更新、削除は自動で行われます。これを「ライフサイクル」と呼び、またコンポーネントの作成は「マウント」コンポーネントの削除は「マウント解除」と呼びます。
ライフサイクルの中で実行される関数については、ライフサイクルメソッドと呼びます。通常、関数コンポーネントでライフサイクルメソッドを使う場合はuseEffect()というメソッドを使いますが、今回はクラスコンポーネントのライフサイクルメソッドについて紹介します。
ライフサイクルメソッドのイメージは下記リンクの図に参考してください。
一般的な5つのライフサイクルメソッドを勉強しながらアプリを作りましょう！今回は、色が定期的に変わっていて、スピードが変更できるアプリを作ります。初めてReact Nativeを使う方は下記記事に参考してください。
ライフサイクルメソッド
render()
表示されるReact要素をリターンします。なにも表示しない時にはnullをリターンします。コンポーネントがマウントされる前の時とpropsかstateが変わった時にも実行されます。 ※render()は必須です。他のメソッドについては、任意です。
constructor()
一般的にコンポーネントのconstructor()は２つの用途しかありません。これ以外の使い方がある時は、用途を確認してください。
- stateの初期化
- イベントハンドラをバインドする
constructor()はコンポーネントの一番最初に実行されるコードです。render()の前に実行されます。constructor()はstateを使っても任意な関数です。stateの他の初期化できる方法はこちらに参考してください。
下記コードはconstructor()とrender()を使っているアプリです。入力ボックスに数字を入れて「更新」を押すと表示されているBPMが変わります。
下記コードはイベントハンドラをバインドしているコードです。
this.onPress = this.onPress.bind(this);this.onPressのthisはAppコンポーネントになります。バインドしなかったらthis.onPressの中でthisが使えません。
次は他のライフサイクルメソッドを追加して色が変わるように作りましょう。
componentDidMount()
componentDidMount()はコンポーネントがマウントされた後ですぐに実行される関数です。この関数はライフサイクルの中で一度だけ実行されます。上記の３つの関数が全てあれば実行の順番は下記になります。
- constructor()
- render()
- componentDidMount()
プログラムの最初に必要な処理がある時にcomponentDidMount()を使うことが多いです。HTTPリクエストの送信やsetInterval()の実行などの処理はcomponentDidMount()で扱います。
今回のアプリにcomponentDidMount()を追加しましょう。setInterval()を使ったら、一秒に一回stateを更新することができます。下記の関数でcolor1はtrueだったらfalseになって、falseの場合はtrueになります。
function nextState (previousState) {
return {color1: !previousState.color1}
}このように一秒に一回色が変わります。
componentDidUpdate()
コンポーネントのpropsかstateが変わる時にcomponentDidUpdate()が実行されます。実行タイミングは、毎回更新時のrender()実行後になります。componentDidUpdate()は更新前のprops (prevProps)と更新前のstate (prevState)の引数があります。一般的な使い方はHTTPリクエストの送信などのpropsかstate変更時の為に使用されます。 今回は色が変わるスピードを変更するためにcomponentDidUpdate()でclearInterval()とsetInterval()を使います。こうしたら色が変わるスピードが変更できるアプリが完成しました！
componentDidUpdate()は関係ないstateが変わっても動作するので気を付けてください。if文を使い制御する事が多いです。今回のif文でbpmが変わる時だけにスピードを変更しています。
if (prevState.bpm !== this.state.bpm)componentWillUnmount()
コンポーネントのマウント解除の時にcomponentWillUnmount()が実行されます。この関数で必要な解除します。今回はAppコンポーネントがマウント解除の時はないですが、完成するためにcomponentWillUnmount()でclearInterval()を使いましょう。
結論
React NativeでHTTPリクエストやsetInterval()を使いたい時にライフサイクルメソッドで必要な処理が管理できます。クラスコンポーネントでアプリ開発をしたらcomponentDidMount()などが必要になると思います。関数コンポーネントの場合はコードがかなり違うので次回は説明します！
参考
【React Native】Elementsを使ってみよう！
この記事の内容
React Native Elementsとは？
React Native ElementsはオープンソースのReact NativeのためのUIライブラリです。
近年人気が高まってきており、簡単にスタイルを作ることが出来るライブラリの一つです。
React Native Elementsはモバイルアプリ開発だけではなく、webアプリ開発でも使えます。
下記グラフはnpmでのReact Native Elementsをダウンロード数です。ユーザはまだ増えています（現象傾向にある箇所は年末休みの時期でした）。
※ソース： https://npmcharts.com/compare/react-native-elements?interval=7
React Native ElementsのComponentを使ってみよう！
環境構築
React Native Elementsは下記コマンドでインストールできます。
npmを使う場合： npm install react-native-elements yarnを使う場合： yarn add react-native-elements
React Nativeの環境構築についてはこちらの記事を参考にしてください。Snackで使ってみましたが、アイコンがレンダーされていなかったです。そのため、expo cliなどのローカル環境はオススメです。
webアプリケーション開発で使いたい場合は他の設定が必要ですが、今回はモバイルを作成します。ウェブの設定はドキュメンテーションに記載があるので参考にしてください。
実際に使ってみよう！
React Native Elementsは色々なComponentがあります。この記事ではHeaderとButtonを紹介します。ドキュメンテーションはこちらから確認できます。
Headerはアプリのバンナーとして一番上に表示するためのComponentです。ハンバーガーボタンなどのナビゲーションを入れるのが一般的な使い方です。
Buttonはボタンを表示するComponentですが、普通のReact NativeのButtonよりpropsが多いです。
下記コードと画像はHeaderとButtonを2つ表示したものです。
import React from 'react'; import { Header, Button } from 'react-native-elements'; export default function App() { return ( <> <Header leftComponent={{ icon: 'menu', color: '#fff' }} centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} rightComponent={{ icon: 'home', color: '#fff' }} /> <Button title="Button1" /> <Button title="Button2" /> </> ); };
ヘッダーについて
HeaderのleftComponent、centerComponent、rightComponentは左、中央、右の部分のことです。それぞれtextかiconかReact 要素/Componentです。具体的には下記の形です。
※ソース： ドキュメンテーション
ThemeProvider
色変更
React Native ElementsのComponentは全て同じテーマを使っています。
このテーマはデフォルトの値がありますが、ThemeProviderというComponentでデフォルトを上書きすることができます。
例えば、下記のコードのようにcolorsのprimaryを指定したらHeaderとButtonの色を変えることができます。
import React from 'react'; import { ThemeProvider, Header, Button } from 'react-native-elements'; const theme = { colors: { primary: '#9fc0d1', }, }; export default function App() { return ( <ThemeProvider theme={theme}> <Header leftComponent={{ icon: 'menu', color: '#fff' }} centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} rightComponent={{ icon: 'home', color: '#fff' }} /> <Button title="Button1" /> <Button title="Button2" /> </ThemeProvider> ); };
ボタン変更
テーマの色だけではなく、他も変えてみます。まずはテーマにボタンのpropsを追加しましょう。
const theme = { Button: { containerStyle: { margin: 10, }, raised: true, }, colors: { primary: '#9fc0d1', }, };
themeオブジェクトのButtonのプロパティはButtonのComponentのpropsになります。この例の場合は下記と同じです。
<Button title="Button1" containerStyle={{ margin: 10 }} raised />
React Nativeは同じprop値を繰り返して使いたい時は、多くはカスタムComponentを作りますが、React Native Elementsはthemeオブジェクトを作るだけで実現出来ます。
raisedのpropsはボタンが浮き出たようになります。下の画像のようになります。
containerStyle
全てのReact Native ElementsのComponentはコンテナがあります。このコンテナはReact Nativeの<View>です。この<View>のスタイルをカスタマイズしたい時には上の例のようにcontainerStyleを代入します。
印象と結論
UIとデザインを作る時、ゼロから作るはかなり時間がかかるのでライブラリを使うことが多いです。React Native ElementsのThemeProviderは使いやすいので、今後大きなプロジェクトでも使ってみたいと思います。他のライブラリもあるので興味があれば見てください。
参考
(記事) 10 Awesome React Native UI Component Libraries You Should Know
(記事) 15 React Native Component Libraries You Should Know in 2020
【React Native】関数Componentを作ろう！
はじめに
React NativeのComponentには２つの種類があります。
過去の記事でも触れたclass（クラス）とfunction（関数）です。
過去の記事でクラスのComponentを紹介しましたので、今回は関数のComponentについて説明していきます。
React Nativeのコードを書いたことが無い方はまず、クラスのComponentについて書いたこの記事を参考にしてみてください。
関数のComponentの書き方
Componentについて
関数でComponentを作った場合、以下のようになります。
例として、以下のような関数を用いたHello Worldのシンプルなアプリがあるとします。
Componentの詳細については「Componentとは？」を参考してください。
Propsを使う場合
Propsを使う場合、Component関数の引数はpropsのオブジェクトです。その引数のプロパティが使えます。
Propsの詳細については「Propsとは？」を参考してください。
Stateの使い方
ComponentとPropsはクラスと関数で書き方が似ていますが、Stateは異なります。Stateの定義はこのような書き方です。
const [value, setValue] = React.useState(initialValue);
valueはStateの値です。setValueはその値をセットするための関数です。initialValueは初期値です。valueを直接取得しますが、更新する時にsetValueを使います。
setValue(newValue);
下記コードはStateを使って<TextInput>に入力することを表示するアプリです。
Stateの詳細については「Stateとは？」を参考してください。
クラスと関数の書き方比較
図
| クラス | 関数 | |
| 定義 | class XXX extends Component{} | function XXX (props) {} |
| 中身 | render() { return XXX; } |
return XXX; |
| Props | this.props.XXX | props.XXX |
| Stateの定義 | state = {XXX: YYY} | const [XXX, setXXX] = React.useState(YYY); |
| Stateの更新 | this.setState({ XXX: YYY }); | setXXX( YYY ); |
クラスと関数の違い
クラスと関数の違いはなんでしょうか？
上記は書き方の違いですが、他に違いがあるでしょうか？
以前はクラスでは出来て、関数では出来ない機能があることでした。
現在は関数に機能が追加されたため、その答えは古くなりました。速さもあまり変わりません(速さの結果は不明です)。微妙な違いについてはこちらの記事を参考にしてください。
結論
Reactについて調べた時、クラスと関数両方のコンポーネントの情報がヒットします。そのため、両方勉強しておくことで調べた情報をより理解しやすくなります。
どちらも使えますが、最近は関数コンポーネントの方がより主流になっています。
参考
【React Native】Stateとは？
この記事の内容
Stateとは？
Stateはコンピューターサイエンスでよく使われている単語で「状態」の意味です。イベントが覚えているシステムでその覚えていることがState（状態）です。Stateはシステムのメモリみたいなコンセプトです。
React Nativeのコンポーネントは２種類のデータがあります。propsとStateです。propsは一回代入した後で変更できませんが、Stateを使ったら表示していることが変更できます。React Nativeの基礎の中でStateは一番難しいですが、Stateで動的なアプリが色々作れます。
propsについては下記の記事を参考にしてください。
Stateの使い方
1．Stateの初期化
export default class App extends Component { state = {data: ""}; }
classの中でStateを代入します。上記の場合はStateのdataは空白文字列に初期化します。下記のようにStateのプロパティは何個でも使えます。
state = { superpower: "", mood: "" }
2. Stateを読む
同じクラスであればthis.stateでStateの値が読めます。
上記の例はこのコードで値が使えます
this.state.superpower this.state.mood
3. Stateをセットする
Stateの値を更新する時にはthis.setStateを使います。
state.superpowerを更新する（他のプロパティはそのまま変わりません）
this.setState({superpower: "飛行"});
this.setStateを呼び出したら、renderは再実行されます。
もしthis.setStateではなく、this.state を直接更新したら（this.state に代入したら）renderが実行されないので、初期化の時以外はthis.stateに代入しないように気を付けてください。
複数の場合
this.setState({ superpower: "飛行", mood: "わくわく" });
次のStateが前のStateと関係ある場合
Stateは前値を使って新値を決める時があります。例えば、Stateの値が数字であれば次の値は前の数字から計算することが多いです。この場合は２つの方法があります。下記のAとBのコードを見ましょう。
A. ×
this.setState(this.state.count+1)
B. 〇
this.setState((state, props) => { let nextCount = state.count + 1; return {count : nextCount}; });
Aは普通のthis.setStateの使い方ですが、問題があります。this.setStateは非同期な関数なので、同じタイミングでthis.setStateを複数呼び出した時this.stateを確認したら新しい値がまだ代入されてない可能性があります。Bの場合はStateが正しい値です。
Bのthis.setStateの引数は関数です。関数は第一引数が現在のState、第二引数がpropsで戻り値は次のStateです。
使用例
例１：入力されたテキストを表示する
最初はTextでTextInputのテキストを表示するシステムを作りましょう。
1.Stateの初期化
Stateのプロパティの名前はtextValueで使いましょう。
export default class App extends Component { state = {textValue: ""}; }
2.Stateを読む
表示したいテキストはTextInputが入力されたテキストなので、Stateの値を表示しましょう。
<Text>{this.state.textValue}</Text>
3.Stateをセットする
TextInputのテキストが変わる時にTextを変更したいですが、TextInputはonChangeTextというpropがあります。onChangeTextの値はテキストが変わる時に実行される関数です。関数の引数は変更された後の文字列です。
<TextInput style={styles.input} onChangeText={newValue => this.setState({textValue: newValue})} />
4.サンプルコード
この例のまとめは下記です。
例２：カウントダウン
テキストは一秒に表示している数字を減少するアプリを作ります。100から0までカウントダウンします。
1.Stateの初期化
countは100から始まります。
state = {count: 100}
2.Stateを読む
countの値は<Text>で表示します。
<Text style={styles.text}>{this.state.count}</Text>
3.Stateをセットする
1秒に1ずつ減少したいのでsetInterval()を使います。React NativeでsetIntervalを使う場合はcomponentDidMount()で実行します。componentDidMountはrenderが終わった後で実行される関数です。
componentDidMount(){ setInterval(() => ( this.setState(calculateCount) ), 1000); }
上記の setInterval関数の中で使用するcalculateCountという関数を作ります。下記の関数は前のStateのcountを減少し次のStateをリターン。値は0だったら{count: 0}をリターンします。
function calculateCount(previousState) { let previousCount = previousState.count; let newCount; if(previousCount != 0) { newCount = previousState.count - 1; } else { newCount = 0; } return {count: newCount} }
4.サンプルコード
この例のまとめは下記です。
結論
React Nativeが理解するための大切なポイントはStateだと思います。難しいと思いますが、Stateが分かったら色々な作りたいものを作れると思います。StateのドキュメンテーションはReactJSのドキュメンテーションですが日本語もあるので確認しやすいです。
https://ja.reactjs.org/docs/state-and-lifecycle.html
例をもっと見たかったらじゃんけんゲームの作り方とFormikのパッケージについても見てください。
参考
- 状態
- Stateの初期化
- componentDidMountについて
- renderの再実行
- Stateとlifecycleのドキュメンテーション（日本語）
- React Nativeのドキュメンテーション
【React Native】Propsとは？
この記事の内容
はじめに
今回はPropsについて説明していきます。Propsは簡単にいうとComponentをカスタマイズするための機能のことです。
Componentについては前回の記事をご覧ください。
React NativeのComponentでPropsを使う
React NativeのComponentはドキュメンテーションからPropsのリストが見ることが出来き、とても便利です。今回はImageのComponentを使用し、Propsはsourceとstyleを使います。
React Native ドキュメンテーション：Image-props
参考コード
下記のコードは画像を2枚表示しています。このようにPropsの値によって表示されるものを変えることが出来ます。React Nativeのドキュメンテーションを参考にして少し修正しました。
Source
sourceの使い方の一つはオブジェクトのuriプロパティを代入することです。つまり、sourceの値は下記のようなJavaScriptオブジェクトです。
source = {{ uri: 'https://…' }}
Style
styleはほとんどのReact NativeのComponentで使えるPropsです。Imageの場合はwidthとheightを代入したらImageの大きさを決めることが出来ます。
style = {{ width: 193, height: 110 }}
カスタムComponentでPropsを使う
React NativeのComponent(Imageなど)と同じようにカスタムComponentもPropsが使えます。
Propsの使い方
Componentを定義する際に、this.propsでPropsの値を使うことができます。
this.props.props名
例えば、下記のComponentはCのクラスのrender()からthis.propsが使えます。
import React, { Component } from 'react';export default class testAAA extends Component { render() { return ( //カスタムComponent「C」を使用、代入しているProps「a="y" b="z"」 <C a="y" b="z"></C> ); } }
//カスタムComponent「C」を定義 class C extends Component { render() { console.log(this.props); return null; } }
//console.logの値： {a: "y", b: "z"}
Hello, 〇〇〇!が表示できるComponentクラスを作る
参考コード
下記のコードのようにHelloのクラスを3回使ってnameが毎回違うようにできます。
名前を可変にできるComponentクラスを作成
人の名前は色々あるので、名前を可変にできるComponentクラスを作ります。人の名前はカスタマイズしたい値なのでPropsの値を使います。Props名はnameにしています。
class Hello extends Component { render() { return ( //this.propsからPropsの値が使える <Text>Hello, {this.props.name}!</Text> ); } }
Propsを代入する
Propsが使うクラスを作ったので、nameのPropsを代入しましょう。HelloのComponentクラスでthis.props.nameを使っているのでその値を代入する下記のコードを記述します。<Hello name="Bob"></Hello>
補足：StyleSheetを使用しない記述方法
React Nativeの例コードを見たらStyleSheetが使われていることが多いですが、StyleSheetを使用しなくても実装できます。
さて、どちらの方がいいでしょうか。
StyleSheetを使用した場合
StyleSheetを使用しない場合
上記２つの結果を見ると、表示される画像の大きさは同じでした。
StyleSheet.createの値を確認したところ、下記のようなオブジェクトで、98と99はスタイルのIDになっていました。
//StyleSheet.createの値
{
pic1: 98
pic2: 99
}
２つの方法を調べてみましたが、今はStyleSheetを使っても使わなくても結果は同じです。（2020.01 現在）しかし、将来的にStyleSheetは処理スピードが速くなると予想されているので、StyleSheetを使うことをお勧めします。
結論
PropsはComponentをカスタマイズするための機能です。Componentはいつも同じでしたらあまり便利ではないので、必要に応じてPropsの値を代入してカスタマイズ出来ます。
次回
ComponentやPropsはカスタマイズできますが、表示している間に変更する場合はstateということが必要です。次回はstateについて説明します。
