f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

HTMLをデバッグしてDOMがいつ更新されたかを追いかける

Google Chrome で HTML をデバッグできることを最近知った。開発者ツールの Elements を開いて右クリックで 「`Break on`」 という項目があるので、その中から Element の更新タイミングを選択するだけだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/034dc447-d8bd-cff0-9fc5-00056244ebac.png)

– subtree modifications: 子要素に変更があったときに描画を一時停止する
– attribute modifications: 要素自体に変更があったときに描画を一時停止する
– node removal: 要素が消えたときに描画を一時停止する

自分の場合は、a タグに謎のクエリストリングが focus のタイミングの付与されるのを調べるときに役に立った。（そのときは GA の js が自動付与していたことがわかった。）

元記事を表示

querySelectorの返り値の型を絞り込む関数を作る

# 背景
querySelector(),querySelectorAll()で型が“`Element“`,“`NodeListOf“`になって毎回型チェックをするのが手間だなと感じていました。

# querySelectorの返り値の型を絞り込む関数

“`ts
const safeQuerySelector = (
root: Element | Document,
selector: string,
expectedElementType: { new (): T; prototype: T }
): T | null => {
const elm = root.querySelector(selector);
if (elm instanceof expectedElementType) return elm;
return null;
};

const a = safeQuerySelector(document, “div”, HTMLDivElement); //HTMLDivE

元記事を表示

Historyオブジェクト

Historyオブジェクトを使用するとブラウザの戻る、進むボタンと同じような動作をさせることができる。
back()メソッドとforward()メソッドをが定義されており、ブラウザ上の閲覧履歴上の1前に戻したり、先に進めたりできる。

“`js
history.back(2) // 2つ前の履歴に戻る
history.forward(1) // 1つ先の履歴に進む
“`

go()メソッドは整数値を引数で渡すと履歴リストを前後に移動できる

“`js
history.go(4) // 4つ先の履歴に進む
history.go(-1) // 1つ前の履歴に戻る
history.go(0) // 現在のページを再読み込みできる
“`

#### 参考
https://www.oreilly.co.jp/books/9784873119700/

元記事を表示

5章:機能管理を行うWEBアプリケーション成果物（途中経過）

個人の学習用として機能管理を行うWEBアプリを作成しております。

作成経過の目次
[1章：学習用のWebアプリを作成しよう（技術選定）](https://qiita.com/tokio-mori/items/7aadc78eab10d4115ac3 “1章：学習用のWebアプリを作成しよう（技術選定）”)
[2章：GitHub,GitLab,Visual Studio Codeでリポジトリの作成・連携を行う](https://qiita.com/tokio-mori/items/322609e180fa5086a186 “2章：GitHub,GitLab,Visual Studio Codeでリポジトリの作成・連携を行う”)
[3章：画面遷移図・テーブル設計を作成する](https://qiita.com/tokio-mori/items/7bbd7761a7664da75408 “3章：画面遷移図・テーブル設計を作成する”)
[4章：基本設計仕様書を作成する](https://qiita.com/tokio-mori/items/72d944a53f90f8082197 “4章：基

元記事を表示

Fuse.jsを使って検索機能を実装する

# Fuse.jsとは

Fuse.jsはJavaScriptで書かれた軽量でかつ柔軟な検索ライブラリです。Fuse.jsを使用することにより、Webアプリケーションやモバイルアプリケーションに短時間で高度な検索機能を盛り込むことが可能になります。

## 高速な検索性能

Fuse.jsは極めて高速な検索を実現します。適合スコアリングアルゴリズムを採用しているため、大規模なデータセットに対しても、検索は10ミリ秒未満で実行できます。

具体的には、Fuse.jsを使用したWebアプリケーションの事例では、25,000件の顧客データに対する入力補完検索が100ミリ秒以内で完了し、即時に結果が返されていると報告されています。

## 大規模なデータセットに対応

Fuse.jsは、100万件以上の大規模なデータセットでも検索性能を維持することができます。軽量な実装によりメモリ使用量を抑えるため、リソースの無駄遣いを防ぎながら優れたスケーラビリティを提供します。

## 近似値検索の柔軟性

Fuse.jsは、単なる文字列の完全一致検索だけでなく、スペルミスや入力ミスがあった際でも、関

元記事を表示

p5play で Chain Collider（vertex mode）のグループを作ってみる

この記事は [p5play の Group](https://p5play.org/learn/group.html) の仕組みで、以下の「Chain Colliders」のグループを作ってみる、という内容の記事です。

●p5play : Sprite ＞ Chain Colliders
　https://p5play.org/learn/sprite.html?page=11

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6beed3a1-3c1a-1893-8fd9-a527efd54fb4.png)

## p5play の Group のサンプル
p5play の Group のサンプルを見ていると、　グループ化している対象は円・矩形など、基本図形のみです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ff351b60-ee7d-fb2b-73c8-

元記事を表示

【Vue3】バージョン3.4から安定版となった「defineModel」が超便利

2023年12月28日、Vue.jsの最新バージョン「3.4」がリリースされました。

今回のアップデートで安定版となった`defineModel`が超便利なので、紹介したいと思います。

https://blog.vuejs.org/posts/vue-3-4

## 用途

コンポーネントを使用する際、`v-model`に親コンポーネントで定義したデータ（`ref` / `reactive`）を指定する際に使用します。

たとえば以下のように、テキストフォームのコンポーネントを作成して、親コンポーネントで定義したref（`username`）をそのまま`v-model`に指定するような状況ですな。
“`vue:親コンポーネント