List processing in JS: functional programming approach

Transcript

1. リスト操作と関数プログラミング Mozilla Japan N.Shimizu (nshimizu@mozilla-japan.org) We are JavaScripters #2
2. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ Ĥ
   Ĥ
   ˘
   ̔խ
   ĥ
   ˖ 'JSFGPY
   %FW5PPMT
   'JSFGPY
   GPS
   J04
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
3. debugger.html：再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます • Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html
4. Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF
   %FCVHHJOH
   1SPUPDPM $ISPNF
   %FCVHHJOH
   1SPUPDPM 3FNPUF
   %FCVHHJOH
   1SPUPDPM
5. &EJUPS 3JHIU4JEF#BS React x Redux 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF
6. 目的 ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン
7. https://github.com/devtools-html/debugger.html
8. コマンドライン 
   "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO
   =

   
   
   
   
   
   TUBSUEFCVHHFSTFSWFS
   
   1
   EFWFMPQNFOU
   
   "QQMJDBUJPOT(PPHMF=
   $ISPNFBQQ$POUFOUT.BD04(PPHMF=
   $ISPNF
   =
   
   
   
   
   
   
   SFNPUFEFCVHHJOHQPSU
   
   OPEF
   JOTQFDU
   NZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動
9. コマンドライン 
   OQN
   JOTUBMM
   H
   ZBSO
   
   HJU
   DMPOF
   HJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU
   
   DE
   EFCVHHFSIUNM
   
   ZBSO
   JOTUBMM
   
   ZBSO
   SVO
   
   
   ZBSO
   SFGPY
   
   ZBSO
   DISPNF
   
   OPEF
   JOTQFDU
   FYBNQMFTDSJQUKT debugger.htmlを利用するには
10. JSON <
    \
    
    
    
    EFTDSJQUJPO
    
    
    
    
    EFWUPPMT'SPOUFOE6SM
    EFWUPPMTJOTQFDUPSIUNM XTMPDBMIPTU EFWUPPMTQBHFDBGBEBBCDG
    
    
    
    GBWJDPO6SM
    IUUQTXXXHPPHMFDPNJNBHFTJDPOTQSPEVDUDISPNFQOH
    
    
    
    JE
    DBGBEBBCDG
    
    
    
    UJUMF
    أة٦ز
    ؖ؎س
    
    
    
    UZQF
    QBHF
    
    
    
    VSM
    IUUQTXXXHPPHMFDPNJOUMKBDISPNFCSPXTFSXFMDPNFIUNM
    
    
    
    XFC4PDLFU%FCVHHFS6SM
    XTMPDBMIPTUEFWUPPMTQBHF DBGBEBBCDG
    ^> Chromeで開いているタブの一覧は、JSONで取得できます
11. DPOTU
    QBOFMT
    
    \
    
    
    'JSFGPY
    UIJTSFOEFS'JSFGPY1BOFM
    
    
    $ISPNF
    UIJTSFOEFS$ISPNF1BOFM
    
    
    /PEF
    UIJTSFOEFS/PEF1BOFM
    ^
    
    TOJQ
    QBOFMT<UIJTTUBUFTFMFDUFE1BOF>
    
    UBCTWBMVF4FR NBQ UBC
    
    EPNMJ
    
    
    \
    DMBTT/BNF
    UBC
    
    
    
    
    LFZ
    UBCHFU JE
    
    
    
    
    PO$MJDL
    
    
    \
    
    
    
    
    
    
    
    XJOEPXMPDBUJPO
    
    
    
    
    
    
    
    
    
    
    
    HFU5BC63- UBC
    QBSBN/BNF 
    
    
    
    
    
    ^
    
    
    ^
    
    
    EPNEJW \
    DMBTT/BNF
    UBCUJUMF
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    UBCHFU UJUMF
    
    
    EPNEJW \
    DMBTT/BNF
    UBCVSM
    ^
    
    
    
    
    
    
    
    
    
    
    
    UBCHFU VSM
    
    開いているタブ一覧の描画部分
12. DPOTU
    MJTU
    
    <
    
    
    
    
    ˘
    
    
    >
    MFU
    TVN
    
    
    GPS MFU
    J
    
    
    J
    
    MJTUMFOHUI
    J \
    
    
    JG MJTU<J>
    
    
     \
    
    
    
    
    TVN
    
    .BUIQPX MJTU<>
    
    
    TVN
    
    
    ^
    ^
    DPOTPMFMPH A
    ַ׵
    
    תדך꟦ך⩐侧ך✳⛦ㄤכ
    \TVN^A 
    タブの描画はこれと同じ構造をしています
13. GVODUJPO
    BEE B
    C \
    
    
    SFUVSO
    B
    
    C
    ^
    WBS
    BEE
    
    GVODUJPO B
    C \
    
    
    SFUVSO
    B
    
    C
    ^
    WBS
    BEE
    
    B
    C
    
    B
    
    C
    DPOTPMFMPH A
    
    
    
    \BEE 
     ^A  JavaScriptで関数は値です
14. DPOTU
    PQFSBUJPO
    
    \
    
    
    BEE
    B
    C
    
    B
    
    C
    
    
    TVC
    B
    C
    
    B
    
    C
    
    
    NVM
    B
    C
    
    B
    
    C
    
    
    EJW
    B
    C
    
    B
    
    C
    ^
    PQFSBUJPOBEE 
     
    
    
    PQFSBUJPOTVC 
     
    
    
    PQFSBUJPONVM 
     
    
    
    PQFSBUJPOEJW 
     
    
     DPOTU
    PQFSBUJPO
    
    OFX
    .BQ <
    
    
    <BEE
    B
    C
    
    B
    
    C>
    
    
    <TVC
    B
    C
    
    B
    
    C>
    
    
    <NVM
    B
    C
    
    B
    
    C>
    
    
    <EJW
    B
    C
    
    B
    
    C>
    > 
    PQFSBUJPOHFU BEE 
     
    PQFSBUJPOHFU TVC 
     
    PQFSBUJPOHFU NVM 
     
    PQFSBUJPOHFU EJW 
      値なので、オブジェクトの属性にできます
15. GVODUJPO
    IFMMP OBNF \
    
    
    SFUVSO
    A)FMMP
    \OBNF^A
    ^
    GVODUJPO
    HSFFUJOHT OBNF
    NFTTBHF#VJMEFS \
    
    
    DPOTPMFMPH NFTTBHF#VJMEFS OBNF 
    ^
    HSFFUJOHT XPSME
    IFMMP  高階関数：関数を引数にとったり、関数を返したりする関数
16. DPOTU
    MJTU
    
    <
    
    
    
    
    ˘
    
    
    >
    DPOTU
    JT&WFO/VNCFS
    
    O
    
    O
    
    
    
    DPOTU
    QPX
    
    O
    
    .BUIQPX O
     
    DPOTU
    BEE
    
    B
    C
    
    B
    
    C
    DPOTU
    TVN
    
    MJTUMUFS JT&WFO/VNCFS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    NBQ QPX
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFEVDF BEE 
    DPOTPMFMPH A
    ַ׵
    
    תדך꟦ך⩐侧ך✳⛦ㄤכ
    \TVN^A 
    高階関数を使うと、リスト処理がキレイにかけます
17. DPOTU
    MJTU
    
    <
    
    
    >
    GVODUJPO
    JT&WFO/VNCFS O \
    
    
    
    SFUVSO
    O
    
    
    
    
    ^
    DPOTU
    FWFO/VNCFST
    
    
    
    
    MJTUGJMUFS JT&WFO/VNCFS  Array.prototype.filter：関数の評価値が true のものを集めた新しい配列を作成する     USVF GBMTF  
18. DPOTU
    MJTU
    
    <
    
    
    >
    GVODUJPO
    BEE B
    C \
    
    
    SFUVSO
    B
    
    C
    ^
    DPOTU
    TVN
    
    MJTUSFEVDF BEE      B C     B C      B C  Array.prototype.reduce：左畳み込み
19. GVODUJPO
    SBOHF GSPN
    UP \
    
    
    DPOTU
    TJ[F
    
    UP
    
    GSPN
    
    
    
    
    SFUVSO
    "SSBZ TJ[F MM 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    NBQ WBMVF
    JOEFY
    
    JOEFY
    
    GSPN 
    ^
    DPOTU
    TVN
    
    SBOHF 
     MUFS O
    
    O
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFEVDF B
    C
    
    B
    
    C 
    DPOTPMFMPH A
    ַ׵
    
    תדך꟦ך⩐侧ך筨ㄤכ
    \TVN^A 
    map：配列の要素1つ1つに関数を適用して、その結果を集めた新しい配列を作ります
20. Viewの作成
21. DPOTU
    FOEQPJOU
    
    AIUUQTBQJOZUJNFTDPNTWDUPQTUPSJFTW IPNFKTPO BQJLFZ\BQJ,FZ^A
    DPOTU
    DPOUBJOFS
    
    
    EPDVNFOURVFSZ4FMFDUPS DPOUBJOFS 
    GFUDI FOEQPJOU UIFO SFTQPOTF
    
    SFTQPOTFKTPO
    
    
    UIFO EBUB
    
    EBUBSFTVMUT
    
    
    UIFO BSUJDMFT
    
    SFOEFS BSUJDMFT
    
    
    UIFO SFOEFSFE
    
    DPOUBJOFSBQQFOE$IJME SFOEFSFE  New York Times の新着記事一覧の取得
22. GVODUJPO
    SFOEFS BSUJDMFT \
    
    
    DPOTU
    DPOUBJOFS
    
    EPDVNFOURVFSZ4FMFDUPS DPOUBJOFS 
    
    
    SFUVSO
    BSUJDMFTNBQ BSUJDMF
    
    SFOEFS"SUJDMF BSUJDMF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VOTIJGU EPDVNFOUDSFBUF'SBHNFOU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFEVDF QBSFOU
    FMN
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    QBSFOUBQQFOE$IJME FMN 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    QBSFOU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^ 
    ^
    レンダリング:記事を表すオブジェクトを、HTMLElementNodeに変換することと捉える
23. GVODUJPO
    SFOEFS"SUJDMF BSUJDMF \
    
    
    DPOTU
    UFNQMBUF
    
    EPDVNFUORVFSZ4FMFDUPS UFNQMBUFBSUJDMF 
    
    
    DPOTU
    NFEJB
    
    BSUJDMFNFEJBOE N
    
    NGPSNBU
    
    UIVNCOBJM 
    
    
    UFNQMBUFRVFSZ4FMFDUPS UIVNCOBJM TSD
    
    NFEBVSM
    
    
    UFNQMBUFRVFSZ4FMFDUPS UJUMF UFYU$POUFOU
    
    BSUJDMFUJUMF
    
    SFUVSO
    EPDVNFOUJNQPSU/PEF UFNQMBUF
    USVF 
    ^
    
    各記事のレンダリング例
24. まとめ • map / reduce は強力なフレームワークです • ほとんどの繰り返し処理をこれで記述できます • 繰り返す処理にのみ注力してプログラムをかけます • つまりコードが読みやすくなる • filter / find を使うとキレイに必要なデータだけを抜き出せます • 元の配列を破壊しません • プログラム中の、ほかの部分への影響を与えなません • デバッグがしやすくなります • debugger.html ためしてください！