React Native の使用開始

学習の目的

この単元を完了すると、次のことができるようになります。

• React Native とは何かを理解する。
  
• React Native がどのように一般的なプログラミング言語をサポートするのか理解する。
  
• React Native の Mobile SDK の必要なソフトウェアをインストールする。
  

React Native とは?

Mobile SDK トレイルの他のモジュールを完了している場合、Mobile SDK が多くの開発オプションを実現することをすでに知っているでしょう。ネイティブプログラミング言語を使用してコードを記述し、Android および iOS でネイティブアプリケーションを作成できます。また、Android と iOS の両方で動作する、JavaScript や CSS、HTML、さらに Visualforce で記述したハイブリッドアプリケーションを作成できます。Apache Cordova に基づくハイブリッドアプリケーションは、ネイティブコードへの変換ブリッジを提供する Web ビューコンテナで動作します。このアプローチによりパフォーマンスは少し低下します。また、ネイティブアプリケーションと異なるデザインが表示されることがあります。

React Native を開始します。Facebook は、2013 年にオープンソース開発フレームワークとして React を発表し、続いて 2015 年に React Native を発表しました。現在、React テクノロジーは、ReactJS と React Native の 2 つに分かれています。ReactJS は、Web ベース UI を作成するための JavaScript ライブラリです。React Native は、ReactJS ライブラリを使用して、モバイルアプリケーションのネイティブコンポーネントを構築するフレームワークです。Cordova と同様、クロスプラットフォームの React Native は、Android と iOS をサポートします。

JavaScript、CSS、およびマークアップの特殊フレーバーで React Native コンポーネントを記述していても、基盤となるオブジェクトは、オペレーティングシステムに直接アクセスするネイティブデバイスオブジェクトです。結果として、React Native コンポーネントのパフォーマンスとデザインはネイティブ標準と同等になります。

標準の React Native 言語には、いくつかの便利なアスタリスクが付加されています。

• React の JavaScript は、最近登場した標準言語である ES2015 を実装しています。このため、ハイブリッド開発者にとっては、見慣れないコード構造を React サンプルで目にする可能性があります。ES2015 の詳細は、このリンクは、この単元の最後にある「リソース」セクションを参照してください。
  
• React の CSS は、CSS を模した、実際は JavaScript のコードであり、通常 Web では CSS のように機能します。特徴的な違いは、ハイフンありのすべて小文字の識別子名ではなく、ハイフンなしのキャメルケースの識別子名を使用する点です。CSS について詳しい人も、React のスタイル設定方式の方がよいと感じるでしょう。
  
• React アプリケーションで使用されている XML マークアップは JSX として知られています。JSX は、マークアップの埋め込み JavaScript という従来の方式に代わり、XML マークアップを JavaScript に埋め込めるようにする構文です。そのため、JavaScript ソースとは別にテキストファイルを格納することなく、JavaScript コードに直接マークアップを記述します。たとえば、コンポーネントの render() 関数から JSX マークアップを返せます。
  
• Mobile SDK 9.0 以降では、コードはこれまでと同様に標準の ES2015 JavaScript か、または TypeScript のいずれかで記述できます。コードの記述は、TypeScript を一切使用しなくても、少しだけ使用しても、定義できる限り多く使用しても行えます。TypeScript は、独自のコンパイラーを使用して、コード記述時に静的な型チェックを行います。コンパイラーが検出したエラーは参考情報とであり、禁則を示すものではありません。JavaScript コードはこれまでと同じように実行されます。React Native の Mobile SDK ライブラリには TypeScript の型が組み込まれています。
  

React Native の利用が好まれる理由は、変更テストのためにアプリケーションを Xcode または Gradle で再コンパイルする必要がないという点です。実働または仮想デバイスでアプリケーションを実行した後は、コードを編集および保存して、エミュレーターまたはシミュレーターを更新するだけで変更を確認できます。

基盤となる Facebook フレームワークはプレリリースモードのままですが、Mobile SDK は、React Native を完全な SDK メンバーとして処理します。コマンドラインツールで React Native アプリケーションを構築して、認証、SmartStore、Mobile Sync などの Mobile SDK コンポーネントを使用し、本格的な Mobile SDK アプリケーションを作成できます。

Forcereact のインストール

「Set Up Your Mobile SDK Developer Tools (Mobile SDK 開発者ツールの設定)」を完了しましたか? 完了していない場合は受講して、開発者ツールが最新であることを確認してください。React Native のコーディングは JavaScript でできますが、ネイティブプラットフォーム開発者ツールである Android Studio および Xcode をインストールする必要もあります。Mobile SDK 用の React Native アプリケーションを作成するには、forcereact npm ユーティリティを使用します。

接続アプリケーションの作成

このモジュールの前提条件として、接続アプリケーションについての手順が含まれる「Salesforce Mobile SDK の基礎」モジュールを完了する必要があります。接続アプリケーションを作成せずにこの単元の演習を完了することはできません。

Salesforce サービスに接続するには、すべてのモバイルアプリケーションに Salesforce 接続アプリケーションが必要です。接続アプリケーションは、アプリケーションが Salesforce と通信を行い、Salesforce API に安全にアクセスするための認証を行います。

接続アプリケーションを作成して保存すると、詳細が表示されます。

• [コールバック URL] と [コンシューマー鍵] の値をコピーします。これらの値はアプリケーションの認証設定に使用します。
  
• Mobile SDK アプリケーションではコンシューマーの秘密は使用しないため、この値は無視できます。
  

リソース

• 外部リンク: TypeScript: Typed JavaScript at Any Scale (型指定された JavaScript をあらゆるスケールで)
  
• 外部リンク: List of ECMAScript 2015 features (ECMAScript 2015 機能のリスト)
  
• 外部リンク: ECMAScript 2015 Language Specification (ECMAScript 2015 言語仕様)
  
• 外部リンク: Writing Markup with JSX (JSX を使ったマークアップの記述)