メインコンテンツにスキップ

JavaScript 環境

JavaScript ランタイム​

React Nativeを使用する場合、JavaScriptコードは最大3つの環境で実行されます。

  • ほとんどの場合、React Nativeは、React Native向けに最適化されたオープンソースのJavaScriptエンジンであるHermesを使用します。
  • Hermesが無効になっている場合、React NativeはSafariを動作させるJavaScriptエンジンであるJavaScriptCoreを使用します。 iOSでは、iOSアプリに書き込み可能な実行メモリがないため、JavaScriptCoreはJITを使用しないことに注意してください。
  • Chromeデバッグを使用する場合、すべてのJavaScriptコードはChrome自体内で実行され、WebSocketsを介してネイティブコードと通信します。 ChromeはV8をJavaScriptエンジンとして使用します。

これらの環境は非常に似ていますが、いくつかの不整合が発生する可能性があります。 特定のランタイムに依存しないようにするのが最善です。

JavaScript 構文トランスフォーマー​

構文トランスフォーマーを使用すると、すべてのインタープリターのサポートを待たずに新しいJavaScript構文を使用できるため、コードの記述がより楽しくなります。

React Nativeには、Babel JavaScriptコンパイラが付属しています。 サポートされている変換の詳細については、Babelのドキュメントをご覧ください。

React Nativeで有効になっている変換の完全なリストは、@react-native/babel-presetにあります。

変換コード
ECMAScript 5
予約語
promise.catch(function() {...});
ECMAScript 2015 (ES6)
アロー関数
<C onPress={() => this.setState({pressed: true})} />
ブロックスコープ
let greeting = 'hi';
呼び出しスプレッド
Math.max(...array);
クラス
class C extends React.Component {render() { return <View />; }}
算出プロパティ
const key = 'abc'; const obj = {[key]: 10};
定数
const answer = 42;
分割代入
const {isActive, style} = this.props;
for…of
for (var num of [1, 2, 3]) {...};
関数名
let number = x => x;
リテラル
const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
モジュール
import React, {Component} from 'react';
オブジェクト簡潔メソッド
const obj = {method() { return 10; }};
オブジェクト短縮記法
const name = 'vjeux'; const obj = {name};
パラメータ
function test(x = 'hello', {a, b}, ...args) {}
レストパラメータ
function(type, ...args) {};
短縮プロパティ
const o = {a, b, c};
スティッキー正規表現
const a = /o+/y;
テンプレートリテラル
const who = 'world'; const str = `Hello ${who}`;
Unicode正規表現
const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
ECMAScript 2016 (ES7)
べき乗演算子
let x = 10 ** 2;
ECMAScript 2017 (ES8)
async関数
async function doStuffAsync() {const foo = await doOtherStuffAsync();};
関数末尾カンマ
function f(a, b, c,) {};
ECMAScript 2018 (ES9)
オブジェクトスプレッド
const extended = {...obj, a: 10};
ECMAScript 2019 (ES10)
オプションのcatchバインディング
try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
動的インポート
const package = await import('package'); package.function()
Null合体演算子
const foo = object.foo ?? 'default';
オプショナルチェーン
const name = obj.user?.name;
ECMAScript 2022 (ES13)
クラスフィールド
class Bork {static a = 'foo'; static b; x = 'bar'; y;}
ステージ1提案
Export Default From
export v from 'mod';
その他
Babelテンプレート
template(`const %%importName%% = require(%%source%%);`);
Flow
function foo(x: ?number): string {};
ESMからCJSへ
export default 42;
JSX
<View style={{color: 'red'}} />
Object Assign
Object.assign(a, b);
React表示名
const bar = createReactClass({});
TypeScript
function foo(x: {hello: true, target: 'react native!'}): string {};

ポリフィル​

多くの標準関数は、サポートされているすべてのJavaScriptランタイムでも使用できます。

ブラウザ​

ECMAScript 2015 (ES6)​

ECMAScript 2016 (ES7)​

ECMAScript 2017 (ES8)​

特定​

  • __DEV__