JavaScript環境

JavaScriptランタイム

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

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

これらの環境は非常に似ていますが、いくつかの非互換性に遭遇する可能性があります。特定のランタイムの仕様に依存することは避けるのが最善です。

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';
Call spread	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) {}
Restパラメータ	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 function doStuffAsync() {const foo = await doOtherStuffAsync();};
関数の末尾カンマ	function f(a, b, c,) {};
ECMAScript 2018 (ES9)
オブジェクトスプレッド	const extended = {...obj, a: 10};
ECMAScript 2019 (ES10)
Optional Catch Binding	try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
動的インポート	const package = await import('package'); package.function()
Null合体演算子	const foo = object.foo ?? 'default';
Optional Chaining	const name = obj.user?.name;
ECMAScript 2022 (ES13)
クラスフィールド	class Bork {static a = 'foo'; static b; x = 'bar'; y;}
Stage 1 提案
Export Default From	export v from 'mod';
その他
Babel Template	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 Display Name	const bar = createReactClass({});
TypeScript	function foo(x: {hello: true, target: 'react native!'}): string {};

Polyfill

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

ブラウザ

• CommonJS require
• console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}
• XMLHttpRequest, fetch
• {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame

ECMAScript 2015 (ES6)

• Array.from
• Array.prototype.{find, findIndex}
• Object.assign
• String.prototype.{startsWith, endsWith, repeat, includes}

ECMAScript 2016 (ES7)

• Array.prototype.includes

ECMAScript 2017 (ES8)

• Object.{entries, values}

固有のもの

• __DEV__