私的フロントエンド周りを ざっくり紹介するよ

制作寄りフロントエンドエンジニアがざっくりフロントエンド周りを紹介します。

Transcript

1. ϑϩϯτΤϯυपΓΛ
   ͬ͘͟Γ঺հ͢ΔΑ
   ࢲత
   
   

   View Slide

2. ઙԬɹರࢠ
   ϑϩϯτΤϯυΤϯδχΞ
   BUTVLPB
   ࢓ࣄ͍ͩ͘͞
   

   View Slide

3. εΩϧηοτ
   )5.-
   $44
   +BWB4DSJQU
   6*69
   $.4
   ੍࡞دΓͰ͢
   

   View Slide

4. ͦΜͳࢲ͕࢖ͬͯΔɾΑ͘ฉ͘
   ϑϩϯτΤϯυܥͷ΋ͷΛ঺հ͠·͢
   ͬ͘͟Γ
   

   View Slide

5. View Slide

6. FNNFU
   )5.-͕ΊͬͪΌૣ͘ॻ͚Δɺ;FO$PEJOHͷޙܧ
   9.-΋ॻ͚ΔΑʢΤσΟλʹΑΔ͔΋ʣ
   EJWIPHFQGVHBVMMJ
   EJWJEIPHF
   QDMBTTGVHBQ
   VM
   MJMJ
   MJMJ
   VM
   EJW
   

   View Slide

7. ςϯϓϨʔτΤϯδϯ
   ύʔπ͝ͱͷσʔλΛूΊͯίϯύΠϧ͢Δ
   )BNM 3VCZ
   +BEF /PEFKT
   -JRVJE 1)1
   ͳͲ
   &$5
   +4੡ɺ$P⒎FF4DSJQUͬΆ͍ه๏
   )5.-͕ͦͷ··࢖͑Δ
   ૣ͍
   ࢖༻த
   

   View Slide

8. View Slide

9. $44ϓϦϓϩηοα
   $44ϝλݴޠɺίϯύΠϧͯ͠࢖͏
   -&44 /PEFKT
   4UZMVT /PEFKT
   5"44 +4
   ͳͲ
   4BTT
   3VCZ੡
   ॊೈʹ͍Ζ͍ΖͰ͖Δ
   DPNQBTT͕࢖͑Δ
   ࢖༻த
   

   View Slide

10. ϑϨʔϜϫʔΫ
    ϕʔεͷελΠϧ͕એݴ͞Ε͍ͯΔ
    DMBTTΛ෇༩͢Δ͚ͩͰͦΕͬΆ͍αΠτ͕࡞ΕΔ
    #PPUTUSBQ.BUFSJBM6*GPVOEBUJPO1VSFͳͲ
    ݸਓతʹ͸΄ͱΜͲ࢖Θͳ͍Ͱ͢
    ࣗ෼Ͱ૊Μͩ΄͏͕ૣ͍ʜ
    

    View Slide

11. $44ͷઃܭख๏
    ϓϦϓϩηοαͱ૬ੑ͕Α͍
    00$444."$44#&.ͳͲ
    *5$44
    Өڹൣғ͕޿͍ॱʹ
    هड़͍ͯ͘͠ख๏
    ϦϑΝϨϯε͸গͳ͍
    ࢖༻த
    

    View Slide

12. View Slide

13. &$."4DSJQU
    ॴҦ+BWB4DSJQUͷ৽͍͠࢓༷ɺ݄ʹਖ਼ࣜʹ࠾୒ʹ
    ͳΜ͔͍Ζ͍Ζ৽͘͠ͳͬͨɺΒ͍͠
    ϑϨʔϜϫʔΫ
    "OHVMBS+4#BDLCPOFKT,OPDLPVUKT
    3FBDUKT7VFKTͳͲ
    έʔεόΠέʔεͰબͿͱ͍͍ʢઌഐஊʣ
    

    View Slide

14. JPKT
    /PEFKTWͷ'PSLɺ/PEFKTͱޓ׵ੑ͋Γ
    ҆ఆͨ͠ϦϦʔεεέδϡʔϧΛఏڙ
    /PEF'PVOEBUJPOʹΑͬͯ/PEFKTͱ౷߹
    ݄ʹ
    /PEFKT
    ϦϦʔε༧ఆ
    

    View Slide

15. ͦͷଞ
    

    View Slide

16. λεΫϥϯφʔ
    ͍ΖΜͳॲཧΛొ࿥ͯ͠޷͖ͳͱ͖ʹ࣮ߦ͢Δ
    ͳΜ͔͍Ζ͍ΖͰ͖Δ
    όοΫΤϯυͰ΋݁ߏ࢖͑ΔɺΈ͍ͨ
    (VMQKT
    /PEFKT੡ɺ(SVOUKTͷޙଓ
    ඇಉظॲཧͳͷͰૣ͍
    ࢖༻த
    

    View Slide

17. ଞʹ΋͍Ζ͍Ζ͋Γ·͕͢
    ؾʹͳΔํ͸੠Λ͔͚ͯΈ͍ͯͩ͘͞
    

    View Slide

18. ͓·͚ɿΑ͘࢖͏OQNύοέʔδ
    GTNLEJSQQBUIFDU4UZMF4UBUT
    HVMQܥ
    SVCZTBTTNJOJGZDTTDTTDPNCJNBHFNJOKTNJO
    SFQMBDFQMVNCFSOPUJGZTFRVFODFXFCTFSWFS
    JDPOGPOUXBUDISFOBNF)PMPHSBN
    /PEFKT͸
    (VMQ༻
    

    View Slide

19. 5IBOLT
    

    View Slide