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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ΑΖ͓͘͠Ͷ͕͍͠·͢

Slide 6

Slide 6 text

'SPOUFOE8FC%FWFMPQNFOU

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ٕज़ཁૉ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CPJMFSQMBUF

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

αϯϓϧΞϓϦ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

։ൃͷਐΊํ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

σϓϩΠ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

Slide 42

Slide 42 text

σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

Slide 43

Slide 43 text

σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

Slide 44

Slide 44 text

σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX

Slide 45

Slide 45 text

͓·͚

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

·ͱΊ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

͓͠·͍