NativeはReact.jsを使ったネイティブアプリケーション開発を可能にさせるSDKのことで、Facebookが2015年に公開したもの。Nativeについて以下のように説明している。anywhere.“。要するに、プラットフォームごとに新しい言語やフレームワークを覚えるのは嫌だ!!Reactだけ覚えてそれで全てのプラットフォームに対応して行こうぜ!!って考えらしい。Prototypingでとりあえず動くものを作りたい”、って人には向いている気がする。Nativeを使って開発されてたりするので、実用レベルにも耐えうるようだ。今回は、React.jsに少し慣れてきたので同じ記法でネイティブアプリケーションを本当に開発できるのか体験しようと思う。こんな感じのiOSアプリケーションができました今回作成するアプリケーションはこんな感じ。完成系のファイルはここに置いてある。このアプリケーションは2つの機能を持っており、1つはQiitaの特定のタグの最新エントリーを取得して表示させる機能、もう一つはタグを検索してそのタグの最新エントリーを取得して表示させる機能。機能が幾分被っているが、気にしないで欲しい。作成するアプリケーションのComponentとjavascriptファイルの構成は以下の通り(ViewとかTextとか細かい単位は省略)。EntryDetail.jsindex.ios.jsに全てのComponentを記述するのではなく、Componentの役割ごとにファイルを分割しexport.modulesを利用してモジュール化する。require('モジュールまでのパス')で利用するのが味噌。Qiita_Readerプロジェクトを作成したら、Qiita_Reader/Qiita_Reader.xcodeprojをダブルクリックしてXcodeを開く。Rを実行すると以下のメッセージが出てくると同時にiOSシミュレータも起動する。ready.これで準備が整った。TabBarを追加するTabBarで表示させるコンテンツの編集を行うために、index.ios.jsと同じディレクトリにFeaturedTab.jsとSearchTab.jsを追加する。続いて、FeaturedTab.jsを開き以下のようにコードを編集する。FeaturedTab;React.jsの記法を理解してれば慣れ親しんだコードだと思う。NativeではCSSは使わずにStylesSheet.createで定義したスタイルをそれぞれのComponentに適用することで、Viewのレイアウトを決める。書き方自体は従来のCSSと同じであるためすんなりと理解できる。1するとFlexBoxスタイルが有効になる。Reactを参照のこと。Componentをモジュールとして利用可能にしている。FeaturedTab;SearchTab.jsも同様に以下のようにコードを編集する。表示させるテキスト以外はFeaturedTab.jsと同じである。SearchTab;TabBarで表示させるコンテンツの準備が完了したのでTabBar本体の実装をして行く。開き以下のように編集する。Qiita_Reader);TabBarIOSの子ComponentTabBarIOS.Itemを追加してTabBarを追加している。さきほど作成したFeaturedTabとSearchTabComponentはTabBarIOS.Itemの子Componentとした。Reactにある通り。今回iconプロパティのuriで指定してるfeaturedとsearchはデフォルトでiOSアプリ作成用に用意されているものを使っている。uriをhistoryやbookmarksに変えるだけでiconを変更できる。Barsを見て欲しい。ここまでの画面はご覧のとおり。EntryList.jsとSearchEntry.jsをQiita_Readerプロジェクトに追加して、EntryList.jsを以下の用に編集する。BarにTextComponentが被さってしまい文字が隠れてしまうので注意。'center'も追加する。このあたりはFlexBoxの範疇なので理解していない場合は先に修得する必要あり。同様に、SearchEntry.jsも以下のように編集する。SearchEntry;EntryList.jsとSearchEntry.jsの編集が終わったら再度FeaturedTab.jsを開き以下のようにコードを変更する。Barに表示する文字列、componentがどのComponentを利用するかをハンドリングしている。ComponentをNavigatorIOSが表示するComponentとしている。同様に、SearchTab.jsを以下のように編集する。Barの追加が完了した。今までの実装をシミュレーションで表示させるとこのようになる。JSONデータを表示させてみる続いて、EntryList.jsでテストデータを表示してみる。今回作成しているアプリケーションは最終的にQiitaで公開されているAPIを使ってJSONデータを取得し、それらを表示させるものにしたい。従って、テストデータもJSON形式のものをEntryList.jsに追加する。TEST_ENTRY_DATA[0];Componentは画像データを表示するためにImageを追加する。Componentは以下のように編集する。}});最後にスタイルの変更を以下のように行う。ComponentにJSONデータが表示されるようになった。View)を使って表示してみる。再度EntryList.jsを開きListViewとTouchableHighlightComponentを追加する。React;続いて、ListViewで表示させるデータのハンドリングの定義を行う。Reactを参照したが、rowHasChangedとかcloneWithRowsとかのより詳細な処理を確認したい場合はreact-native/ListViewDataSource.jsとreact-native/ListView.jsを読むこと。ComponentのrenderRow`関数の引数に自動的に配列の各要素がindexの若い順番から渡されること。);},のように、cloneWithRowsに['row1','row2']を渡した場合、renderRowで定義しているアローファンクションはrow1を引数として実行され、続いてrow2を引数として実行される。Componentを再度実装し直す。style={styles.separator}/>同層のComponentとすることで境界線をひくViewがEntryを表示するViewの間に配置される。'#F5FCFF'},ここまでで、ListViewの追加が完了した。API経由でデータを取得して表示させるいよいよQiitaのAPIを叩いて直接データを取得する。APIdocumentに従いreactjsのタグが付いたエントリを取得するURLを定義する。"https://qiita.com/api/v2/tags/reactjs/items";APIを叩くための関数を実装する。Componentがレンダリングされた後にfetchDataを読んでListViewにデータを読み込ませる。this.fetchData();}iOSシミュレータをリロードすると直近のreactjsタグが付いたエントリーをListViewで取得できる。最後にインターネット環境によっていはデータの取得に時間がかかり、しばらくListViewに何も表示されないことがある。Indicatorをデータの取得が完了するまで表示させることでデータをロードしている途中で有ることを表現する。EntryList;エントリーの詳細を表示する現状、エントリーのListをタップしてもListがハイライトされるだけで、エントリーの詳細を確認出来ない。そこで、エントリの詳細をWebViewで閲覧できるようにする。Qiita_ReaderプロジェクトにEntryDetail.jsという名前で新しいファイルを作成し、以下の内容で編集を行う。})},これにより取得したエントリで詳細を確認したいものをタップするとWebViewで閲覧が可能になった。エントリーの検索機能を追加するフォームにタグ名を記入して検索すると、そのタグ名を持つエントリをListViewで表示する機能を追加する。SearchEntry.jsを開き必要なComponentを追加する。Component、stylesを以下のように編集してフォーム画面を実装する。}});これだけでそれっぽい画面ができる。続いて、検索機能のロジックを実装する。SearchEntry;検索したEntryをListViewで表示する部分はEntryList.jsを少し変更して使いまわしている。Screen、AppIconに自分で作成した画像を登録する。AppIconの登録はXcodeプロジェクトのImages.xcassetsに入っているAppIconに画像を登録するだけ。Appの3つの画像が登録できる。それぞれのサイズは29pt,40pt,60ptで指定されているが、実際には2x,3xの画像を登録する必要があるみたいなので、僕は58pt,80pt,120ptの画像を用意した。Screenに画像を登録するには、LaunchImageを有効にする。LaunchScreenxibを開きImageViewと任意の画像を追加することでアプリケーション起動時の画像が設定できる。Nativeを使うことで本当に気軽にアプリケーションを作れた。Objective-CやSwiftでの実装と異なりパフォーマンスやアニメーションに難があるという意見をたまに聞くが、一個人としてiosアプリケーションを開発するなら問題ないと思われる。Reactの記法は個人的にはとても好みの記法なのでこれからも時間を見つけて色々作って見たいと思う。Nativeに興味を持つ人が確実に増えるだろうから今後が非常に楽しみなSDKである。