ちゃんとWeb会議スライド『Coffee script』

3,451 views

Published on

H2O Space. 社内・パートナー勉強会「ちゃんとWeb会議」のスライド資料です。CoffeeScriptについての基本を紹介しました。

2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,451
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
21
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

ちゃんとWeb会議スライド『Coffee script』

  1. 1. COFFEE SCRIPTTANIGUCHI Makoto @ H2O Space.
  2. 2. JAVA SCRIPT
  3. 3. Java Script• Webブラウザ上で動作する、スクリプト言語• 「Netscape Navigator 2.0(1996年)」に実装された• 一時「JSを利用するのは悪」などと言われたが、 Ajaxの流行と共に、注目される
  4. 4. jQuery• JavaScriptを強化する「ライブラリ」• 強力なセレクタや、エフェクトの美麗さで人気• 他のライブラリ(Prototype.js、Ext.js)などに比べ、 圧倒的な普及率を誇る
  5. 5. 現在の開発スタイル jQuery JavaScript
  6. 6. 今後の開発スタイル? jQueryCoffeeScript コンパイル JavaScript
  7. 7. コンパイル?• プログラマが記述した「ソースプログラム」を、 コンピュータが理解可能な言語に「翻訳」する事• 「Objective-C」や「Java」がコンパイラ言語• PHPやJavaScriptは翻訳を必要としない 「スクリプト言語」または「インタープリタ言語」
  8. 8. CoffeScriptってなにもの?• より簡潔に、素早く記述するための言語• JavaScriptの欠点を克服し、スマートにソースを記述• 無用な不具合を回避しやすくなる
  9. 9. 新しく覚えるの?• 使う単語(ファンクション)は、ほぼ同じ• 言い方が少し異なるだけ• 「明けましておめでとうございます。 今年もよろしくお願いします。」  → あけおめことよろ みたいな感じ?
  10. 10. 例JavaScript CoffeeScriptvar countdown, num; countdown = (num for num in [10..1])countdown = (function() { var _results; _results = []; 簡潔 for (num = 10; num >= 1; num--) { _results.push(num); } return _results;})();
  11. 11. 例JavaScript CoffeeScriptif (band !== SpinalTap) volume = 10; volume = 10 if band isnt SpinalTap 分かりやすい!
  12. 12. はじめかた• Node.jsと、npmをインストール• CoffeeScriptをインストール• ソースを書いて「xxx.coffee」ファイルで保存• コマンドを叩いてコンパイル• JavaScriptファイル(.js)をHTMLに読み込ませる
  13. 13. はじめかた 神ツール• CodeKitをインストールする(Mac)• フォルダを登録する• ソースを書く
  14. 14. DEMO
  15. 15. ファンクションを作るこの記号が大事
  16. 16. オブジェクトを作るこのタブ記号が大事
  17. 17. jQueryを使うjQueryも使えます
  18. 18. if構文いろいろいろいろな書き方
  19. 19. 使える演算子意味が通じやすい
  20. 20. while構文untilも使える
  21. 21. ヒヤドキュメント長い文字列を記述しやすい
  22. 22. もう少しじっくりなら..• 今日から始めるCoffeeScript http://tech.kayac.com/archive/coffeescript-tutorial.html• CoffeeScript基礎文法最速マスター http://www.infiniteloop.co.jp/blog/2011/03/coffeescript-master/• CoffeeScript(オフィシャル:英語) http://coffeescript.org/
  23. 23. CoffeeScriptのメリット• JSで「かゆいところに手が届かない」部分に手が届く• カッコや各種記号など、冗長な書き方を省略できる• RubyやPythonなどの「今っぽい」書き方ができる
  24. 24. デメリット JSスクリプトに不満がある人向け• JSと書式が結構違うので、慣れるまで戸惑う• コンパイルエラーと、JS自体のエラーが発生するので トラブルの際の原因究明の手間がかかる• JS自体のことも深く知っておく必要があるため、 初学者にとっては、学習することが多い
  25. 25. JAVA SCRIPTのこれから
  26. 26. Titanium Mobile スマホアプリ開発
  27. 27. node.jsサーバーサイド開発
  28. 28. Bootstrap, from Twitter サイト制作
  29. 29. LAMPからGUMDAM? http://w3ddd.github.com/2012/03/12/gundam.html
  30. 30. しがみついていきましょう・・

×