3章 はじめてのReact Native アプリケーション作成 #2
前回の続き...
iOSの依存関係
iOSのアプリを開発・リリースするために、iOSのデベロッパーアカウントを獲得する必要があります。アカウント作成は無料で、開発にはそれで十分です。アプリをiOSのAppストアに公開する際に、ライセンスが必要になります。ライセンス料は年に99ドルほどかかります。
もしXcode IDE、iOS simulators、iOS SDKを含めたXcodeのインストールが終わってないのであれば、ダウンロード・インストールをしてください。XcodeのウェブサイトまたはAppストアからダウンロードできます。
Xcodeのインストール後、ライセンスを取得すれば全てOKです。
新しいアプリ作成
react-native init FirstProject
結果的に下記の構造のディレクトリが作成されます。
ios/ と android/ のディレクトリには、それぞれのプラットフォームに関連したボイルプレートが含んでいます。React コードは、index.ios.js、index.android.js に配置されています。これらは、それぞれReact Applicationのエントリーポイントになります。通常、npm経由でインストールされたnodeモジュールは、node_modules/ フォルダに配置されます。
iOSのReact Nativeアプリを動かしてみよう
はじめに、React NativeのiOSバージョンを動かしてみましょう。シミュレータまたは実機のどちらでも動かすことができます。
ios/ ディレクトリに配置されている FirstProject.xcodeproj ファイルをXcodeでオープンしてください。左上にあるRunボタンを押すことで、アプリのbuildとrunを始まります。ここで様々なiOSシミュレータを切り替えることができます。
Runボタンを押すと、React packagerが自動的に新しいターミナルで開かれるはずです。もしエラーが出た場合は、npm installとnpm startコマンドをFirstProject/ ディレクトリ以下で試してみましょう。
下記のスクリーンショットのようになるべきです。
packagerが準備されると、デフォルトのアプリがiOSシミュレータと共に起動します。下記のようになるでしょう。
アプリに変更を反映するために、packagerが常に起動している必要があります。もしpackagerがクラッシュした場合は、packagerをリスタートする必要があります。
3章 はじめてのReact Native アプリケーション作成 #1
この章では、React Nativeの開発環境のセットアップの仕方を紹介します。それから、簡単なアプリケーション作成の基礎を見ていきます。そして、それを実際のiOS、Androidの実機にデプロイできるでしょう。
開発環境のセットアップ
開発環境をセットアップすることで、本誌の例に従うことが可能です。そして、自身のアプリケーションを作成することも可能になります。
React Nativeのインストール方法はオフィシャルページにも記載されています。オフィシャルサイトは、最も最新のリファレンスです。しかし本誌でも同様にインストール方法を記載していきます。
React Nativeの依存モジュールをインストールするために、OS Xの一般的なパッケージマネージャーであるHomebrewを利用する必要があります。本誌は、OS Xでの開発を前提としています。OS Xは、iOSとAndroidの両方の開発をすることができます。
Homebrewをインストールしたならば、下記コマンドラインを実行します。
Reatc Nativeパッケージはnodeとwatchmanの両方を使います。将来的に、パッケージがトラブルを引き起こすのであれば、これらの依存関係をアップデートする必要があります。flowはFacebookのタイプチェッキングライブラリーで、React Nativeにも利用できます。（もしReact Nativeのプロジェクトでタイプチェッキングをしたいなら、flowを利用できます。）
もしエラーが発生したら、brewのアップデートといくつかのパッケージのアップグレードが必要かもしれません。（これらのコマンドは、少々時間がかかります）
React Nativeのインストール
npm install -g react-native-cli
続いて、プラットフォーム特有のセットアップの必要があります。モバイルプラットフォームの開発環境のために、プラットフォームの開発依存関係をインストールする必要があります。iOSとAndroidのどちらかを選ぶこともできますし、両方を利用することもできます。
Learning React Nativeの翻訳
1章 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アプリケーションの作成に取り組みます。
WEBデザイン/配色/グラフィック
普段エンジニアとして働いている自分にとって、
Webサービスを作成していて、一番迷う、困る、時間を使うパートはこれ。
デザイン・配色・グラフィック
そんな時に役立ったサイト/記事を紹介しようと思う。
1. Webデザイナー向け配色ガイド！
キャッチーなタイトルと共に、その配色を利用したサービス、そしてカラーコードまで載せてくれている。ただ見ているだけでワクワクするし、自分が作ろうとしているサイトイメージと比較しながら見ると、発想力が豊かになってきたかのように錯覚する。この記事は、かなりオススメである。
2. 注目Webデザイントレンド
今のデザイントレンドが知りたい、トレンドに付いていきたい、今時のサイトを作りたいと思っているあなた。Please check it!!!
Web業界で有名なデザイナー長谷川恭久さんによるPodcast。
筆者自身は、宮川達彦さんのrebuild.fmのファンであるが、
こちらも是非押さえておきたい一つである。
