JavaScript祭り2018初夏。Bootstrap4のBuild toolを使ってみよう

JavaScript祭り2018初夏で使用したスライドです。

Transcript

1. #PPUTUSBQͷ#VJME
   UPPMΛ࢖ͬͯΈΑ͏
   ,%%*΢Σϒίϛϡχέʔγϣϯζ
   Ѩ෦
   ਖ਼޾
   
   +BWB4DSJQUࡇΓ
   
   
2. Ѩ෦
   ਖ਼޾ʢ͋΂
   ·͞Ώ͖ʣ
   ,%%*΢Σϒίϛϡχέʔγϣϯζ
   ΤόϯδΣϦετ
   "$&4NBSU3FMFBTF
   ϓϩδΣΫτϚωʔδϟʔ
   $1*ελοϑϒϩάฤू௕
   
3. •  8FCͷߴ଎Խ
   •  αʔόʔߏஙɾӡ༻
   •  ϔουϨε
   •  Ωϟογϡ
   •  εϚʔτεϐʔΧʔ
   •  ॻ੶
   
   ϒϩά
   ࣥච
   •  ৯΂า͖
   ࠷ۙͷ࢓ࣄͱɺڵຯ͕͋Δ͜ͱ
   
7. ߴوͳΤϯδχΞͷօ༷ʹ#PPUTUSBQΛ঺հ
   ͢Δͷ͸ɺେม೜ͼͳ͍Ͱ͕͢ɺͻͱ·ͣฉ͍ͯ ͍ͩ͘͞ɻ
   ʮ#PPUTUSBQʯͷ#VJME
   UPPMΛࢀߟʹɺ
   ։ൃ؀ڥઃܭࢥ૝Λߟ࡯ͯ͠Έ·͠ΐ͏ɻ
   ௠ँ
   
10. ੈքͰͷαΠτʹ࢖ΘΕ͓ͯΓɺ
    ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ̍Ґ
    ʢ໿αΠτʹαΠτ͕#PPUTUSBQʣ
    
11. #PPUTUSBQ
    ͭͷར༻ํ๏
    ɾ$%/
    
    
    
    
    
    
    
    खܰ
    ɾ$PNQJMFE
    $44
    BOE
    +4
    
    
    
    
    
    
    
    ࣗࣾͷαʔόʔʹઃஔͰ͖Δ
    ɾ4PVSDF
    'JMFʢࠓճ঺հ͢Δ΋ͷʣ
    
    
    
    
    
    
    
    ࣗࣾ༻ʹΧελϚΠζͯ͠ӡ༻͢Δ৔߹
    
12. $PNQJMFE
    $44
    BOE
    +4
    
13. 4PVSDF
    'JMF൛
    4$44ฤू΍ɺ+BWB4DSJQUͷ௥ՃɾվमͳͲɺࣗࣾ༻ʹ
    ΧελϚΠζͯ͠࢖༻͢Δ৔߹
    4PVSDF
    'JMF൛ͷར༻͸#VJE
    UPPM͕ඞཁ
    
14. #VJME
    UPPM
    
    .BD༻υΩϡϝϯτ
    IUUQTHFUCPPUTUSBQDPNEPDTHFUUJOHTUBSUFE
    CVJMEUPPMTUPPMJOHTFUVQ
    
    8JOEPXT༻υΩϡϝϯτ
    IUUQTKFLZMMSCDPNEPDTXJOEPXT
    
15. #VJME
    UPPM
    ্ه͕σϑΥͰಈ࡞͢Δ͕ɺެࣜͷ#VJE
    UPPMͰ͸ͳ͘ɺ
    (VMQ౳Ͱ4BTTΛม׵ͯ͠΋ྑ͍
    ɾ$44ͷίϯύΠϧʢOPEFTBTTʣ
    ɾ$44ͷߏจνΣοΫʢTUZMFMJOUʣ
    ɾ$44ϕϯμʔϓϨϑΟοΫεʢQPTUDTTʣ
    ɾ$44
    NJOJGZʢDMFBODTTʣ
    ɾ+BWB4DSJQUίϯύΠϧʢ#BCFMʣ
    ɾ+BWB4DSJQU
    NJOJGZʢ6HMJGZ+4ʣ
    ɾ+BWB4DSJQUίʔυͷνΣοΫʢ&4MJOUʣ
    
16. #VJME
    UPPM
    ηοτΞοϓ
      OQNΛ࢖͏ͷͰɺ/PEFKTΛΠϯετʔϧ
      CPPUTUSBQσΟϨΫτϦʹ4PVSDF
    'JMFΛઃஔ
      QBDLBHFKTPOΛ͠ɺʮOQN
    JOTUBMMʯ
    IUUQTHJUIVCDPNUXCTCPPUTUSBQCMPCWQBDLBHFKTPO
      #VOEMFSΛΠϯετʔϧʢHFNͷར༻͸3VCZ͕ඞཁʣ
    
    HFN
    JOTUBMM
    CVOEMFS
      #VOEMFSͷΠϯετʔϧޙԼهίϚϯυΛ࣮ߦ
    
    CVOEMF
    JOTUBMM
    
17. #VJME
    UPPM
    ηοτΞοϓ
      OQNΛ࢖͏ͷͰɺ/PEFKTΛΠϯετʔϧ
      CPPUTUSBQσΟϨΫτϦʹ4PVSDF
    'JMFΛઃஔ
      QBDLBHFKTPOΛ͠ɺʮOQN
    JOTUBMMʯ
    IUUQTHJUIVCDPNUXCTCPPUTUSBQCMPCWQBDLBHFKTPO
      #VOEMFSΛΠϯετʔϧʢHFNͷར༻͸3VCZ͕ඞཁʣ
    
    HFN
    JOTUBMM
    CVOEMFS
      #VOEMFSͷΠϯετʔϧޙԼهίϚϯυΛ࣮ߦ
    
    CVOEMF
    JOTUBMM
    
18. σΟϨΫτϦߏ੒
    CPPUTUSBQ
    ᵓᴷᴷ
    EJTU
    
    ʢίϯύΠϧ͞ΕͨϑΝΠϧ͕֨ೲʣ
    ᴹ
    
    
    ᵓᴷᴷ
    DTT
    ᴹ
    
    
    ᵋᴷᴷ
    KT
    ᵓᴷᴷ
    EPDT
    ᴹ
    
    
    ᵋᴷᴷ
    FYBNQMFT
    ᵓᴷᴷ
    KT
    ʢίϯύΠϧલͷKTʣ
    ᵋᴷᴷ
    TDTT
    ʢ4$44ϑΝΠϧʣ
    
19. &4MJOU
    +BWB4DSJQUͷίʔυνΣοΫπʔϧ
    ਓʹΑͬͯॻ͖ํͷบͷҧ͍Λਖ਼ͨ͠Γɺ
    ໌Β͔ͳϛε΍ɺΤϥʔͷજࡏతύλʔϯʹܯࠂΛग़͢ɻ
    ඼࣭޲্ɺ࣌ؒઅ໿͕ظ଴Ͱ͖Δπʔϧɻ
    ͜ΜͳίʔυΛ௥Ճ͠Α͏΋ͷͳΒɾɾɾ
    
20. ϋνϟϝνϟౖΒΕΔ Чʆ
    
21. ϋνϟϝνϟౖΒΕΔ Чʆ
    ޮ཰ԽͷͨΊʹಋೖͨ͠ͷʹɺ
    ηϛίϩϯແ͍͚ͩͰౖΒΕΔɾɾɾ
    ͢͜ʔ͚ͩ͠ϧʔϧ؇ͯ͘͠΋Β͑ͳ͍Ͱ͠ΐ͏͔
    
22. &4MJOUͷϧʔϧΛΧελϚΠζ
    +BWB4DSJQUͷίʔυνΣοΫπʔϧ
    υΩϡϝϯτ
    
    ɹ
    ίϯϑΟά
    
    ɹ
    
    
    IUUQTFTMJOUPSHEPDTVTFSHVJEFDPOpHVSJOH
    
    ɹ
    ϧʔϧ
    
    ɹ
    
    
    IUUQTFTMJOUPSHEPDTSVMFT
    ΧελϚΠζ
    
    ɹ
    ϑΝΠϧ
    
    ɹ
    
    
    KTFTMJOUSDKTPO
    
25. &4MJOUͷϧʔϧΛΧελϚΠζ
    ྫɿηϛίϩϯͷೖྗΛڐՄ͍ͨ͠৔߹
    ɹTFNJ
    <FSSPS
    OFWFS>
    
    TFNJ
    P⒎z
    ɹBMXBZT
    
    ৗʹηϛίϩϯΛ࢖༻
    ɹOFWFS
    
    ηϛίϩϯΛ࢖Θͳ͍
    ɹFSSPS
    
    Τϥʔͱͯ͠ॲཧΛதࢭ
    ɹXBSO
    
    ܯࠂΛग़ͯ͠ॲཧΛ࣮ߦ
    
26. 4$44
    ޮ཰Α͘ελΠϧ͕มߋͰ͖Δ
    શମͷ৭ຯΛมߋͨ͠Γɺશମతͳ༨നΛมߋͨ͠Γɺ
    Ϙʔμʔͷؙ֯Λ΍ΊͨΓɺϒϨΠΫϙΠϯτม͑ͨΓɺ
    ·ʔ͍͍ͩͨԿͰ΋Ͱ͖·͢ɻ
    υΩϡϝϯτɿ
    IUUQTHFUCPPUTUSBQDPNEPDTHFUUJOHTUBSUFEUIFNJOH
    
27. 4$44มߋͷجຊϧʔϧ
      TDTTDPVTUPNTDTT
    Λ࡞੒
      @WBSJBCMFTTDTT͔Βมߋ͍ͨ͠ίʔυΛίϐʔ
      DPVTUPNTDTTʹϖʔετ͠ɺEFGBVMUΛ࡟আ͢Δ
    CMVF
    
    
    
    C⒎
    EFGBVMU
    
    @WBSJBCMFTTDTT
    ίϐʔ
    CMVF
    
    
    
    ⒎E
    
    DPVTUPNTDTT
    ʹ௥ه
    ྫ
    
    CMVFͷ৭Λมߋ
    
28. 4$44ͷ൓ө
      CPPUTUSBQDTTʹ൓ө͢Δ৔߹
    CPPUTUSBQTDTTʹԼهΛ௥ه
    !JNQPSU
    DPVTUPNz
      DPVTUPNDTTΛ৽ͨʹ࡞੒͢Δ৔߹
    QBDLBHFKTPOʹ௥ه
    OPEFTBTT
    PVUQVUTUZMF
    FYQBOEFE
    TPVSDFNBQ
    USVF
    TPVSDFNBQDPOUFOUT
    USVF
    QSFDJTJPO
    
    TDTTDPVTUPNTDTT
    EJTUDTTDPVTUPNDTTz
      DPVTUPNTDTTʹ֟Λ௥ه
    !JNQPSU
    OPEF@NPEVMFTCPPUTUSBQTDTTCPPUTUSBQ
    
29. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    *%ɿDIJZPBCF
    Ѩ෦
    ਖ਼޾
    DQJMJOF