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
980
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
710
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Other Decks in Technology
See All in Technology
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
260
Leveraging Open-Source Tools for Creating 3D Tiles in the Urban Environment
simboss
PRO
0
120
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
570
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
JEDAI Databricks Free Editionもくもく会
taka_aki
1
110
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
180
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
800
怖くない!はじめてのClaude Code
shinya337
0
200
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
280
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Unsuck your backbone
ammeep
671
58k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Fireside Chat
paigeccino
37
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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 ためしてください!