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

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

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

@July Tech Festa 2020

Kaz Watanabe

July 25, 2020
Tweet

More Decks by Kaz Watanabe

Other Decks in Technology

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