1章 React Nativeとは？

React Native 翻訳
1章 React Nativeとは？
React Nativeは、iOS、AndroidのNativeモバイルアプリケーションを作成するためのJavaScriptフレームワークです。React Nativeは、FacebookのJavaScriptライブラリのReactを基にしていますが、ターゲットがブラウザではなく、モバイルプラットフォームです。言い換えるのであれば、ウェブ開発者が既に慣れ親しんだJavaScriptライブラリからNativeモバイルアプリケーションを作成できるのです。そして、多くのソースコードをプラットフォーム間で共有できるので、React Nativeを利用すると、iOS、Android両方のモバイルアプリケーションを簡単に作成できるのです。
 
ウェブでのReactと同様に、React Nativeアプリケーションは、JSXとして知られる、JavaScriptとXML風のマークアップを利用して作成されます。そして、React Native "bridge"が、Object-C (for iOS)またはJava (for Android)のNativeレンダリングAPIを提供します。従って、作成したアプリケーションは、webviewではなく、本当のモバイルUI compontsを利用してレンダリングされます。React Nativeは、またプラットフォームAPIのためのJavaScriptインターフェイスも提供するので、phoneカメラや位置情報等のプラットフォームの機能も利用できます。
 
現在、React NativeはiOSとAndroidの両方をサポートしていますが、他のプラットフォームをサポートしていく可能性もあります。本誌でもiOSとAndroidの両方を対象とします。作成されたソースコードのほとんどがクロスプラットフォームで利用されます。製品レベルのモバイルアプリケーションをReact Nativeを利用して作成できます。例を上げれば、Facebook、Palantir、TaskRabbitのモバイルアプリケーションは既にReact Nativeを利用しています。
 
React Nativeの強み
 
React Nativeがホストプラットフォームの標準APIを利用してレンダリングする事が、既存のクロスプラットフォーム開発のための方法(Cordova、Ionic)とは卓越したものにしています。JavaScript、HTML、CSSを利用してモバイルアプリケーションを開発する既存の方法は、典型的にwebviewとしてレンダリングしています。この方法では、特にパフォーマンス周りで欠点が伴います。加えて、これらはホストプラットフォームが提供するNative UI elementsを利用することができません。これらが、native UI elementsを真似ようとしますが、それは妥当ではありません。リバース・エンジニアリング、特にアニメーション周りは多くの努力を要しますし、すぐに時代遅れになってしまいます。
 
その一方で、React Nativeはnative UI elementsに変換しています。加えて、Reactはmain UI threadとは分かれて動作しますので、性能を悪化させることなく高いパフォーマンスでアプリケーションを維持できます。React Nativeの更新サイクルは、Reactと同様です。つまり、props または state が変更された時に、ビューを再レンダリングします。React NativeとブラウザでのReactの大きな違いは、HTMLとCSSを利用するのではなく、ホストプラットフォームのUIライブラリを利用することです。
 
Reactでのウェブ開発に慣れ親しんでいる開発者は、慣れ親しんだツールを利用して、nativeアプリケーションの見た目や高パフォーマンスのモバイルアプリケーションを作成できるのです。また、React Nativeは今までのモバイル開発を超越する2点があります。開発者の経験とクロスプラットフォーム開発の可能性です。
 
開発者の経験
 
 
もし以前にモバイル開発を経験したことがあるのなら、React Nativeの使いやすさに驚くことでしょう。React Nativeチームは、エラーメッセージ周りの強力な開発者ツールをもっています。このツールを利用することは、開発経験のパートの一つになるでしょう。
 
たとえば、React Nativeは"just"JavaScriptであるため、変更を反映するためにrebuildする必要がないのです。代わりに、アプリケーションをリフレッシュするには、他のウェブページと同様にCommand+Rを叩くだけで良いのです。アプリケーションをbuildするために待っている時間は無駄です。React Nativeの素早いサイクルは本当に素晴らしいです。
 
加えて、React Nativeは有能なデバックツールやエラーレポートを利用させてくれます。もし、ChromeやSafariの開発者ツールを好んでいるならば、モバイル開発のためにそれらを利用できるのです。同様に、JavaScriptの編集のために、好きなエディタも利用できます。React Nativeは、iOSの開発のためにXcodeを使うことを強制しません。Android開発のためのAndroid Studioに関しても同様です。
 
 
加えて、開発経験の毎日の改善自体が、React Nativeを利用した製品リリースサイクルにもポジティブな影響を与えます。
 
これらの機能で確保できた時間やエネルギーを興味の分野やプロダクティブな分野に利用できるのです。
 
コードの再利用と知識共有
 
 
React Nativeを利用することで、モバイルアプリケーションをbuilidするために要求されるリソースが劇的に削減できます。React コードの書き方を知っている開発者は誰でも、今のスキルセットのままで、ウェブ、iOS、Androidをターゲットにできます。React Nativeは、チームのイテレーションを効率的にして、さらに知識やリソースを効率的に共有させてくれます。
 
加えて、コード自身も共有され得るのです。全てのコードがクロスプラットフォームになるのではなく、また必要としている機能によっては、Object-CやJavaを利用しなければなりません。（幸いにも、これは悪いことではなく、native modulesと呼ばれるものの使い方も7章で触れます） しかし、React Nativeでクロスプラットフォームでコードを再利用することは驚くほど簡単です。例えば、React Eurpo 2015のkeynoteによると、Facebook Ads Managerアプリケーションは、iOSバージョンのコードの87%をAndroidバージョンで共有しています。本誌の最終アプリケーションである、フラッシュカードアプリケーションでは、iOSとAndroidで全てコードの再利用をします。これは本当に素晴らしい！
 
リスクと欠点
 
React Nativeを利用することは、欠点なしではありません。そして、React Nativeがチームに合うかどうかはあなたの状況次第です。
 
最も大きなリスクは、プロジェクトが比較的若いことによるReact Nativeの成熟度です。iOSのサポートは、2015年3月で、Androidのサポートは2015年9月です。ドキュメンテーションの改善の余地があります。そして、進化し続けます。いくつかのiOSとAndroidの機能が以前サポートされてません。そして、コミュニティはベストプラクティスを探っている最中です。良いニュースとしては、あなた自身で足りていないAPIをサポートすることも可能です。それに関しては、7章でカバーします。
 
React Nativeはプロジェクトに異なるレイヤー提供しているため、デバックが大変になる可能性があります。特にReactとホストプラットフォームの交差する箇所です。8章で、React Nativeのデバックに関して深くカバーします。そして、多くの問題に対して取り組みます。
 
React Nativeは若い、そして新たなテクノロジーを利用することはリスクです。ただ、リスクに勝る利益を本誌で紹介できるでしょう。
 
要約
 
React Nativeはエキサイティングなフレームワークであり、ウェブ開発者に、JavaScriptの知識を利用して、ロバストなモバイルアプリケーションを作成することを可能にします。そして、素早いモバイル開発・ウェブ、iOS、Androidをクロスした効率的なコードの再利用、また、エンドユーザのアプリケーションの質や経験を阻害することもありません。トレードオフは、React Native自身が新しいこと、進化中であることです。もしチームが新しいテクノロジーに立ち向かえるなら、そして複数のプラットフォームに対してアプローチしていきたいなら、React Nativeを利用してみるべきであろう。
 
次の章では、ブラウザでのReactとReact Nativeの違いと幾つかのキーコンセプトに関して触れます。もし開発自体に触れたいならスキップすることも可能ですので、3章に飛んで下さい。3章では、開発環境のセッティングと最初のReact Nativeアプリケーションの作成に取り組みます。