昨今のフロントエンド

Transcript

1. ࡢࠓͷϑϩϯτΤϯυ
   
2. JavaScript ૯બڍ
3. ϑϩϯτΤϯυΧϯϑΝϨϯε෱Ԭ
   ϠϑʔגࣜձࣾͷϒʔεͰࡱͬͨࣸਅ JavaScript ૯બڍ
4. JavaScript ૯બڍ
5. ਓؾ্Ґ
6. w +BWB4DSJQUͷεʔύʔηοτ
   w +BWB4DSJQUͰܕఆ͕ٛͰ͖Δ
   w ίϯύΠϧ͢ΔࣄͰ+BWB4DSJQUΛੜ੒͢Δ
   w 74
   $PEFͱ૬ੑ͕ྑ͍ TypeScript https://www.typescriptlang.org/
7. 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] ͜ͷ৭ͷจࣈ
   ͕ܕ஫ऍ Ξϊςʔγϣϯ
   ܕ஫ऍΛ෇༩͢ΔࣄͰɺ໌ࣔతʹܕΛ੍໿͢Δ
8. ܕ͕͋ΔͱԿ͕ྑ͍ͷ͔ function expo2(amount) { return amount ** 2 } const value = expo2('1000') // 1000000 const withTax = value * 1.1 ࣮ફ5ZQF4DSJQU
   #''ͱ/FYUKT
   
   /VYUKTͷܕఆٛ
   
   ٢Ҫ
   ݈จ
   
   גࣜձࣾϚΠφϏग़൛
   ΑΓ z+BWB4DSJQUͰ͸ɺ࣍ͷίʔυ͸໰୊ʹͳΓ·ͤΜ
   จࣈྻͰ͋ͬͯ΋਺஋ͱͯ͠ѻ͑Δ৔߹ʹ͸ɺ
   ҉໧తʹ਺஋ʹม׵ͯ͠͠·͏ͨΊͰ͢ɻ
   ͜ͷᐆດͳڍಈ͕όάͷԹচʹͳΓɺ
   ։ൃऀΛ೰·͖ͤͯ·ͨ͠ɻz
9. ܕ͕͋ΔͱԿ͕ྑ͍ͷ͔ ܕ஫ऍͰܕΛOVNCFSܕʹ͢Ε͹ɺ͜ΕΛະવʹ๷͙ࣄ͕Ͱ͖Δ
10. JSͷϑϨʔϜϫʔΫɾϥΠϒϥϦ
11. JSͷϑϨʔϜϫʔΫɾϥΠϒϥϦ ۙ೥Α͘ฉ͘
    7VFɾ3FBDU "OHVMBS͞Θͬͨࣄͳ͍ͷͰׂѪ͍ͤͯͩ͘͞͞
12. npm trends
13. npm trends SFBDU͕ਓؾͰ͕͢ɺ೔ຊͩͱ7VF͕SFBDUҎ্ʹਓؾͳؾ͕͠·͢
14. ͳͥਓؾͳͷ͔
15. ͳͥਓؾͳͷ͔ 41"ͷݪଇΛ࠾༻͍ͯ͠Δ
16. ͳͥਓؾͳͷ͔ 4JOHMF
    1BHF
    "QQMJDBUJPO
17. w 41"ͱ͸ɺ୯ҰͷϖʔδͰίϯςϯπͷ੾Γସ͑Λߦ͏8FCΞϓϦέʔ γϣϯΞʔΩςΫνϟͷ໊শ
    w 41"Ͱ͸ϒϥ΢βʹΑΔϖʔδભҠΛߦΘͣʹίϯςϯπͷ੾Γସ͑ͳͲ Λߦ͏͜ͱͰɺϢʔβʔମݧ 69 Λେ͖͘޲্ͤ͞Δ͜ͱ͕Մೳ
    w ैདྷͷ8FCϖʔδͰ͸ભҠ࣌ʹϖʔδશମ͕ॻ͖׵ΘΔ͕ɺ41"Ͱ͸+4 Λ༻͍ͯϖʔδ಺ͷ)5.-ͷҰ෦Λࠩ͠ସ͑ͯίϯςϯπΛ੾Γସ͍͑ͯ Δɻ͜ΕʹΑΓɺϒϥ΢βͷڍಈʹറΒΕͳ͍6*ͷ࣮ݱ΍ɺύϑΥʔϚϯ εͷ޲্͕Մೳ Single Page Application https://www.oro.com/ja/technology/001/
18. w 41"ͱ͸ɺ୯ҰͷϖʔδͰίϯςϯπͷ੾Γସ͑Λߦ͏8FCΞϓϦέʔ γϣϯΞʔΩςΫνϟͷ໊শ
    w 41"Ͱ͸ϒϥ΢βʹΑΔϖʔδભҠΛߦΘͣʹίϯςϯπͷ੾Γସ͑ͳͲ Λߦ͏͜ͱͰɺϢʔβʔମݧ 69 Λେ͖͘޲্ͤ͞Δ͜ͱ͕Մೳ
    w ैདྷͷ8FCϖʔδͰ͸ભҠ࣌ʹϖʔδશମ͕ॻ͖׵ΘΔ͕ɺ41"Ͱ͸+4 Λ༻͍ͯϖʔδ಺ͷ)5.-ͷҰ෦Λࠩ͠ସ͑ͯίϯςϯπΛ੾Γସ͍͑ͯ Δɻ͜ΕʹΑΓɺϒϥ΢βͷڍಈʹറΒΕͳ͍6*ͷ࣮ݱ΍ɺύϑΥʔϚϯ εͷ޲্͕Մೳ Single Page Application Ծ૝%0.ʹΑΓ࣮ݱ
19. 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
20.  Ծ૝%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
21. ·ͱΊ
22. w 5ZQF4DSJQU͸+BWB4DSJQUͷεʔύʔηοτͰܕͷఆ͕ٛՄೳ
    w 3FBDU΍7VF͸41"Λ࣮ݱ͢ΔͨΊͷ+4ͷϑϨʔϜϫʔΫɾϥΠϒϥϦ ·ͱΊ
23. ࠷ۙͷχϡʔε ࣗ෼ͷ؍ଌͰ͖ͨൣғͰ৽͠ΊͷχϡʔεΛ঺հ͠·͢
24. w ʹW͕ϦϦʔε
    w /PEFKTͷ࡞ऀ3ZBO
    %BIMࢯʹΑͬͯ࡞Β Εͨ৽͍͠ηΩϡΞͳ+454ͷϥϯλΠϜ
    w ࡞ऀࣗ਎͕/PEFKTͷ࢓༷Λޙչͯ͠࡞Γ ௚ͨ͠΋ͷ
    w ԕ͍ະདྷϦϓϨΠε͞ΕΔʁ Deno https://deno.land/ https://qiita.com/so99ynoodles/items/c3ba2a528052827e3b3c ެࣜαΠτ 2JJUB
25. ɹ΍ͬͯΈΔ $ 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 ެࣜαΠτ
26. 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/ ࢀߟ