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
260
意外に知らないnpmと便利なCLI
10shi10ma
8
2.2k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.6k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.9k
React+Storybook ことはじめ
10shi10ma
8
2.4k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
640
Other Decks in Programming
See All in Programming
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
6
1.7k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Jakarta EE meets AI
ivargrimstad
0
380
Better Code Design in PHP
afilina
PRO
0
130
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
9
1.4k
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
みんなでプロポーザルを書いてみた
yuriko1211
0
290
Jakarta EE meets AI
ivargrimstad
0
300
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
7
1.8k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
310
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
230
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
5
850
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Building an army of robots
kneath
302
43k
Rails Girls Zürich Keynote
gr2m
94
13k
RailsConf 2023
tenderlove
29
910
What's in a price? How to price your products and services
michaelherold
243
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Teambox: Starting and Learning
jrom
133
8.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
850
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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