4月４週
リモートもだいぶ慣れてモチベーションも戻ってきました！！
- やるべきこと・やれること整理しながら最適なアクションができたら・・・
土曜：6h
- テーブルの遅延読み込みは以下でできそう
- element.eleme.io
BEMについて描きたいな・・・
- hoverしたときは以下
&:hover {
background: rgba(0, 0, 0, 0.025);
}
axiosのパスパラメータの渡し方
- actionの第二引数にparamsオブジェクトとして格納する
async getProjectsDetail({ commit }, id) {
const response = await this.$axios.$get<ProjectDetail>(ROUTES.GET.DETAIL, {
params: {
id
}
})
そもそもパスパラメータとクエリパラメータの違いは？？
- パスパラメータは一意の情報の取得に必ず必要。一方クエリパラメータは省略可能。使い分けとしては検索条件でフィルタリングしたりするときはクエリパラメータ(
?id=5とか）を使う - hack-le.com
expressの代わりのモック
- こっちの方が簡単だ・・・
- chaika.hatenablog.com
日曜：4h
- お気に入りの星アイコンの切り替えどうやってやろうか悩んでた・・・
- 以下のように
template v-slotとフィルターを使って実現できた（テーブルはelement uiを使用）
<el-table-column
prop="favorite"
label="お気に入り"
sortable
width="180"
>
<template v-slot="{ row }">
<span :class="row.favorite | favoriteFilter"></span>
</template>
</el-table-column>
月曜：11h
- ローディングの考え方
結局ローディングどうしたか
- element uiのローディングプロパティを使用
this.$loading(オプション)でローディングがスタート出来る- オプションを
components/atomsに定義。それをページ単位でmixinsでimportして使う
nextTickとは
- DOMを更新した後に何か処理をしたい場合に使う
- aloerina01.github.io
火曜：11h
- 今日は特に無し（業務も自社開発ももくもくと実装）
- これでサンプルデータがある程度作成できる
- github.com
水曜：8h（めっちゃ寝た）
何のためにテストをするのか
- 設計者の意図通りに機能が実現されているかの確認
- 新規に追加した全ての処理に破綻がないかの確認
- 既存の機能を破壊していないかの確認
- モジュラリティの確保
木曜：11h
- scssについてもある程度わかってないといけない（まとめてQiitaでも良い）
- before,afterの使い方
- 要素の直前・直後にコンテンツを表示する
- 何が良いのか
- HTMLコードを汚さずに済むので自由な表現ができる
- サンプル
- 文字を記号で挟む
<p class="example">例文</p>
.example::before {
content: '「' ;
}
.example::after {
content: '」' ;
}
element ui のテーブルにてloadingが走らない問題
- 1回リフレッシュしないとダメ？？（一番上に戻って全体スクロールが出現してから一番下に戻るとローディングが発生する）
マイクロサービスの難しいところ
- サービスの利用に伴いAPIの形が変化していく。そして、1つの画面を作る際に画面側から叩くべきAPIがぐっちゃぐちゃになりレスポンスと画面項目のマッピングを画面側でゴリゴリに組むハメに。。。
- まず、マイクロサービスに移行すべきサービスとは
- アプリケーションがスケールしていること
- コレに対する解決策
- マイクロサービスをやめる。←コレは本当に検討すべき。そもそもマイクロサービスを保守できるだけのリソースがあるのかを考える。
- アーキの再検討
- graphqlを使う（軽くググったがかなり面白そう）
金曜：11h
やっとvscode + Debugger for Chromeでデバッグ ができるようになった
- 主にはこちらとBoothのreact応用編
- 先にnpm run startでアプリ起動しておかなきゃいけないのね・・・
- qiita.com
reactのlaunch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev-debug"],
"sourceMaps": true,
"port": 9229
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Launch via NPM", "Launch Chrome"]
}
]
}
