4月2週

案件・自社の両方でNuxt + 設計フェーズなのでプライベートでは新言語で実装を

  • 基本はgo + reactやる予定（必要に応じて設計手法・認証の知見などをインプット）

土曜：1.5h,1h,1.5,1h=5h

  • sync修飾子についてあまり理解していなかったのでダイアログで実装してみた
  • そもそも用途としては子コンポーネントの値の変更を親コンポーネントにて検知し反映する仕組み（prop・emitで実現可能）
  • 今回はelement uiのダイアログでサンプル
<search-dialog
      :search-dialog-visible.sync="searchDialogVisible"
    ></search-dialog>
  • 共有したい値.syncとして子コンポーネント呼び出しの引数に加える（今回の例ではsearchDialogVisibleを共有したいので↑の感じで宣言）
<el-dialog
      title="検索条件"
      :visible="searchDialogVisible"
      :before-close="handleClose"
    >

handleClose(done) {
    this.$confirm('検索条件は保存されていません。ダイアログを閉じますか？')
      .then((_) => {
        done()
        this.$emit('update:searchDialogVisible', false)
      })
      .catch((_) => {})
  }
  • :visibleに共有したい値を入れる
  • this.$emit('update:searchDialogVisible', false)で親に値を渡している

TODO

  • BEMでscssを書く

  • qiita.com

  • ダイアログのscssはタイトル部分・コンテント部分でそれぞれブロックを分ける

    • フォームの一つ一つがelement

reactプロジェクトのディレクトリの切り方

  • components/とcontainers/ に分けて、対応するファイルを同じ名前・同じ階層に置くが主流らしい。

クラスコンポーネントとhook導入後の関数コンポーネント

  • 従来はstateを扱うにはクラスコンポーネントでないといけなかった
    • this.state =としてローカルステートを宣言しsetStateで状態を更新していた
    • hook導入後は以下のようになる
      • useStateにてstate変数とセッターを初期化。引数には初期値。
const [count, setCount] = useState(0); 
setCount(100);
setCount(prevCount => count + 1);

日曜：1h,1.5h,2h,1h=5.5h

redux

  • reactまどろっこしくてわかりづらい・・・
  • vueでいうvuex

  • reducer：vueでいうaction。実際の処理の中身を書く

  • count: state.count + (action.amount || 0)

    • ||の部分。action.amountがundefindだったら0が入る
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './App';
import counterReducer, { initialState } from './reducer';
import * as serviceWorker from './serviceWorker';

import './index.css';
import './styles/semantic.min.css';

const store = createStore(counterReducer, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement,
);

serviceWorker.unregister();
  • react-reduxにてimportしたProviderの引数にstoreを渡すと下位階層のコンポーネントでstoreを参照できる

reactの開発順序

  • presentationComponentを定義する
  • presentationComponentを Container Component でインポートして、これらの Props を Redux の Store にマッピングする
  • actionsを作成する
  • reducerを作成する

connect関数でstateとactionsとの関連付けを行う

const mapStateToProps = state => ({ value: state.count.value })
const mapDispatchToProps = dispatch => ({ 
  increment: () => dispatch(increment()),
 decrement: () => dispatch(decrement())
 })

export default connect(mapStateToProps, mapDispatchToProps)(App)

月曜：11h

火曜：11h

水曜：10h

木曜：10h

金曜：11h

週次報告

  • 年間（2019/8~2020/8）目標時間（業務での設計・実装含む）：3380h
  • 今週を含む累積時間：2185h
  • 週次目標時間：65h
  • 週次実績時間：63.5h
  • 何を得たか：Nuxt設計
  • 何が必要か：golang基礎・認証の知見
  • 来週の目標：新機能追加