序文
Reactフロントエンド・フレームワークに入る前に、この投稿でJavaScript ES6について知っていることを復習しておこう。
- JavaScriptの歴史
- let、const、var 違い
- 樣板字面值（ Template Literals ）
- アロー関数
上記の中国語訳はMDNの公式翻訳に基づくものであり、間違いがあれば読者のコメントを歓迎する。
JavaScript ES6の歴史
1995年に出版されたブレンダン・アイチ。 JavaScript、当初JavaScriptは主にウェブページにいくつかの簡単な機能を実装するために使用されていました。その後、Ajax、Jquery、React.js、Vue.js、Node.js、TypeScriptが登場し、次第にJavaScriptは主流になる前に最も広く使われるプログラミング言語のひとつとなり、フロントエンドとバックエンドの両方の開発に使えるようになった。
ES5やES6について知っている読者もいるかもしれないが、ESとは何か？
ES の正式名称は ECMAScript です。ここで、ECMA は欧州コンピュータ製造者協会 (European Computer Manufactures Association) の略称で、次の数字は世代を表すため、ES5 は ECMAScript の第 5 世代、ES6 は ECMAScript の第 6 世代になります。 。
では、なぜES1からES4までの世代についてあまり耳にしないのだろうか？
ES2、ES3、ES4ではいくつかの問題が修正されたり、正規表現や文字列処理が追加された。
JavaScript ES6
ES6は2015年に登場し、多くの便利で有用な機能が追加され、幅広いJavaScriptアプリケーションに実装された。
歴史についてもっと知りたい人は、以下を参照されたい。
var, let, const 差
1. var
varは比較的初期のES5宣言メソッドで、varを使って宣言でき、関数スコープかグローバル・スコープのどちらかになります。
2. let
letは比較的最近のES6の宣言メソッドで、letを使って宣言することができる。レキシカル変数スコープを実装するだけでなく、中括弧を使用することでコード・ブロックが作成され、let宣言でブロック・スコープが設定されます。
3. const
constは、constを使って宣言できる最近のES6宣言のひとつで、ブロック・スコープされている。
constとletの最大の違いは、constは再代入されない値であるということだ。
varとletの違い
2つのコードの違いを簡単に示すために、まずES5でvarを宣言してみよう。判別式で再度宣言し、判別式にコード・ブロックを残した後も、変数はコード・ブロックで宣言された値を保持していることがわかる。
var input = "Global"; if(input){ var input = "Block"; // 変数 Block が出力されます } console.log("input");ブロックが出力されます
ES6でletを使って再宣言すると、判別式で再宣言した後、影響範囲がコード・ブロック内だけになり、変数が外部グローバル変数に影響しないことがわかる。
let input = "Global"; if(input){ let input = "Block"; // ブロックが出力されます } console.log("input");
上の例でわかるように、ES5ではvar宣言はブロック内で宣言すると同名の他の変数を汚染してしまうため、現在ではletやconstを使った宣言が主流となっている。
テンプレート・リテラル
これは MDN WEB この用語の名称が使われ、その中国語訳が使われているが、場所によってはテンプレート・ストリングとも呼ばれている。
伝統的なJavaScriptの構文では、プラス記号を使って文字列を連結するが、この伝統的な構文は直感的ではない。
console.log(「こんにちは、こちらは「+名前+」、私の電話番号は「+PhoneNumber」です)
テンプレート・リテラル構文が現れたら、バックティックで文字列を囲み、マネー記号と中括弧${}を使って文字列の中に変数を入れることができる。 上記のコードを書き直すと、以下のようになる。文字列全体がより簡潔でわかりやすくなっているのがわかるだろう。
console.log(`こんにちは、${名前}、私の電話番号は ${電話番号}です`)
アロー関数
定義
伝統的なES5構文では、宣言は以下の構文で行われます。キーワードfunctionで始まり、関数名が続き、関数内のアクションを中かっこで囲みます。
function printHelloWorld() { console.log("Hello World") } var printHelloWorld = function() { console.log("Hello World") }
宣言のもう一つのタイプは関数式で、まず変数を宣言し、その変数に関数を代入する。
ホイスト
ここでは、文字による宣言と文字による指定の2種類がある。関数宣言の場合はホイストされるが、関数指定の場合はホイストされない。
printHelloWorld() function printHelloWorld() { console.log("Hello World") } // このまま実行しても問題ありません printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } //このように実行すると問題が発生します
パラメーター転送
従来のES5では、関数内でパラメータを渡すことが可能で、正式にはArgument（引数）と呼ばれる。
function printHello(name) { console.log(`こんにちは、私の名前は ${name}`) } printHello("ホーガン")
しかし、その関数が使われるときに、引用された数値の値が与えられていない場合はどうだろう？
が表示されます。 Hello,My Name is undefined
ES6では関数のプリセットもあるので、関数宣言で値への参照を直接代入することで問題を回避できる。
function printHello(name = "Hogan") { console.log(`こんにちは、私の名前は ${name}`) } printHello() // こんにちは、私の名前はホーガンです printHello("Bo Bo") // こんにちは、私の名前はボーボーです
アロー関数
アロー・ファンクションはES6の新機能のひとつで、ファンクション・キーワードを使わずに関数を宣言することができる。
アロー関数は、今後のReactの実装でかなり頻繁に使われることになるだろうし、非常に重要で便利な機能だ。
ここでは、伝統的なES5関数の宣言方法を、functionとreturnというキーワードを使って説明する。
var printHello = function(name) { return ("Hello " + name) } console.log(printHello("Hogan"))
アロー関数を使うと、次のように書き換えることができる。
const printHello = (名前) => `Hello ${名前}` console.log(printHello("Hogan"))
結語
この記事では、JavaScript ES6の新機能とコンセプトのいくつかを紹介し、コードを使って説明します。
Reactフロントエンド・フレームワークの構文に入る前に、オリジナルのJavaScript構文をおさらいしておこう。
ご意見、ご質問がございましたら、お気軽にコメントをお寄せください！
リアクト・バーナキュラー・キャンペーン・シリーズが気に入ったら、「いいね！」や「シェア」をお願いします！
その他の参考記事
なぜ大企業はNxを使うのか？ モノレポツール 5分のクイックセットアップ
日本語 
繁體中文 
English 
简体中文 
한국어 
Español