20161124-wajs-fizzbuzz

FizzBuzz in JavaScript

Transcript

1. JavaScript を勉強するために最初にやったこと N. Shimizu (nshimizu@mozilla-japan.org) We are JavaScripters@1st (2016/11/24)
2. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ 傈劤〷̔04̔فؚٗٓىؚٝ鎉铂
   ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ 'JSFGPY
   'JSFGPY
   GPS
   J04
   %FW5PPMT
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   (BNJOH
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
3. 'J[[#V[[
4. FizzBuzz 問題 • 3 の倍数：Fizzと出力する • 5の倍数：Buzzと出力する • 3の倍数で、しかも5の倍数の場合：FizzBuzzと出力する • それ以外：数値そのものを出力する           'J[[  #V[[ 'J[[ #V[[ ˘ ˘
5. JS GPS MFU
   J
   
   
   J
   
   
   J \
   
   
   JG J
   
   
   
   
   
   J
   
   
   
    \
   
   
   
   
   DPOTPMFMPH 'J[[#V[[ 
   
   
   ^FMTF
   JG J
   
   
   
    \
   
   
   
   
   DPOTPMFMPH 'J[[ 
   
   
   ^FMTF
   JG J
   
   
   
    \
   
   
   
   
   DPOTPMFMPH #V[[ 
   
   
   ^FMTF\
   
   
   
   
   DPOTPMFMPH J 
   
   
   ^
   ^ シンプルなFizzBuzzの実装
6. JS DPOTU
   B
   
   <
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   >
   DPOTU
   TFR
   
   BNBQ GJ[[CV[[ 
   DPOTPMFMPH TFRKPJO =O  GVODUJPO
   GJ[[CV[[ O \
   
   
   
   
   JG O
   
   
   
   
   
   O
   
   
   
    \
   
   
   
   
   
   
   
   
   SFUVSO
   'J[[#V[[
   
   
   
   
   ^FMTF
   JG O
   
   
   
    \
   
   
   
   
   
   
   
   
   SFUVSO
   'J[[
   
   
   
   
   ^FMTF
   JG O
   
   
   
    \
   
   
   
   
   
   
   
   
   SFUVSO
   #V[[
   
   
   
   
   ^FMTF\
   
   
   
   
   
   
   
   
   SFUVSO
   
   
   O
   
   
   
   
   ^
   ^ 関数プログラミング的なFizzBuzz実装
7. map：配列のひとつひとつの要素に関数を適用して新しい配列を作る           'J[[  #V[[ 'J[[ #V[[ ˘ ˘
8. ペアノの公理：自然数の定義 • ジュゼッペ・ペアノ（1858-1932）によって定義された自然数の定義 (1891) • 自然数は次の条件を満たす • 自然数0が存在する • 任意の自然数 a には、その後者 suc(a) が存在する • 0はいかなる自然数の後者ではない • 異なる自然数は、異なる後者を持つ • 0がある性質を満たし、a がある性質を満たせば suc(a) もまたその性質を満 たす時、全ての自然数はその性質を満たす IUUQTKBXJLJQFEJBPSHXJLJآُئحل٥ل،ظ
9. 自然数の構造：はじまりの町と、つぎの町 • スタート地点と、次の地点への移動で定義されるもののことを「自然数」と呼びました • 0：スタート地点 • 後者関数suc: 次の地点への移動 • 線形リストと同じ構造を持ちます  TVD TVD TVD TVD
10. JS DMBTT
    1FBOP\
    
    
    DPOTUSVDUPS QSFW \
    
    
    
    
    UIJTQSFW
    
    QSFW
    
    
    ^
    
    
    TVD \
    
    
    
    
    SFUVSO
    OFX
    1FBOP UIJT 
    
    
    ^
    ^ 1FBOP@[FSP
    
    OFX
    1FBOP OVMM 
    1FBOP[FSP
    
    GVODUJPO \
    
    
    SFUVSO
    1FBOP@[FSP
    ^
    DPOTU
    [FSP
    
    1FBOP[FSP 
    DPOTU
    POF
    
    [FSPTVD 
    DPOTU
    UXP
    
    POFTVD 
    DPOTU
    GPVS
    
    UXPTVD TVD  自然数の実装
11. JS 1FBOPQSPUPUZQFUP@J
    
    GVODUJPO \
    
    SFUVSO
    UIJTQSFW
    
    
    
    
    UIJTQSFWUP@J
    
    
    
    
    ^
    1FBOPQSPUPUZQFUP4USJOH
    
    
    
    
    GVODJUPO \
    
    
    
    
    SFUVSO
    UIJTUP@J
    
    
    ^ DPOTU
    UXP
    
    
    
    
    1FBOP[FSP TVD TVD 
    DPOTPMFMPH UXPUP@J 
    数値や文字列への変換用メソッドを追加
12. JS 1FBOPSBOHF
    
    GVODUJPO O \
    
    
    MFU
    SFU
    
    <1FBOP[FSP >
    
    
    GPS MFU
    UNQ
    
    1FBOP[FSP 
    
    
    
    
    
    
    
    O
    
    
    
    O \
    
    
    
    
    UNQ
    
    UNQTVD 
    
    
    
    
    SFUQVTI UNQ 
    
    
    ^
    
    
    SFUVSO
    SFU
    ^
    1FBOPDSFBUF
    
    GVODUJPO O \
    
    
    MFU
    S
    
    1FBOPSBOHF O 
    
    
    SFUVSO
    SQPQ 
    ^ 範囲や、即値からの作成
13. JS DPOTU
    UFYU
    
    1FBOPSBOHF 
    
    
    NBQ J
    
    JUP@J
    
    
    NBQ GJ[[CV[[
    
    
    KPJO =O
    DPOTPMFMPH UFYU  GVODUJPO
    GJ[[CV[[ O \
    
    
    
    
    MFU
    MBCFM
    
    
    
    
    
    
    JG O
    
     \MBCFM 'J[[^
    
    
    
    
    JG O
    
    
     \MBCFM #V[[^
    
    
    
    
    JG MBCFMMFOHUI
    
     \
    
    
    
    
    
    
    
    
    MBCFM
    
    O
    
    
    
    
    ^
    
    
    
    
    SFUVSO
    MBCFM
    ^ FizzBuzz
14. まとめ：FizzBuzz だけでも奥が深い • 単純に書くだけでもいいけど、工夫するとさらに楽しい！ • 順番に出力するだけで満足しててもいいけど • 関数的に書いて見る、クラスを作る • もっとできます • イテレーター / ジェネレーターにしてみる • リアクティブプログラミング • 並列プログラミング • FizzBuzz サーバー • ✌頭の体操は楽しい！✌