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

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

@July Tech Festa 2020

B51ca7a51ae1fd06bc536fe83e6113e2?s=128

Kaz Watanabe

July 25, 2020
Tweet

Transcript

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

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

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

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

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

  6. 'SPOUFOE8FC%FWFMPQNFOU

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

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

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

  11. ٕज़ཁૉ

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

    NBUFSJBMVJIUUQTNBUFSJBMVJDPN w TUPSZCPPLIUUQTTUPSZCPPLKTPSH w KFTUIUUQTKFTUKTJP
  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 DVTUPNIPPL಺ͷॲཧͷςετ 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

  25. None
  26. ։ൃͷਐΊํ

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

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

  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 ZBSOUFTU /0%&@&/7UFTUKFTUOPDBDIFFOWKTEPN  6OJU5FTUΛॻ͖ͳ͕Β࣮૷ AZBSOUFTUGϑΝΠϧ໊Uςετ໊A $PNQPOFOUͷςετ͸ͪΐͬͱΑ͘Θ͔ΒΜ ҙຯ͕͋ΔςετΛ͔͚Δ͔

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

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

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

    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 4UBUJD8FCΛϗετ͢ΔαʔϏεΛ࢖͏ w ֤Ϋϥ΢υϕϯμʔͷΦϒδΣΫτετϨʔδ ੩త8FCΛϗετ͢ΔαʔϏε w

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

    "[VSF"QQ4FSWJDF4UBUJD8FC"QQT
  40. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX w ੩తαΠτͷϗεςΟϯάαʔϏε w (JU)VC"DUJPOTʹΑΔ#VJME%FQMPZ (JU)VC࿈ܞඞਢ  w ΧελϜυϝΠϯରԠɺ44-ূ໌ॻ

    ແྉ  ΧελϜυϝΠϯͷઃఆΛ͢Δͱɺࣗಈతʹ44-ূ໌ॻ΋࡞੒͞ΕΔ w ϓϨϏϡʔػೳ 13Λ࡞੒͢ΔͱɺϓϨϏϡʔ൛͕ࣗಈσϓϩΠ͞ΕΔ ϚʔδΫϩʔζ͢Δͱຊ൪൓ө͞ΕɺϓϨϏϡʔ൛͸ࣗಈ࡟আ w ϓϩϏδϣχϯά࣌ʹσϑΥϧτͷઃఆ͕ࣗಈੜ੒͞ΕΔ w ΞϓϦΤϯδχΞʹ࢖͍΍͍͢
  41. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

  42. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

  43. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

  44. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

  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. ͓͠·͍