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

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

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

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

IC4","#" QPEDBTU΍ͬͯ·͢

ΑΖ͓͘͠Ͷ͕͍͠·͢

'SPOUFOE8FC%FWFMPQNFOU

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

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

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

ٕज़ཁૉ

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

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

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

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

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

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

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

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

CPJMFSQMBUF

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

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

αϯϓϧΞϓϦ

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

։ൃͷਐΊํ

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

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

։ൃͷਐΊํ ίϯϙʔωϯτΛ࣮૷ 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

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

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

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

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

։ൃ؀ڥ ࠷ऴ֬ೝ 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

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

։ൃ؀ڥ ࠷ऴ֬ೝ 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 } ... ͚ͩ͜͜௥Ճ

σϓϩΠ

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

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

σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

͓·͚

͓·͚ 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 ...

·ͱΊ

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

͓͠·͍

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

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

More Decks by Kaz Watanabe

Other Decks in Technology

Featured

Transcript