学んだこと⑧
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
- form内のbutton要素を押すとsubmitされる。
→ typeがsubmitだから。 typeを設定しないと初期値はsubmitになる。
- 「<button type="submit" @click="exec">」は使わない。
Vuejs formをサブミットするときのポイント - SIer だけど技術やりたいブログ
→Enterを押したとき、自画面に遷移してしまい、入力が消されてしまう。
→enterを押したときに、遷移を防いで、ボタンを押したときと同じ振る舞いにする。submitするのは、HTMLのバリデーションがかかるため（mailチェックなど）
方法
：<form @submit.prevent="func">とする。 ※vue
リダイレクトしない。
.prventでイベント名を前につけ、そのイベントにデフォルトでついている処理を実行しない。
【Vue】使えるイベント一覧。v-onディレクティブで指定できる主要イベント
- console.errorで赤文字エラー（コンソール）
- :class="{ 'cursor-pointer': sub.userId }”
→クラス名に「-」がつくときは、’’で囲むとできる。
- interfaceの継承
export interface animal {
id: string
name: string
status: number
animals: animalArray
}
type animalArray =
animal & {
existenceCounter: number
}
- 短い変数は使わない
https://creive.me/archives/17653/
word-break: break-word; 非推奨！
- github画像に分割
```
|表紙|中面1|
|---|---|
|!(url)||
```
- 背景色を画面によって変えたい時 head要素のbodyにクラスを持たせる。
その要素を併用するものだけスタイルを変えることができる。
useHead({
bodyAttrs: {
class: 'setting',
},
});
- SCSSだと
.parent2
.child1 {
}
parent2を親要素に持つchild1が適用範囲になる。
.class3 {
font-size: 15px;
&.class4 {
color:black;
}
}
の場合は？
class3とclass4を両方持つ要素に対して適用される。
<div class="class3 class4"></div>
class3とclass4を両方持っているので&.class4が適用される。
- チェックを監視したい v-modelでstate.〇〇で監視できる。valueの値が入る。
state.〇〇の値を変えれば、チェックも変わる。
- 【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説する
フォームのラジオボタン、チェックボックスの色等を変更する2つの方法
- 当たり前だが、単純にtrueやfalseを送りたいときはpropsを使う。
親コンポーネントのメソッドにreturnさせても子要素には送れない。
- 配列の中にある要素が含むかみる。
`indexOf`は「2…存在する、…-1存在しません」
`includes`はtrue, falseで帰ってくる。
`test`は、大文字小文字を区別しない。
- d.ts とは
型定義ファイル
複数ファイルで利用したい型
オブジェクトの実態ではなく、型情報のみが記載されている。
- export namespace 名前空間の定義
複数の名前を一つにまとめたもの。（変数や定数）
`transition: all 0.5s ease;`
：対象プロパティ 変化の継続時間 遅れて始まる時間 アニメーション効果
ease 開始と終了を滑らかに
`transform: translateX(-10px) scale(0.95);`
translateX :横軸への移動。
scale()：拡大
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
position: absolute;
opacity: 0;
transform: translateX(-10px) scale(0.95);
}
ふわっと出す
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
- midware
参考：
Nuxt3のmiddlewareの登録と呼び出し&Beta版のバグとその回避策 - 独学プログラマ
ページ遷移のタイミングで起動するもの。
レイアウトファイルにimportはできない。
全てのルートで実行したい処理がある場合は、グローバルミドルウェアを使用する。
`auth.global.ts`
globalではないものの書き方 **middleware/auth.ts**
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.authenticated) {
return navigateTo('/login')
}
})
to ... ページ遷移先のルート情報
from ... ページ遷移前のルート情報
```
呼び出し
**pages/index.vue**
```jsx
<script setup lang="ts">
definePageMeta({
middleware: ['auth']
})
</script>
navigateToをグローバルmiddlewareで使うのは注意！
あと、return をつける！
- レイアウトファイルとは
ページの外観を構成するパーツを配置する。
layoutsの中で定義されるdefault.vueとか。
- someは配列が条件を一つでも満たしていればtrueを返す
学んだこと⑦
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・汎用のコンポーネントを使うことを考え、marginやpaddingを統一する。
個々でできるだけ設定しない。変更した際、一つ一つ変えなくてはいけなくなる。
必要であれば、専用のCSSを作って統一するのもアリ。
・slotは複数使うことができる。
ただ、使わないスロットがある場合は、周辺のdivは残ってしまうので、スタイルをつけている場合は、注意が必要となる。
・同じ情報のプロパティ名は同じにする。APIデータに問題（DB）があれば、統一してもらうよう報告する。
・vueのset up構文で書く場合、<script lang="ts" setup> 忘れずに。
・composable自己理解（伝え方よくないが、一旦そのまま記載。）
引数で値を持ってきている場合は、そのコンポーネント自体で使っているような挙動をする。
引数とかで持っていっていない値に関しては、stateを用意し、rerturnさせる必要がある。
・DISTINCT
：重複を排除する際に使用される。
重複削除を行った結果を出力したいときに使用。
SQLで重複を削除する際に「GROUP BY」を使用する例も。
SELECT DISTINCT 列名,列名・・・ FROM テーブル名
GROUP BY
：重複排除した結果に対して何らかの処理を加えることができる。
・propsで持っていった値に、初期値を設定すると型定義にundefinedが加わる。
・TypeをimportするときはTypeの名前の一文字目を大文字にする。
・inputタグ autocompleteとは
どの種類の情報が期待されているかをブラウザに示唆することできる。
on ブラウザが自動的に入力することを補完することを許可されている。
先日、以下の記事も挙げてみました！
Vue3 <script setup> 構文で孫、子、親のバケツリレーを書いてみた。です！
学んだこと⑥
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・ コンポーネント先の関数、emitかその先で作るか悩んだ。
結論：propsで持ってきた値に影響を与えるものでないなら、コンポーネント先でやれば良い。
・レスポンスのプロパティが変わった場合は、スタブデータも変更する。
・パラメータを取得する場合は、、、
const route = useRoute();
とすることで、route情報が取れるようになる。URLパラメータは、
route.params.パラメータ名で取れる。
クエリパラメータは、
route.query.パラメータ名で取れる。
・型 アサーション as 指定したい型
：推論された方を上書きする機能。変数を任意の型に書き換えたい時に利用する。
・定数で定義されているものは、定数を使う。
・navigateTo 画面遷移。
navigateTo({
path: '/search',
query: {
page: 1,
sort: 'asc'
}
})
・piniaのgettersとcomputedと同じ。
既存のデータに対して、何らかの処理をした結果をデータとして返すもの。
getters: {
multiplied: (state) => {
// 関数を返すようにする 引数は(num: number)。
return (num: number) => state.count * num
}
}
・モダールではないが、表示非表示を管理し、かつそのツール以外を押したときに閉じる仕様にしたい場合があった。
思ったより、年始、エンジンがかからない。
やりたいことリストを作って、どんどん消化していこう。
いい意味で、思考停止で、行動していこう！
学んだこと⑤
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・当然のことだが、API入れたり出したりは、リアクティブではない。
そのため、フロント側でリアクティブに反映させないといけない。
・相対パス ../ は、一つ上の階層にあるもの。
・クラス名をimportする際は{}いらない。型定義の場合のinterfaceなどはいる。
・パラメーターとリクエストボディの違い
パラメータには、パスパラメーターとクエリパラメーター（特定のリソースを操作して取得する際に必要な情報）がある。URIで送る。
パスパラメーター：前?
クエリパラメーター：?後ろ
リクエストボディは、（追加、更新する際の内容）JSONで送るもの。
・プルリクは短いスパンであげるほうが良い。
コンフリクトが起きにくくなる。ただ、画面が見れなくなるなどのエラーはよくないので、そこは改修してから上げる。
・正規表現
/は、エスケープが必要 .もいる。それがついていたら、\でエスケープする。
・styleの条件分岐
:style="[animal.existFlg ? {color: '#FFF'} : {color: '#444'}]”
・HTMLの中の{{ }} の中はJavaScriptが動いている。
・インデックスの抜き出し
配列.findIndex((e) ⇒ {
return 条件式
}
条件式が一つの場合は省略できる。
array.findIndex( ( 引数 ) => ( 条件式 ) )
・配列要素の削除
shift()：「先頭」にある値だけが削除され、後ろの要素は先頭に詰められる。返り値として、削除された値がくる。
var items = 配列データ;
items.shift();
pop()：要素の末尾だけが削除される。
var items = 配列データ;
items.pop();
splice()
//1番目から2個の要素を削除した値を「result」に代入
var result = items.splice( 1, 2 ); // 配列番号を記載
console.log( result );// ["メロン", "イチゴ"]
・型定義はあくまでも型定義、初期値を設定してなければ、pushして配列を追加しなければ、プロパティなしと言われる。
・v-ifとv-showの違い
v-if
：初期表示のコストが低い代わりに、SPA上で表示切り替えを行うためのコストが高い。
v-show
：要素が常にDOMに保持される。要素の表示と非表示の書き換えによって表現されている。
・<template>タグの使い所
- 条件付きレンダリングで複数要素を対象とする場合（v-if）
- リストレンダリングで複数要素を対象とする場合
- 名前付きスロット（v-slot）
<template #header>
- 単一ファイルコンポーネント
なかなか進まないところ。。。
学んだこと④
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・filter()
：条件に合う要素だけ取り出す。配列を作る。
・Array<animal> の意味は、「Arrayの中身の方がanimalですよ」という意味。
要はデータ自体が配列でいくつもある状態。
[
{
color: red,
size: mini,
type: prety,
},
{
color: blue,
size: bug,
type: cool,
},
{
color: red,
size: big,
type: nomal,
}
];
そうでなくて一つの場合は、Array<>のArrayはいらない。
・transparentは、要素を透明にする。
display: noneとは違って、要素は存在する。
・flex-direction column フレックスアイテムは上から下 。
・コンポーネントでbttuonやfromなどを作るときは、いろいろなものに対応できるように、サイズやif-elseの表示などを作っていく。propsで値を入れれば、それに合わせて色や配置を決められる枠を作るイメージ。
・emitとpropsの書き方は、こちらにまとめました。
・&.クラス名は
hoverの時なども使うが、クラス名二つを持ち合わせた時のスタイルとなる。
・コピー機能
navigator.clipboard.writeText(nomineeReason);
：clipboardインターフェイスのwriteText()メソッド。文字列のシステムをクリップボードに書き込みます。read()やreadText(クリップボードに書き込む文字列。)を使って読み戻すことができる。
返り値は、プロミス。そのため、その後の処理は、thenで書いていく。
navigator
：Navigator インターフェイスで、ユーザーエージェントの状態や身元情報を表す。
まとめ
navigatorインターフェイスに読み取り専用のclipboardプロパティを追加し、clipboardオブジェクトを返すもの。
・スプレット構文
配列やオブジェクトを展開したい時に使う。
「...」って・・・？ ES2015で追加されたスプレッド構文について解説します | 株式会社ビヨンド
学んだこと③
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
ちょっと短めです。
・そもそもなぜstateするのか。
：DBのデータ入出力は、APIを叩く。画面のデータについては、state（リアクティブに動く）で管理していると理解した。
・$toastはプラグインで設定している、vue-toastificationライブラリ。
useNuxtApp()で呼び出せる。
使用法は後日、別記事で書きます！
・同じ処理をするものはどんどん汎用化していく。
・型定義のページをtsディレクトリで管理。
・何度も使うアイコンもコンポーネントにしておくと良い。
大きさや背景色をpropsにすれば、使い分けもできる。
・piniaとは
：状態管理ができるアプリ。
アプリにstoreを作り、コンポーネント間で共有するデータを保存することができる。
データを更新することもできる。
使い方は後日まとめたい。
・export type と明示すれば、importして他のページでもその型が使えるようになる。
・（当たり前だが）関数の引数にも型定義を。
・border-boxにすると、padding, marginを含める。
プロになるためのWeb技術入門を読了したので、近々上げていきたい📝📗
VueUseのonClickOutsideについてまとめてみました。
ぜひよかったら、ご覧ください。
ちょっとしたものを作ってみたよ（まだまだ改善必要）
2022年も終わりごろになったため、今年のドラマで面白かったものをランキングにしたいと思い、作成。
ランキング作るアプリは、他にもありそうなので、時間がある時に、どういうものか見てみようと思う。
一旦、2時間くらい作業したので、その途中画面を。
HTML, CSS, JSを使って、ただ選択したものを下のcontentに表示するだけのもの。
意識したこと
・ホットリロードを採用。
やり方
ターミナルにて、以下を入力。
npm init -y
yコマンドは
・package name: パッケージ名
・version: パッケージバージョン
・description: パッケージの説明
・entry point: プログラムへの主要なエントリポイント
・test command: テスト用のスクリプト
・git repository: gitリポジトリのURL
・keywords: パッケージ公開時のための検索キーワード
・author:著者
・license: パッケージのライセンス
を全て、enterを押したものとみなされ、package.jsonが作られる。
npm install reload --save-dev
package.jsonに以下を記入。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "reload -b"
},
・表示するボタンをクリックしたら、重複して表示されないように、内容を初期化してから、表示。
何もない場合に、コンソールでエラーが出るため、if分岐で条件を追加。
・Googleフォントを使用。
復習したこと
getElementsByName
：同じネームがついたものが配列風のオブジェクト（HTML Collection）で取れる。
querySelectorAllとの違い
速さは、getElementsByName。
querySelectorAllはNodeListの返値。
今後
・競合調してみる
・ドラマ一覧のデータをどのように持ってくるか
・ただ表示だけでなく、そのデータをDBに保存して、いつでも見られるようにする。
・そもそもランキング表示できていない。
ノミネートドラマをピックアップ→じっくりランキングを考え、表示する
などはどうか？
ノミネートドラマとランキングを人画面でバンっと表示してみたい。
・スマホ対応にしたい。
まだまだやってみたいことが多い。
あと、コードが汚い。
変数名、同じ動作、ループが多い。
その辺りも改善したい。。。
