ES6,7で書ける JavaScript
•Als PPTX, PDF herunterladen•
2 gefällt mir•1,074 views
社内勉強会のために勉強したことのまとめ
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie ES6,7で書ける JavaScript
Ähnlich wie ES6,7で書ける JavaScript (20)
Mehr von Shin Sekaryo
ES6,7で書ける JavaScript
- 1. ES6, 7 で書ける JavaScript 世嘉良 紳 2016.12.15 社内勉強会 LT
- 2. 目次 • JavaScript 年表 • ES6/ES7 を書いたことがない人のために紹介 • 注目して欲しい仕様 ※ JavaScript にわかなので間違った記述があるかも…
- 4. みなさん ES6/ES7 書いてますか？ https://zombiecodekill.files.wordpress.com/2014/07/javascript-the-good-parts-the-definitive-guide.jpg ES5 は仕様に対して良いところがこれだけしか…
- 5. ES6 までの道のり… • Netscape 社が開発し 1997 年に Ecma International によって標 準化された初版が公開 • 1999 年 ES3 が公開 • 2000 年代 に入り ES4 が検討され始めるが、後方互換生などの 問題で意見がまとまらずに公開が見送りになる • 2009 年 ES5 が公開 • 2015 年 ES6 が公開 • ES7 Proposals (https://tc39.github.io/ecma262/) [イマココ]
- 6. 導入してほしい新機能 機能 説明 アロー関数 関数定義の省略記法 ブロックスコープ let, const によるブロックスコープの導入 デフォルトパラメーター 関数引数へのデフォルト値の定義 レストパラメーター 可変長引数の定義 プロミス 非同期処理用のインターフェース ジェネレーター 停止/再開可能な関数
- 7. これまでの JavaScript • JavaScript の this は呼び出し元に依存する • コンストラクタ: 呼び出したオブジェクト • メソッド: レシーバオブジェクト • apply/call/bind: 引数のオブジェクト • それ以外: グローバルオブジェクト JavaScript 初心者にとって罠でしかない…
- 8. •「=>」キーワードで function を省略することができる •アロー関数がスコープ内の this の値を捕捉する アロー関数
- 9. これまでの JavaScript • { } を記述しただけでは、スコープとして機能しない • 別ファイルにしてもグローバル変数は共通 • 同じ名前の変数が宣言された場合は、スコープの内側 でのみ有効になる別の変数になる • 変数を隠匿するためにクロージャーを多用したくなる JavaScript 初心者にとって罠でしかない…
- 10. ブロックスコープ • let: ブロックスコープの局所変数を宣言する • const: 再代入/再宣言ができない ES6 以降は原則 var による宣言は使わない ※ 変数の再代入がない限りは基本的に const のみを使用すること
- 11. これまでの JavaScript JavaScript 初心者にとって罠でしかない… • 引数の 「undefined」判定が面倒くさい… • ↓のコードは「undefined」が false 判定されることに依存して いる • NULL 値を意図的に使いたい場合の障壁になる • ( undeifned, null, NaN (非数), 空文字, 0 など)
- 13. • 可変長引数としての「arguments」オブジェクト • すべての引数にアクセス可能 • 仮引数で定義していなくても実引数で渡された引数 すべてにアクセスすることができる (バグになり得る) • 「arguments」は配列のようなオブジェクトである JavaScript 初心者にとって罠でしかない… これまでの JavaScript
- 14. レストパラメーター • シンプルに可変長引数をかける機能 • レストパラメーターは、Array インスタンスです。 • sort、map、forEach、pop のようなメソッドを直接適 用できる。
- 15. • コールバック関数の第一引数には Error オブジェクトを渡すと いうルールを用いるケースがる • あくまでコーディングルール • 「callback hell」/ 「死」のピラミッド これまでの JavaScript
- 17. ジェネレーター • function* 宣言による関数定義内で yield と記述すると、 戻り値を得るまで関数の実行を一時停止/再開する • 同期風の非同期コードを書くことができる
- 18. • プロミスとジェネレーターは共存可能 • Promise が返す thenrable のインターフェイスが yieldable であるという理解 • また ジェネレーター内では try/catch 構文が使用可能 • 他言語を書いていた人たちにも分りやすい記述に プロミスとジェネレーター
- 19. ES7 で仕様策定中の機能の紹介
- 20. バインドオペレーター proposal-bind-operator https://github.com/tc39/proposal-bind-operator • 「::」キーワードを使って this をバインドする • 「|>」 キーワード派閥も… • 指定された引数で既知の関数を呼びだす/オブジェクト からメソッドを抽出したいというモチベーション。
- 22. プラベートフィールド 現状はクラス構文と Symbol (複製不可なプリミティブ値) で実現 (?) という記事をよく見掛ける… (※要参考)
- 25. まとめ • 新しい JavaScript は他言語からの文法を取り入れたり 、開発者たちの議論によって分かりやすく、 安全なプログラミングができるように進化している！ • 取り入れることによるデメリットは少ないと思うので どんどん書いていきましょう！
- 26. 余談 • stylefmt - css のフォーマッター • https://github.com/morishitter/stylefmt • Start: 1458, Fork: 63, 17,339 dl/month • Node.js 製 • コラボレーターとして地味に頑張ってます >< • 良かったら使ってください…!!!! (コントリビュートも大歓迎です)
- 27. 余談2 最近 node.js でなにか作るときに使ってるツール • eslint/eslint • A fully pluggable tool for identifying and reporting on patterns in JavaScript. • stylelint/stylelint • A mighty, modern CSS linter • facebook/flow • Adds static typing to JavaScript to improve developer productivity and code quality. • flowtype/flow-typed • A central repository for Flow library definitions • substack/tape • tap-producing test harness for node and browsers • avajs/ava • 🚀 Futuristic JavaScript test runner
- 28. 参考 • tc39/ecma262: Status, process, and documents for ECMA262 • https://github.com/tc39/ecma262 • 明日には使えなくなるES7トーク • http://azu.github.io/slide/es6talks/ • ES6時代のJavaScript - クックパッド開発者ブログ • http://techlife.cookpad.com/entry/2015/02/02/094607 • ES6 チートシート | プログラミング | POSTD • http://postd.cc/es6-cheatsheet/#generators • Fetch での Stream を用いたプログレス取得とキャンセル • https://blog.jxck.io/entries/2016-07-21/fetch-progress-cancel.html