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
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
420
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
940
AWSで始める実践Dagster入門
kitagawaz
1
620
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
570
いま注目のAIエージェントを作ってみよう
supermarimobros
0
290
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLとの向き合い方2022年版
quramy
49
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Documentation Writing (for coders)
carmenintech
74
5k
Typedesign – Prime Four
hannesfritz
42
2.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Code Review Best Practice
trishagee
70
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.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 ためしてください!