Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yamashooooo
January 26, 2023
49

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

yamashooooo

January 26, 2023
Tweet

Transcript

  1. ϑϩϯτΤϯυͷ


    ϑϨʔϜϫʔΫࣄ৘2022
    mediba #developers_community
    2022/01/27

    View full-size slide

  2. ࣗݾ঺հ
    • Name: Shota Yamamoto


    • Job: Front End Developer


    • Twitter: yamam00s


    • Company: גࣜձࣾmediba


    • Team: ςΫϊϩδʔηϯλʔ2G, TCL


    • ϚΫυφϧυͷφήοτιʔε: Ϛελʔυ೿


    • ͖ͷ͚ͨ͜ͷ͜: ͖ͷ͜೿

    View full-size slide

  3. ৮ΕΔ͜ͱ
    • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷಛ௃


    • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷൺֱ


    • Ծ૝DOMपΓͷઙΊͳઆ໌
    • ֤ϑϩϯτΤϯυϑϨʔϜϫʔΫͷߏจͷઆ໌
    ৮Εͳ͍͜ͱ

    View full-size slide

  4. ϑϩϯτΤϯυͷ


    ϑϨʔϜϫʔΫͱ͍͑͹ʁ

    View full-size slide

  5. icon by Icons8

    View full-size slide

  6. Ҿ༻: state of js 2022
    ར༻཰తʹ΋TOP3

    View full-size slide

  7. 3ͭͷϑϨʔϜϫʔΫͷڞ௨఺Λͬ͘͟Γͱ
    • ίϛϡχςΟ͕େ͖͍


    • සൟʹΞοϓσʔτɺϝϯςφϯε͞Ε͍ͯΔ


    • Ծ૝DOMͷ࢓૊ΈΛར༻ͨ͠ϦΞΫςΟϒͳϨϯμϦϯά


    • એݴతUI


    • ίϯϙʔωϯτࢦ޲


    • ϥΠϒϥϦ͕ଟ͘ଘࡏ͢Δ


    • ঢ়ଶ؅ཧɺϧʔςΟϯάɺϑϧελοΫϑϨʔϜϫʔΫɺetc…

    View full-size slide

  8. DOMͷ௚઀ૢ࡞ Ծ૝DOMʹΑΔDOMૢ࡞

    View full-size slide

  9. 3୒֬ఆʁ🤔

    View full-size slide

  10. Ҿ༻: state of js 2022
    ຬ଍౓

    View full-size slide

  11. Ҿ༻: state of js 2022
    ڵຯ

    View full-size slide

  12. Svelte React

    View full-size slide

  13. Svelteͷಛ௃
    • ίʔυͷهड़ྔ͕গͳ͍ʢͪΐͬͱVueʹ͍ۙʁʣ


    • Ծ૝DOMΛ࢖༻͠ͳ͍ϦΞΫςΟϒͳϨϯμϦϯά


    • DOMͷࠩ෼ߋ৽ͷ࢓૊ΈΛϏϧυ࣌ʹ࣮ߦ


    • όϯυϧαΠζ͕খ͍͞


    • ύϑΥʔϚϯε͕ߴ͍

    View full-size slide

  14. Solidͷಛ௃
    • Reactͱ΄ͱΜͲಉ͡هड़


    • Ծ૝DOMΛ࢖༻͠ͳ͍ϦΞΫςΟϒͳϨϯμϦϯά


    • DOMͷࠩ෼ߋ৽ͷ࢓૊ΈΛϏϧυ࣌ʹ࣮ߦ


    • όϯυϧαΠζ͕খ͍͞


    • ύϑΥʔϚϯε͕ߴ͍

    View full-size slide

  15. Ϗϧυ࣌ͷDOMૢ࡞

    View full-size slide

  16. 2ͭͷಛ௃
    • Ծ૝DOMΛ७ਮͳΦʔόʔϔουͱͯ͠ഉআ


    • ߴ͍ύϑΥʔϚϯεΛ࣮ݱ


    • ίϛϡχςΟ͸·ͩখ͍͞

    View full-size slide

  17. ΈΜͳͰΩϟονΞοϓ͍͖ͯ͠ɺ


    ن໛ɺ༻్ʹ߹ͬͨબఆΛ

    View full-size slide

  18. ͋Γ͕ͱ͏͍͟͝·ͨ͠😘

    View full-size slide