1
1
---
2
2
id : javascript-environment
3
- title : JavaScript Environment
3
+ title : JavaScript 実行環境
4
4
---
5
5
6
- ## JavaScript Runtime
6
+ ## JavaScript ランタイム
7
7
8
- When using React Native, you're going to be running your JavaScript code in two environments:
8
+ React Native を使用する場合、 JavaScript を主に2つの環境で使用することになります。
9
9
10
- - In most cases, React Native will use [ JavaScriptCore] ( http://trac.webkit.org/wiki/JavaScriptCore ) , the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
11
- - When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [ V8] ( https://v8.dev/ ) as its JavaScript engine.
10
+ - ほとんどの場合、 React Native は、Safari を動かしている JavaScript エンジンである [ JavaScriptCore] ( http://trac.webkit.org/wiki/JavaScriptCore ) を使用します。iOS アプリには書き込み可能な実行メモリがないため、 iOS では JavaScriptCore は JIT を使用しないことに注意してください。
11
+ - Chrome デバッグを使用している場合、すべての JavaScript コードは Chrome 内で実行され、WebSocket を介してネイティブコードと通信します。 Chrome は JavaScript エンジンとして [ V8] ( https://v8.dev/ ) を使用します。
12
12
13
- While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.
13
+ これらの環境は非常に似ていますが、いくつかの不整合が発生する場合があります。将来的には他の JavaScript エンジンを使用するになるでしょうから、ランタイムの仕様に依存するのは避けた方が良いでしょう。
14
14
15
- ## JavaScript Syntax Transformers
15
+ ## JavaScript シンタックストランスフォーマー
16
16
17
- Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
17
+ シンタックストランスフォーマーはインタプリタのサポートを待たずに新しい JavaScript 構文を使用できるようにしてくれます。
18
18
19
- React Native ships with the [ Babel JavaScript compiler ] ( https://babeljs.io ) . Check [ Babel documentation ] ( https://babeljs.io/docs/plugins/#transform-plugins ) on its supported transformations for more details.
19
+ React Native は [ Babel] ( https://babeljs.io ) を同梱します。Babel についての詳細は、 [ Babel のドキュメンテーション ] ( https://babeljs.io/docs/plugins/#transform-plugins ) を御覧ください。
20
20
21
- A full list of React Native's enabled transformations can be found in [ metro-react-native-babel-preset] ( https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset ) .
21
+ 全てのトランスフォーメーションのリストは [ metro-react-native-babel-preset] ( https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset ) で確認できます。
22
22
23
23
ES5
24
24
25
- - Reserved Words : ` promise.catch(function() { }); `
25
+ - 予約語 : ` promise.catch(function() { }); `
26
26
27
27
ES6
28
28
29
- - [ Arrow functions ] ( http://babeljs.io/docs/learn-es2015/#arrows ) : ` <C onPress={() => this.setState({pressed: true})} /> `
30
- - [ Block scoping ] ( https://babeljs.io/docs/learn-es2015/#let-const ) : ` let greeting = 'hi'; `
31
- - [ Call spread ] ( http://babeljs.io/docs/learn-es2015/#default-rest-spread ) : ` Math.max(...array); `
32
- - [ Classes ] ( http://babeljs.io/docs/learn-es2015/#classes ) : ` class C extends React.Component { render() { return <View />; } } `
33
- - [ Constants ] ( https://babeljs.io/docs/learn-es2015/#let-const ) : ` const answer = 42; `
34
- - [ Destructuring ] ( http://babeljs.io/docs/learn-es2015/#destructuring ) : ` var {isActive, style} = this.props; `
29
+ - [ アロー関数(無名関数・ラムダ式) ] ( http://babeljs.io/docs/learn-es2015/#arrows ) : ` <C onPress={() => this.setState({pressed: true})} /> `
30
+ - [ ブロックスコーピング ( 変数宣言 ` let ` ) ] ( https://babeljs.io/docs/learn-es2015/#let-const ) : ` let greeting = 'hi'; `
31
+ - [ スプレッド構文 ] ( http://babeljs.io/docs/learn-es2015/#default-rest-spread ) : ` Math.max(...array); `
32
+ - [ クラス ] ( http://babeljs.io/docs/learn-es2015/#classes ) : ` class C extends React.Component { render() { return <View />; } } `
33
+ - [ 定数宣言 ] ( https://babeljs.io/docs/learn-es2015/#let-const ) : ` const answer = 42; `
34
+ - [ 分割代入 ] ( http://babeljs.io/docs/learn-es2015/#destructuring ) : ` var {isActive, style} = this.props; `
35
35
- [ for...of] ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of ) : ` for (var num of [1, 2, 3]) {}; `
36
- - [ Modules ] ( http://babeljs.io/docs/learn-es2015/#modules ) : ` import React, { Component } from 'react'; `
37
- - [ Computed Properties ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var key = 'abc'; var obj = {[key]: 10}; `
38
- - [ Object Concise Method ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var obj = { method() { return 10; } }; `
39
- - [ Object Short Notation ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var name = 'vjeux'; var obj = { name }; `
40
- - [ Rest Params ] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) : ` function(type, ...args) {}; `
41
- - [ Template Literals ] ( http://babeljs.io/docs/learn-es2015/#template-strings ) : `` var who = 'world'; var str = `Hello ${who}`; ``
36
+ - [ モジュール ] ( http://babeljs.io/docs/learn-es2015/#modules ) : ` import React, { Component } from 'react'; `
37
+ - [ プロパティ演算 ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var key = 'abc'; var obj = {[key]: 10}; `
38
+ - [ オブジェクトメソッド ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var obj = { method() { return 10; } }; `
39
+ - [ オブジェクトの短縮表記 ] ( http://babeljs.io/docs/learn-es2015/#enhanced-object-literals ) : ` var name = 'vjeux'; var obj = { name }; `
40
+ - [ 可変長引数 ] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) : ` function(type, ...args) {}; `
41
+ - [ テンプレートリテラル ] ( http://babeljs.io/docs/learn-es2015/#template-strings ) : `` var who = 'world'; var str = `Hello ${who}`; ``
42
42
43
43
ES8
44
44
45
- - [ Function Trailing Comma ] ( https://github.com/jeffmo/es-trailing-function-commas ) : ` function f(a, b, c,) {}; `
46
- - [ Async Functions ] ( https://github.com/tc39/ecmascript-asyncawait ) : ` async function doStuffAsync() { const foo = await doOtherStuffAsync(); }; `
45
+ - [ 最後の引数の後のコンマ ] ( https://github.com/jeffmo/es-trailing-function-commas ) : ` function f(a, b, c,) {}; `
46
+ - [ 非同期関数 ] ( https://github.com/tc39/ecmascript-asyncawait ) : ` async function doStuffAsync() { const foo = await doOtherStuffAsync(); }; `
47
47
48
- Stage 3
48
+ ステージ 3
49
49
50
- - [ Object Spread ] ( https://github.com/tc39/proposal-object-rest-spread ) : ` var extended = { ...obj, a: 10 }; `
51
- - [ Static class fields ] ( https://github.com/tc39/proposal-static-class-features ) : ` class CustomDate { static epoch = new CustomDate(0); } `
52
- - [ Optional Chaining ] ( https://github.com/tc39/proposal-optional-chaining ) : ` var name = obj.user?.name; `
50
+ - [ オブジェクトスプレッド構文 ] ( https://github.com/tc39/proposal-object-rest-spread ) : ` var extended = { ...obj, a: 10 }; `
51
+ - [ 静的メソッド・プロパティ ] ( https://github.com/tc39/proposal-static-class-features ) : ` class CustomDate { static epoch = new CustomDate(0); } `
52
+ - [ 安全なプロパティアクセス ] ( https://github.com/tc39/proposal-optional-chaining ) : ` var name = obj.user?.name; `
53
53
54
- Specific
54
+ 言語固有
55
55
56
56
- [ JSX] ( https://reactjs.org/docs/jsx-in-depth.html ) : ` <View style={{color: 'red'}} /> `
57
57
- [ Flow] ( https://flowtype.org/ ) : ` function foo(x: ?number): string {}; `
@@ -60,7 +60,7 @@ Specific
60
60
61
61
## Polyfills
62
62
63
- Many standard functions are also available on all the supported JavaScript runtimes.
63
+ 多くの標準組込み関数は、サポートされているすべてのJavaScriptランタイムでも利用可能です。
64
64
65
65
Browser
66
66
0 commit comments