CA Reward

Tech Blog

Tech Blogトップに戻る

react-naitveでネイティブアプリ制作

2016.12.09

  • このエントリーをはてなブックマークに追加
  • Pocket
菅原雅広
菅原雅広フロントエンドエンジニア

こんにちははじめまして、フロントエンジニアの菅原です。

最近はreact.jsでフロントを実装する機会が増えているのですが、そんな中「react-native」というモノが気になり触ってみましたのでご紹介します。
何回かに分けてreact-nativeでのアプリ制作やコンポーネント等について紹介できればと思います。

react nativeとは

react-nativeは、名前の通りFacebookが開発しているreactを利用したフレームワークです。reactの考え方・書き方でネイティブアプリを制作することができます。

公式サイト
https://facebook.github.io/react-native/

ネイティブアプリを制作するには、iOSならSwift、AndroidならJAVAの知識が必要になりますが、react-nativeを使うことで、javascriptの知識で作ることが可能となります。
これにより、フロントエンジニアでもネイティブアプリ制作が可能となり、表現の幅をWeb以外にも広げて行けるのではないでしょうか。

ES2015(ES6)に標準で対応していますので、import文や変数のlet宣言が利用可能です。ES5では必須だった即時関数を利用したスコープの制御を行わずに、スッキリと記述していけます。

なにができるの

ネイティブアプリを作れるとはいえ、基本はreactですので、情報の一覧表示や通信結果の表示が向いているでのはないでしょうか。例えば、近所のケーキ屋を検索一覧表示し、タップすると詳細情報を表示、お気に入りやメモ機能、SNSでの情報共有機能を持つアプリ等が得意なんじゃないかと思います。

逆に向いていないのはリアルタイム性を求められるアプリだと思います。アクションゲームやシューティングゲームはレンダリング速度が重要になるので、相当な工夫が必要そうです。

Hello World

では実際に文字列を表示するだけの簡単なアプリ「HelloWorld」を作ってみます。

開発環境準備

私はMacとiPhoneを利用していますので、それに合わせたツールをインストールします。windowsやAndoroid等他の環境の場合は、こちらを参考にして下さい。

なお、Mac環境では事前にXcodeをインストールしておいて下さい。

必要に応じてnodeはnvmを利用したりすると良いと思います。

プロジェクト作成

コマンドでプロジェクトの雛形を作成します。
ここでは「HelloWorld」プロジェクトを作成します。

生成されたファイル

2016-10-14 12 28 25

アプリ起動

iOSシミュレータが立ち上がり「Welcome to React Native!」画面が表示されれば成功です。
ここから「HelloWorld」と表示するアプリに修正していきます。

ソースを弄る

index.ios.jsを編集することで、表示内容を変更することができます。
以下のようにシンプルな形に修正しました。

編集後、iOSシミュレータでリロード(Command⌘ + R)して変更を確認できます。
「HelloWorld」が左上に表示されます。が、carrierや電波表示と被ってごちゃっとしてしまっています。これは文字列の表示位置を指定していないため、デフォルトの左上に表示されているのが原因です。デザインを整えれば綺麗に見えますが、最低限の表示のみを行う「HelloWorld」の目的は果たせているのでOKとしましょう。

2016-10-14 12 13 19

以上がHelloWorldアプリです。

サンプルアプリ「犬猫ランキング」

ここからはサンプルアプリとして、犬と猫の人気ランキング5位までの名前・写真のリストを表示したいと思います。タップするとwikiへ遷移するようにもしてみます。
先ほど作成した「HelloWorld」を元に修正して作っていきます。

完成イメージはこちらになります。

1)起動すると犬のランキングが表示されている

2016-10-12 18 40 30

2)上部の「猫」をタップすると猫のランキング表示が表示される

2016-10-12 18 40 47

3)猫のランキング表示時に、上部の「犬」をタップすると犬のランキングが表示される

2016-10-12 18 40 30

4)リストをタップすると、Safariが起動してタップした犬・猫のwikiへ遷移する

2016-10-12 18 41 10

※ランキング情報は内部にオブジェクトで定義します。実際のアプリではAPIから取得した情報を表示しますが、本記事の範囲を超えるため内部で定義しています。

画面構成は大きく分けて「ヘッダー」「犬・猫ボタン」「リスト」の3つに分かれます。この3つをコンポーネント化すれば良さそうですが、長くなりますので「リスト」をコンポーネント化して読み込みます。

ヘッダー

ヘッダーは「犬猫ランキング」と大きく表示するだけで、特に何か処理をしているわけではありませんので、シンプルです。
先ほどのHelloWorldの行を削除し、次のように変更します。

デザインはcssに似たオブジェクト形式で記述していきます。
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);の前に次のスタイルを定義します。

犬・猫ボタン

犬・猫ボタンは、タップするとリストの情報を入れ替える役割を持ちます。まずはタップに対応させるためにimport部分にTouchableHighlightを追加します。

これでタップに対応できるようになりましたので、タップされたら情報を入れ替える処理を追加します。
renderメソッドの前に次の様に追加します。

引数のrankingには、リストに表示する情報が入ってきます。受け取ったrankingをsetStateでstateに入れます。
stateが変更されると、その情報を参照している箇所が自動で更新されますので、リストはstateの値を参照するようにします。

ここまで出来たら、あとはボタンを用意するだけです。ヘッダーのすぐ後にボタンを追加します。

「onPress」はonClickに相当し、指定した処理を実行することができます。ここではonPressHandlerを呼び引数にランキング情報を渡しています。

見た目はヘッダー同様スタイルで作っていきます。

リスト

リスト部分はコンポーネント化し、親から受け取ったリスト情報を表示するようにします。
管理しやすくするため別ファイルに定義しimportして利用します。

ファイルはsrc/listComponent.jsを新しく作成し、次の様なファイル構成となります。

2016-10-14 12 29 50

listComponent.jsでは特別な事をしていませんので、1行ずつ細かな解説は行いません。大切なポイントはリストデータはthis.props.rankingに入ってきて、ListViewで1件毎にループ表示している所です。ListViewは手軽に配列をループ処理することができますので、使用頻度が非常に高くなります。

index.ios.jsでこのコンポーネントを読み込みます

ランキング情報を準備します。constructorを追加し、stateに入れます。

犬・猫ボタンの下にListComponentを追加し完成です。

簡単なサンプルですが、これでリストの表示・入れ替え、タップ操作、外部Webへ遷移といった機能を試しました。
このように、react-nativeを使う事で、SwiftやJAVAを使わずにネイティブアプリを制作が出来ます。

次回以降では、リスト情報をAPIで受け取り表示するように通信機能を追加したり、公開されているコンポーネントを使って手軽にアプリを組み上げていく方法を模索していきたいと思います。