バックエンドエンジニアの私がお勧めする SPAフロントエンド開発環境

@July Tech Festa 2020

Transcript

1. Θͨͳ΂
   !LB[@ όοΫΤϯυΤϯδχΞͷࢲ͕͓קΊ͢Δ
   41"ϑϩϯτΤϯυ։ൃ؀ڥ !+VMZ
   5FDI
   'FTUB
   
2. 8)0 ౉ลҰ޺ (Θͨͳ΂ ͔ͣͻΖ) @kaz_29 גࣜձࣾϋʔτϏʔπ ։ൃࣄۀ෦
3. גࣜձࣾϋʔτϏʔπ ຊۀ͸MSPͷձࣾͰɺ ։ൃࣄۀΛ΍͍ͬͯ·͢ɻ
4. IC4","#" QPEDBTU΍ͬͯ·͢
5. ΑΖ͓͘͠Ͷ͕͍͠·͢
6. 'SPOUFOE
   8FC
   %FWFMPQNFOU
8. શ෦ΩϟονΞοϓͱ͔ͭΒΊ
9. ৽͍͠ΞϓϦΛ࡞Γ࢝ΊΔ
   ͱ͖ʹຖճ؀ڥઃఆʹ೰Ή
10. ͙͢ʹ࡞Γ࢝ΊΒΕͯɺ
    ؾ࣋ͪΑ͘։ൃΛਐΊΒΕΔ
    ͓͢͢Ίͷશ෦ೖΓͷ
    ࣗ෼༻CPJMFSQMBUFͬΆ͍΋ͷ͕ཉ͍͠
11. ٕज़ཁૉ
12. ٕज़ཁૉ w 3FBDU
    
    IUUQTKBSFBDUKTPSH
    w .PC9
    
    IUUQTNPCYKTPSH3&"%.&IUNM
    w /FYU+4
    
    IUUQTOFYUKTPSH
    w UZQFTDSJQU
    
    IUUQTXXXUZQFTDSJQUMBOHPSH
    w NBUFSJBMVJ
    
    IUUQTNBUFSJBMVJDPN
    w TUPSZCPPL
    
    IUUQTTUPSZCPPLKTPSH
    w KFTU
    
    IUUQTKFTUKTJP
13. ٕज़ཁૉ 3FBDU w 'BDFCPPLۘ੡ͷ+BWB4DSJQUϑϨʔϜϫʔΫ
    w "OHVMBSͱ͔7VFͱ͔ͱΑ͘ൺ΂ΒΕΔ
    w ࠃ಺Ͱ͸7VF͕ਓؾ
    w ࠓճ͸࢖͍׳Εͨ3FBDUͰ͢͢Ί·͢
14. ٕज़ཁૉ .PC9 w εςʔτΛ؅ཧ͢Δπʔϧ
    w 3FEVYͷ୅ସ͑
    w ͓खܰ
    w ֮͑΍͍͢
    w ॻ͘ίʔυྔ͕গͳ͍
    w ಺෦ίʔυ͕ෳࡶ ࠇຐज़ͬΆ͍ ͷͰσόοά͕೉͍͠
    w ࢲ͸ࠓ·Ͱࠔͬͨ͜ͱ͸ͳ͍
    w ͦ΋ͦ΋άϩʔόϧͳεςʔτ͸ඞཁ࠷௿ݶʹͯ͠ଟ༻͠ͳ͍ํ͕ྑ͍ ؾ͕͢Δ
15. ٕज़ཁૉ /FYU+4 w 6OJWFSTBM *TPNPSQIJD
    +BWB4DSJQU
    ϑϨʔϜϫʔΫ
    w 443ରԠ
    w γϯϓϧͰೖ໳͠΍͍͢
    w ͚Ͳ࢖͍͜ͳ͢ͱ৭ʑͰ͖Δ
    w SPVUJOHΛॻ͔ͳͯ͘ྑ͍ ॻ͘͜ͱ΋Ͱ͖Δ
    
    w 4UBUJD
    )5.-
    &YQPSU
16. ٕज़ཁૉ UZQFTDSJQU w ϚΠΫϩιϑτ͕։ൃͨ͠Φʔϓϯιʔεݴޠ
    ͬ͘͟Γݴ͏ͱํఆ͕ٛͰ͖Δ+BWB4DSJQU
    w +BWB4DSJQUͷεʔύʔηοτ
    w ܕɺΠϯλʔϑΣʔεɺΫϥεͳͲͳͲ͕࢖͑Δ
    w δΣωϦοΫ͕࢖͑Δ
    w *%&͕ڧྗʹαϙʔτͯͯ͘͠ΕΔ
17. ٕज़ཁૉ NBUFSJBMVJ w 3FBDU޲͚6*ίϯϙʔωϯτϥΠϒϥϦ
    w (PPHMFͷ.BUFSJBMσβΠϯΛϕʔεʹ։ൃ
    w ๛෋ͳػೳ
    w 5IFNF
    w ϨεϙϯγϒରԠػೳ
18. ٕज़ཁૉ TUPSZCPPL w ίϯϙʔωϯτ୯ҐͰαϯυϘοΫεͰ։ൃͰ͖Δ
    w ๛෋ͳϓϥάΠϯ
    w BEEPOWJFXQPSU
    w BEEPOJO
    w ίϯϙʔωϯτΛҰཡͰڞ༗Ͱ͖Δ
    w Χλϩά
    w υΩϡϝϯτ
    w ςετ
    ෇͖ͷ͸ະணखͰΑ͘Θ͔͍ͬͯͳ͍
19. ٕज़ཁૉ KFTU w +BWB4DSJQU༻ςεςΟϯάϑϨʔϜϫʔΫ
    w ίʔυΧόϨοδ
    w ϞοΫ
    w ϑϩϯτΤϯυ։ൃͷςετʹ͍ͭͯ͸໛ࡧத
    w DVTUPN
    IPPL಺ͷॲཧͷςετ
    w σʔλͷՃ޻Λ൐͏ॲཧͷςετ
20. CPJMFSQMBUF
21. CPJMFSQMBUF w લग़ͷٕज़ཁૉΛશͯ૊ΈࠐΉ
    w )FMMP
    8PSMEͰ͸ͳ࣮͘ࡍʹಈ͘ίʔυαϯϓϧΛؚΉ
    w 4UPSF
    w "1*࿈ܞ
    w ͲΜͳ;͏ʹ։ൃ͍ͯ͠Δ͔ ͋Δఔ౓ Έ͑Δ
    w 4UBUJD
    )5.-
    &YQPSU
    w ϩʔΧϧͰͷಈ࡞֬ೝ؀ڥ
    w σϓϩΠ
22. αϯϓϧΞϓϦ https://www.weatherapi.com/api.aspx
23. αϯϓϧΞϓϦ
24. αϯϓϧΞϓϦ w UZQFTDSJQU
    w 'VODUJPO
    $PNQPOFOU
    w )PPLT
26. ։ൃͷਐΊํ
27. ։ൃͷਐΊํ w OPEFOW
    
    IUUQTHJUIVCDPNOPEFOWOPEFOW
    w %PDLFS
    %FTLUPQ
    GPS
    .BD
    
    
    IUUQTIVCEPDLFSDPNFEJUJPOTDPNNVOJUZEPDLFSDFEFTLUPQ NBD
28. ։ൃͷਐΊํ ίϯϙʔωϯτΛ࣮૷ w ZBSO
    TUPSZCPPL
    TUBSUTUPSZCPPL
    Q
    
    T
    QVCMJD
    IPU
    SFMPBE
    WJFX
    QPSUΛ੾ସ͑ͯQDNPCJMFͷݟͨ໨Λ֬ೝ
    ݴޠΛ੾ସ͑ͯදࣔ֬ೝ
    
    TUBUJD
    XFCͰͷରԠ͸ݕ౼த
29. ։ൃͷਐΊํ ίϯϙʔωϯτΛ࣮૷ 1 import React from 'react' 2 import { storiesOf } from '@storybook/react' 3 import WeatherCard from '.' 4 import { currentWeather } from '~/__fixtures__/current_weather' 5 6 storiesOf('components/WeatherCard', module) 7 .add('default', () => ( 8 <WeatherCard 9 currentWeather={currentWeather} 10 /> 11 )) JOEFYTUPSJFTUTY
30. ։ൃͷਐΊํ υϝΠϯϩδοΫͷ࣮૷ w ZBSO
    UFTU
    /0%&@&/7UFTU
    KFTU
    OPDBDIF
    FOWKTEPN
    6OJU5FTUΛॻ͖ͳ͕Β࣮૷
    AZBSO
    UFTU
    
    G
    ϑΝΠϧ໊
    U
    ςετ໊A
    $PNQPOFOUͷςετ͸ͪΐͬͱΑ͘Θ͔ΒΜ
    ҙຯ͕͋ΔςετΛ͔͚Δ͔
31. ։ൃͷਐΊํ ΞϓϦͷ࣮૷ w ZBSO
    EFW
    OFYU
    EFW
    IPU
    SFMPBE
    ಈ࡞֬ೝ͠ͳ͕Β։ൃ
    
32. ։ൃͷਐΊํ 
    ZBSO
    TUPSZCPPL 
    ZBSO
    EFW ίʔυमਖ਼ $PNQPOFOUͷ࣮૷ ಈతͳڍಈͷ࣮૷ IPU
    SFMPBE 
    ZBSO
    UFTU %PNBJO
    MPHJDͳͲ
    ͷ6OJU5FTU
33. ։ൃ؀ڥ ࠷ऴ֬ೝ 4UBUJD
    )5.-
    &YQPSUͨ͠੩తϑΝΠϧ w ZBSO
    CVJME
    OFYU
    CVJME
    
    OFYU
    FYQPSU
    4UBUJD
    &YQPSUͰBSUJGBDUΛ࡞੒
    w EPDLFSDPNQPTF
    VQ
    E
    OHJOYίϯςφܦ༝Ͱಈ࡞֬ೝ
    
34. ։ൃ؀ڥ ࠷ऴ֬ೝ 4UBUJD
    )5.-
    &YQPSUͨ͠੩తϑΝΠϧ 1 version: '3.1' 2 3 services: 4 nextjs-template: 5 container_name: nextjs-template 6 image: nginx:latest 7 ports: 8 - 80:80 9 volumes: 10 - ./out:/usr/share/nginx/html:cached 11 - ./nginx.conf.d:/etc/nginx/conf.d 12 restart: always
35. ։ൃ؀ڥ ࠷ऴ֬ೝ 4UBUJD
    )5.-
    &YQPSUͨ͠੩తϑΝΠϧ ϖʔδભҠઌͰϦϩʔυ͢Δͱ
    
    /PU
    'PVOE
36. ։ൃ؀ڥ ࠷ऴ֬ೝ 4UBUJD
    )5.-
    &YQPSUͨ͠੩తϑΝΠϧ 1 server { 2 listen 80; 3 server_name localhost; 4 5 #charset koi8-r; 6 #access_log /var/log/nginx/host.access.log main; 7 8 location / { 9 root /usr/share/nginx/html; 10 index index.html index.htm; 11 try_files $uri $uri.html /index.html; 12 } ... ͚ͩ͜͜௥Ճ
37. σϓϩΠ
38. σϓϩΠ σϓϩΠઌͷબ୒ࢶ w ͳΜΒ͔8FCαʔόʔΛཱͯΔ
    w 4UBUJD
    8FCΛϗετ͢ΔαʔϏεΛ࢖͏
    w ֤Ϋϥ΢υϕϯμʔͷΦϒδΣΫτετϨʔδ
    ੩త8FCΛϗετ͢ΔαʔϏε
    w "[VSF
    "QQ
    4FSWJDF
    
    4UBUJD
    8FC
    "QQT
39. σϓϩΠ σϓϩΠઌͷબ୒ࢶ w ͳΜΒ͔8FCαʔόʔΛཱͯΔ
    w 4UBUJD
    8FCΛϗετ͢ΔαʔϏεΛ࢖͏
    w ֤Ϋϥ΢υϕϯμʔͷΦϒδΣΫτετϨʔδ
    ੩త8FCΛϗετ͢ΔαʔϏε
    w "[VSF
    "QQ
    4FSWJDF
    
    4UBUJD
    8FC
    "QQT
40. σϓϩΠ "[VSF
    4UBUJD
    8FC
    "QQT
    
    1SFWJFX w ੩తαΠτͷϗεςΟϯάαʔϏε
    
    w (JU)VC
    "DUJPOTʹΑΔ
    #VJME
    
    %FQMPZ (JU)VC࿈ܞඞਢ
    w ΧελϜυϝΠϯରԠɺ44-ূ໌ॻ ແྉ
    ΧελϜυϝΠϯͷઃఆΛ͢Δͱɺࣗಈతʹ44-ূ໌ॻ΋࡞੒͞ΕΔ
    w ϓϨϏϡʔػೳ
    13Λ࡞੒͢ΔͱɺϓϨϏϡʔ൛͕ࣗಈσϓϩΠ͞ΕΔ
    ϚʔδΫϩʔζ͢Δͱຊ൪൓ө͞ΕɺϓϨϏϡʔ൛͸ࣗಈ࡟আ
    w ϓϩϏδϣχϯά࣌ʹσϑΥϧτͷઃఆ͕ࣗಈੜ੒͞ΕΔ
    w ΞϓϦΤϯδχΞʹ࢖͍΍͍͢
41. σϓϩΠ "[VSF
    4UBUJD
    8FC
    "QQT
    
    1SFWJFX
42. σϓϩΠ "[VSF
    4UBUJD
    8FC
    "QQT
    
    1SFWJFX
43. σϓϩΠ "[VSF
    4UBUJD
    8FC
    "QQT
    
    1SFWJFX
44. σϓϩΠ "[VSF
    4UBUJD
    8FC
    "QQT
    
    1SFWJFX
45. ͓·͚
46. ͓·͚ 6OJU5FTUॻ͍ͯɺ(JU)VC
    "DUJPOTಋೖͨ͠ͷͰ$*͠Α͏ ... 12 jobs: 13 build_and_deploy_job: 14 if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 runs-on: ubuntu-latest 16 name: Build and Deploy Job 17 steps: 18 - uses: actions/checkout@v2 19 with: 20 submodules: true 21 - name: Setup nodejs 22 uses: actions/setup-node@v1 23 with: 24 node-version: '12.x' 25 - run: yarn install --dev 26 - run: yarn test:ci 27 - name: Build And Deploy 28 id: builddeploy ...
47. ·ͱΊ
48. ·ͱΊ w ϑϩϯτΤϯυ։ൃ͸ɺ·ͩ·ͩਐԽ͕͸͍͛͠
    w ਺೥લͷͬͨࣽ͝ײ ͸ແ͘ͳͬͨʁ
    w ͲΜͲΜ͍͍ײ͡ʹਐԽͯ͠Δײ
    w ۤ࿑͢Δ͜ͱ΋͋Δ͚ͲɺόοΫΤϯυ΋ಉ͡
    w ϑϩϯτΤϯυ։ൃ΋ͨͷ͍͠
    &OKPZ https://github.com/kaz29/nextjs-template
49. ͓͠·͍