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.8k
Service Workerとブラウザでの通知について
10shi10ma
3
270
意外に知らないnpmと便利なCLI
10shi10ma
8
2.2k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.7k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.4k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
650
Other Decks in Programming
See All in Programming
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.4k
useSyncExternalStoreを使いまくる
ssssota
6
1k
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
260
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180
CSC509 Lecture 14
javiergs
PRO
0
130
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
Symfony Mapper Component
soyuka
2
730
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
7k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
How to Ace a Technical Interview
jacobian
276
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Optimising Largest Contentful Paint
csswizardry
33
3k
Documentation Writing (for coders)
carmenintech
66
4.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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