Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
List processing in JS: functional programming approach
Search
chikoski
December 28, 2016
Technology
0
560
List processing in JS: functional programming approach
chikoski
December 28, 2016
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
200
festudy02-wasm
chikoski
1
900
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
620
Functions in JavaScript
chikoski
1
1k
20171018-WASM
chikoski
2
1.2k
20171002-wejs
chikoski
1
510
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.2k
いまさら振り返るPromise
chikoski
1
470
Other Decks in Technology
See All in Technology
NgRx Signal Store
rainerhahnekamp
0
120
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
PHPカンファレンス小田原2024
ysknsid25
3
660
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
140
反実仮想機械学習とは何か
usaito
PRO
7
2.3k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
700
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
Postman v10リリース後を振り返る
nagix
0
130
現代CSSフレームワークの内部実装とその仕組み
poteboy
4
1.4k
Algyan イベント振り返り
linyixian
0
190
Featured
See All Featured
Visualization
eitanlees
135
14k
Rails Girls Zürich Keynote
gr2m
91
13k
For a Future-Friendly Web
brad_frost
171
8.9k
Optimizing for Happiness
mojombo
370
69k
Making Projects Easy
brettharned
108
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
The Cult of Friendly URLs
andyhume
74
5.7k
GraphQLとの向き合い方2022年版
quramy
31
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Clear Off the Table
cherdarchuk
83
310k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Thoughts on Productivity
jonyablonski
57
3.8k
Transcript
リスト操作と関数プログラミング Mozilla Japan N.Shimizu (
[email protected]
) We are JavaScripters #2
/4IJNJ[V!DIJLPTLJ ˖ ⛆加㖩ח֮8FC⡲⠓爡ד⫴ְגְתׅ ˖ Ĥ Ĥ ˘ ̔խĥ ˖ 'JSFGPY
%FW5PPMT 'JSFGPYGPSJ04 ˖ 3VTUBTNKT8FC"TTFNCMZ8FC73 ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅ךָ㥨ֹדׅ ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
debugger.html:再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます •
Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html
Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF%FCVHHJOH1SPUPDPM $ISPNF%FCVHHJOH1SPUPDPM
3FNPUF%FCVHHJOH1SPUPDPM
&EJUPS 3JHIU4JEF#BS React x Redux 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF
目的 ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール
webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン
https://github.com/devtools-html/debugger.html
コマンドライン "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO= TUBSUEFCVHHFSTFSWFS1EFWFMPQNFOU "QQMJDBUJPOT(PPHMF=$ISPNFBQQ$POUFOUT.BD04(PPHMF=$ISPNF= SFNPUFEFCVHHJOHQPSU OPEFJOTQFDUNZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動
コマンドライン OQNJOTUBMMHZBSO HJUDMPOFHJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU DEEFCVHHFSIUNM ZBSOJOTUBMM ZBSOSVO ZBSOSFGPY ZBSODISPNF OPEFJOTQFDUFYBNQMFTDSJQUKT debugger.htmlを利用するには
JSON <\ EFTDSJQUJPO EFWUPPMT'SPOUFOE6SMEFWUPPMTJOTQFDUPSIUNM XTMPDBMIPTU EFWUPPMTQBHFDBGBEBBCDG GBWJDPO6SMIUUQTXXXHPPHMFDPNJNBHFTJDPOTQSPEVDUDISPNFQOH
JEDBGBEBBCDG UJUMFأة٦زؖ؎س UZQFQBHF VSMIUUQTXXXHPPHMFDPNJOUMKBDISPNFCSPXTFSXFMDPNFIUNM XFC4PDLFU%FCVHHFS6SMXTMPDBMIPTUEFWUPPMTQBHF DBGBEBBCDG ^> Chromeで開いているタブの一覧は、JSONで取得できます
DPOTUQBOFMT\ 'JSFGPYUIJTSFOEFS'JSFGPY1BOFM $ISPNFUIJTSFOEFS$ISPNF1BOFM /PEFUIJTSFOEFS/PEF1BOFM ^ TOJQ QBOFMT<UIJTTUBUFTFMFDUFE1BOF>
UBCTWBMVF4FR NBQ UBCEPNMJ \DMBTT/BNFUBC LFZUBCHFU JE PO$MJDL \ XJOEPXMPDBUJPO HFU5BC63- UBC QBSBN/BNF ^ ^ EPNEJW \DMBTT/BNFUBCUJUMF^ UBCHFU UJUMF EPNEJW \DMBTT/BNFUBCVSM^ UBCHFU VSM 開いているタブ一覧の描画部分
DPOTUMJTU< ˘ > MFUTVN GPS
MFUJJMJTUMFOHUIJ \ JG MJTU<J> \ TVN.BUIQPX MJTU<> TVN ^ ^ DPOTPMFMPH Aַתדךך⩐侧ך✳⛦ㄤכ\TVN^A タブの描画はこれと同じ構造をしています
GVODUJPOBEE B C \ SFUVSOB C ^ WBSBEEGVODUJPO B C
\ SFUVSOB C ^ WBSBEE B C B C DPOTPMFMPH A \BEE ^A JavaScriptで関数は値です
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 値なので、オブジェクトの属性にできます
GVODUJPOIFMMP OBNF \ SFUVSOA)FMMP \OBNF^A ^ GVODUJPOHSFFUJOHT OBNF NFTTBHF#VJMEFS \
DPOTPMFMPH NFTTBHF#VJMEFS OBNF ^ HSFFUJOHT XPSME IFMMP 高階関数:関数を引数にとったり、関数を返したりする関数
DPOTUMJTU< ˘ > DPOTUJT&WFO/VNCFSOO DPOTUQPXO.BUIQPX
O DPOTUBEE B C B C DPOTUTVNMJTUMUFS JT&WFO/VNCFS NBQ QPX SFEVDF BEE DPOTPMFMPH Aַתדךך⩐侧ך✳⛦ㄤכ\TVN^A 高階関数を使うと、リスト処理がキレイにかけます
DPOTUMJTU< > GVODUJPOJT&WFO/VNCFS O \ SFUVSOO ^ DPOTUFWFO/VNCFST
MJTUGJMUFS JT&WFO/VNCFS Array.prototype.filter:関数の評価値が true のものを集めた新しい配列を作成する USVF GBMTF
DPOTUMJTU< > GVODUJPOBEE B C \ SFUVSOB C
^ DPOTUTVNMJTUSFEVDF BEE B C B C B C Array.prototype.reduce:左畳み込み
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つに関数を適用して、その結果を集めた新しい配列を作ります
Viewの作成
DPOTUFOEQPJOUAIUUQTBQJOZUJNFTDPNTWDUPQTUPSJFTW IPNFKTPO BQJLFZ\BQJ,FZ^A DPOTUDPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS GFUDI FOEQPJOU UIFO SFTQPOTFSFTQPOTFKTPO
UIFO EBUBEBUBSFTVMUT UIFO BSUJDMFTSFOEFS BSUJDMFT UIFO SFOEFSFEDPOUBJOFSBQQFOE$IJME SFOEFSFE New York Times の新着記事一覧の取得
GVODUJPOSFOEFS BSUJDMFT \ DPOTUDPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS SFUVSOBSUJDMFTNBQ BSUJDMFSFOEFS"SUJDMF BSUJDMF
VOTIJGU EPDVNFOUDSFBUF'SBHNFOU SFEVDF QBSFOU FMN \ QBSFOUBQQFOE$IJME FMN SFUVSOQBSFOU ^ ^ レンダリング:記事を表すオブジェクトを、HTMLElementNodeに変換することと捉える
GVODUJPOSFOEFS"SUJDMF BSUJDMF \ DPOTUUFNQMBUFEPDVNFUORVFSZ4FMFDUPS UFNQMBUFBSUJDMF DPOTUNFEJBBSUJDMFNFEJBOE NNGPSNBUUIVNCOBJM UFNQMBUFRVFSZ4FMFDUPS
UIVNCOBJM TSDNFEBVSM UFNQMBUFRVFSZ4FMFDUPS UJUMF UFYU$POUFOUBSUJDMFUJUMF SFUVSOEPDVNFOUJNQPSU/PEF UFNQMBUF USVF ^ 各記事のレンダリング例
まとめ • map / reduce は強力なフレームワークです • ほとんどの繰り返し処理をこれで記述できます • 繰り返す処理にのみ注力してプログラムをかけます
• つまりコードが読みやすくなる • filter / find を使うとキレイに必要なデータだけを抜き出せます • 元の配列を破壊しません • プログラム中の、ほかの部分への影響を与えなません • デバッグがしやすくなります • debugger.html ためしてください!