6月1週

土曜：5h

golang

日曜：5h

  • docker on reactアプリが立ち上げと同時にコード０で終了してしまう問題
    • docker-compose.ymlにstdin_open: trueを追加することで回避できた
  • dockerのreactアプリのテスト実行でハマった以下のようにitオプション（正確には-i -tオプション）を指定すればいけた
  • docker run <imageID> yarn test
  • テスト実行用のserviceを作る
version: '3.5'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    stdin_open: true
  tests:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /app/node_modules
      - .:/app
    command: ["yarn","test"]
  • これでテストを編集するたびにテスト用コンテナ内で実行される
  • けど、欠点がある。それは入力ができないということ（全てのテストを実行する）
  • これの対応策としては普通にコンテナ入ってやるしか・・

nginxを使って本番用のDockerfileを作る

FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

FROM nginx
# builderフェーズからコンテナにコピーする
COPY --from=builder /app/build /usr/share/nginx/html
  • 動くか確認docker run -p 8080:80

月曜：11h

  • webstormファイル検索時はshift * 2
  • react
    • tsxでのif~elseの書き方{value ? <foo /> : <bar />}こんな感じ
    • 配列をフィルターにかけてその結果に対する処理をするとき
    • targets.filter(t => t.length > 5).map(t => <...>)
  • スプレッド演算子でオブジェクトをまとめて渡す(img
import logo from './logo.svg';

const logoOptions = { 
  alt: "logo", 
  className: "App-logo", 
  src: logo
};

return (
  <div className="App">
    <header className="App-header"> {
      // コメントはこう書く }
      <img {...logoOptions} /> 
      {title && <p>{title}</p>} 
      {targets.map(target => (
      <p>Hello, {target}!</p> ))}

火曜：11h

  • curlでヘッダーにCookieをセットしたい時
jWyS0nQee2lARKfkQKS6wXkDXQWcZolse2gSb5zrci4p8oWxQlhfXZOayH; sessionid=ixw7g5wxd
06njdcdwbctcn2fok5c4mgu;'
  • こんな感じ

水曜：11h

  • $toastedとか$tとかはjsファイル内では使えない

木曜：11h

  • stateにバリデーションオブジェクトを格納しようとして全然できなくてハマった
  • バリデーションは関数なので、関数をjson化しようとしていた

    マルチステップビルド

  • こんな感じ。
FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

FROM nginx
# buildした成果物（/app/build）をbuilderフェーズからコンテナにコピーする
COPY --from=builder /app/build /usr/share/nginx/html

- dockerhub

Docker Hub

金曜：11h

react

  • やはりできるエンジニアはフロントエンドはvueじゃなくてreact選びがちだなぁ。
  • reactでeslint
    • yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
    • あとは.eslintrc.js以下コピペで、node_modulesのeslint-pluginを見るように設定（webstormならポチポチで勝手にやってくれる）
module.exports = {
    env: {
        browser: true,
        es6: true
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        project: './tsconfig.json',
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint', 'react'],
    root: true,
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/explicit-member-accessibility': 'off',
        'indent': 'off',
        '@typescript-eslint/indent': ['error', 2],
        '@typescript-eslint/no-unnecessary-type-assertion': 'error',
        'eol-last': ['error', 'always'],
        'func-style': ['error', 'expression', { allowArrowFunctions: true }],
        'newline-before-return': 'error',
        'no-dupe-class-members': 'error',
        'no-var': 'error',
        'object-shorthand': ['error', 'always'],
        'prefer-arrow-callback': 'error',
        'prefer-const': 'error',
        'prefer-spread': 'error',
        'require-yield': 'error'
    }
};

週次報告

  • 年間（2019/8~2020/8）目標時間（業務での設計・実装含む）：3380h
  • 今週を含む累積時間：2600h
  • 週次目標時間：65h
  • 週次実績時間：65h
  • 何を得たか：flutter基礎・capreseデプロイ検討・関数型プログラミングおさらい
  • 何が必要か：golang基礎・認証の知見・Nuxt・React・テスト手法の取得
  • 来週の目標：新機能追加