Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
歴史から学ぶ現代のフロントエンド
Search
Toshihisa Tomatsu
November 16, 2019
Technology
11k
17
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
歴史から学ぶ現代のフロントエンド
フロントエンドカンファレンス福岡2019 の資料です。
https://frontend-conf.fukuoka.jp/
Toshihisa Tomatsu
November 16, 2019
Transcript
82 slides
ྺ࢙͔ΒֶͿ ݱͷϑϩϯτΤϯυ αΠϘζגࣜձࣾ 5PTIJIJTB5PNBUTV ϑϩϯτΤϯυΧϯϑΝϨϯεԬ
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ͔ΒϑϩϯτΤϯυΛ࢝Ίͨ ౦ژˠѪඤ !UPTIJUPNB
!UPTIJ@@UPNB 2
ΞδΣϯμ ͡Ίʹ ྺ࢙͔ΒֶͿݱͷϑϩϯτΤϯυͱʁ 6*ϥΠϒϥϦ +BWB4DSJQUʹͱͬͯͷϞδϡʔϧ "45ͱपลπʔϧ ·ͱΊ 3
ྺ࢙͔ΒֶͿ ݱͷϑϩϯτΤϯυ 4
ݱͷϑϩϯτΤϯυ 5
͍·ϑϩϯτΤϯυΛΔͱ༷ʑͳٕज़ϥΠϒϥϦͱग़ձ͏ ݱͷϑϩϯτΤϯυ։ൃ ྫ 6 JNQPSUFYQPSU 3FBDU 3FEVY XFCQBDL #BCFM
+FTU 1SFUUJFS &4-JOU $44JO+4 OQN &$."4DSJQU 5ZQF4DSJQU ʁ ʁ
͍·ϑϩϯτΤϯυΛΔͱ༷ʑͳٕज़ϥΠϒϥϦͱग़ձ͏ ݱͷϑϩϯτΤϯυ։ൃ ྫ 7 JNQPSUFYQPSU 3FBDU 3FEVY XFCQBDL #BCFM
+FTU 1SFUUJFS &4-JOU $44JO+4 OQN &$."4DSJQU 5ZQF4DSJQU ʁ ʁ ੩తܕ͚ ৽͍༷͠ ঢ়ଶཧ 6* &4.PEVMFT Ϟδϡʔϧόϯυϥʔ τϥϯεύΠϥ ςετ ϑΥʔϚολʔ -JOUFS ελΠϦϯά ύοέʔδཧ
ʹ࢝ΊͨϑϩϯτΤϯυ ༷ʑͳπʔϧϥΠϒϥϦ͕ΘΕ͍ͯͨ ͳΜͱͳ͘ศརͦ͏ͳ͜ͱ͔Δ͚Ͳ ͳͥඞཁͳΜͩΖ͏ʁ͜ΕೖΕͳ͍ͱͩΊͳͷʁ υΩϡϝϯτʹ͋·Γॻ͔Ε͍ͯͳ͔ͬͨ Ͳ͜ΛௐͨΒ͍͍ΜͩΖ͏ʁ 8
ʹ࢝ΊͨϑϩϯτΤϯυ ༷ʑͳπʔϧϥΠϒϥϦ͕ΘΕ͍ͯͨ ͳΜͱͳ͘ศརͦ͏ͳ͜ͱ͔Δ͚Ͳ ͳͥඞཁͳΜͩΖ͏ʁ͜ΕೖΕͳ͍ͱͩΊͳͷʁ υΩϡϝϯτʹ͋·Γॻ͔Ε͍ͯͳ͔ͬͨ Ͳ͜ΛௐͨΒ͍͍ΜͩΖ͏ʁ Ͳ͏͍ͬͯ·ͷཧղΛਂΊΔʁ 9
ྺ࢙͔ΒֶͿ ݱͷϑϩϯτΤϯυ 10
ྺ࢙͔ΒֶͿ 11
“มߋલͱมߋޙΛൺֱͯ͠ɺͲ͏มΘͬͨͷ͔ɺ ͳͥมΘͬͨͷ͔Λߟ͑Δ͜ͱͰཧղ͕ਂ·Γ·͢ɻ” –ʮΤϯδχΞͷతੜ࢈ज़ ―ޮతʹֶͼɺཧ͠ɺΞτϓοτ͢Δʯඌ ହ (ஶ) ྺ࢙͔ΒֶͿ ΑΓ 12
ྺ࢙͔ΒֶͿ ݱͷϑϩϯτΤϯυ։ൃͰΘΕ͍ͯΔٕज़ϥΠϒϥϦ ͳͥඞཁͳͷ͔ʁ աڈͷͲ͏͍ͬͨΛղܾ͢ΔͨΊʹੜ·Εͨͷ͔ΛΓɺ ͍·ͱൺֱ͢Δ ྺ࢙Λֶɺ͍·Λਂ͘ཧղͰ͖Δ 13
αΠϘζͱ8FCϑϩϯτΤϯυ ͔Β#UP#ͷ8FCαʔϏεΛఏڙ ϓϩμΫτͷϑϩϯτΤϯυϨΨγʔ͔ΒϞμϯͳελοΫ ·Ͱ෯͍ 14
ϑϩϯτΤϯυΤΩεύʔτνʔϜ ϑϩϯτΤϯυΤΩεύʔτνʔϜͷׂ ֤ϓϩμΫτ๊͕͑ΔΛ୳ٻͯ͠ղܾ ࠷৽ٕज़ΛΩϟονΞοϓͯ͠ϓϩμΫτͰͷ׆༻Λ୳Δ FUD ϓϩμΫτΛԣஅͯ͠ϑϩϯτΤϯυͷͷղܾΛߦͳ͏ 15
16 IUUQTCMPHDZCP[VJPFOUSZ
αΠϘζ ϑϩϯτΤϯυ αΠϘζ աڈ͔Β͍· ͷ8FCϑϩϯτΤϯυ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ԣஅ৫ͱͯ͠ɺ༷ʑͳϓϩμΫτʹؔΘΔ ৭ʑͳ࣌ͷϑϩϯτΤϯυΛΕͨ 17
ࠓͷηογϣϯ ࣗྺ࢙ͷࣄऀͰͳ͍ ྺ࢙͕͍αΠϘζͷϓϩμΫτΛ௨ͯ͠ྺ࢙Λݟͨ ్த͔ΒࠓͷϑϩϯτΤϯυʹࢀೖͨ͠ ͍·ͷʮͳͥ͜͏ͳ͍ͬͯΔͷ͔ʯͱ͍͏ࢹΛ͍࣋ͬͯΔ ѻ͏ٕज़આ໌ɺࣗͷܦݧʹد͍ͬͯΔͷ͋Γ·͢ 18
ࠓ͢͜ͱ ϑϩϯτΤϯυͷʮ͍·ʯΛྺ࢙͔Βݟͯɺʮ͍·ͷٕज़ʯͷ ඞཁੑϝϦοτΛਂ΅Δ ओʹ6*ϥΠϒϥϦɺϞδϡʔϧɺ"45ͱपลπʔϧ ֤ٕज़͕ͲΜͳΛղܾͯ͘͠ΕΔͷ͔ ಛʹ࠷ۙɺϑϩϯτΤϯυΛ࢝Ίͨਓ͕ʮ͍·ʯΛཧղ͢Δख ॿ͚͕Ͱ͖Δͱخ͍͠ 19
6*ϥΠϒϥϦ
ݱ6*ϥΠϒϥϦ 3FBDU7VFɺ"OHVMBSͳͲͷϥΠϒϥϦϑϨʔϜϫʔΫ ࠓճɺࣗͷܦݧ্3FBDUΛϕʔεʹߟ͑ͯΈΔ 3FBDU એݴతʹ6*Λهड़ 7JSUVBM%0. 21
࠷ॳͷٙ ʮK2VFSZͷ࣌ʯͬͯΑ͘ฉ͚͘ͲԿ͕มΘͬͨͷʁ એݴతͬͯͳʹʁ 7JSUVBM%0.ͬͯͳΜ͔ੌͦ͏͚ͩͲɺԿ͕خ͍͠ͷʁ 22
6*ϥΠϒϥϦʹ͍ͭͯ ྺ࢙͔ΒֶͿ
ਓ͕ؒ%0.Λૢ࡞Λ͍ͯͨ͠ %0."1* EPDVNFOUYY K2VFSZ %0.ͷࢦఆૢ࡞ɺ"KBYͳͲ͕؆୯ʹͳͬͨ ໋ྩతͳهड़Ͱ6*ͷߏங%0.ૢ࡞ 24
%0."1* 25 +BWB4DSJQU )5.-
K2VFSZ 26 +BWB4DSJQU )5.-
K2VFSZ 27 +BWB4DSJQU )5.- ঢ়ଶ%0.ʹ͋Δ͚ͩ
7.7$ #BDLCPOF.7$ͰͷߏԽΛఏڙ σʔλϩδοΫΛ.PEFMͱͯ͠Γग़͢ %0.ͷߋ৽ͱσʔλͷߋ৽͕໌֬ʹ .PEFMͱ7JFXͷ࣮ %0.͔ΒͷΠϕϯτΛࢹͯ͠σʔλΛߋ৽ σʔλ͕ߋ৽͞ΕͨΒ%0.Λߋ৽͢Δ 28
%0.ͷߋ৽ॲཧ͕ෳࡶ ݱࡏͷ%0.ͷঢ়ଶΛཧղͯ͠ɺ࣍ʹͲ͏͍͏ঢ়ଶʹ͢Δ͔ ෆཁͳ%0.ૢ࡞ύϑΥʔϚϯεͷϘτϧωοΫʹͳΔ ࠶ඳըϦϑϩʔͳͲ ͳهड़ʹΑΔίʔυͷෳࡶԽ 7JFXͷߋ৽.PEFMͷߋ৽ॲཧ 29
%0.ͷߋ৽ॲཧ͕ෳࡶ ݱࡏͷ%0.ͷঢ়ଶΛཧղ্ͨ͠Ͱɺ࣍ʹͲ͏͍͏ঢ়ଶʹ͢ Δ͔ॻ͘ ͳهड़ʹΑΔίʔυͷෳࡶԽ ෆཁͳ%0.ૢ࡞ύϑΥʔϚϯεͷϘτϧωοΫʹͳΔ ෆཁͳ࠶ඳըϦϑϩʔͳͲ 30 ϢʔβʔΠϯλϥΫγϣϯ͕ଟ͘ͳΔͱ ΑΓʹͳΔ
σʔλόΠϯσΟϯά "OHVMBS+4ɺ,OPDLPVUɺFUD XBZEBUBCJOEJOH 7JFX͕ߋ৽͞ΕͨΒ.PEFMߋ৽ .PEFM͕ߋ৽͞ΕͨΒ7JFXߋ৽ ඞཁͳ%0.ૢ࡞σʔλߋ৽ΛϥΠϒϥϦ͕ͬͯ͘ΕΔ 31
)5.-Λ֦ு "OHVMBS+4ɺ,OPDLPVUɺFUD )5.-Λ֦ுͯ͠%0.ૢ࡞ଐੑͷߋ৽ͳͲΛදݱ 6*ͷߏஙมߋΛɺ+4Λॻ͔ͣʹ࣮ݱ )5.-Ͱͷهड़ྫ OHNPEFM OHDMJDL OHSFQFBU \\GPPUJUMF^^ \\
^^ 32
"OHVMBS+4 33 +BWB4DSJQU )5.-
ղܾ͞Εͨ͜ͱ ίʔυྔ͕ݮͬͯɺهड़͕؆ܿʹ ਓ͕ؒͳ%0.ͷߋ৽ॲཧΛॻ͔ͳͯ͘ྑ͍ 7JFXͱ.PEFMΛඥ͚ΔίʔυΛهड़͠ͳͯ͘ྑ͍ 34
ղܾ͞Εͨ͜ͱ ίʔυྔ͕ݮͬͯɺهड़͕؆ܿʹ ਓ͕ؒͳ%0.ͷߋ৽ॲཧΛॻ͔ͳͯ͘ྑ͍ 7JFXͱ.PEFMΛඥ͚ΔίʔυΛهड़͠ͳͯ͘ྑ͍ 35 ΞϓϦέʔγϣϯͷن͕େ͖͘ͳΔͱʁ
.PEFMͷߋ৽ σʔλͷߋ৽͕҉తʹߦΘΕΔͷͰ Կ͕ى͖Δͷ͔ΛѲ͢Δͷ͕ࠔ Ͳ͜ͰมΘͬͨʁͳͲσʔλͷྲྀΕΛ͏ͷ͕ෳࡶʹ )5.-Λ֦ு͍ͯ͠ΔͷͰσόοά͕ਏ͍ όΠϯσΟϯά͢ΔΦϒδΣΫτ͕૿͑ΔͱύϑΥʔϚϯεʹӨڹ %JSUZDIFDLJOH 36
ݱ3FBDU ୯ํͷόΠϯσΟϯά ঢ়ଶʹԠͯ͡%0.͕ࣗಈͰө͞ΕΔ .7 7JFXͷΠϕϯτʹԠͯ͡ঢ়ଶ TUBUF Λߋ৽͢Δ 7.
એݴతͳ6*ͷهड़ TUBUFʹରͯ͠ɺ͜͏͋Δ͖ͱ͍͏ݟͨΛॻ͚ͩ͘ ঢ়ଶΛ࣋ͨͳ͍ίϯϙʔωϯτΛ࡞ΕΔ 37
ݱ3FBDU 7JSUVBM%0. %0.5SFFΛ+4ͷΦϒδΣΫτͰදݱ͠ɺࠩΛ࣮ࡍͷ%0. ʹࣗಈͰө͢Δ ίϯϙʔωϯτࢥߟ ࠶ར༻ੑ 7JFXͱ.PEFMͷείʔϓ͕໌֬ʹͳΔ ΧϓηϧԽ 38
3FBDU 39 +BWB4DSJQU )5.-
ղܾ͞Εͨͷ 6*Λએݴతʹهड़Ͱ͖Δ ঢ়ଶʹԠͯ͡ɺͲΜͳݟͨʹͳΔ͔Λཧղ͢Δͷ͕༰қ ໌ࣔతʹTUBUFΛߋ৽͢ΔͷͰॲཧ͕͍͍͢ %0.ૢ࡞ʹΑΔύϑΥʔϚϯεԼΛ͋·Γҙࣝ͠ͳͯ͘ ͋ΔఔͷύϑΥʔϚϯε͕ग़Δ +BWB4DSJQUϕʔεͳͷͰσόοά͕͍͢͠ 40
ঢ়ଶཧ ࠓ͕࣌ؒΓͳ͍ͷͰɺࠓॻ͔Εͨ!LPCB͞Μͷه ࣄΛݟΔͷ͕ྑ͍Ͱ͢ 41 IUUQTFNQMPZNFOUFOKBQBODPNFOHJOFFSIVCFOUSZ
+BWB4DSJQUʹͱͬͯͷ Ϟδϡʔϧ 42
ݱϞδϡʔϧ &$."4DSJQU.PEVMFT &4. Ϟδϡʔϧ͝ͱʹϑΝΠϧΛׂ JNQPSUYYGSPNlYYzFYQPSUYY XFCQBDL ϞδϡʔϧόϯυϥʔΛ͍ґଘղܾ ෳͷϞδϡʔϧΛ·ͱΊͨ+BWB4DSJQUϑΝΠϧΛੜ 43
࠷ॳͷٙ SFRVJSF ͬͯԿʁJNQPSUFYQPSU͋Δ͚Ͳ &4.͕ϒϥβʹ࣮͞Εͨʁ XFCQBDLͬͯԿͰ͍Δͷʁ ͳΜͰͭͷ+4ʹ·ͱΊΔͷʁ&4.ͦͷ··͑ͳ͍ͷʁ 44
Ϟδϡʔϧͷඞཁੑ +BWB4DSJQUʹݶΒͣɺϞδϡʔϧ͝ͱʹϑΝΠϧΛׂͨ͠ ͘ͳΔ ໊લۭؒϞδϡʔϧ͝ͱʹείʔϓΛ͍࣋ͨͤͨ Ϟδϡʔϧͷ࠶ར༻VUJMڞ௨ॲཧΛ࠶ར༻͢Δ FUD 45
Ϟδϡʔϧʹ͍ͭͯ ྺ࢙͔ΒֶͿ
ϞδϡʔϧγεςϜ͕ແ͔ͬͨ άϩʔόϧΦϒδΣΫτΛར༻͢ΔΞϓϩʔν ؔͳͲΛάϩʔόϧΦϒδΣΫτʹೖ ར༻͢Δ߹άϩʔόϧΦϒδΣΫτ͔Β ׂ͞Εͨ+4ϑΝΠϧΛదͳॱ൪Ͱ ɹTDSJQUλάΛॻ͘ ɹɹɹPS ɹͭͷϑΝΠϧʹ݁߹ HSVOU HVMQ
47
XJOEPXܦ༝ͰϞδϡʔϧΛڞ༗ 48 IUUQTHJUIVCDPNUBTUFKTUPEPNWDCMPCNBTUFSFYBNQMFTWBOJMMBKTJOEFYIUNM IFMQFSKT BQQKT JOEFYIUNM
άϩʔόϧΦϒδΣΫτҎԼͰ໊લۭؒͷিಥى͜Γ͏Δ ϥΠϒϥϦࣗͷϞδϡʔϧͳͲ ֤ϞδϡʔϧͷґଘؔΛ͍ͬͯΔѲ͍ͯ͠Δඞཁ͕͋Δ 49
ϞδϡʔϧγεςϜ ಠࣗͷϞδϡʔϧγεςϜΛར༻ ".% 3FRVJSF+4 EFpOF SFRVJSF $PNNPO+4 #SPXTFSJGZ
SFRVJSF NPEVMFFYQPSUT ಠࣗͷϞδϡʔϧγεςϜΛղܾ͢ΔϥΠϒϥϦΛར༻ 50
$PNNPO+4 #SPXTFSJGZ $PNNPO+4ͷϞδϡʔϧγεςϜ /PEFKTͰ࠾༻͞Ε͍ͯΔ #SPXTFSJGZ Ϟδϡʔϧͷґଘղܾ ͭͷ+4ϑΝΠϧΛ࡞ OPEFͷίΞϞδϡʔϧϒϥβͰಈ࡞͢Δ 51
52 IFMQFSKT BQQKT CVOEMFKT $PNNPO+4 #SPXTFSJGZ
53 CVOEMFKT JOEFYIUNM $PNNPO+4 #SPXTFSJGZ
ղܾ͞Εͨ͜ͱ άϩʔόϧͰͷ໊લۭؒͷিಥ શମͷґଘؔΛҙࣝ͠ͳͯ͘ྑ͍ ར༻͢ΔϞδϡʔϧΛ໌ࣔͰ͖Δ ґଘ͕໌֬ʹͳΔ 54
ͦͷࠒͷ ඪ४Ͱͳ͍ϞδϡʔϧγεςϜ /PEFKTͰ$PNNPO+4Ͱॻ͘ ϒϥβมͨ͠ίʔυΛಡΈࠐΉ ϑϩϯτΤϯυͰ͑Δඪ४ͷϞδϡʔϧͷࡦఆʁ γϯλοΫεͳͲ&$."4DSJQUͰܾ·ͬͨ &4 ϒϥβͰͲ͏Ϟδϡʔϧ͕ಡΈࠐ·ΕΔ͔ )5.-
ͳ͔ͳ͔ܾ·Βͳ͔ͬͨ ͍·࣮ࡁ 55
ͦͷࠒͷ ඪ४Ͱͳ͍ϞδϡʔϧγεςϜ /PEFKTͰ$PNNPO+4Ͱॻ͘ ϒϥβมͨ͠ίʔυΛಡΈࠐΉ ϑϩϯτΤϯυͰ͑Δඪ४ͷϞδϡʔϧͷࡦఆʁ γϯλοΫεͳͲ&$."4DSJQUͰܾ·ͬͨ &4 ϒϥβͰͲ͏Ϟδϡʔϧ͕ಡΈࠐ·ΕΔ͔ )5.-
ͳ͔ͳ͔ܾ·Βͳ͔ͬͨ ͍·࣮ࡁ 56 &$."4DSJQU.PEVMFT
ݱ&4.XFCQBDL &$."4DSJQU.PEVMFT &4. &$."4DSJQUͰϞδϡʔϧͷγϯλοΫε͕ܾ·ͬͨ TDSJQUλάUZQFlNPEVMFzͰͦͷ··ಈ͘ʂ *&Ҏ֎ͷओཁϒϥβαϙʔτ XFCQBDL Ϟδϡʔϧόϯυϥʔʴ#SPXTFSJGZʹແ͔ͬͨศརͳػೳ 57
ωΠςΠϒͷ&4.͕͑Δͷʁ IUUQTWEFWGFBUVSFTNPEVMFTQFSGPSNBODF 58 +BWB4DSJQUNPEVMFTcW ։ൃڥ 1SPEVDUJPO ɾϞδϡʔϧະຬ ɾґଘπϦʔͷਂ͕͞࠷େະຬ ͷখ͍͞ΞϓϦ
&4. XFCQBDLΛ͏ཧ༝ᶃ όϯυϧͤͣʹ&4.Ͱಈతʹґଘղܾ͢Δͱʁ ֤+4ϑΝΠϧΛΩϟογϡͰ͖Δ͔Βྑͦ͞͏ ίωΫγϣϯେ෯ʹ૿͑Δ )551ʹͳΕղܾ͢Δʁ ಉ࣌ίωΫγϣϯͷղܾ͢Δ ϥϯυτϦοϓͷ͕Δ 59
60 JOEFYIUNM JOEFYKT GPPKT CBSKT
61 JOEFYIUNM JOEFYKT GPPKT CBSKT ࣄલʹͭͷ+4ʹ·ͱΊͨํ͕ྑͦ͞͏
&4. XFCQBDLΛ͏ཧ༝ᶄ &4.੩తͳγϯλοΫεͱͯ͠ఆ͍ٛͯ͠Δ ಈతͳॻ͖ํγϯλοΫεΤϥʔ &4.Ͱॻ͍ͯɺXFCQBDLͰࣄલʹόϯυϧ͢ΔԸܙ 5SFF4IBLJOHͳͲͷ੩తղੳͷԸܙΛड͚Δ͜ͱ͕Ͱ͖Δ 62
&4. XFCQBDLΛ͏ཧ༝ᶄ $PNNPO+4ͷϞδϡʔϧ ؔΦϒδΣΫτͳͷͰϥϯλΠϜʹґଘ ಈత ґଘؔΛࣄલʹղੳ͢Δͷ͕ࠔ ྫ ߏจతʹਖ਼͍͠ 63
"45ͱपลπʔϧ 64
ݱ"45ϕʔεͷπʔϧ &4-JOU1SFUUJFSɺ#BCFMͳͲ "45Λϕʔεʹͨ͠πʔϧ͕ϑϩϯτΤϯυ։ൃͰଟ͘ར༻ "45ଞͷϓϩάϥϛϯάݴޠͰΘΕ͍ͯΔ Ϣʔβʔͱͯ͋͠·Γฉ͔ͳ͍ؾ͕͢Δ ίϯύΠϥίʔυੜͩͱΘΕ͍ͯΔ͚Ͳ 65
-JOUFSΛྫʹߟ͑ͯΈΔ ͍·+BWB4DSJQU5ZQF4DSJQUͷ-JOUFS&4-JOU ੲ+4-JOU+4)JOUͱ͍͏-JOUFS͕ओྲྀ Կ͕ҧ͏ʁ Ͳ͏ศརʹͳͬͨʁ 66
"45ϕʔεͷπʔϧʹ͍ͭͯ ྺ࢙͔ΒֶͿ
+4)JOU ಠࣗͷ෦ॲཧͰίʔυΛύʔεͯ͠νΣοΫ จࣈྻૢ࡞ਖ਼نදݱͳͲ ϥΠϒϥϦʹ࣮͞Ε͍ͯΔϧʔϧΛ0/0''͢Δ "45ϕʔεͰͳ͍ 68
"45 "45 "CTUSBDU4ZOUBY5SFF நߏจ ιʔείʔυͷߏจΛղੳ͠ɺͦΕΛߏͰදݱͨ͠ͷ 69 WBSB +40/
"451BSTFS ࠷ॳ4QJEFS.POLFZ͕1BSTFS"1*ͱ࣮ͯ͠ ͜ΕΛϕʔεʹϥΠϒϥϦͱͯ͠"45ͷ1BSTFS͕։ൃ͞Εͨ &TQSJNB "DPSO 70
࣌ͷ ৽͍͠ߏจͷαϙʔτ &$."4DSJQU9999 +49 1BSTFS͝ͱʹࡉ͔͍"45ͷѻ͍ͷҧ͍ 71
ϑϩϯτΤϯυʹͱͬͯͷ"45 ϑϩϯτΤϯυϒϥβͷޓੑͱͷઓ͍ τϥϯεύΠϧDPNQJMF͕Ұൠత ίʔυͷมॲཧॏཁͳͷͰ͋Γۙͳଘࡏ ੵۃతʹ"45पลͷΤίγεςϜ͕ҭͭഎܠ͕͋Δ 72
"45ͷൃల ίϛϡχςΟͰ+BWB4DSJQUͷ"45Λඪ४Խ &4USFF +49&4ͷ৽͍͠ߏจͷαϙʔτ &4QSFF &4-JOUͰར༻ #BCZMPO !CBCFMQBSTFS #BCFMͰར༻
73
ݱ&4-JOU "45ͷਐԽʹΑΓɺ&4-JOU͕ੜ·Εͨ +4)JOU&4-JOU "45ϕʔεͷ-JOUFS ύʔεͨ͠"45ΛͱʹɺϊʔυʹରԠͨ͠ϧʔϧΛ࣮ߦ ϧʔϧ1MVHJOͱͯ͠ఏڙ ϧʔϧΛࣗ࡞ͯ͠ΈΜͳͰڞ༗͢Δ͜ͱՄೳʹ 74
&4-JOU 75 IUUQTHJUIVCDPNFTMJOUFTMJOUUSFFNBTUFSMJCSVMFT IUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBTUFSMJCSVMFTOPWBSKT
&4-JOUҠߦ ࣮ࡍʹ+4)JOU͔Β&4-JOUͷҠߦΛͬͨ ϧʔϧͦͷ·· ྑ͘ͳͬͨ͜ͱ +4)JOUͰ࿙ΕͯͨνΣοΫ͕͋ͬͨͷ͕ݫີʹͳͬͨ +49৽͍͠ߏจͷαϙʔτ 1SFTFUΛར༻Մೳ ϧʔϧΛࣗ࡞Ͱ͖Δ 76
"45ͷൃలʹΑΓ σϑΝΫτతͳϑΥʔϚολʔʮ1SFUUJFSʯ ਓ͕ؒϑΥʔϚοτΛҙࣝ͠ͳͯ͘ྑ͘ͳͬͨ ଞͷ"45ϕʔεͷπʔϧ #BCFM5ZQF4DSJQUɺXFCQBDLͳͲ͓ͳ͡Έͷπʔϧ "45ͷपลπʔϧ͕ॆ࣮͍ͯ͠ΔϑϩϯτΤϯυ ίʔυมͳͲීஈͷ։ൃͰઓͯ͠ΈΔͱྑͦ͞͏ 77
͍͞͝ʹ 78
͍·ϑϩϯτΤϯυΛΔͱ༷ʑͳٕज़ϥΠϒϥϦͱग़ձ͏ ݱͷϑϩϯτΤϯυ։ൃ ྫ 79 JNQPSUFYQPSU 3FBDU 3FEVY XFCQBDL #BCFM
+FTU 1SFUUJFS &4-JOU $44JO+4 OQN &$."4DSJQU 5ZQF4DSJQU ʁ ʁ ੩తܕ͚ ৽͍༷͠ ঢ়ଶཧ 6* &4.PEVMFT Ϟδϡʔϧόϯυϥʔ τϥϯεύΠϥ ςετ ϑΥʔϚολʔ -JOUFS ελΠϦϯά ύοέʔδཧ
·ͱΊ ϑϩϯτΤϯυͦͷ࣌ͷΛղܾ͢Δɺ৽͍͠Ξϓϩʔν ͕ߴʹੜ·Ε͖ͯͨ աڈʹ͋ͬͨͱղܾ͞Ε͍ͨ·ΛΔ͜ͱͰཧղΛਂΊΔ ͜ͱ͕Ͱ͖Δ ීஈͨΓલͷΑ͏ʹ͍ͬͯΔٕज़ʹ͍ͭͯਂ΅Δ͖͔͚ͬ ʹͳΕخ͍͠ 80
εϙϯαʔϒʔε͋ΔΑ ϑϩϯτΤϯυΤΩεύʔτνʔϜͷϝϯόʔશһͰདྷͯ·͢ εϙϯαʔϒʔεͰීஈͬͯΔϞϓϓϩάϥϛϯάͷ༷ࢠ ΛݟΕ·͢ ٳܜ࣌ؒͳͲੋඇཱͪد͍ͬͯͩ͘͞ʂ 81
5)"/,:06
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
"フロントエンドの技術"を移行する技術 / Frontend Migrations
10shi10ma
0
120
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
2k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.4k
Service Workerとブラウザでの通知について
10shi10ma
3
410
意外に知らないnpmと便利なCLI
10shi10ma
8
2.5k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.2k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
6.2k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3.2k
React+Storybook ことはじめ
10shi10ma
8
2.6k
Other Decks in Technology
See All in Technology
Gifu WordPress Meetup #200 に向けて、私たちには何ができるだろうか?/ 2026-11-07 Gifu WordPress Meetup
torounit
0
280
あの日、見つかっていなかったらどうなっていたか
kazzpapa3
2
170
Biohub - Cell Tracking During Development 5th place solution
rist
0
140
Kiro Crew の Bot (続く役目を任せる窓口) | 目指せ Kiro マスター 12
inariku
PRO
2
380
DBTS2026 盛り上がってますか!?Databricksが実現するAI時代のデータ基盤
akuwano
1
200
Steering と Hook (チームの決まりを守らせる) | 目指せ Kiro マスター 06
inariku
PRO
2
120
地域社会の実情からITエンジニアの社会貢献を考える
sms_tech
0
190
田んぼから始まる挑戦 〜新米農家の1年目〜
miu_crescent
PRO
0
240
Kiro アップデート 2026 年 11 月号 (11 月 8 日時点) | 目指せ Kiro マスター アップデート編
inariku
PRO
2
120
Go初心者のクラウドエンジニアが、デプロイを通して旨味を知っていく話
ryudai
1
200
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
170
The Author Pays
hiccupps
0
200
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
210k
Unsuck your backbone
ammeep
672
58k
WCS-LA-2024
lcolladotor
0
990
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.5k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
850
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
550
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.4k
Become a Pro
speakerdeck
PRO
31
6.4k
Visualization
eitanlees
153
17k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
640