Alt js

575 views

Published on

NPCA 2014年度第一回LT大会

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
575
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Alt js

  1. 1. altJS akouryy
  2. 2. 自己紹介 • 69回生(高1) • http://npca.jp/ • Ruby, Scala • Twitter: @akouryy1 • website: http://akouryy.net/ o 最近更新してない(よくあること)
  3. 3. altJS • Alternative JavaScript • JavaScriptを生成する言語 • JavaScript = 書きにくい • altJS = 書きやすい(多分)
  4. 4. JavaScript • Webページを動的に変更する言語
  5. 5. JavaScriptの問題点 • 冗長 • 読みにくい • 書きにくい • 冗長
  6. 6. JavaScriptの問題点 • ブラウザによって微妙に違う 仕様通り 仕様無視
  7. 7. jQuery • JavaScriptのライブラリ • オープンソース(当然) • 1番有名&人気 • 事実上の標準?
  8. 8. jQueryの特徴 • $が特徴的 • CSSのセレクタを使う • 関数の連鎖で書ける • ブラウザ間の差異を吸収
  9. 9. jQueryの例 window.onload = function(){…}; → $(function(){…}); document.getElementsByTagName ('button')[0].onclick = function(){…}; → $('button').click(function(){…});
  10. 10. altJSとは • JavaScript→読みにくい • 言語仕様はなかなか変えられない o ブラウザの対応 o 開発者の対応
  11. 11. altJSとは • 新たな言語 o 既存のプログラムを変える必要はない • コンパイルしたらJavaScriptに o ブラウザの対応は不要
  12. 12. altJSの言語 • 例 o CoffeeScript o TypeScript o Haxe o Dart o JSX →CoffeeScript
  13. 13. CoffeeScript • JavaScriptより短く書ける • RubyやPythonに似ている • ライブラリはそのまま使える
  14. 14. CoffeeScriptの利点 • JavaScriptの第一の問題 →オブジェクト指向が分かりにくい function C(){…} C.prototype.f = function(){…} → class C constructor: -> … f: -> …
  15. 15. CoffeeScriptの利点 • JavaScriptの第二の問題 →無名関数をよく使うのに冗長 function(hoge){…} → (hoge) -> …
  16. 16. CoffeeScriptの利点 • インデントによるブロックの表現 • パターンマッチによる代入 • 配列用for-in文 • 後置if, for • 自動でbreakがつくswitch文 • 簡潔なdo構文 • 全ての構文が値を返す
  17. 17. CoffeeScriptの利点 • 文字列中の式展開 • 整数の割り算を行う//演算子 • 汎用的なnullチェック演算子 • 安全な==演算子 • this.の省略記法 • 関数呼び出しの()の省略と擬似キー ワード引数
  18. 18. 比較 Java Script+jQuery $(function(){ for(var i = 0; i < 10; i++){ (function(i){ $('<span>' + i + '</span>').click(function(){ alert(i); }).appendTo('body'); })(i); } });
  19. 19. 比較 CoffeeScript+jQuery $ -> for i in [0 ... 10] do (i) -> $ "<span>#{i}</span>" .click -> alert i .appendTo 'body'
  20. 20. 比較 (参考)JavaScriptのみ window.onload = function(){ for(var i = 0; i < 10; i++){ (function(i){ var elem = document.createElement('span'); elem.innerHTML = i; elem.onclick = function(){ alert(i); }); document.getElementsByTagName('body')[0].appendChil d(elem); })(i); } };
  21. 21. まとめ • jQueryすごいね • altJSすごいね • CoffeeScriptすごいね • IE滅びろ
  22. 22. End Thank you for listening
  23. 23. 宣伝 • CoffeeScriptに似た言語(altJS) • https://github.com/akouryy/RabbitScript • ゆっくり作成中

×