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

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

irof
February 17, 2017

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

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

irof

February 17, 2017
Tweet

More Decks by irof

Other Decks in Programming

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
    [email protected]
    QBDLBHFKTPO

    View Slide

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

    View Slide

  21. 8FCQBDL
    ·ͱΊͨ+BWB4DSJQU
    XFCQBDL
    [email protected]
    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