【mediba #developers_community】フロントエンドの フレームワーク事情2022

Transcript

1. ϑϩϯτΤϯυͷ ϑϨʔϜϫʔΫࣄ৘2022 mediba #developers_community 2022/01/27
2. ࣗݾ঺հ • Name: Shota Yamamoto • Job: Front End Developer • Twitter: yamam00s • Company: גࣜձࣾmediba • Team: ςΫϊϩδʔηϯλʔ2G, TCL • ϚΫυφϧυͷφήοτιʔε: Ϛελʔυ೿ • ͖ͷ͚ͨ͜ͷ͜: ͖ͷ͜೿
3. ৮ΕΔ͜ͱ • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷಛ௃ • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷൺֱ • Ծ૝DOMपΓͷઙΊͳઆ໌ • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷߏจͷઆ໌ ৮Εͳ͍͜ͱ
4. ϑϩϯτΤϯυͷ ϑϨʔϜϫʔΫͱ͍͑͹ʁ
5. icon by Icons8
6. Ҿ༻: state of js 2022 ར༻཰తʹ΋TOP3
7. 3ͭͷϑϨʔϜϫʔΫͷڞ௨఺Λͬ͘͟Γͱ • ίϛϡχςΟ͕େ͖͍ • සൟʹΞοϓσʔτɺϝϯςφϯε͞Ε͍ͯΔ • Ծ૝DOMͷ࢓૊ΈΛར༻ͨ͠ϦΞΫςΟϒͳϨϯμϦϯά • એݴతUI • ίϯϙʔωϯτࢦ޲ • ϥΠϒϥϦ͕ଟ͘ଘࡏ͢Δ • ঢ়ଶ؅ཧɺϧʔςΟϯάɺϑϧελοΫϑϨʔϜϫʔΫɺetc…
8. DOMͷ௚઀ૢ࡞ Ծ૝DOMʹΑΔDOMૢ࡞
9. 3୒֬ఆʁ🤔
10. Ҿ༻: state of js 2022 ຬ଍౓
11. Ҿ༻: state of js 2022 ڵຯ
12. Svelte
13. Svelte React
14. Svelteͷಛ௃ • ίʔυͷهड़ྔ͕গͳ͍ʢͪΐͬͱVueʹ͍ۙʁʣ • Ծ૝DOMΛ࢖༻͠ͳ͍ϦΞΫςΟϒͳϨϯμϦϯά • DOMͷࠩ෼ߋ৽ͷ࢓૊ΈΛϏϧυ࣌ʹ࣮ߦ • όϯυϧαΠζ͕খ͍͞ • ύϑΥʔϚϯε͕ߴ͍
15. Solid
16. Solid React
17. Solidͷಛ௃ • Reactͱ΄ͱΜͲಉ͡هड़ • Ծ૝DOMΛ࢖༻͠ͳ͍ϦΞΫςΟϒͳϨϯμϦϯά • DOMͷࠩ෼ߋ৽ͷ࢓૊ΈΛϏϧυ࣌ʹ࣮ߦ • όϯυϧαΠζ͕খ͍͞ • ύϑΥʔϚϯε͕ߴ͍
18. Ϗϧυ࣌ͷDOMૢ࡞
19. 2ͭͷಛ௃ • Ծ૝DOMΛ७ਮͳΦʔόʔϔουͱͯ͠ഉআ • ߴ͍ύϑΥʔϚϯεΛ࣮ݱ • ίϛϡχςΟ͸·ͩখ͍͞
20. ࠷ޙʹ
21. ΈΜͳͰΩϟονΞοϓ͍͖ͯ͠ɺ ن໛ɺ༻్ʹ߹ͬͨબఆΛ
22. ͋Γ͕ͱ͏͍͟͝·ͨ͠😘