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 a...
Search
chikoski
December 28, 2016
Technology
0
590
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
310
festudy02-wasm
chikoski
1
990
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
730
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
590
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.5k
いまさら振り返るPromise
chikoski
1
560
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
320
slog.Handlerのよくある実装ミス
sakiengineer
4
420
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
860
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
160
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
270
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
540
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Become a Pro
speakerdeck
PRO
29
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Automating Front-end Workflow
addyosmani
1370
200k
Thoughts on Productivity
jonyablonski
70
4.8k
Building Adaptive Systems
keathley
43
2.7k
Speed Design
sergeychernyshev
32
1.1k
Docker and Python
trallard
46
3.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
4 Signs Your Business is Dying
shpigford
184
22k
Code Review Best Practice
trishagee
71
19k
Practical Orchestrator
shlominoach
190
11k
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 ためしてください!