Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

@July Tech Festa 2020

Kaz Watanabe

July 25, 2020
Tweet

More Decks by Kaz Watanabe

Other Decks in Technology

Transcript

  1. ٕज़ཁૉ .PC9 w εςʔτΛ؅ཧ͢Δπʔϧ w 3FEVYͷ୅ସ͑ w ͓खܰ w ֮͑΍͍͢

    w ॻ͘ίʔυྔ͕গͳ͍ w ಺෦ίʔυ͕ෳࡶ ࠇຐज़ͬΆ͍ ͷͰσόοά͕೉͍͠  w ࢲ͸ࠓ·Ͱࠔͬͨ͜ͱ͸ͳ͍ w ͦ΋ͦ΋άϩʔόϧͳεςʔτ͸ඞཁ࠷௿ݶʹͯ͠ଟ༻͠ͳ͍ํ͕ྑ͍ ؾ͕͢Δ
  2. ٕज़ཁૉ /FYU+4 w 6OJWFSTBM *TPNPSQIJD +BWB4DSJQUϑϨʔϜϫʔΫ w 443ରԠ w γϯϓϧͰೖ໳͠΍͍͢

    w ͚Ͳ࢖͍͜ͳ͢ͱ৭ʑͰ͖Δ w SPVUJOHΛॻ͔ͳͯ͘ྑ͍ ॻ͘͜ͱ΋Ͱ͖Δ  w 4UBUJD)5.-&YQPSU
  3. ٕज़ཁૉ TUPSZCPPL w ίϯϙʔωϯτ୯ҐͰαϯυϘοΫεͰ։ൃͰ͖Δ w ๛෋ͳϓϥάΠϯ w BEEPOWJFXQPSU w BEEPOJO

    w ίϯϙʔωϯτΛҰཡͰڞ༗Ͱ͖Δ w Χλϩά w υΩϡϝϯτ  w ςετ ෇͖ͷ͸ະணखͰΑ͘Θ͔͍ͬͯͳ͍
  4. CPJMFSQMBUF w લग़ͷٕज़ཁૉΛશͯ૊ΈࠐΉ w )FMMP 8PSMEͰ͸ͳ࣮͘ࡍʹಈ͘ίʔυαϯϓϧΛؚΉ w 4UPSF w "1*࿈ܞ

    w ͲΜͳ;͏ʹ։ൃ͍ͯ͠Δ͔ ͋Δఔ౓ Έ͑Δ w 4UBUJD)5.-&YQPSU w ϩʔΧϧͰͷಈ࡞֬ೝ؀ڥ w σϓϩΠ
  5. ։ൃͷਐΊํ ίϯϙʔωϯτΛ࣮૷ 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
  6. ։ൃ؀ڥ ࠷ऴ֬ೝ 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
  7. ։ൃ؀ڥ ࠷ऴ֬ೝ 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 } ... ͚ͩ͜͜௥Ճ
  8. σϓϩΠ "[VSF4UBUJD8FC"QQT1SFWJFX w ੩తαΠτͷϗεςΟϯάαʔϏε w (JU)VC"DUJPOTʹΑΔ#VJME%FQMPZ (JU)VC࿈ܞඞਢ  w ΧελϜυϝΠϯରԠɺ44-ূ໌ॻ

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