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
2.9k
フロントエンドのエコシステム / 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.7k
Service Workerとブラウザでの通知について
10shi10ma
3
230
意外に知らないnpmと便利なCLI
10shi10ma
8
2.1k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
10k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
930
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.4k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.8k
React+Storybook ことはじめ
10shi10ma
8
2.3k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
540
Other Decks in Programming
See All in Programming
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
950
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
200
GitHub Copilotのススメ
marcy731
1
200
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
雑に思考を整理する技術と効能
konifar
60
29k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Fast JSX: Don't clone props object #28768
yossydev
1
130
SIMD Parallel Programming with the Vector API
josepaumard
0
200
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
2
120
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
305
41k
Design by the Numbers
sachag
274
18k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
RailsConf 2023
tenderlove
4
540
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Unsuck your backbone
ammeep
663
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Faster Mobile Websites
deanohume
299
30k
Git: the NoSQL Database
bkeepers
PRO
422
63k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
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