Tweet
Tweet

Slide 1

Slide 1 text

リスト操作と関数プログラミング Mozilla Japan N.Shimizu ([email protected]) We are JavaScripters #2

Slide 2

Slide 2 text

/4IJNJ[V!DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ ˖ Ĥ Ĥ ˘ ̔խĥ ˖ 'JSFGPY %FW5PPMT 'JSFGPYGPSJ04 ˖ 3VTUBTNKT8FC"TTFNCMZ8FC73 ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ

Slide 3

Slide 3 text

debugger.html：再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます • Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html

Slide 4

Slide 4 text

Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF%FCVHHJOH1SPUPDPM $ISPNF%FCVHHJOH1SPUPDPM 3FNPUF%FCVHHJOH1SPUPDPM

Slide 5

Slide 5 text

&EJUPS 3JHIU4JEF#BS React x Redux 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF

Slide 6

Slide 6 text

目的 ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン

Slide 7

Slide 7 text

https://github.com/devtools-html/debugger.html

Slide 8

Slide 8 text

コマンドライン "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO=
 TUBSUEFCVHHFSTFSWFS1EFWFMPQNFOU "QQMJDBUJPOT(PPHMF=$ISPNFBQQ$POUFOUT.BD04(PPHMF=$ISPNF= SFNPUFEFCVHHJOHQPSU OPEFJOTQFDUNZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動

Slide 9

Slide 9 text

コマンドライン OQNJOTUBMMHZBSO HJUDMPOFHJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU DEEFCVHHFSIUNM ZBSOJOTUBMM ZBSOSVO ZBSOSFGPY ZBSODISPNF OPEFJOTQFDUFYBNQMFTDSJQUKT debugger.htmlを利用するには

Slide 10

Slide 10 text

JSON <\ EFTDSJQUJPO  EFWUPPMT'SPOUFOE6SMEFWUPPMTJOTQFDUPSIUNM XTMPDBMIPTU EFWUPPMTQBHFDBGBEBBCDG  GBWJDPO6SMIUUQTXXXHPPHMFDPNJNBHFTJDPOTQSPEVDUDISPNFQOH  JEDBGBEBBCDG  UJUMFأة٦زؖ؎س  UZQFQBHF  VSMIUUQTXXXHPPHMFDPNJOUMKBDISPNFCSPXTFSXFMDPNFIUNM  XFC4PDLFU%FCVHHFS6SMXTMPDBMIPTUEFWUPPMTQBHF DBGBEBBCDG ^> Chromeで開いているタブの一覧は、JSONで取得できます

Slide 11

Slide 11 text

DPOTUQBOFMT\ 'JSFGPYUIJTSFOEFS'JSFGPY1BOFM  $ISPNFUIJTSFOEFS$ISPNF1BOFM  /PEFUIJTSFOEFS/PEF1BOFM ^ TOJQ QBOFMT   UBCTWBMVF4FR NBQ UBCEPNMJ  \DMBTT/BNFUBC  LFZUBCHFU JE  PO$MJDL \ XJOEPXMPDBUJPO HFU5BC63- UBC QBSBN/BNF  ^ ^  EPNEJW \DMBTT/BNFUBCUJUMF^  UBCHFU UJUMF  EPNEJW \DMBTT/BNFUBCVSM^  UBCHFU VSM   開いているタブ一覧の描画部分

Slide 12

Slide 12 text

DPOTUMJTU<     ˘  > MFUTVN GPS MFUJJMJTUMFOHUIJ \ JG MJTU \ TVN.BUIQPX MJTU<>   TVN ^ ^ DPOTPMFMPH Aַ׵תדך꟦ך⩐侧ך✳⛦ㄤכ\TVN^A  タブの描画はこれと同じ構造をしています

Slide 13

Slide 13 text

GVODUJPOBEE B C \ SFUVSOB C ^ WBSBEEGVODUJPO B C \ SFUVSOB C ^ WBSBEE B C B C DPOTPMFMPH A \BEE   ^A  JavaScriptで関数は値です

Slide 14

Slide 14 text

DPOTUPQFSBUJPO\ BEE B C B C  TVC B C BC  NVM B C B C  EJW B C BC  ^ PQFSBUJPOBEE    PQFSBUJPOTVC    PQFSBUJPONVM    PQFSBUJPOEJW    DPOTUPQFSBUJPOOFX.BQ < <BEE  B C B C>  <TVC  B C BC>  <NVM  B C B C>  <EJW  B C BC>  >  PQFSBUJPOHFU BEE    PQFSBUJPOHFU TVC    PQFSBUJPOHFU NVM    PQFSBUJPOHFU EJW    値なので、オブジェクトの属性にできます

Slide 15

Slide 15 text

GVODUJPOIFMMP OBNF \ SFUVSOA)FMMP \OBNF^A ^ GVODUJPOHSFFUJOHT OBNF NFTTBHF#VJMEFS \ DPOTPMFMPH NFTTBHF#VJMEFS OBNF  ^ HSFFUJOHT XPSME IFMMP  高階関数：関数を引数にとったり、関数を返したりする関数

Slide 16

Slide 16 text

DPOTUMJTU<     ˘  > DPOTUJT&WFO/VNCFSOO DPOTUQPXO.BUIQPX O   DPOTUBEE B C B C DPOTUTVNMJTUMUFS JT&WFO/VNCFS  NBQ QPX  SFEVDF BEE  DPOTPMFMPH Aַ׵תדך꟦ך⩐侧ך✳⛦ㄤכ\TVN^A  高階関数を使うと、リスト処理がキレイにかけます

Slide 17

Slide 17 text

DPOTUMJTU<   > GVODUJPOJT&WFO/VNCFS O \ SFUVSOO ^ DPOTUFWFO/VNCFST MJTUGJMUFS JT&WFO/VNCFS  Array.prototype.filter：関数の評価値が true のものを集めた新しい配列を作成する     USVF GBMTF  

Slide 18

Slide 18 text

DPOTUMJTU<   > GVODUJPOBEE B C \ SFUVSOB C ^ DPOTUTVNMJTUSFEVDF BEE      B C     B C      B C  Array.prototype.reduce：左畳み込み

Slide 19

Slide 19 text

GVODUJPOSBOHF GSPN UP \ DPOTUTJ[FUPGSPN  SFUVSO"SSBZ TJ[F MM   NBQ WBMVF JOEFY JOEFY GSPN  ^ DPOTUTVNSBOHF   MUFS OO  SFEVDF B C B C  DPOTPMFMPH Aַ׵תדך꟦ך⩐侧ך筨ㄤכ\TVN^A  map：配列の要素1つ1つに関数を適用して、その結果を集めた新しい配列を作ります

Slide 20

Slide 20 text

Viewの作成

Slide 21

Slide 21 text

DPOTUFOEQPJOUAIUUQTBQJOZUJNFTDPNTWDUPQTUPSJFTW IPNFKTPO BQJLFZ\BQJ,FZ^A DPOTUDPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS  GFUDI FOEQPJOU UIFO SFTQPOTFSFTQPOTFKTPO  UIFO EBUBEBUBSFTVMUT  UIFO BSUJDMFTSFOEFS BSUJDMFT  UIFO SFOEFSFEDPOUBJOFSBQQFOE$IJME SFOEFSFE  New York Times の新着記事一覧の取得

Slide 22

Slide 22 text

GVODUJPOSFOEFS BSUJDMFT \ DPOTUDPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS  SFUVSOBSUJDMFTNBQ BSUJDMFSFOEFS"SUJDMF BSUJDMF  VOTIJGU EPDVNFOUDSFBUF'SBHNFOU  SFEVDF QBSFOU FMN \ QBSFOUBQQFOE$IJME FMN  SFUVSOQBSFOU ^  ^ レンダリング:記事を表すオブジェクトを、HTMLElementNodeに変換することと捉える

Slide 23

Slide 23 text

GVODUJPOSFOEFS"SUJDMF BSUJDMF \ DPOTUUFNQMBUFEPDVNFUORVFSZ4FMFDUPS UFNQMBUFBSUJDMF  DPOTUNFEJBBSUJDMFNFEJBOE NNGPSNBUUIVNCOBJM  UFNQMBUFRVFSZ4FMFDUPS UIVNCOBJM TSDNFEBVSM UFNQMBUFRVFSZ4FMFDUPS UJUMF UFYU$POUFOUBSUJDMFUJUMF SFUVSOEPDVNFOUJNQPSU/PEF UFNQMBUF USVF  ^ 各記事のレンダリング例

Slide 24

Slide 24 text

まとめ • map / reduce は強力なフレームワークです • ほとんどの繰り返し処理をこれで記述できます • 繰り返す処理にのみ注力してプログラムをかけます • つまりコードが読みやすくなる • filter / find を使うとキレイに必要なデータだけを抜き出せます • 元の配列を破壊しません • プログラム中の、ほかの部分への影響を与えなません • デバッグがしやすくなります • debugger.html ためしてください！