Lightning introduction to CoffeeScript 20131005

724 views
637 views

Published on

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

  • Be the first to like this

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

No notes for slide

Lightning introduction to CoffeeScript 20131005

  1. 1. Lightning Introduction to CoffeeScript 2013-10-05 後藤
  2. 2. WHAT
  3. 3. 3 WHAT is CoffeeScript?
  4. 4. 4 WHAT is CoffeeScript? - 2011 年 GitHub で公開 - スクリプト言語 拡張子は .coffee - ひとことで言うと (文法が)「イケてる JavaScript 」 - 原則 JavaScript に変換して使う - 洗練された文法 Ruby や Python にならった各種文法
  5. 5. 5 WHAT is CoffeeScript? JavaScript の課題 - ブラウザごとの方言 -> jQuery などのライブラリが解決 - 読みやすい? -> CoffeeScript が解決
  6. 6. WHY
  7. 7. 7 Why CoffeeScript? - シンプルに書ける / 読める Ruby と Python のいいとこどり - Ruby を使える人なら学習コストが低い - 数年で廃れるかもしれないけど ... Ruby とはちがう文法の考え方が身につく
  8. 8. HOW
  9. 9. HOW - インストール
  10. 10. 10 HOW - インストール Node.js を使いましょう 1. Node.js をインストール http://nodejs.org/ 2. CoffeeScript をインストール $ npm install coffee-script 3. 確認 $ coffee -v ... CoffeeScript version 1.6.3 node.js.png
  11. 11. HOW - 実行(基本)
  12. 12. 12 HOW - 実行(基本) Ruby と同じ 2 つの実行方法 1. 対話型 $ coffee coffee> 1 + 2 coffee> a = 10 * irb と同じ 2. スクリプト $ coffee hello.coffee * coffee コマンドにファイル名を渡す
  13. 13. HOW - Hello, World!
  14. 14. 14 HOW - Hello, World! # file: hello.coffee console.log(“Hello, World”) # 標準出力は console.log で console.log “Hello, World” # Ruby と同じく () は省略可 # コメントは # 始まり # 複数行コメントは ### ~ ###
  15. 15. HOW - 基本文法
  16. 16. 16 HOW - 基本文法 # リテラル # 数値型 5 3.14 # 文字列型 ‘one’ “hello” # 論理値型 true && yes && on false || no || off # 正規表現型 /regexp/ # 配列 [1, 3, 5, ‘last’] # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ }
  17. 17. 17 HOW - 基本文法 # コレクション型その 1 # 配列 a = [1, 3, 5, ‘last’] a2 = [ 1 3 ] # この書き方も可 a[1] # => 3 # インデックスアクセス可 a[0..2] # => [1, 3, 5] a[0...2] # => [1, 3] # Ruby と同じく # スライスも可
  18. 18. 18 HOW - 基本文法 # コレクション型その 2 # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ } p = name: ‘goto’ favorite: ‘apple’ # インデントだけの # この書き方も可 p.name # => ‘goto’ p[‘name’] # => ‘goto’ # どちらでもアクセス可
  19. 19. 19 HOW - 基本文法 # 変数 x = 10 name = ‘goto’ # 英数字が使用可 snake_case = ‘snake’ CamelCase = ‘camel’ # アンダースコアや # 大文字も使用可能 $abc = 10 $O$ = 100 # $ も使用可能
  20. 20. 20 HOW - 基本文法 # 条件分岐 if if a = ‘apple’ 3 else if a = ‘orange’ 1 else 0 if 0 < a < 5 ‘a is between 0 and 5’ # この書き方も可 a = [1, 3, 5] x = 3 if x in a ‘x is in a’ # この書き方も可 if x isnt ‘good’ ‘unhappy’ # 等価チェックは # == != ではなく # is isnt を使おう
  21. 21. 21 HOW - 基本文法 # 条件分岐 switch when flag = "K" switch flag when 'M' then console.log " 明 治 " when 'T' then console.log " 大 正 " else console.log “ 慶応?” # switch when then else # を使う # then を省略して # インデントにすることも可 switch flag when 'M' console.log “ 明治” # 各 when の最後に # break は不要
  22. 22. 22 HOW - 基本文法 # ループ for a = [1, 3, 5] for ele in a console.log ele # 配列には in で for ele in [0..10] console.log ele # 範囲は [first..last] で p = { name: ‘goto’, favorite: ‘apple’ } for k, v of p console.log [k, v] # オブジェクトには of で
  23. 23. 23 HOW - 基本文法 # ループ while i = 0 while on console.log i i++ if i > 3 break # こちらもインデントで # 後置書式 a = 1 if true b = 0.5 b++ while 12 / b < 3 # if for while が使用可
  24. 24. HOW - 関数
  25. 25. 25 HOW - 基本文法 # 関数 # 1 行で書く場合 sum = (x, y) -> x + y sum(3,5) # => 8 # = () -> で関数定義 # () の中が引数 # -> の後が関数の本体 # 複数行で書く場合 average = (x, y, z) -> total = x + y + z total / 3 # 本体はインデントする # return が省略されたら # 最後の式の値が # 返り値となる
  26. 26. 26 HOW - 基本文法 # 関数 sum 3, 5 # => 8 # () は省略が可能 average = (x, y, z) -> sum = (p, q, r) -> p + q + r (sum x, y, z) / 3 # 関数内関数も可
  27. 27. HOW - クラス
  28. 28. 28 HOW - クラス # クラス定義 class Dog constructor: (name) -> this.name = name # class キーワードで定義 # もちろんインデント # constructor は # コンストラクタ # インスタンス生成 d1 = new Dog(‘Pochi’) # new クラス名 で # インスタンス生成 # new 時に constroctor の # メソッドが呼ばれる console.log d1.name # そのまま # プロパティアクセス可
  29. 29. 29 HOW - クラス # this. の別の書き方 class Dog constructor: (name) -> @name = name # 現在のオブジェクトの # プロパティ指定は # this. 以外に # @... が使用可 # constructor の省略書式 class Dog constructor: (@name) -> # constructor の引数に # @ 始まりにすると # @... = ... # が自動的に実行される
  30. 30. 30 HOW - クラス # クラスメソッド class Dog @clsmethod: () -> 1 # クラスメソッドは # @... で定義する p = console.log p Dog.clsmethod # => 1 # 継承 class Dog extends Wolf # 継承は extends で
  31. 31. HOW - その他もろもろ
  32. 32. 32 HOW - その他もろもろ # 変数の存在チェック a = 1 if a? console.log ‘OK’ # 変数名のあとに ? # メソッドの () 省略 hello = -> return ‘hello’ hello # => [Function] hello() # => ‘hello’ # 引数を渡さない場合は # () は省略不可
  33. 33. 33 HOW - その他もろもろ # nil っぽい値 # 1 null # 2 undefined # 3 NaN null # 空である undefined # 未定義 / 未代入である NaN # 変な数字( 0 除算結果な ど)
  34. 34. 34 HOW - その他もろもろ # true と false の # バリエーション # 1 yes no # 2 on off # yes on # ともに true と同じ # no off # ともに false と同じ # 文字列への式の組み込み “3 + 4 = #{3 + 4}” # Ruby と同じく # “” の中の #{} の中は # 評価される
  35. 35. 35 HOW - その他もろもろ # 内包表記 a = [1, 2, 3] a_squared = (x * x for x in a) # => [1, 4, 9] # Ruby の map 的なことも # 1 行で書ける! a = [0..20] a7 = (x for x in a when x % 7 is 0) # => [0, 7, 14] # ( when の前は改行な し) # Ruby の select 的なこ と # も 1 行で書ける!!
  36. 36. 36 HOW - その他もろもろ # 内包表記つづき s = java: 1 ruby: 2 coffee: 3 pair = ([k, v] for k, v of s) # オブジェクトも # もちろん回せる a = [1, 2, 3] a_squared = for x in a x * x # => [1, 4, 9] # もっと # 気持ち悪い書き方もできる
  37. 37. HOW - 実行(応用)
  38. 38. 38 HOW - 実行(応用) 1. コンパイル $ coffee -c hello.coffee (単一のスクリプト) $ coffee -c . (カレントディレクトリ全体) 2. 常駐自動コンパイル $ coffee -c -w . 指定されたファイルやディレクトリを監視し続け coffee のソースが更新されたら都度 js にコンパイル 3. ディレクトリ指定 $ coffee -o dest src src 内の coffee ソースをコンパイルして dest ディレクトリに 格納 node.js.png
  39. 39. NEXT
  40. 40. 40 NEXT インストールしましょう http://coffeescript.org/ npm https://npmjs.org/ 入門リソース - ドットインストール - 「つくって覚える CoffeeScript 入門」

×