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
280
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
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
680
Other Decks in Programming
See All in Programming
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
970
Unity Android XR入門
sakutama_11
0
180
sappoRo.R #12 初心者セッション
kosugitti
0
270
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
16
3.6k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.1k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
140
バッチを作らなきゃとなったときに考えること
irof
2
510
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
DROBEの生成AI活用事例 with AWS
ippey
0
140
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Fireside Chat
paigeccino
34
3.2k
Being A Developer After 40
akosma
89
590k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
KATA
mclloyd
29
14k
Code Review Best Practice
trishagee
67
18k
Scaling GitHub
holman
459
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
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