関数内で例外をthrowする場合、例外が同期的にthrowされるのではなく、rejectされる。 const func1 = async () => { throw new Error('error'); } const func2 = () => { throw new Error('error'); } const test1 = async (func) => { try { await func(); …

開発者ツールを開く。 Source タブを開く。 ツール右側の Event Listener Breakpoints から、各イベントに対しブレークポイントを設定することができる。

templateをあえて使用する。 条件分で1つの条件分岐のみに<template>タグを使用している場合などでは、あえて全ての条件分岐に<template>タグを使用する。 そうすることで、インデントの抽象度を統一され、より理解し易いコードになる。 <button v-if="isA" @click="onClickA">A</button> <template v-else> <button @click="onClickB">B</button> <button @click="onClickC">C</button> </template> </template></template>

良いデザインとは 伝えたいことが、見る人にすんなりと伝わるかどうか。 WEBデザインの場合、そのサイト（アプリ）が使いやすいかどうか。 # 「誰に」「何を」伝えたいのか考える。 利用する人に考えさせない。 備考 「かっこいいデザイン」ではなく、「ユー…

余白の役割 レイアウトを整える。 注目してほしい情報を見つけ易くする。 各コンテンツの関連性を明確にする。 余白を広げた場合のメリット 余白を広げた場合、余計な情報に気を取られにくくなる。 余白の戦略 重要なフォームやボタンとその他のコンテンツと…

marginは、隣接する側のコンテンツの余白を意味する。 marginは、隣接する側のコンテンツに指定する。 webサイトは、左上を起点として、右と下にコンテンツを追加していく。 左右に隣接したコンテンツの場合、隣接するコンテンツは右にあるコンテンツである…

deepプロパティにtrueを指定する。 export default { watch: { hoge: { deep: true, handler(val) { console.log('watch hoge'); } } } };

オブジェクト名.プロパティ名 を指定する。 export default { watch: { `hoge.fuga`(val) { console.log('watch hoge.fuga'); } }, };

IEではmainタグのdisplayプロパティの規定値はinline であるため、レイアウト崩れが発生する可能性がある。 そのため、明示的に block を指定する必要がある。 main { display: block; }

immediateプロパティにtrueを指定する。 export default { watch: { hoge: { immediate: true, handler(val) { console.log('watch hoge'); }, } } };

全てのqueryパラメータ更新時に実行されるようにしたい場合 watchQueryプロパティに、trueを設定する。 export default { watchQuery: true, }; 一部のqueryパラメータ更新時に実行されるようにしたい場合 watchQueryプロパティに、対象としたいqueryパラメ…

コード const ja = { test: 'テスト', entry: '申込受付中です。{newline}詳しくは{here}。', here: 'こちら' }; <i18n path="entry" tag="p"> <template #newline> <br /> </template> <template #here> <a href="/hoge">{{ $t('here') }}</a> </template> </i18n> 出力結果 <p>申込受付中です。<br />詳しくは<a href="/hoge">こちら</a>。 tagに指定したタグが使用される。 コード co…</p>

事象 フォントサイズを指定しているにもかかわらず、意図しない大きさになってしまう。 対象方法 下記CSSを指定する。 body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% }

Atoms アプリケーションの共通デザインを担当する。 抽象性が最も高い。 具体性が最も低い。 ライブラリにすることが可能。 ビジネスロジックを持たない。 stateにアクセスすること不可能。 Molecules アプリケーションの共通機能を担当する。 ライブラリに…

methods methodは基本的にviewから呼ばれ、処理を行い、その結果をdataに反映する。 viewから呼ばれないメソッドをmethodsに定義したくなった場合は、まずcomputedに定義する方法を検討した方が、結果的に理解し易いコードになる可能性が高いような気がする…

定数とは 定数は、将来変更されるかもしれない値に対して使用する。 定数をどこに定義するか 設定ファイル（プロパティファイル）に定義する定数 環境ごとに変更したい値 環境ごとに変更する可能性がある値 環境ごとに変更する可能性はないが、値が変更され…

scrollToTop プロパティで、スクロール位置をトップに戻すかどうかを指定できる。 export default { scrollToTop: true };