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
昨今のフロントエンド
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Takahiro Shinoda
May 19, 2020
Technology
0
140
昨今のフロントエンド
Takahiro Shinoda
May 19, 2020
Tweet
Share
More Decks by Takahiro Shinoda
See All by Takahiro Shinoda
Firebase Authenticationについて
takashinoda
0
69
Study on participatory projection mapping that can be enjoyed by performers
takashinoda
1
48
Proposal of Interactive Projection Mapping using Human Detection by Machine Learning
takashinoda
0
42
A Proposal of Interactive Projection Mapping Using Kinect
takashinoda
0
44
Other Decks in Technology
See All in Technology
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
520
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
rocketmartue
1
310
Agent Skils
dip_tech
PRO
0
120
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
kazzpapa3
0
110
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
120
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
260
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
380
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
190
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
2k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
220
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
93
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
9.6k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
920
Facilitating Awesome Meetings
lara
57
6.8k
Chasing Engaging Ingredients in Design
codingconduct
0
110
Are puppies a ranking factor?
jonoalderson
1
2.7k
Statistics for Hackers
jakevdp
799
230k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Transcript
ࡢࠓͷϑϩϯτΤϯυ
JavaScript ૯બڍ
ϑϩϯτΤϯυΧϯϑΝϨϯεԬϠϑʔגࣜձࣾͷϒʔεͰࡱͬͨࣸਅ JavaScript ૯બڍ
JavaScript ૯બڍ
ਓؾ্Ґ
w +BWB4DSJQUͷεʔύʔηοτ w +BWB4DSJQUͰܕఆ͕ٛͰ͖Δ w ίϯύΠϧ͢ΔࣄͰ+BWB4DSJQUΛੜ͢Δ w 74$PEFͱ૬ੑ͕ྑ͍ TypeScript https://www.typescriptlang.org/
w CPPMFBO w OVNCFS w TUSJOH w BSSBZ TypeScriptͷܕ Ұ෦ൈਮ
let flag: boolean = true let decimal: number = 123 let hex: number = 0xfff let myName: string = 'Taro' let list: number[] = [1, 2, 3] ͜ͷ৭ͷจࣈ͕ܕऍ Ξϊςʔγϣϯ ܕऍΛ༩͢ΔࣄͰɺ໌ࣔతʹܕΛ੍͢Δ
ܕ͕͋ΔͱԿ͕ྑ͍ͷ͔ function expo2(amount) { return amount ** 2 } const
value = expo2('1000') // 1000000 const withTax = value * 1.1 ࣮ફ5ZQF4DSJQU#''ͱ/FYUKT/VYUKTͷܕఆٛ٢Ҫ݈จגࣜձࣾϚΠφϏग़൛ΑΓ z+BWB4DSJQUͰɺ࣍ͷίʔυʹͳΓ·ͤΜ จࣈྻͰ͋ͬͯͱͯ͠ѻ͑Δ߹ʹɺ ҉తʹʹมͯ͠͠·͏ͨΊͰ͢ɻ ͜ͷᐆດͳڍಈ͕όάͷԹচʹͳΓɺ ։ൃऀΛ·͖ͤͯ·ͨ͠ɻz
ܕ͕͋ΔͱԿ͕ྑ͍ͷ͔ ܕऍͰܕΛOVNCFSܕʹ͢Εɺ͜ΕΛະવʹ͙ࣄ͕Ͱ͖Δ
JSͷϑϨʔϜϫʔΫɾϥΠϒϥϦ
JSͷϑϨʔϜϫʔΫɾϥΠϒϥϦ ۙΑ͘ฉ͘7VFɾ3FBDU "OHVMBS͞Θͬͨࣄͳ͍ͷͰׂѪ͍ͤͯͩ͘͞͞
npm trends
npm trends SFBDU͕ਓؾͰ͕͢ɺຊͩͱ7VF͕SFBDUҎ্ʹਓؾͳؾ͕͠·͢
ͳͥਓؾͳͷ͔
ͳͥਓؾͳͷ͔ 41"ͷݪଇΛ࠾༻͍ͯ͠Δ
ͳͥਓؾͳͷ͔ 4JOHMF1BHF"QQMJDBUJPO
w 41"ͱɺ୯ҰͷϖʔδͰίϯςϯπͷΓସ͑Λߦ͏8FCΞϓϦέʔ γϣϯΞʔΩςΫνϟͷ໊শ w 41"ͰϒϥβʹΑΔϖʔδભҠΛߦΘͣʹίϯςϯπͷΓସ͑ͳͲ Λߦ͏͜ͱͰɺϢʔβʔମݧ 69 Λେ্͖ͤ͘͞Δ͜ͱ͕Մೳ w ैདྷͷ8FCϖʔδͰભҠ࣌ʹϖʔδશମ͕ॻ͖ΘΔ͕ɺ41"Ͱ+4
Λ༻͍ͯϖʔδͷ)5.-ͷҰ෦Λࠩ͠ସ͑ͯίϯςϯπΛΓସ͍͑ͯ Δɻ͜ΕʹΑΓɺϒϥβͷڍಈʹറΒΕͳ͍6*ͷ࣮ݱɺύϑΥʔϚϯ εͷ্͕Մೳ Single Page Application https://www.oro.com/ja/technology/001/
w 41"ͱɺ୯ҰͷϖʔδͰίϯςϯπͷΓସ͑Λߦ͏8FCΞϓϦέʔ γϣϯΞʔΩςΫνϟͷ໊শ w 41"ͰϒϥβʹΑΔϖʔδભҠΛߦΘͣʹίϯςϯπͷΓସ͑ͳͲ Λߦ͏͜ͱͰɺϢʔβʔମݧ 69 Λେ্͖ͤ͘͞Δ͜ͱ͕Մೳ w ैདྷͷ8FCϖʔδͰભҠ࣌ʹϖʔδશମ͕ॻ͖ΘΔ͕ɺ41"Ͱ+4
Λ༻͍ͯϖʔδͷ)5.-ͷҰ෦Λࠩ͠ସ͑ͯίϯςϯπΛΓସ͍͑ͯ Δɻ͜ΕʹΑΓɺϒϥβͷڍಈʹറΒΕͳ͍6*ͷ࣮ݱɺύϑΥʔϚϯ εͷ্͕Մೳ Single Page Application Ծ%0.ʹΑΓ࣮ݱ
w Ծ%0.ɺϒϥβ͕͍࣋ͬͯͨ%0.πϦʔΛɺ+BWB4DSJQUͷΦϒ δΣΫτͱͯ͠දݱ w ͦͯ͠ɺϝϞϦ্ͷԾ%0.πϦʔΛ༻͍ͯࠩݕΛߦ͍ɺඞཁ࠷ ݶͷࠩͷΈΛϦΞϧ%0.ʹө͢ΔͨΊɺҰൠతʹύϑΥʔϚϯε͕ ্͢ΔͱݴΘΕͯΔ Ծ(Virtual)DOM https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82DOMDocument-Object-Model%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B
Ծ%0.πϦʔΛछྨ༻ҙ มߋલޙͷπϦʔछྨ ԿΒ͔ͷΞΫγϣϯͰTUBUF͕ॻ͖ΘΔ Ծ%0.Λ࠶ߏங͢Δ มߋલޙͷԾ%0.πϦʔΛ༻͍ͯࠩݕ͢Δ
͕ࠩ͋ͬͨՕॴ͚ͩϦΞϧ%0.ʹө͢Δ ԾDOMͷಈ͖ https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82DOMDocument-Object-Model%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B
·ͱΊ
w 5ZQF4DSJQU+BWB4DSJQUͷεʔύʔηοτͰܕͷఆ͕ٛՄೳ w 3FBDU7VF41"Λ࣮ݱ͢ΔͨΊͷ+4ͷϑϨʔϜϫʔΫɾϥΠϒϥϦ ·ͱΊ
࠷ۙͷχϡʔε ࣗͷ؍ଌͰ͖ͨൣғͰ৽͠ΊͷχϡʔεΛհ͠·͢
w ʹW͕ϦϦʔε w /PEFKTͷ࡞ऀ3ZBO%BIMࢯʹΑͬͯ࡞Β Εͨ৽͍͠ηΩϡΞͳ+454ͷϥϯλΠϜ w ࡞ऀ͕ࣗ/PEFKTͷ༷Λޙչͯ͠࡞Γ ͨ͠ͷ w ԕ͍ະདྷϦϓϨΠε͞ΕΔʁ
Deno https://deno.land/ https://qiita.com/so99ynoodles/items/c3ba2a528052827e3b3c ެࣜαΠτ 2JJUB
ɹͬͯΈΔ $ brew install deno )PNFCSFXͰΠϯετʔϧͰ͖·ͨ͠ NBD04 $ deno run
https://deno.land/std/examples/welcome.ts $ deno —-version deno 1.0.0 v8 8.4.300 typescript 3.9.2 αϯϓϧϓϩάϥϜΛ࣮ߦ Welcome to Deno https://deno.land/#installation ެࣜαΠτ
w 3FBDU&VSPQF d Ͱൃද w GBDFCPPLͷ৽͍͠ঢ়ଶཧϥΠϒϥϦ w 3FBDUͷެࣜͳঢ়ଶཧϥΠϒϥϦͰͳ͍ w "UPNͱ4FMFDUPSΛܦ༝ͯ͠3FBDUίϯϙʔ
ωϯτʹྲྀΕΔϑϩʔάϥϜΛ࡞ w ݱࡏ&YQFSJNFOUBM ࣮ݧ൛ Recoil ެࣜαΠτ https://recoiljs.org/ https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/ ࢀߟ