JavaScript関連のことを調べてみた2022年01月18日

laravelBreezeにvue.js3ど導入しようとした件

laravel breezeをインストールしたんだけれど、breezeのJSは**Alpine.js**で**Vue.js**が入ってなかったので、

####じゃあ、alpine.jsを使えばいいじゃん！####

資料が少なすぎて無理・・・

ということで、breezeにvue.js3を導入します！
useEffectとuseRefを使ってプルダウンをつくる

## 背景

Reactを使ってプルダウンを実装することになったのですが、useRefやuseEffectなどの基本だけども初学者には理解しづらい内容だと思い、自分の理解を深めるために記事にまとめました。
改善点やアドバイスがあれば優しくご指摘いただければ幸いです。

## 制作イメージ

### 要件

– 生年月日のプルダウン
– 年・月・日でそれぞれ別の選択肢をもつ
– 年は西暦と和暦、両方表示

＊平成と令和の切り替え、うるう年、30日と31日の表示分けは今回実装しません。

“`jsx:完成コード
import React, { useRef, useState, useEffect } from “react”;

export const BirthDate = () => {
const birthYearRef

`deno test` で付けたほうがよさそうなオプション

denoには組み込みのテストランナーが備わっています。テストランナーは`deno test`コマンドで利用できますが、いくつかのオプションを指定することができます。その中から便利そうなものをピックアップして紹介します。

## `deno test`で付けたほうがよさそうなオプション

### `deno test –jobs `

`–jobs`オプションを指定すると、複数のCPUを使ってテストを並列実行します。
`–jobs`の後に続けて数字を記述して、使用するCPUの個数を指定することもできます。

“`shell
> deno test –jobs # CPUの個数分並列実行する
> deno test –jobs 4 # 4並列で実行する
> deno test # –jobsオプションが指定されていない場合は並列実行しない
“`

`–jobs`オプションを指定しない場合、並列実行されないので注意しましょう。
筆者の場合は、`–jobs`オプションを指定することで、1分半かかっていたCIを45秒に短縮することができました

Vueで要素外クリック検出

例えばメニューを実装する際に、メニュー外をクリックしたら閉じるようにしたいときが割とあるため備忘録として。

Nodeのcontainsを使い、クリックされた要素がメニュー要素の子孫に含まれるかどうかを判定しています。
vueでwindowやdocumentにイベントリスナーを追加すると要素がunmountされてもイベントリスナーが残り続けるため、必ずunmount時にremoveしましょう。

“`vue