フロントエンドわからないけど画面つくることになって

[関ジャバ] フロントエンド初心者勉強会 in 大阪のLTです。
https://kanjava.connpass.com/event/49104/

Transcript

1. ϑϩϯτΤϯυΘ͔Βͳ͍
   ͚Ͳը໘࡞Δ͜ͱʹͳͬͯ
   ϑϩϯτΤϯυॳ৺ऀษڧձJOେࡕ
   5
   !JSPG
   

   View Slide

2. എܠͱͯࣗ͠ݾ঺հ
   w ͍Ζ;Ͱ͢ɹɹɹɹɹɹɹ͜Εˠ
   w େن໛4*FS಺Ͱੜ͖ͯ·ͨ͠
   w αʔόʔαΠυ+BWBͳਓͰ͢
   w +BWB4DSJQU͸ͨ·ʹ͚ͩͲ*&ҎԼུ
   w )5.-ͱ͔$44ͱ͔ԿͦΕ
   

   View Slide

3. എܠͱͯ͠ܦҢ
   ʮը໘͸ద౰ʹ࡞ͬͯɻ

   ɹ"ENJO-5&ͱ͔࢖ͬͯɻʯ
   ͓ɺ͓͏ʜʜ
   ʮద౰Ͱ͍͍͔ΒXXXʯ
   ͋ɺ͸͍ʜʜ
   

   View Slide

4. ࢲͷϑϩϯτΤϯυྗ
   w #PPUTUSBQ͸5XJUUFS#PPUTUSBQͱ͔
   ݴͬͯͨ͜Ζʹ৮ͬͨʢඇۀ຿
   w K2VFSZॻ͚ͱݴΘΕΔͱάάΔ
   w )5.-ͱ͔$44ͱ͔ݴ༿͚ͩ஌ͬ
   ͯΔʢ໊લग़ͨࠒʹ
   

   View Slide

5. Ͳͳ͍ͤʔͱʜʜ
   

   View Slide

6. ͱͳΔਓଟ͍ΑͶʂʁ

   ʢؔδϟόͩ͠ʂʂʣ
   

   View Slide

7. ର৅ͷ֓ཁ
   w 4QSJOH.7$5IZNFMFBGΛ࢖͏
   w ը໘͸޷͖ʹͰ͖ΔˡԿ΋ܾ·ͬͯͳ͍
   
   w Ϣʔβʔ͸਺ਓʢإΛ֮͑ΕΔఔ౓
   w ͕࣌ؒͳ͍ˡ͍ͭͩͬͯ࣌ؒ͸༗ݶͩ͠
   

   View Slide

8. ৚݅ͱํ਑
   w ͋Δఔ౓ݟӫ͑Λ੔͑Δඞཁ͸͋Δ
   w ࣗ෼Ͱ+BWB4DSJQU$44͸ॻ͔ͳ͍
   w "ENJO-5&ͱ͔ͬͯݴͬͯͨ͠
   "ENJO-5&ͱ͔ݴ͏΋ͷΛ࢖͓͏ʂ
   

   View Slide

9. ࢥ͍͍ͭͨબ୒ࢶ
   w ϓϩδΣΫτʹෲ࣋ͪ͢Δ
   w $%/Λ࢖͏
   w 8FC+BSTΛ࢖͏
   w 8FCQBDLΛ࢖͏
   

   View Slide

10. ϓϩδΣΫτͰෲ࣋ͪ
    w μ΢ϯϩʔυͨ͠[JQղౚͨ͠ͷΛશ෦࣋ͬͯ
    ͓͘ܗ
    w த਎ͷେ൒͸࢖Θͳ͍ʁʢEJTU͚ͩͰ͓Lʁ
    w ͚ͲɺͲΕ͕͍Δͷ͔Θ͔Βͳ͍
    w ͱ͸ݴ͑ɺཁΒΜ΋ͷΛ4$.ʹೖΕͨ͘ͳ͍
    ͳ͠झຯʹ߹Θͳ͍
    

    View Slide

11. $%/
    w ͳΜ͔͍ͬͺ͍͋Δ
    w ͲΕ࢖͑͹͍͍͔Θ͔Βͳ͍
    w ͔ͯແྉͷ͸ຊ൪Ͱ࢖ͬͯେৎ෉ʁ
    ͳ͠։ൃͷΈͰ࢖͏
    

    View Slide

12. ͯ͜ͱͰೋ୒
    w 8FC+BST
    w l͸͡Ίͯͷ4QSJOH#PPUzͰݟͨʂ
    w 8FCQBDL
    w ͸͡Ί·ͯ͠ʢ୭ʁ
    

    View Slide

13. 8FC+BST
    w .BWFO$FOUSBMͷ+4$44Λ࢖͑Δ
    Α͏ʹͳΔ΍ͭ
    

    View Slide

14. 8FC+BST
    .BWFO$FOUSBM
    /1.
    #PXFS
    ࢲͷΞϓϦέʔγϣϯ
    ࢖͍͍ͨ+4$44 ࢲʹ΍͍͞͠ੈք
    ࢲͷ஌Βͳ͍ੈք
    (SBEMF
    CVJMEHSBEMF
    ͜͜ʹདྷΕ͹উͬͨΑ͏ͳ΋ͷ
    

    View Slide

15. w 8FC+BST׬શʹϚελʔͨ͠
    

    View Slide

16. 8FCQBDL
    w )5.-ʹAMJOLAͱ͔ATDSJQUAͱ͔
    ฒ΂ͳͯ͘ࡁΉΑ͏ʹͳΔ΍ͭ
    w )5.-ͷ࠷ޙʹATDSJQUAΛҰͭॻ
    ͚ͩ͘ͰࡁΉ
    

    View Slide

17. 8FCQBDLΛ࢖͏ʹ͸ʜʜ
    w OQN͕લఏ
    w ͦ΋ͦ΋OQN͠Βͳ͍
    

    View Slide

18. OQN
    w /PEFKT1BDLBHF.BOBHFSʁ
    w ·͋ґଘղܾͯ͘͠ΕΔ΍ͭͳΜͩ
    Ζ͏͖ͬͱʢଞʹ΋৭ʑͰ͖ΔΈͨ
    ͍͚ͩͲ
    

    View Slide

19. OQN
    ࢖͍͍ͨ+4$44
    /1.
    OQN
    OPEF@NPEVMFT
    QBDLBHFKTPO
    

    View Slide

20. w OQN׬શʹϚελʔͨ͠
    

    View Slide

21. 8FCQBDL
    ·ͱΊͨ+BWB4DSJQU
    XFCQBDL
    OPEF@NPEVMFT
    XFCQBDLDPOGJHKT
    ΤϯτϦϙΠϯτͷKT
    

    View Slide

22. w 8FCQBDL׬શʹϚελʔͨ͠
    

    View Slide

23. ϓϩδΣΫτͰ࣋ͭ΋ͷ
    w ϑΝΠϧͰࡁΉͷ͸·ͣ·ͣ
    w ΤϯτϦϙΠϯτͷKTͱQBDLBHFKTPOʹ࢖͏ϥΠϒ
    ϥϦΛ΄΅ಉ͡಺༰Ͱॻ͖ฒ΂Δ͜ͱʹʢඇ%3:ʣ
    w Ϗϧυͷεςοϓ͕Ұͭ૿͑Δ
    ├── app
    │ └── index.js
    ├── package.json
    └── webpack.config.js
    ͳ͠+4ॻ͔ͳ͍ͷͰա৒
    

    View Slide

24. ͯ͜ͱͰ
    w ࠓճ͸8FC+BSTͰʂ
    

    View Slide

25. ͍͖ͳΓࠔͬͨ
    w ηϯτϥϦϧϙδτϦʹ࢖͍͍ͨόʔ
    δϣϯ͕ͳ͍Αʜʜ
    

    View Slide

26. 8FC+BST
    .BWFO$FOUSBM
    /1.
    #PXFS
    ࢲͷΞϓϦέʔγϣϯ
    ࢖͍͍ͨ+4$44 ࢲʹ΍͍͞͠ੈք
    ࢲͷ஌Βͳ͍ੈք
    (SBEMF
    CVJMEHSBEMF
    ͜Ε͠ͳ͍ͱ࢖͑ͳ͍
    

    View Slide

27. ࣗ෼ͰσϓϩΠͰ͓L
    

    View Slide

28. w 8FC+BST׬શʹϚελʔͨ͠ʢ࠶
    

    View Slide

29. ͱ͜ΖͰ
    w ࠓճͷؔδϟό͸ʮϑϩϯτΤϯ
    υʯͬͯ୊͚ͨ͠ͲɺͲ͔͜Βϑϩ
    ϯτΤϯυͳͷ͔Α͘Θ͔Γ·ͤΜ
    

    View Slide