React Nativeしてみた。
自己紹介
ひょんなことからReactNativeでアプリ開発するようになってから、しばらく立つのでここで記事にまとめようと思います。
React Nativeとは
React Nativeとは、かの有名なFaceBookさんが作ったJavaScriptとReactを使用したネイティヴアプリ開発です。
React Nativeで開発されたアプリケーションはiOS、Androidの両方で動作しますが、ハイブリットアプリやHTML5アプリとは大きく違い、Objective-CまたはJavaで構築されたアプリと同様のUIを実現してくれます。
そして、実際に多くのアプリがReact Nativeで作成されており、柔軟かつ高性能な機能を実装しています。
FacebookやAirbnb、 Instagramなど身の回りにあふれたネイティヴアプリがReact Nativeで構築されており、見た目だけでもスゴそうなのがわかります。
ここでAndroid開発しかしたことない私がReact Nativeって良くね?って感じたことを列挙していこうと思います。(プログラムよりの話です)
- JSXで書くコードなので、layout.xmlを書く必要がない。
- ListViewなどAdapterやListenerを書いていましたが、React Nativeでは本質的な処理(タップされて何するの?)だけでいい。
- スタイル調整や文言を変えたい時、いちいち再コンパイルしなくていい。
- 気に入っていたOSSライブラリを使おうと思えば使える点。
JSXなので、layout.xmlやActivityを別々に書く必要がない。
例えば、Androidでこのような簡単なListViewを表示したいとします。
上記の三つのファイルが必要になります。
おまじないのようにfindViewByIdやsetAdapterなど、おなじみのコードを必要があります。
これをReact Nativeではわずか数行書くだけで実現でき、そしてそれはiOSでも同様の動作をします!
(因みにiOSの画面)
<List
dataArray={items}
renderRow={(item) =>
<ListItem>
<Text>{item}</Text>
</ListItem>
}></List>
ListViewなどAdapterやListenerを書いていましたが、React Nativeでは本質的な処理(タップされて何するの?)だけでいい。
つまり、コードで語るなら
<TouchableOpacity
onPress={()=>{
console.log('タップ!');
}/>
と言った具合に簡単です!
スタイル調整や文言を変えたい時、いちいち再コンパイルしなくていい。
これは、Android Studioで開発中に少しレイアウトを変えたりした後にEmulatorに反映させるにはBuild→実行が必要ですが、React Native(mac)ではRボタンを連打(1回では更新されず連打していますw)だけで更新され、また、Enable Live Reloadという機能がサポートされており自動更新も可能です。
気に入っていたOSSライブラリを使おうと思えば使える点。
構築は公式ページを参照してください。
例えば、AndroidでFloatingActionButtonの素晴らしいライブラリをどこかの天才プログラマが作っていたとして、それをReact Nativeで使いたい!と思った場合、React Nativeから呼び出すことができ、細かい処理をReact Nativeで書くことも可能です。
私は書いたことはありませんが、React Nativeの一部のライブラリはネイティブソースをReact Nativeに適用させているものもあります。
まとめ
若干、ネイティブ言語をディスるような内容でしたが、React Nativeを各OSのデザインルールに適用させるのが若干めんどくさいところはあります。
なので、これからどんなUI,UXを考えているかによってはネイティブ言語が最適な場合もあります。
ひとえにワンソースで書けて楽なことだけが全てではありません。
ただ、コンポーネント思考であったり、すごく面白い言語?なので一度触れて見ることはおすすめします。