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

@July Tech Festa 2020

Transcript

1. Θͨͳ΂!LB[@
   όοΫΤϯυΤϯδχΞͷࢲ͕͓קΊ͢Δ
   41"ϑϩϯτΤϯυ։ൃ؀ڥ
   !+VMZ5FDI'FTUB
   

   View Slide

2. 8)0
   ౉ลҰ޺
   (Θͨͳ΂ ͔ͣͻΖ)
   @kaz_29
   גࣜձࣾϋʔτϏʔπ ։ൃࣄۀ෦
   

   View Slide

3. גࣜձࣾϋʔτϏʔπ
   ຊۀ͸MSPͷձࣾͰɺ
   ։ൃࣄۀΛ΍͍ͬͯ·͢ɻ
   

   View Slide

4. IC4","#"
   QPEDBTU΍ͬͯ·͢
   

   View Slide

5. ΑΖ͓͘͠Ͷ͕͍͠·͢
   

   View Slide

6. 'SPOUFOE8FC%FWFMPQNFOU
   

   View Slide

7. View Slide

8. શ෦ΩϟονΞοϓͱ͔ͭΒΊ
   

   View Slide

9. ৽͍͠ΞϓϦΛ࡞Γ࢝ΊΔ
   ͱ͖ʹຖճ؀ڥઃఆʹ೰Ή
   

   View Slide

10. ͙͢ʹ࡞Γ࢝ΊΒΕͯɺ
    ؾ࣋ͪΑ͘։ൃΛਐΊΒΕΔ
    ͓͢͢Ίͷશ෦ೖΓͷ
    ࣗ෼༻CPJMFSQMBUFͬΆ͍΋ͷ͕ཉ͍͠
    

    View Slide

11. ٕज़ཁૉ
    

    View Slide

12. ٕज़ཁૉ
    w 3FBDUIUUQTKBSFBDUKTPSH
    w .PC9IUUQTNPCYKTPSH3&"%.&IUNM
    w /FYU+4IUUQTOFYUKTPSH
    w UZQFTDSJQUIUUQTXXXUZQFTDSJQUMBOHPSH
    w NBUFSJBMVJIUUQTNBUFSJBMVJDPN
    w TUPSZCPPLIUUQTTUPSZCPPLKTPSH
    w KFTUIUUQTKFTUKTJP
    

    View Slide

13. ٕज़ཁૉ
    3FBDU
    w 'BDFCPPLۘ੡ͷ+BWB4DSJQUϑϨʔϜϫʔΫ
    w "OHVMBSͱ͔7VFͱ͔ͱΑ͘ൺ΂ΒΕΔ
    w ࠃ಺Ͱ͸7VF͕ਓؾ
    w ࠓճ͸࢖͍׳Εͨ3FBDUͰ͢͢Ί·͢
    

    View Slide

14. ٕज़ཁૉ
    .PC9
    w εςʔτΛ؅ཧ͢Δπʔϧ
    w 3FEVYͷ୅ସ͑
    w ͓खܰ
    w ֮͑΍͍͢
    w ॻ͘ίʔυྔ͕গͳ͍
    w ಺෦ίʔυ͕ෳࡶ ࠇຐज़ͬΆ͍
    ͷͰσόοά͕೉͍͠
    w ࢲ͸ࠓ·Ͱࠔͬͨ͜ͱ͸ͳ͍
    w ͦ΋ͦ΋άϩʔόϧͳεςʔτ͸ඞཁ࠷௿ݶʹͯ͠ଟ༻͠ͳ͍ํ͕ྑ͍ ؾ͕͢Δ
    
    

    View Slide

15. ٕज़ཁૉ
    /FYU+4
    w 6OJWFSTBM *TPNPSQIJD
    +BWB4DSJQUϑϨʔϜϫʔΫ
    w 443ରԠ
    w γϯϓϧͰೖ໳͠΍͍͢
    w ͚Ͳ࢖͍͜ͳ͢ͱ৭ʑͰ͖Δ
    w SPVUJOHΛॻ͔ͳͯ͘ྑ͍ ॻ͘͜ͱ΋Ͱ͖Δ
    
    w 4UBUJD)5.-&YQPSU
    

    View Slide

16. ٕज़ཁૉ
    UZQFTDSJQU
    w ϚΠΫϩιϑτ͕։ൃͨ͠Φʔϓϯιʔεݴޠ
    ͬ͘͟Γݴ͏ͱํఆ͕ٛͰ͖Δ+BWB4DSJQU
    w +BWB4DSJQUͷεʔύʔηοτ
    w ܕɺΠϯλʔϑΣʔεɺΫϥεͳͲͳͲ͕࢖͑Δ
    w δΣωϦοΫ͕࢖͑Δ
    w *%&͕ڧྗʹαϙʔτͯͯ͘͠ΕΔ
    

    View Slide

17. ٕज़ཁૉ
    NBUFSJBMVJ
    w 3FBDU޲͚6*ίϯϙʔωϯτϥΠϒϥϦ
    w (PPHMFͷ.BUFSJBMσβΠϯΛϕʔεʹ։ൃ
    w ๛෋ͳػೳ
    w 5IFNF
    w ϨεϙϯγϒରԠػೳ
    

    View Slide

18. ٕज़ཁૉ
    TUPSZCPPL
    w ίϯϙʔωϯτ୯ҐͰαϯυϘοΫεͰ։ൃͰ͖Δ
    w ๛෋ͳϓϥάΠϯ
    w BEEPOWJFXQPSU
    w BEEPOJO
    w ίϯϙʔωϯτΛҰཡͰڞ༗Ͱ͖Δ
    w Χλϩά
    w υΩϡϝϯτ
    
    w ςετ
    
    
    ෇͖ͷ͸ະணखͰΑ͘Θ͔͍ͬͯͳ͍
    

    View Slide

19. ٕज़ཁૉ
    KFTU
    w +BWB4DSJQU༻ςεςΟϯάϑϨʔϜϫʔΫ
    w ίʔυΧόϨοδ
    w ϞοΫ
    w ϑϩϯτΤϯυ։ൃͷςετʹ͍ͭͯ͸໛ࡧத
    w DVTUPNIPPL಺ͷॲཧͷςετ
    w σʔλͷՃ޻Λ൐͏ॲཧͷςετ
    

    View Slide

20. CPJMFSQMBUF
    

    View Slide

21. CPJMFSQMBUF
    w લग़ͷٕज़ཁૉΛશͯ૊ΈࠐΉ
    w )FMMP 8PSMEͰ͸ͳ࣮͘ࡍʹಈ͘ίʔυαϯϓϧΛؚΉ
    w 4UPSF
    w "1*࿈ܞ
    w ͲΜͳ;͏ʹ։ൃ͍ͯ͠Δ͔ ͋Δఔ౓
    Έ͑Δ
    w 4UBUJD)5.-&YQPSU
    w ϩʔΧϧͰͷಈ࡞֬ೝ؀ڥ
    w σϓϩΠ
    

    View Slide

22. αϯϓϧΞϓϦ
    https://www.weatherapi.com/api.aspx
    

    View Slide

23. αϯϓϧΞϓϦ
    

    View Slide

24. αϯϓϧΞϓϦ
    w UZQFTDSJQU
    w 'VODUJPO$PNQPOFOU
    w )PPLT
    

    View Slide

25. View Slide

26. ։ൃͷਐΊํ
    

    View Slide

27. ։ൃͷਐΊํ
    w OPEFOW
    IUUQTHJUIVCDPNOPEFOWOPEFOW
    w %PDLFS%FTLUPQGPS.BD
    IUUQTIVCEPDLFSDPNFEJUJPOTDPNNVOJUZEPDLFSDFEFTLUPQ
    NBD
    

    View Slide

28. ։ൃͷਐΊํ
    ίϯϙʔωϯτΛ࣮૷
    w ZBSOTUPSZCPPL TUBSUTUPSZCPPLQTQVCMJD
    
    IPUSFMPBE
    WJFXQPSUΛ੾ସ͑ͯQDNPCJMFͷݟͨ໨Λ֬ೝ
    ݴޠΛ੾ସ͑ͯදࣔ֬ೝTUBUJDXFCͰͷରԠ͸ݕ౼த
    

    View Slide

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 9 currentWeather={currentWeather}
    10 />
    11 ))
    JOEFYTUPSJFTUTY
    

    View Slide

30. ։ൃͷਐΊํ
    υϝΠϯϩδοΫͷ࣮૷
    w ZBSOUFTU /0%&@&/7UFTUKFTUOPDBDIFFOWKTEPN
    
    6OJU5FTUΛॻ͖ͳ͕Β࣮૷
    AZBSOUFTUGϑΝΠϧ໊Uςετ໊A
    $PNQPOFOUͷςετ͸ͪΐͬͱΑ͘Θ͔ΒΜ
    ҙຯ͕͋ΔςετΛ͔͚Δ͔
    

    View Slide

31. ։ൃͷਐΊํ
    ΞϓϦͷ࣮૷
    w ZBSOEFW OFYUEFW
    
    IPUSFMPBE
    ಈ࡞֬ೝ͠ͳ͕Β։ൃ
    

    View Slide

32. ։ൃͷਐΊํ
    ZBSOTUPSZCPPL
    ZBSOEFW
    ίʔυमਖ਼
    $PNQPOFOUͷ࣮૷
    ಈతͳڍಈͷ࣮૷
    IPUSFMPBE
    ZBSOUFTU
    %PNBJOMPHJDͳͲ
    ͷ6OJU5FTU
    

    View Slide

33. ։ൃ؀ڥ
    ࠷ऴ֬ೝ 4UBUJD)5.-&YQPSUͨ͠੩తϑΝΠϧ
    
    w ZBSOCVJME OFYUCVJMEOFYUFYQPSU
    
    4UBUJD&YQPSUͰBSUJGBDUΛ࡞੒
    w EPDLFSDPNQPTFVQE
    OHJOYίϯςφܦ༝Ͱಈ࡞֬ೝ
    

    View Slide

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
    

    View Slide

35. ։ൃ؀ڥ
    ࠷ऴ֬ೝ 4UBUJD)5.-&YQPSUͨ͠੩తϑΝΠϧ
    
    ϖʔδભҠઌͰϦϩʔυ͢Δͱ/PU'PVOE
    

    View Slide

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 }
    ...
    ͚ͩ͜͜௥Ճ
    

    View Slide

37. σϓϩΠ
    

    View Slide

38. σϓϩΠ
    σϓϩΠઌͷબ୒ࢶ
    w ͳΜΒ͔8FCαʔόʔΛཱͯΔ
    w 4UBUJD8FCΛϗετ͢ΔαʔϏεΛ࢖͏
    w ֤Ϋϥ΢υϕϯμʔͷΦϒδΣΫτετϨʔδ
    ੩త8FCΛϗετ͢ΔαʔϏε
    w "[VSF"QQ4FSWJDF4UBUJD8FC"QQT
    

    View Slide

39. σϓϩΠ
    σϓϩΠઌͷબ୒ࢶ
    w ͳΜΒ͔8FCαʔόʔΛཱͯΔ
    w 4UBUJD8FCΛϗετ͢ΔαʔϏεΛ࢖͏
    w ֤Ϋϥ΢υϕϯμʔͷΦϒδΣΫτετϨʔδ
    ੩త8FCΛϗετ͢ΔαʔϏε
    w "[VSF"QQ4FSWJDF4UBUJD8FC"QQT
    

    View Slide

40. σϓϩΠ
    "[VSF4UBUJD8FC"QQT1SFWJFX
    w ੩తαΠτͷϗεςΟϯάαʔϏε
    w (JU)VC"DUJPOTʹΑΔ#VJME%FQMPZ (JU)VC࿈ܞඞਢ
    
    w ΧελϜυϝΠϯରԠɺ44-ূ໌ॻ ແྉ
    
    ΧελϜυϝΠϯͷઃఆΛ͢Δͱɺࣗಈతʹ44-ূ໌ॻ΋࡞੒͞ΕΔ
    w ϓϨϏϡʔػೳ
    13Λ࡞੒͢ΔͱɺϓϨϏϡʔ൛͕ࣗಈσϓϩΠ͞ΕΔ
    ϚʔδΫϩʔζ͢Δͱຊ൪൓ө͞ΕɺϓϨϏϡʔ൛͸ࣗಈ࡟আ
    w ϓϩϏδϣχϯά࣌ʹσϑΥϧτͷઃఆ͕ࣗಈੜ੒͞ΕΔ
    w ΞϓϦΤϯδχΞʹ࢖͍΍͍͢
    

    View Slide

41. σϓϩΠ
    "[VSF4UBUJD8FC"QQT1SFWJFX
    

    View Slide

42. σϓϩΠ
    "[VSF4UBUJD8FC"QQT1SFWJFX
    

    View Slide

43. σϓϩΠ
    "[VSF4UBUJD8FC"QQT1SFWJFX
    

    View Slide

44. σϓϩΠ
    "[VSF4UBUJD8FC"QQT1SFWJFX
    

    View Slide

45. ͓·͚
    

    View Slide

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
    ...
    

    View Slide

47. ·ͱΊ
    

    View Slide

48. ·ͱΊ
    w ϑϩϯτΤϯυ։ൃ͸ɺ·ͩ·ͩਐԽ͕͸͍͛͠
    w ਺೥લͷͬͨࣽ͝ײ
    ͸ແ͘ͳͬͨʁ
    w ͲΜͲΜ͍͍ײ͡ʹਐԽͯ͠Δײ
    w ۤ࿑͢Δ͜ͱ΋͋Δ͚ͲɺόοΫΤϯυ΋ಉ͡
    w ϑϩϯτΤϯυ։ൃ΋ͨͷ͍͠
    &OKPZ
    https://github.com/kaz29/nextjs-template
    

    View Slide

49. ͓͠·͍
    

    View Slide