React Native でTwitter クライアントを作ってみよう株式会社ビズリーチ増田 純也

自己紹介• 増田純也（ 27♂ ）• 株式会社ビズリーチ新規事業でエンジニア兼スクラムマスター• 最近は React Native + Firebase で遊んでます• ねこ

今日のゴール• React Native で Component が作れる• Twitter クライアントからつぶやけている

進め方• 準備• React Native?

• サンプルプロジェクトを動かしながら解説

準備 / Twitter API

Twitter API を叩く準備• Twitter App を作成しましょう

https://apps.twitter.com

• Callback URL は 「 https://example.com 」にしてください。サンプルプロジェクトが依存しているためです。それ以外の項目は任意の内容で OK

• 内容は登録後に編集できるので、あまり深く考えなくて OK です

Twitter API を叩く準備

この項目だけは必ずこの通りに入力（サンプルプロジェクトの仕様）

Twitter API を叩く準備• 登録後「 Keys and Access Token 」よりキーを入手（あとで使います）

• Consumer Key (API Key)

• Consumer Secret (API Secret)

準備 / React Native

サンプルプロジェクトを動かす• 任意のディレクトリで下記を実行

• ターミナルと iOS Simulator が起動すれば成功です

$ git clone https://github.com/mamamama-su-da/twitter-sample.git

$ cd twitter-sample

$ npm install

$ react-native run-iosma は 4 回

サンプルプロジェクトを動かす• src/config/config.json に先ほど作った Twitter App のキーを設定

• 下記のコマンドを実行し、ターミナルと iOS Simulator が起動すれば成功です

{ "twitterApp": { "consumerKey": "XXXXXXXXXXXXXXXXXXXX", "consumerSecret": "XXXXXXXXXXXXXXXXXXXX" }}

$ react-native run-ios

サンプルプロジェクトについて

サンプルプロジェクトの使い方• このサンプルでは、学習用に少しずつ要素を追加したサンプルのコンポーネントを用意しています。

React Native を iOS で動かす際のエントリポイントとなる index.ios.js の中で、 HelloWorld コンポーネントを読み込んであるので、順番に次のコンポーネントを読み込むように書き換えつつ、コードを読みながら動きを確認していくことで少しずつReact Native の特長をつかんでいきましょう

• React Native では Simulator 上で Cmd + R を押すことでリロードができます

index.ios.js で試してもらいたいコンポーネント• 学習用サンプル（ src/samples ）

HelloWorld.js ： Style 、 View 、 TextTweet1.js ： PropsTweet2.js ： StateTweet3.js ： ListViewTweet4.js ： ScrollView

• 実践サンプル（ src/containers ）AppRoot.js ： WebView 、 TextInput など　　　　　　ログイン後、 Post を試してみてください

補足• 実践サンプルを動かす際、 Post するとエラーになってしまう場合があります。トークンの Access Level が Read only になってしまっている可能性があるので、そのような場合には

Twitter App の「 Keys and Access Token 」画面で「 Regenerate My Access Token and Token Secret 」してから再度アプリで認証し直すと直るかもです

React Native

React Native ？• JavaScript で iOS や Android 向けのネイティブアプリを開発するための Facebook 製フレームワーク• React.js / ES2015 を使って実装できる• 実際に Facebook や Instagram に使われている

良いところ• Swift や Objective-C 、 Java を知らなくても JS だけでネイティブアプリが作れる！• 画面のロジックを iOS と Android で使いまわせる。レイアウトも多少は使いまわせる！• 修正しても再ビルド不要なので開発効率が良い！

Cmd + R でリロード！

ツライところ• 詰まった時に情報が少ない（あるいは英語）• メジャーバージョンではないため、破壊的アップデートもまだ頻繁に起きる• JavaScript がシングルスレッドで動作するため、パフォーマンスを出しにくい時がある

Component の基本

Hello Worldimport React, {Component} from 'react';import { View, Text,} from 'react-native';

export default class extends Component { render() { return ( <View style={{ marginTop: 20 }}> <Text>Hello World!!</Text> </View> ); }}

Component ：画面部品• extends Component した class を実装することで新たにコンポーネントを定義することができる• 画面の部品であるコンポーネントを組み合わせていくことでアプリケーションを作っていく• 描画される内容は render 関数に実装する

Style ：表現• コンポーネントの表示の仕方を指定する、コンポーネントの基本的な属性。 style を指定したオブジェクトを渡す• html の style とほぼ同じ内容が書ける• Selector のようなものはないので、要素ごとに一つ一つ style を指定する必要がある

Props ：属性• 親から子コンポーネントに渡される属性値をもつオブジェクト• 渡された値は this.props.xxxx の形式で取り出せる• static propTypes で渡されるべき値の型を定義できる• 値の管理は親コンポーネントが行うので、値を書き換えてはいけない

State ：状態• コンポーネントの状態を管理するためのオブジェクト• constructor にて this.state = { xxx: yyy } で定義する

this.state.xxx で取り出すことができる• this.setSate({ xxx: zzz }) で更新する更新すると render 関数が再実行され、状態が表示に反映される

Component いろいろ

View• 最も基本的なコンポーネント• html でいう div のように、他のコンポーネントを入れ子にすることで、レイアウトを制御するために使う

Text• 文字列を表示するコンポーネント• 文字列をマークアップすると表示できる

ListView• リスト構造のデータを効率的にレンダリングするためのコンポーネント• DataSource でリストのデータを管理する• renderRow 関数で 1 行のコンポーネントを指定する

ScrollView• コンテンツをスクロールできるようにするためのコンポーネント• 下に引っ張ってリロードする機能も提供されている（ refreshControl ）

WebView• Web ブラウザ機能を提供するためのコンポーネント• 戻る / 進む のような遷移の指定はプログラムからできるが、 UI は自分で実装する必要がある

TextInput• テキストを入力するコンポーネント• 入力した値は onChangeText で state に同期して使う

ストレージ

AsyncStorage• アプリケーションを終了しても消えない保存領域アプリを削除すると消える• setItem / getItem で出し入れを行う• データの持ち方は key / value のシンプルな構造• パフォーマンスに難あり。アクセスに 1秒くらいかかる場合も

パフォーマンス

AsyncStorage 遅い問題• 1秒かかったり体感できるレベルで遅い• AsyncStorage は使わない、という選択

Realm 使うのも良いかもhttps://realm.io/docs/react-native/latest/

• Realm は高速かつ、 RDB のような柔軟性もある

ListView 遅い問題• 1 行ずつパラパラと描画される• 操作がブロックされてしまうため、レンダリングが終わるまで他のアクションが動作しない• プロパティ調整でかなり速くなる

initialListSize / pageSize

ありがとうございました！！