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
Takahiro Shinoda
May 19, 2020
Technology
0
110
昨今のフロントエンド
Takahiro Shinoda
May 19, 2020
Tweet
Share
More Decks by Takahiro Shinoda
See All by Takahiro Shinoda
Firebase Authenticationについて
takashinoda
0
59
Study on participatory projection mapping that can be enjoyed by performers
takashinoda
1
25
Proposal of Interactive Projection Mapping using Human Detection by Machine Learning
takashinoda
0
23
A Proposal of Interactive Projection Mapping Using Kinect
takashinoda
0
21
Other Decks in Technology
See All in Technology
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1.1k
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
360
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
350
Cloud Service Mesh に触れ合う
phaya72
1
110
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
900
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
200
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Gamification - CAS2011
davidbonilla
76
4.6k
Teambox: Starting and Learning
jrom
128
8.4k
The Cult of Friendly URLs
andyhume
74
5.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
A better future with KSS
kneath
231
16k
Ruby is Unlike a Banana
tanoku
96
10k
Building an army of robots
kneath
300
41k
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/ ࢀߟ