Lightning introduction to CoffeeScript 20131005
Upcoming SlideShare
Loading in...5
×
 

Lightning introduction to CoffeeScript 20131005

on

  • 583 views

 

Statistics

Views

Total Views
583
Views on SlideShare
457
Embed Views
126

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 126

http://murajun1978-pg.blogspot.jp 121
http://murajun1978-pg.blogspot.com 4
http://cloud.feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lightning introduction to CoffeeScript 20131005 Lightning introduction to CoffeeScript 20131005 Presentation Transcript

    • Lightning Introduction to CoffeeScript 2013-10-05 後藤
    • WHAT
    • 3 WHAT is CoffeeScript?
    • 4 WHAT is CoffeeScript? - 2011 年 GitHub で公開 - スクリプト言語 拡張子は .coffee - ひとことで言うと (文法が)「イケてる JavaScript 」 - 原則 JavaScript に変換して使う - 洗練された文法 Ruby や Python にならった各種文法
    • 5 WHAT is CoffeeScript? JavaScript の課題 - ブラウザごとの方言 -> jQuery などのライブラリが解決 - 読みやすい? -> CoffeeScript が解決
    • WHY
    • 7 Why CoffeeScript? - シンプルに書ける / 読める Ruby と Python のいいとこどり - Ruby を使える人なら学習コストが低い - 数年で廃れるかもしれないけど ... Ruby とはちがう文法の考え方が身につく
    • HOW
    • HOW - インストール
    • 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
    • HOW - 実行(基本)
    • 12 HOW - 実行(基本) Ruby と同じ 2 つの実行方法 1. 対話型 $ coffee coffee> 1 + 2 coffee> a = 10 * irb と同じ 2. スクリプト $ coffee hello.coffee * coffee コマンドにファイル名を渡す
    • HOW - Hello, World!
    • 14 HOW - Hello, World! # file: hello.coffee console.log(“Hello, World”) # 標準出力は console.log で console.log “Hello, World” # Ruby と同じく () は省略可 # コメントは # 始まり # 複数行コメントは ### ~ ###
    • HOW - 基本文法
    • 16 HOW - 基本文法 # リテラル # 数値型 5 3.14 # 文字列型 ‘one’ “hello” # 論理値型 true && yes && on false || no || off # 正規表現型 /regexp/ # 配列 [1, 3, 5, ‘last’] # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ }
    • 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 HOW - 基本文法 # コレクション型その 2 # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ } p = name: ‘goto’ favorite: ‘apple’ # インデントだけの # この書き方も可 p.name # => ‘goto’ p[‘name’] # => ‘goto’ # どちらでもアクセス可
    • 19 HOW - 基本文法 # 変数 x = 10 name = ‘goto’ # 英数字が使用可 snake_case = ‘snake’ CamelCase = ‘camel’ # アンダースコアや # 大文字も使用可能 $abc = 10 $O$ = 100 # $ も使用可能
    • 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 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 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 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 が使用可
    • HOW - 関数
    • 25 HOW - 基本文法 # 関数 # 1 行で書く場合 sum = (x, y) -> x + y sum(3,5) # => 8 # = () -> で関数定義 # () の中が引数 # -> の後が関数の本体 # 複数行で書く場合 average = (x, y, z) -> total = x + y + z total / 3 # 本体はインデントする # return が省略されたら # 最後の式の値が # 返り値となる
    • 26 HOW - 基本文法 # 関数 sum 3, 5 # => 8 # () は省略が可能 average = (x, y, z) -> sum = (p, q, r) -> p + q + r (sum x, y, z) / 3 # 関数内関数も可
    • HOW - クラス
    • 28 HOW - クラス # クラス定義 class Dog constructor: (name) -> this.name = name # class キーワードで定義 # もちろんインデント # constructor は # コンストラクタ # インスタンス生成 d1 = new Dog(‘Pochi’) # new クラス名 で # インスタンス生成 # new 時に constroctor の # メソッドが呼ばれる console.log d1.name # そのまま # プロパティアクセス可
    • 29 HOW - クラス # this. の別の書き方 class Dog constructor: (name) -> @name = name # 現在のオブジェクトの # プロパティ指定は # this. 以外に # @... が使用可 # constructor の省略書式 class Dog constructor: (@name) -> # constructor の引数に # @ 始まりにすると # @... = ... # が自動的に実行される
    • 30 HOW - クラス # クラスメソッド class Dog @clsmethod: () -> 1 # クラスメソッドは # @... で定義する p = console.log p Dog.clsmethod # => 1 # 継承 class Dog extends Wolf # 継承は extends で
    • HOW - その他もろもろ
    • 32 HOW - その他もろもろ # 変数の存在チェック a = 1 if a? console.log ‘OK’ # 変数名のあとに ? # メソッドの () 省略 hello = -> return ‘hello’ hello # => [Function] hello() # => ‘hello’ # 引数を渡さない場合は # () は省略不可
    • 33 HOW - その他もろもろ # nil っぽい値 # 1 null # 2 undefined # 3 NaN null # 空である undefined # 未定義 / 未代入である NaN # 変な数字( 0 除算結果な ど)
    • 34 HOW - その他もろもろ # true と false の # バリエーション # 1 yes no # 2 on off # yes on # ともに true と同じ # no off # ともに false と同じ # 文字列への式の組み込み “3 + 4 = #{3 + 4}” # Ruby と同じく # “” の中の #{} の中は # 評価される
    • 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 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] # もっと # 気持ち悪い書き方もできる
    • HOW - 実行(応用)
    • 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
    • NEXT
    • 40 NEXT インストールしましょう http://coffeescript.org/ npm https://npmjs.org/ 入門リソース - ドットインストール - 「つくって覚える CoffeeScript 入門」