React NativeでTwitterクライアントを作ってみよう
•Download as PPTX, PDF•
5 likes•6,006 views
2016年12月8日に開催した勉強会で使った資料です。 TwitterAPIを使ってTwitterクライアントをReact Nativeで実装することを通して、 コンポーネントの特徴理解やパフォーマンス、ストレージなどについて解説を行います。
More Related Content
What's hot
What's hot (20)
Similar to React NativeでTwitterクライアントを作ってみよう
Similar to React NativeでTwitterクライアントを作ってみよう (20)
More from dcubeio
More from dcubeio (20)
React NativeでTwitterクライアントを作ってみよう
- 2. 自己紹介 • 増田純也（27♂） • 株式会社ビズリーチ 新規事業でエンジニア兼スクラムマスター • 最近は React Native + Firebase で遊んでます • ねこ
- 3. 今日のゴール • React Native で Component が作れる • Twitterクライアントからつぶやけている
- 4. 進め方 • 準備 • React Native? • サンプルプロジェクトを動かしながら解説
- 5. 準備 / Twitter API
- 6. Twitter APIを叩く準備 • Twitter Appを作成しましょう https://apps.twitter.com • Callback URLは 「https://example.com」にしてくださ い。サンプルプロジェクトが依存しているためです。 それ以外の項目は任意の内容でOK • 内容は登録後に編集できるので、あまり深く考えなく てOKです
- 8. Twitter APIを叩く準備 • 登録後「Keys and Access Token」よりキーを入手（あ とで使います） • Consumer Key (API Key) • Consumer Secret (API Secret)
- 9. 準備 / React Native
- 10. サンプルプロジェクトを動かす • 任意のディレクトリで下記を実行 • ターミナルとiOS Simulator が起動すれば成功です $ git clone https://github.com/mamamama-su-da/twitter-sample.git $ cd twitter-sample $ npm install $ react-native run-ios ma は 4回
- 11. サンプルプロジェクトを動かす • src/config/config.json に先ほど作った Twitter App のキ ーを設定 • 下記のコマンドを実行し、 ターミナルとiOS Simulator が起動すれば成功です { "twitterApp": { "consumerKey": "XXXXXXXXXXXXXXXXXXXX", "consumerSecret": "XXXXXXXXXXXXXXXXXXXX" } } $ react-native run-ios
- 12. サンプルプロジェクトについて
- 13. サンプルプロジェクトの使い方 • このサンプルでは、学習用に少しずつ要素を追加したサンプ ルのコンポーネントを用意しています。 React Native を iOS で動かす際のエントリポイントとなる index.ios.js の中で、HelloWorld コンポーネントを読み込んで あるので、順番に次のコンポーネントを読み込むように書き 換えつつ、コードを読みながら動きを確認していくことで少 しずつ React Native の特長をつかんでいきましょう • React Native では Simulator 上で Cmd + R を押すことでリロ ードができます
- 14. index.ios.js で試してもらいたいコンポーネント • 学習用サンプル（src/samples） HelloWorld.js： Style、View、Text Tweet1.js： Props Tweet2.js： State Tweet3.js： ListView Tweet4.js： ScrollView • 実践サンプル（src/containers） AppRoot.js： WebView、TextInputなど ログイン後、Post を試してみてください
- 15. 補足 • 実践サンプルを動かす際、Post するとエラーになって しまう場合があります。 トークンの Access Level が Read only になってしまっ ている可能性があるので、そのような場合には Twitter App の「Keys and Access Token」画面で 「Regenerate My Access Token and Token Secret」 してから再度アプリで認証し直すと直るかもです
- 16. React Native
- 17. React Native？ • JavaScript で iOS や Android 向けのネイティブアプリ を開発するためのFacebook製フレームワーク • React.js / ES2015 を使って実装できる • 実際に Facebook や Instagram に使われている
- 18. 良いところ • Swift や Objective-C、Java を知らなくても JS だけで ネイティブアプリが作れる！ • 画面のロジックを iOS と Android で使いまわせる。レ イアウトも多少は使いまわせる！ • 修正しても再ビルド不要なので開発効率が良い！ Cmd + R でリロード！
- 19. ツライところ • 詰まった時に情報が少ない（あるいは英語） • メジャーバージョンではないため、破壊的アップデー トもまだ頻繁に起きる • JavaScript がシングルスレッドで動作するため、パフ ォーマンスを出しにくい時がある
- 20. Component の基本
- 21. Hello World import 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> ); } }
- 22. Component：画面部品 • extends Component した class を実装することで新た にコンポーネントを定義することができる • 画面の部品であるコンポーネントを組み合わせていく ことでアプリケーションを作っていく • 描画される内容は render 関数に実装する
- 23. Style：表現 • コンポーネントの表示の仕方を指定する、コンポーネ ントの基本的な属性。style を指定したオブジェクトを 渡す • html の style とほぼ同じ内容が書ける • Selector のようなものはないので、要素ごとに一つ一 つ style を指定する必要がある
- 24. Props：属性 • 親から子コンポーネントに渡される属性値をもつオブ ジェクト • 渡された値は this.props.xxxx の形式で取り出せる • static propTypes で渡されるべき値の型を定義できる • 値の管理は親コンポーネントが行うので、値を書き換 えてはいけない
- 25. State：状態 • コンポーネントの状態を管理するためのオブジェクト • constructor にて this.state = { xxx: yyy } で定義する this.state.xxx で取り出すことができる • this.setSate({ xxx: zzz }) で更新する 更新すると render 関数が再実行され、状態が表示に反 映される
- 26. Component いろいろ
- 27. View • 最も基本的なコンポーネント • html でいう div のように、他のコンポーネントを入れ 子にすることで、レイアウトを制御するために使う
- 29. ListView • リスト構造のデータを効率的にレンダリングするため のコンポーネント • DataSource でリストのデータを管理する • renderRow 関数で1行のコンポーネントを指定する
- 30. ScrollView • コンテンツをスクロールできるようにするためのコン ポーネント • 下に引っ張ってリロードする機能も提供されている （ refreshControl ）
- 31. WebView • Webブラウザ機能を提供するためのコンポーネント • 戻る / 進む のような遷移の指定はプログラムからでき るが、UI は自分で実装する必要がある
- 32. TextInput • テキストを入力するコンポーネント • 入力した値は onChangeText で state に同期して使う
- 33. ストレージ
- 34. AsyncStorage • アプリケーションを終了しても消えない保存領域 アプリを削除すると消える • setItem / getItem で出し入れを行う • データの持ち方は key / value のシンプルな構造 • パフォーマンスに難あり。アクセスに1秒くらいかかる 場合も
- 35. パフォーマンス
- 36. AsyncStorage 遅い問題 • 1秒かかったり体感できるレベルで遅い • AsyncStorageは使わない、という選択 Realm 使うのも良いかも https://realm.io/docs/react-native/latest/ • Realm は高速かつ、RDBのような柔軟性もある
- 37. ListView 遅い問題 • 1行ずつパラパラと描画される • 操作がブロックされてしまうため、レンダリングが終 わるまで他のアクションが動作しない • プロパティ調整でかなり速くなる initialListSize / pageSize
- 38. ありがとうございました！！