Your SlideShare is downloading. ×
0
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

traceur-compilerで未来のJavaScriptを体験

880

Published on

2014/8/2(土) altJS福岡勉強会第1回 #altjs_fukuoka …

2014/8/2(土) altJS福岡勉強会第1回 #altjs_fukuoka

このスライドより下記ブログが参考になります!
traceur-compiler 入門
http://yosuke-furukawa.hatenablog.com/entry/2014/07/31/093041

Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
880
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. traceur-compilerで 未来のJavaScriptを体験 altJS福岡勉強会第1回 発表資料 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  • 2. -自己紹介- 株式会社キャムの江原と申します。 Excelとかプログラマとかしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  • 3. 今日は未来のJavaScriptが体験出来る Traceurについて発表したいと思います!
  • 4. ふーん、で今日はなんで Traceurなの? altJSはTypeScriptとかが有名じゃないの? ( /タ、タシカニ…
  • 5. うちの会社はAngularJS1.2を使って開発しています。 どうやらAngularJS2.0の開発は… All code in AngularJS 2 is already being written in ES6. As ES6 doesn’t run in browsers today, we’re using the Traceur compiler to generate the nice ES5 that runs everywhere. We’re working with the Traceur team to build support for a few extensions like annotations and assertions. We call this set of extensions "ES6 +A". http://blog.angularjs.org/2014/03/angular-20.html 次の2は Traceurつかって開発してるよ〜
  • 6. という訳でAngularJS2に備えて TraceurとES6について発表させてください!
  • 7. Traceur(traceur-compiler)って何?聞いた事無いけど? ( /タ、タシカニ…
  • 8. tracer-compiler(トレーサーコンパイラー)とは https://github.com/google/traceur-compiler
  • 9. tracer-compiler(トレーサーコンパイラー)とは https://github.com/google/traceur-compiler • 新しいJavaScript(ES6)を今のJavaScript(ES5)へコンパ イルして動作させる事ができる • 価値がある新しいJavaScriptの機能の設計を知ることが目標 のような事が書いてあります(英語自信無し…)、なので実務では使えなさそう…
  • 10. へ?ES6って何? ( /ソウイエバ…
  • 11. ECMAScript6とは Mozilla における ECMAScript 6 のサポートより
 https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla " ” ECMAScript 6 は "Harmony" または "ES.next" のコードネームで呼称される、 " JavaScript の次期標準仕様です。 TC39 has decided to move the formal publication date of the ECMAScript 6 standard to June 2015. http://www.2ality.com/2014/06/es6-schedule.html 仕様確定は来年の6月みたい。来年は盛り上がるかも。
  • 12. ではさっそくTraceurを使ってES6が どんな風にかけるか確認してみましょう!
  • 13. まずはインストールすべし! $ npm install traceur -g ( Node.jsは必要なんやねー
  • 14. コンパイル!! traceur --script src/es6/*.js --out dist/app.js " ここにある複数のES6を コンパイルして1ファイルに
  • 15. 1. Array Comprehension ( Array内包表記 )
  • 16. // 1. Array Comprehension ( Array内包表記 ) var array = [ for (x of ["A", "B"]) for (y of [0, 1, 2, 4]) x + '' + y ]; " console.log(array); ["A0", "A1", "A2", "A4", "B0", "B1", "B2", "B4"]
  • 17. 2. Arrow Function(アロー関数)
  • 18. // 2. Arrow Function(アロー関数) var squareEs5 = function (x) { return x * x; }; var squareEs6 = (x) => { return x * x; }; console.log("squareEs5(2)=", squareEs5(2)); console.log("squareEs6(2)=", squareEs6(2)); squareEs5(2)= 4 squareEs6(2)= 4
  • 19. // 引数カッコとreturnの省略 " var squareEs6_min = x => x * x; " console.log("squareEs6_min(2)=", squareEs6_min(2)); " squareEs6_min(2)= 4
  • 20. // thisの動きが違うよ var ore = {name: "nobio"}; ore.sayEs5 = function () { var getName = function () { return this.name; }; return "My name is " + getName(); } ore.sayEs6 = function () { var getName = ()=> this.name; return "My name is " + getName(); }; console.log("ore.sayEs5()=", ore.sayEs5()); console.log("ore.sayEs6()=", ore.sayEs6()); ore.sayEs5()= My name is ore.sayEs6()= My name is nobio " function(){}の中のthisは新た に作られるんですけど " =>は外のthisが 使えます!
  • 21. Arrow Function便利ですね! TypeScriptにもCoffeeScriptなどにもあるみたいですね。
  • 22. angular.module("controllers"). controller("Es5Ctrl", ["$scope", "worldServ", function ($scope, worldServ) { $scope.data = worldServ.data; $scope.didPush = function () { worldServ.add(); }; }]); 普段、functionをいっぱい書いて開発すると思うんですけど… ※上の例はAngularJSのController
  • 23. angular.module("controllers"). controller("Es6Ctrl", ["$scope", "worldServ", ($scope, worldServ) => { $scope.data = worldServ.data; $scope.didPush = () => { worldServ.add(); }; }]); ES6になると随分タイプ量が減るしすっきりかけますね。 この例はAngularJS1.2です。Angular2ではどんな風に書くんでしょうかねぇ…
  • 24. 3. Classes
  • 25. class Robo { constructor(id) { this.id = id; this.power_ = 100; } attack(robo) { robo.power_ -= 110; } } こんな風に普通のclassも書く事が出来ます。
  • 26. class Nekogata extends Robo { constructor(id, name) { super(id); } attack(robo) { super.attack(robo); } get isKO() { return this.power_ < 0; } get genki() { return this.power_; } set genki(value) { this.power_ = value; } } 継承も使えます! 継承元のメソッドを呼べます プロパティ取得時の 名称をつけれます。 プロパティ設定時の 名称をつけれます。
  • 27. var doraemoon = new Nekogata(1); var jibanyoon = new Nekogata(2); " doraemoon.attack(jibanyoon); console.log("jibanyoon.genki=", jibanyoon.genki); console.log("jibanyoon.isKO=", jibanyoon.isKO); " jibanyoon.genki = 100; console.log("jibanyoon.genki=", jibanyoon.genki); console.log("jibanyoon.isKO=", jibanyoon.isKO); これを動かすと…. ドット(.)で値取得 ドット(.)で値設定 jibanyoon.genki= -10 jibanyoon.isKO= true jibanyoon.genki= 100 jibanyoon.isKO= false
  • 28. 4. Default Parameter
  • 29. // 4. Default Parameter var func01 = (name = "nanashi", age=99) => { return name + " is " + age; }; console.log(func01( "nobi", 10)); console.log(func01( "nobi" )); console.log(func01( )); 引数にデフォルト値が設定できます。 nobi is 10 nobi is 99 nanashi is 99
  • 30. 5. Destructuring Assignment
  • 31. var goku = 10000, ginyu = 5000; " console.log("goku,ginyu ", goku, ginyu); var [goku, ginyu] = [ginyu, goku]; console.log("goku,ginyu ", goku, ginyu); " var saiya = {gohan: 10000, bejita: 8000}; var {gohan, bejita} = saiya; console.log("gohan=",gohan,"bejita=", bejita); 変数値の交換やオブジェクトの値を変数に設定したりできます。 goku,ginyu 10000 5000 goku,ginyu 5000 10000 gohan= 10000 bejita= 8000 値の交換! Objectプロパティから変数設定!
  • 32. す、すみません..ここで力つきました…
  • 33. まだまだ…たくさん機能があります。 - Iterators and For Of - Generator Comprehension - Generators - Modules - Numeric Literals - Property Method Assignment - Object Initializer Shorthand - Rest Parameters & Spread - Template Literals - Promises - Block Scoped Binding (Experimental) - Symbol (Experimental)
  • 34. traceurについて分かるすばらしいブログがございます。 勉強してみたい方は是非↓こちらがお勧めです! " traceur-compiler 入門 http://yosuke-furukawa.hatenablog.com/entry/ 2014/07/31/093041
  • 35. まとめ! " - traceur-compilerはES6の機能が体験出来る! " - 将来の学習用としてよさそう!
 " - 実案件では…他のaltJSが良さそう
 (安定して実績が増えればいいのですけど..)
  • 36. ご清聴ありがとうございました!

×