最近、VS Codeの調子が悪くダイアログ下部に「拡張機能をアクティブ化しています」と表示されるものの、数秒で消え有効化されない事象が発生していました。
中々解決できず、アンインストールとインストールを繰り返したり面倒なことをやっていました。
①：「ctrl」 + 「shift」+ 「P」で「拡張機能が無効な状態での再読み込み」を行う
②：ウィンドが再読み込みされたら、 「ctrl」 + 「shift」+ 「P」で 「拡張機能の再起動」
③：右下に出ている「拡張機能を有効にして再読み込み」をクリック
現行バージョン(1.65.2)ではこれで問題なく動作します。
これはですねー いつも忘れるので書いておきます！
<a>とか<button>とか、:hover というのでマウスオーバーしたときだけスタイルを変更する、とかCSSでやりますよね？
しかし、そのスタイルが微妙だったりするときに、普通の要素だったら右クリックした開発者コンソールに行けばすぐ解決しますが、マウスオーバーしたときのスタイルを検証しようと思っても、開発者コンソールにマウスを持っていくとマウスオーバーしたときのスタイル見えないじゃん！
:hover のスタイルがわかんないじゃん！
ということになります。
そんな時は、Chromeの開発者コンソールでは、要素からのスタイルパネルの「フィルタ」という入力欄の右の
:hov
というところをクリックしてみましょう。
下記の画像の赤丸で囲んだところです。
左で選択した要素を、強制的に :hover 状態にしたり、 :active状態にしたりできます！
ありがたや~。
ちなみに、この:hover とかは「疑似クラス」と呼びます。
ES2015
javascriptって難しいな~ と思う理由の一つに、スコープとか関数の定義の仕方が豊富すぎることがあります。
ある日、アロー関数のthisって普通の関数と違う？と思ったことがあるので書いておきます。アロー関数とは これ => を使った関数定義でfunction とか書かなくてもよい関数の定義の方法です。
const o = {
name: 'Hoge Tarou',
greetName: function (){
function greetPolite(){
return 'Hello' + this.name //Helloしか表示されない
};
return greetPolite()
}
}
console.log(o.greetName())上記だと
greetPolite()
の中で this.name で ‘Hoge Tarou’ を呼べません。
しかし、 下記のようにgreetPolite() をアロー関数にすると、これがthis.name で ‘Hoge Tarou’ を呼べ るんですね~。
const o = {
name: 'Hoge Tarou',
greetName: function (){
const greetPolite =() => {
return 'Hello ' + this.name //Hello Hoge Tarouと表示される
};
return greetPolite()
}
}
console.log(o.greetName())
アロー関数は他の関数と違い、thisの定義が違うんだそうです。
アロー関数式
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
普通は、上記のような関数の中に関数を書いたりはあまりしないと思います💦。
ただ、コールバックとかの中で使う場合はあるのではないでしょうか？
私にとってのきっかけは、この前 axiosを使っていて次のようなところでつまづいたことでした。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
class Car {
constructor(type, color) {
this.type = type
this.color = color
}
setColor(color) {
this.color = color
}
execAxios() {
axios.get('http://hogehoge.com?param=123')
.then(function (response) {
this.setColor('red')
}
)
.catch(function (error) {
//省略
})
.then(function () {
//省略
});
}
}
const car = new Car()
car.execAxios()
</script>
</body>
</html>
上記は
TypeError: this is undefined
でエラーになります。（当然っちゃ当然なのですが）
上記のコードの下記の関数を
function (response) {
this.setColor('red')
}
アロー関数にするだけで
response => {
this.setColor('red')
}
this.setColorが呼べてひと段落しましたが、一時なんでアロー関数はOKで、普通の関数がダメなのかがわかりませんでした。
アロー関数とは、関数がはしょって記述できるだけではないんですね。便利に使える局面が多々ありそうです。
上記のアロー関数にした版のコード全文はこちら。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
class Car {
constructor(type, color) {
this.type = type
this.color = color
}
setColor(color) {
this.color = color
}
execAxios() {
axios.get('http://localhost:8080/smart_location_admin/index.php?action=api/driver/getDrivers&company_id=\' + 9841 + \'&branch_id=\' + 10017')
.then(
response => {
this.setColor('red')
console.log(this) //Object { type: undefined, color: "red" }が表示される
}
)
.catch(function (error) {
//省略
})
.then(function () {
//省略
});
}
}
const car = new Car()
car.execAxios()
</script>
</body>
</html>
jest : バージョン27.4
Vue : バージョン 2.5.2
Vueのユニットテストをjestを使って取り組んでいます。
TimeTable.vueというvueファイルのテンプレート部分に次のような記述がありまして、
<template>
<div>
<h2 class="date">
<font-awesome-icon icon="caret-left" />
{{ dateGetParameter }}
<font-awesome-icon icon="caret-right" />
</h2>
…後略テストのほうは下記の通りです。
/**
* @jest-environment jsdom
*/
import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";
const localVue = createLocalVue()
localVue.use(Vuex)
describe('TimeTable', () => {
let store
let getters
beforeEach(() => {
// gettersのモック
getters = {
getCompanyId: () => 1
}
// モックストア
store = new Vuex.Store({
getters
})
})
it('should render correct contents', () => {
const wrapper = shallowMount(TimeTableVue, {
components: {},
computed: {
},
store,
localVue})
expect(wrapper.find('save').exists()).toBe(true)
})
})
テンプレートの<font_awesome-icon>の部分で下記のエラーが出ます。
jest Unknown custom element: - did you register the component correctly?
下記に解決方法がありました。
スタブを作ると解決します。
テストスクリプトの //追加 とある部分を追加します。
/**
* @jest-environment jsdom
*/
import Vuex from "vuex";
import {createLocalVue, shallowMount} from "@vue/test-utils";
import TimeTableVue from "../../../../../components/timeTable/templates/TimeTable";
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome' // 追加
const localVue = createLocalVue()
localVue.use(Vuex)
describe('TimeTable', () => {
let store
let getters
beforeEach(() => {
// gettersのモック
getters = {
getCompanyId: () => 1
}
// モックストア
store = new Vuex.Store({
getters
})
})
it('should render correct contents', () => {
const wrapper = shallowMount(TimeTableVue, {
stubs: ['font-awesome-icon'], //追加
components: {},
computed: {
},
store,
localVue})
expect(wrapper.find('save').exists()).toBe(true)
})
})
ODINにて不要になったカラムを削除しました。
どういった手順でカラム削除するべきか少し迷ったので、手順をまとめておきます。
＜手順＞
① 対象となるカラムが使われている箇所がないかチェック（あれば修正する）
② 対象となるカラムのあるテーブルをコピーしてバックアップを取っておく
③ 対象となるカラムを削除（DROP またはphpMyAdminで対象カラムを削除）
①対象となるカラムが使われている箇所がないかチェック（不具合が出ないようにあれば修正する）
phpファイル内で検索などして、対象カラムが使われていないかチェックします。
使われていないメソッドについても念のため対象カラム部分の処理は修正しておいたほうがよいです。
②対象となるカラムのあるテーブルをコピーしてバックアップを取っておく
phpMyAdminで対象カラムのあるテーブルを開いて、右上にある『操作』をクリックします。
次の画面で少し下にスクロールするとテーブルのコピーの内容があるので、そこでデータベース名とテーブル名を指定してコピーします。
③対象となるカラムを削除（DROP またはphpMyAdminで対象カラムを削除）
phpMyAdminでは、対象カラムのテーブルの『構造』を開いて、対象カラムの右側にある『削除』をクリックすればOKです。
