React NativeでTwitterクライアントを作ってみよう
•Descargar como PPTX, PDF•
5 recomendaciones•6,003 vistas
2016年12月8日に開催した勉強会で使った資料です。 TwitterAPIを使ってTwitterクライアントをReact Nativeで実装することを通して、 コンポーネントの特徴理解やパフォーマンス、ストレージなどについて解説を行います。
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a React NativeでTwitterクライアントを作ってみよう
Similar a React NativeでTwitterクライアントを作ってみよう (20)
Más de dcubeio
Más de 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. ありがとうございました！！