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
フロントエンドのエコシステム / Frontend Ecosystem
Search
Toshihisa Tomatsu
June 21, 2020
Programming
8
3.1k
フロントエンドのエコシステム / Frontend Ecosystem
チャリティーカンファレンス沖縄2020 フロントエンド編の資料です。
https://charity-conf.okinawa.jp/
Toshihisa Tomatsu
June 21, 2020
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.9k
Service Workerとブラウザでの通知について
10shi10ma
3
290
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
700
Other Decks in Programming
See All in Programming
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
360
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
ミリしらMCP勉強会
watany
2
420
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
読もう! Android build ドキュメント
andpad
1
240
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
3.8k
ニックトレイン登壇資料
ryotakurokawa
0
140
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How GitHub (no longer) Works
holman
314
140k
Rails Girls Zürich Keynote
gr2m
94
13k
It's Worth the Effort
3n
184
28k
The Pragmatic Product Professional
lauravandoore
33
6.5k
KATA
mclloyd
29
14k
A Philosophy of Restraint
colly
203
16k
BBQ
matthewcrist
88
9.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Transcript
ϑϩϯτΤϯυͷΤίγεςϜ αΠϘζגࣜձࣾ 5PTIJIJTB5PNBUTV νϟϦςΟΧϯϑΝϨϯεԭೄ7PM'SPOUFOE
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ 'SPOUFOE&YQFSU5FBN ౦ژˠѪඤ !UPTIJUPNB !UPTIJ@@UPNB
ΤίγεςϜ
ʁ ʁ ͠ΤίγεςϜͷج൫͕ແ͔ͬͨΒʁ
έʔε ϓϩμΫτͰͷྫ
Hex #1F1F1F αΠϘζ͕ఏڙ͢ΔLJOUPOF w ΤίγεςϜ͕ॏཁͳϓϩμΫτ w LJOUPOF͕3&45"1*+4"1*Λఏڙ͓ͯ͠Γɺ +BWB4DSJQUͰΧελϚΠζ͕Մೳ w ༷ʑͳ࿈ܞαʔϏεϓϥάΠϯ͕શࠃ֤Ͱൢചɾ։ൃ
͞ΕɺΤίγεςϜ͕͕͍ͬͯΔ
Ϣʔβʔ͕+BWB4DSJQU$44Λ ॻ͖ɺϓϥάΠϯΛ։ൃͰ͖Δʂ
͠ΤίγεςϜ͕ແ͔ͬͨΒʁ
͠ΤίγεςϜ͕ແ͔ͬͨΒʁ શͯϓϩμΫτଆͰػೳΛ࣮͠ͳ͍ͱ
͠ΤίγεςϜ͕ແ͔ͬͨΒʁ શͯϓϩμΫτଆͰػೳΛ࣮͠ͳ͍ͱ ͜ͷϢʔεέʔεΛຬ͍ͨͨ͠
͠ΤίγεςϜ͕ແ͔ͬͨΒʁ શͯϓϩμΫτଆͰػೳΛ࣮͠ͳ͍ͱ ͜ͷϢʔεέʔεΛຬ͍ͨͨ͠ ͰɺͦΕϓϩμΫτͷํͱҧ͏͠
έʔε ϥΠϒϥϦͰͷྫ
ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυνΣοΫ͍ͨ͠ʯ
ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυνΣοΫ͍ͨ͠ʯ &4-JOUʹ13Λ͛Δ͔͠ʜ
&4-JOUʹ13Λ͛Δ͔͠ʜ &4-JOUϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυνΣοΫ͍ͨ͠ʯ
&4-JOUʹ13Λ͛Δ͔͠ʜ &4-JOUϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ Βͳ͔ͬͨʂͦΕͳΒ؆୯ͩ ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυνΣοΫ͍ͨ͠ʯ
ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυνΣοΫ͍ͨ͠ʯ &4-JOUʹ13Λ͛Δ͔͠ʜ &4-JOUϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ Βͳ͔ͬͨʂͦΕͳΒ؆୯ͩ ΤίγεςϜʹΑΓ ɾཁٻʹૉૣ͘ରԠͰ͖Δ ɾ༷ʑͳϢʔεέʔεʹରԠͰ͖Δ
ϑϩϯτΤϯυͷ༷ʑͳ ΤίγεςϜʹ͍ͭͯΔ͜ͱͰ ࠓޙͷ։ൃͰɺͦͷԸܙΛड͚ΒΕΔΑ͏ʹ
Hex #1F1F1F ϑϩϯτΤϯυͷΤίγεςϜʁ w 8FCΞϓϦΛ։ൃ͢Δࡍ w OQNΛϕʔεʹ༷ʑͳϥΠϒϥϦΛ׆༻ w ϥΠϒϥϦΛར༻͢Δࡍ w
QMVHJO QSFTFU BEEPO DPOpHͳͲΛ༗ࢤͷ։ൃऀ͕ ։ൃͯ͠ڞ༗ɾར༻
Hex #1F1F1F ϑϩϯτΤϯυΤίγεςϜͷϕʔεʹͳΔͷ OQN ։ൃ ίϛϡχςΟ 044
Hex #1F1F1F ϑϩϯτΤϯυΤίγεςϜͷϕʔεʹͳΔͷ OQN ։ൃ ίϛϡχςΟ 044 ϑϩϯτΤϯυͰͲΜͳΤίγεςϜ͕ ҭ͍ͬͯΔΜͩΖ͏
ͭͷΤίγεςϜ OQNΤίγεςϜ 1MVHJOΤίγεςϜ $POpHΤίγεςϜ 5ZQFΤίγεςϜ
OQNΤίγεςϜ
Hex #1F1F1F OQN w /PEF1BDLBHF.BOBHFS /PEFKTͷύοέʔδΛཧ͢Δ w ϨδετϦ IUUQTXXXOQNKTDPN
w ศརͳύοέʔδΛOQN ϨδετϦ ʹஔ͍ͯɺOQN ͷ$-* OQNJOTUBMM ͰΈΜͳ͕ར༻Ͱ͖Δ
Hex #1F1F1F 3FBDU 3FEVY XFCQBDL #BCFM +FTU 1SFUUJFS &4-JOU TUZMFEDPNQPOFUT
5ZQF4DSJQU ʁ ʁ ྫ͑3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌ SFBDUSPVUFS 'PSNJL BYJPT
Hex #1F1F1F BYJPT 3FBDU 3FEVY XFCQBDL #BCFM +FTU 1SFUUJFS &4-JOU
TUZMFEDPNQPOFUT 5ZQF4DSJQU ʁ ʁ ྫ͑3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌ SFBDUSPVUFS 'PSNJL )551$MJFOU ঢ়ଶཧ 6* Ϟδϡʔϧόϯυϥʔ τϥϯεύΠϥ ςετ ϑΥʔϚολʔ -JOUFS ελΠϦϯά 'PSN ϧʔςΟϯά ੩తܕ
OQNJOTUBMMYYY
Hex #1F1F1F ༷ʑͳ+BWB4DSJQUϞδϡʔϧΛΠϯετʔϧ͢Δ w ಛఆͷׂΛ࣋ͭখ͞ͳϥΠϒϥϦΛΈ߹ΘͤΔ͜ͱͰ 8FCΞϓϦͷ։ൃ͕ߦ͍͑ͯΔ w ੈքͷΤϯδχΞ͕ϥΠϒϥϦΛ+BWB4DSJQUͷϞδϡʔϧͱ ͯ͠࡞ͯ͠OQNͰެ։͢Δ w
OQN্ʹɺ༷ʑͳׂɾΛղܾ͢ΔϥΠϒϥϦ͕ʑެ ։͞ΕΔ
ʮϑϩϯτΤϯυͬͯ มԽܹ͍͠ΑͶʯ
Hex #1F1F1F ϑϩϯτΤϯυͷΤίγεςϜͱมԽ w OQNΛϕʔεʹɺΤίγεςϜ͕ख़ͯ͠ΔͷͰɺ͜Ε ·ͰͷΛղܾ͢Δͷ͕ੜ·Εɺ͏ͷมԽ͢Δ ςετ 6*ͷߏங ϧʔςΟϯά 'PSN
ঢ়ଶཧ ελΠϦϯά 3FBDU
ΤίγεςϜ͕ख़͍ͯ͠Δ͔Βͦ͜ কདྷɺҠߦ͍͢͠Α͏ʹ͢Δ
Hex #1F1F1F Ҡߦ͍͢͠ %0.ͷߏஙํ๏ΛผͷϥΠϒϥϦʹҠߦ͍ͨ͠߹Ͳ͕ͬͪΓ͍͢ʁ FYI: ܦྼԽʹ͑Δ ReactComponent ͷॻ͖ํ | Qiita
https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a
1MVHJOΤίγεςϜ
Hex #1F1F1F 1MVHJOΤίγεςϜ w &4-JOU #BCFM XFCQBDLͳͲͷϥΠϒϥϦɺ QMVHJOͱ͍͏ΈΛ༻ҙ͍ͯ͠Δ w ༷ʑͳϢʔεέʔεʹରԠ͢Δ͜ͱ͕Ͱ͖Δ
w ϥΠϒϥϦຊମͰରԠ͠ͳͯ͘ɺ༗ࢤͷ։ൃऀ͕ศརͳ QMVHJOΛ࡞Δ͜ͱͰɺ༷ʑͳ͜ͱ͕ՄೳʹͳΔ
Hex #1F1F1F 1MVHHBCMFͳϥΠϒϥϦ&4-JOUͷྫ https://eslint.org/docs/developer-guide/architecture FTMJOUQMVHJOYYY
Hex #1F1F1F 1MVHHBCMFͳϥΠϒϥϦ#BCFMͷྫ 1BSTF 5SBWFSTF 5SBOTGPSN (FOFSBUF CBCFMQMVHJOYYY $PEF "45
5SBOTGPSNFE"45 $PEF
Hex #1F1F1F ྫ͑ɺʓʓνΣοΫ͍ͨ͠ &4-JOU +BWB4DSJQUͷ-JOUFS ϐϡΞͳ+BWB4DSJQUίʔυ 3FBDUKTίʔυ 7VFKTίʔυ 5ZQF4DSJQUίʔυ
Hex #1F1F1F ྫ͑ɺʓʓνΣοΫ͍ͨ͠ &4-JOU +BWB4DSJQUͷ-JOUFS ϐϡΞͳ+BWB4DSJQUίʔυ 3FBDUKTίʔυ 7VFKTίʔυ 5ZQF4DSJQUίʔυ &4-JOU$PSF3VMFT
FTMJOUQMVHJOSFBDU FTMJOUQMVHJOWVF !UZQFTDSJQUFTMJOU FTMJOUQMVHJO
Hex #1F1F1F ༷ʑͳϢʔεέʔεʹରԠ͢Δ &4-JOU KTYͷBZͷνΣοΫ &4.ͷJNQPSUFYQPSU ͷνΣοΫ FTMJOUQMVHJOKTYBZ FTMJOUQMVHJOJNQPSU FTMJOUQMVHJOͷνΣοΫ
FTMJOUQMVHJOFTMJOUQMVHJO /PEF4FDVSJUZνΣπΫ FTMJOUQMVHJOTFDVSJUZ
Hex #1F1F1F ͦͷଞͷϥΠϒϥϦ w XFCQBDLQMVHJO w 4UPSZCPPL"EEPOT w K2VFSZ1MVHJO w
3FEVY.JEEMFXBSF FUD
1MVHJO։ൃऀ+BWB4DSJQUͷϞδϡʔϧͱͯ͠ 1MVHJOΛ࡞ͯ͠ɺOQNʹެ։ 1MVHJOͷଘࡏʹΑΓɺ༷ʑͳϢʔεέʔεʹ ϥΠϒϥϦ͕ରԠ͢Δ͜ͱ͕Ͱ͖Δ
$POpHΤίγεςϜ
ʮϑϩϯτΤϯυͬͯ ڥߏஙΔ͜ͱଟ͘ͳ͍ʁʯ
Hex #1F1F1F ڥߏஙઃఆ XFCQBDLDPOpHKT UTDPOpHKTPO KFTUDPOpHKT QSFUUJFSSDKT FTMJOUSDKT TUPSZCPPL CBCFMSDKTPO
TUZMFMJOUSDKT
Hex #1F1F1F ઃఆϑΝΠϧͷྫ FTMJOUSDKT ࣗͰશͯઃఆ͢Δͱେม
Hex #1F1F1F $POpHΤίγεςϜ w &4-JOUͷ4IBSFBCMF$POpH w ઃఆΛڞ༗Ͱ͖Δ w #BCFM4UPSZCPPLͷ1SFTFUT w
؆୯ʹઃఆ͕ߦ͑Δ w ྫ͑ɺ3FBDUͷઃఆʹ w FTMJOUDPOpHSFBDUBQQ w !CBCFMQSFTFUSFBDU w !TUPSZCPPLQSFTFUDSFBUFSFBDUBQQ
Hex #1F1F1F ྫ &4-JOU4IBSFBCMF$POpHT
Hex #1F1F1F ྫ #BCFM1SFTFUT
Hex #1F1F1F ձࣾͷઃఆΛ࡞͢Δ͜ͱ IUUQTXXXOQNKTDPNQBDLBHF!DZCP[VFTMJOUDPOpH
༷ʑͳ1SFTFUT$POpH͕༻ҙ͞Εɺ OQN͔Βར༻Մೳʹͳ͍ͬͯΔ ઃఆָ͕ʹͳΔ
Hex #1F1F1F $SFBUF/FX1SPKFDU"VUPNBUJDTFUVQ $SFBUF/FX1SPKFDU DSFBUFSFBDUBQQNZBQQ WVFDSFBUFIFMMPXPSME OHOFXNZBQQ 4UPSZCPPL"VUPNBUJD4FUVQ OQYQ!TUPSZCPPLDMJTCJOJU
Hex #1F1F1F OQNJOJUJOJUJBMJ[FS DSFBUFSFBDUBQQ OQNJOJUSFBDUBQQNZBQQ DSFBUFOVYUBQQ OQNJOJUOVYUBQQNZOVYUBQQ !LJOUPOFDSFBUFQMVHJO OQNJOJU!LJOUPOFQMVHJONZQMVHJO
ศརͳ$-*ʹΑΓ ίϚϯυҰൃͰڥߏங͕Ͱ͖Δ ڥߏஙָ͕ʹͳΔ
5ZQFΤίγεςϜ
Hex #1F1F1F 5ZQFΤίγεςϜ w 5ZQF4DSJQUΛ࠾༻͢ΔϓϩδΣΫτ͕૿͍͑ͯΔ w ϥΠϒϥϦͷܕఆٛʁʁ 5ZQF4DSJQUʹɺ!UZQFTύοέʔδ %FpOJUFMZ5ZQFE
͕͋Δ
OQNJOTUBMM%!UZQFTYYY
Hex #1F1F1F ϥΠϒϥϦͷܕఆٛ EUT w ϥΠϒϥϦͷܕఆٛ EUT Λ༻ҙ͢Δʹʁ ϥΠϒϥϦຊମ͕ܕఆٛϑΝΠϧΛఏڙ͢Δ
༗ࢤ͕ܕఆٛϑΝΠϧΛ࡞ͬͯڞ༗͢Δ
Hex #1F1F1F %FpOJUFMZ5ZQFE w શͯͷύοέʔδΛಠཱͨͭ͠ͷϦϙδτϦͰཧ w IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFE w ϥΠϒϥϦຊମͰܕఆٛϑΝΠϧΛ༻ҙ͞Ε͍ͯͳ͍߹ ɺ༗ࢤ͕࡞ɾϝϯςφϯεΛߦ͏
Hex #1F1F1F ϥΠϒϥϦͷܕఆٛͱͯ͠ͷΤίγεςϜ w ࠷ۙొͨ͠IFHFMͱ͍͏+4ͷܕνΣοΧʔ 5ZQF4DSJQUͷܕఆٛϑΝΠϧΛར༻Ͱ͖Δ w IUUQTIFHFMKTPSHEPDTMJCSBSJFT w 5ZQF4DSJQUʹݶΒͣɺϥΠϒϥϦͷܕఆٛ
ΤίγεςϜͱͯ͠ॏཁͳଘࡏʹͳ͍͖ͬͯͦ͏
·ͱΊ
Hex #1F1F1F ·ͱΊ w ϑϩϯτΤϯυʹ༷ʑͳΤίγεςϜ͕͋Γ 8FCΞϓϦ։ൃϥΠϒϥϦͷར༻Λࢧ͍͑ͯΔ w OQN 1MVHJO $POpH
5ZQFΛΩʔϫʔυʹ ͍͔ͭ͘ͷΤίγεςϜʹ͍ͭͯઆ໌ͨ͠ w ࠓޙɺ͜ΕΒͷԸܙΛड͚ɺศརʹ։ൃ͍ͯ͜͠͏ʂ
5)"/,:06