5月1週
バックエンドがあまり触れていないのがちょっと気になるが両方とも中途半端な実力よりはどちらかがハイスキルの方が単価が高くなると思うのでとりあえず２０２０の前半（前半もう終わるけど）はモダンフロントエンドに専念しようと思う
- 息抜き的にgolangをやっていく
土曜：5h
- 今日やること
- caprese_ui
- テーブル・詳細をコンポーネントに分割（レスポンシブ対応）
- ローディングの動作確認用にsetTimeout等のタイマーを入れる
- できればstorybookを導入
- caprese_ui
scss
- あるクラスの中のsapnを指定したい時は以下のように指定できるみたい
&--dropdown {
height: 44px;
display: flex;
padding: 0 !important;
> span {
width: 100%;
.cas-dropdown {
height: 40px;
display: flex;
align-items: center;
.el-dropdown-link {
width: 100%;
padding: 12px 23px;
}
}
}
}
Nuxtにて_variable.scssなど共通で読み込みしたい時は以下のようにnuxtjs/style-resourcesを使う
- matsuoshi.hatenablog.com
- 内容としてはnpm でinstallしてnuxt.config.tsのmodulesとstyleResourcesを以下のようにする
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/style-resources'
],
styleResources: {
scss: ['~/assets/scss/_variables.scss']
},
- 今日の実績
- caprese_ui
- テーブル・詳細をコンポーネントに分割（レスポンシブ対応）
- →できてない（明日やる）
- ローディングの動作確認用にsetTimeout等のタイマーを入れる
- →ローディング設置完了（vue-loading-overlayを使用）
- できればstorybookを導入
- できてない（明日やる）
- テーブル・詳細をコンポーネントに分割（レスポンシブ対応）
- caprese_ui
日曜：5h
nuxtでfontawesome導入
fontawesome-svg-core,free-solid-svg-icons,free-brands-svg-icons,free-regular-svg-iconsはnpm or yarnでインポート- pluginsに設定（nuxt.config.tsも忘れずに）
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import '@fortawesome/fontawesome-free/css/solid.min.css'
library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
- コレで<font-awesome-icon>タグが使えるので↓の感じでイケる
<font-awesome-icon icon="coffee" />
debugについて
- debug中の変数を追跡できる
- 変数一覧を左クリックして
Add to Watchを押下する
月曜：11h
- jestに大苦戦
this.$axios.$post部分でずっと詰まっていた- 結局は、$axiosがjest内で定義されていないことが原因だった。
- beforeEachにて、store.$axiosにaxiosを代入することで解決した
import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'
import Vuex from 'vuex'
import { createLocalVue } from '@vue/test-utils'
import { cloneDeep } from 'lodash'
import { actions, mutations, state } from '../../store/data/certify'
import CERTIFY_INFO from '../../plugins/mockData/api/certify'
// beforeEachで毎回Storeを生成するためにstoreを定義
const initStore = () => {
return cloneDeep({
state,
mutations,
actions
})
}
describe('certify Test', () => {
let store
let localVue
beforeEach(() => {
localVue = createLocalVue()
localVue.use(Vuex)
store = new Vuex.Store(initStore())
store.$axios = axios // @nuxtjs/axiosの代わりにaxiosを注入
})
const mock = new MockAdapter(axios)
afterEach(() => {
mock.reset()
})
it('certify test (QR)', async () => {
// コミットはこんな感じ
store.commit('setTelInput1', '090')
// mockを用意
mock.onPost('/api/certify').reply(200, CERTIFY_INFO)
const payload = {
isHoge: true,
url: '/api/hoge'
}
await store.dispatch('certify', payload)
expect(store.state.certifyData.data.result).toBe(0)
})
})
火曜：11h
- axios-mock-adapterでパラメータを取得したい時はこんな感じ
mock.onPost('/certify/0504').reply((config) => {
// config.dataでpost時に渡したパラメータが見える
console.log('config')
console.log(config)
let result
if (config.data !== '') {
result = RESULT_OK
} else {
result = RESULT_NG
}
return [200, result]
})
水曜：5h
axios-mock-adapterにて動的なパスパラメータを設定する- 正規表現でやるらしい
mock.onGet(new RegExp(`${app.$urls.GET_APPLICATIONS}/*`)).reply(200, GET_APPLICATIONS_DATA)
- デプロイどうしましょうかね
- 参考
macにもWebStorm導入
- prettierがうまく取り込めなかったけど以下でファイル別（vue,typescript,any）で登録したらできた。。。
VSCodeからWebStormに乗り換えた - suusan2号の戯れ
WebStormでデバッグ
- アプリはdevで起動しておく
- 実行構成のJavaScript Debugに構成を追加する
- 構成のURLには、デバッグ対象のアプリケーションのURLを設定する。(npm run devで表示されたURL)
storybookの導入
- 一旦これの通りやってみよう Vuetify2をStorybookで動かしてみた (前編) - Freegian
木曜：10h
- WebStormはTypeScriptのリモートデバッグ には対応していなかった・・・
- だったらあまり魅力ないかもしれない・・・
金曜：11h
- v-ifってコンポーネントの親にdivを作ってそこに定義するのかと思ったら、制御したいコンポーネントに直でv-ifを入れていいらしい。
- mutationだとstateが引数なのでrootに定義しているstate等が更新出来ない
- actionだと引数にcontext（全て持っている）を渡せるのでrootに定義している情報（今回だとlastTatchedAtとか）を更新できる
