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

VanillaJSでFabric.jsが急に動かなくなった話

# はじめに

下記DemoでFabric.jsをVanillaJSで使用していたが、急に動かなくなった。

https://qiita.com/shisojuice/items/2413580f72244a4823c7

https://github.com/fabricjs/fabric.js

# 原因

ReadMe(20240701現時点)のQuick StartのPlainHTMLどおりに参照していたため、

cdn.jsdelivr.net/npm/fabricのバージョンの指定を失念していた。(バージョンがv6にアップグレードしたため。)


https://github.com/fabricjs/fabric.js?tab=readme-ov-file#qui

javascriptの開発時にVS CodeのIntelisenceが遅かった時の解決方法

## 現象
Javascript(Typescript)での開発時、Intelisenceが異常に重い時があった。具体的には、変数の変更時などにtypeのチェックに数十秒の時間がかかっていた。

何かおかしいなと思っていた最中、[Visual Studio Code is unable to watch for file changes in this large workspace](https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc)というエラーが出た。

## 解決方法

[Visual Studio Code is unable to watch for file changes in this large workspace](https://code.visualstudio.com/docs/setup/linux#_visual-studio-c

JavaScript入門 #オブジェクト型とシンボル型

## はじめに

本記事では、JavaScriptにおけるデータ型の[オブジェクト型](#オブジェクトとは)と[シンボル型](#シンボル型について)について周辺知識をまとめていきます。

今回の記事も[以前書いた記事][記事]と同様に以下のサイトのチュートリアルを進める中で学んだことをまとめていますのでJavaScriptを勉強している、してみたい方は是非参考にしてください！

https://ja.javascript.info/

## オブジェクトとは

早速本題である「オブジェクト」について説明していきたいと思います。

オブジェクトとは、キー付けされた様々なデータのコレクションや、より複雑なエンティティを格納するために使用されます。

– オブジェクトのきほん

波カッコと任意のプロパティから成り立ち、プロパティは “キー:値” のペアで、キーは文字列であり、値に制限はありません。

～記述例～

“`javascript:空のオブジェクト
let user = new Object(); // “オブジェクトコンストラクタ” 構文
let user = {}; // “

Perplexity先生（無料版）にブラウザーで動く超解像のJSの動作確認の記事を書いてもらいました

## 0.はじめに

私は、ただの初心者です。ブラウザーで動かせる超解像のJSを見つけたのでCodepenで動作確認をしてみました。

一応、動くものができたのでQiitaに記事を書こうと思いましたが、超解像の知識ゼロなので、生成AIのPerplexity先生（無料版）に以下の質問をして記事を書いてもらいました。



![Screenshot 2024-07-01 12.53.59.png](https://q

【JavaScript】Ajaxの書き方あれこれ

どうもこんにちは。

今回は、使用するライブラリによって書き方が変えられるAjaxについてメモとして残そうと思います。

# JavaScriptの場合（ライブラリなし）

“`javascript
fetch(`/users/${userId}`, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
“X-CSRF-Token”: document.querySelector(‘meta[name=”csrf-token”]’).getAttribute(‘content’)
},
body: JSON.stringify({
user_data: {
name: nametext
}
})
})
.then(response => response.text())
.then(data => {
console.log(“Ajax request successful.

Chrome拡張機能でタイマーを作った

## 背景

集中していると時間忘れがちだな…。
スマホのアラームでもいいけど、chromeから即設定出来ないかな…。
一定時間ごに画面が揺れたら気づけそうだな…。

# 作ってみました。

## 以下のコードを1つのフォルダに纏めてください

また、別途icon.pngを各自で用意をお願いします。
拡張機能用のアイコンですが、ないとchromeへのimport時にエラーになります。

## ソースコード

“`js background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === ‘setAlarm’) {
const minutes = message.minutes;
const alarmName = `shakeAlarm_${Date.now()}`;

chrome.alarms.create(alarmName, { delayInMinutes: minutes }

【Figma Plugins】Quick actionsでFigma Pluginsを動かす

## はじめに

FigmaのPluginを開発する際、Figma PluginsをQuick actionsから動かしたいと思ったことはありますか？
この記事では、Figma PluginsをQuick actionsから動かす方法を解説します。

## Figma PluginsをQuick actionsから動かす

### 0. Quick actionsの基本

Quick actionsでPluginを動かすには、プラグイン名を入力します。
コマンド名は、任意です。


パラーメーターも一緒に入力することができます。
![](ht

『小林さんちのメイドラゴン』のアイキャッチ（HTML版）

アニメ[『小林さんちのメイドラゴン』](https://maidragon.jp/)には、1話あたり2回、真ん中ちょっと過ぎと最後に近くなって、黄色い画面のアイキャッチが入ります。中央に5つの文字が左から順にピコピコと効果音とともに出てくる比較的単純な構成ですが、その文字列が微妙に興味深いのが特徴的です。

[「小林さんちのメイドラゴンで出てきたコード（小林さんを探せ！）」](https://qiita.com/ygkn/items/6b3be1afa31e4092826e)で語られているように、この番組は主人公はPythonプログラマです（第二期にはC++も出てくるが）。そのため、アイキャッチには`.name`（なにかのプロパティかTLD）とか`if(){`（なぜかPythonではないですね）なんてのも出てきて、ソフトウ

JavaScriptでメトロノーム作ってみた

# はじめに
日々の業務を振り返っていて、ふと気づいたことがあります。それは、「動画プレイヤー以外で音を鳴らしたことがない」ということです！
音楽を趣味でやっているにも関わらず、これは一大事。

そこで、今回は音楽の練習に欠かせないメトロノームをJavaScriptを使って作ってみようと思います。
今回使う音を鳴らす技術を活用すれば、みなさんが作っているWebアプリケーションのあんなところやこんなところでも自由に音を鳴らすことができるかもしれません。
ただ、全然脈絡なく音が鳴るアプリケーションを作ると、偉い人に怒られるかもしれないので、用法用量を守ってお使いください。

# JavaScriptで音を鳴らす
さっそくJavaScriptを使って音を鳴らしてみます。
Web Audio APIを使い、単純なクリック音が鳴るようにしました。
`oscillator.frequency.value`（音の周波数）やスタートからストップまでの持続時間の設定等を変えることで、鳴らす音を変更することが可能です。

CSS と JavaScript でカラオケのテロップを再現する

## 概要

カラオケでテロップの色が変わるあの感じを CSS で再現します。


:::note warn
テロップをリズムに合わせて変えるのはやりません。気が向いたらやります。
:::

## 画面に表示する歌詞の要素

歌詞は行ごと、文字ごとにテロップのタイミングが決まっています。これを想定して、歌詞を一文字ずつ `span` タグで書きます。
また、テロップはなめらかに変わるので、文字がどこまで塗られているかを表す変数を `style` 属性に用意しておきます。

“`html

Node.js でキー入力を利用した効果音ポン出しをやってみる： Readline と play-sound を利用

ライブで映像配信を行う際やイベントを行っている中で、手動でボタンなどを押下したタイミングで効果音を鳴らすということができる、ポン出しと言われるものがあります。

ポン出しについて、業務用などに、それ用の機材もあったり、ソフトウェアベースのものもあったりします。

●ポン出し 機材 – Google 検索
　https://www.google.com/search?q=%E3%83%9D%E3%83%B3%E5%87%BA%E3%81%97+%E6%A9%9F%E6%9D%90&

今回は、そのような「ボタン押下で効果音を鳴らす」といった仕組みを、直近で試していた以下の内容を組み合わせて作ってみます。

●Mac で Node.js ＋ play-sound を使って MP3ファイルを再生してみる – Qiita
　https://qiita.com/youtoy/items/a744e3ca1d52cc9609c5

●【Node.js】入力されたキーが何かを音声で返すプログラムを作ってみる： Readline と Mac の Sayコマンドの組み合わせ – Qiita
　https

Leafletでマーカーアイコンを回転させたい！

## みなさんこんにちは。
さて、あいさつもくそもなく、いきなり本題に入りますね。

## なぜ回転させる必要があったか
これも私の開発している、[アメダス天気Viewer](https://nanka.cloudfree.jp/webapps/amedas/)という(ウェザ◯ニュ◯スのパクリみたいな)アプリで、観測点の風向風速を表現するときにどうしても風向きアイコンを回転させる必要があったからです。

↓これ

## どうするか。
さて、こうなれば、Leaflet愛好家の愛読書。
[Leaflet公式のDocs](https://leafletjs.com/reference.html)を見てみます。
そして、試しに「rotat」(rotateやrotationなどもヒットさせるため)で

wavesurfer.js での簡単に波形表示（インタラクティブな音声再生も可能）を p5.js Web Editor上で動かす

## はじめに
今回の記事は、以下の wavesurfer.js を題材にしたものです。

●wavesurfer.js | audio waveform player JavaScript library
　https://wavesurfer.xyz/


このライブラリは、以下の公式説明に書かれているとおり、インタラクティブな音声再生・波形の表示が行えるものです。

> Wavesurfer.js is an interactive waveform rendering and audio playback library, perfect for web applications. It leverages modern web technologies to provide a robust and visually engaging

Playwrightのインストール方法

# 事前準備

## Node.jsのインストール
以下のリンクを参考にNode.jsをインストールする

https://qiita.com/ryome/items/eec08b28aff294e8c3d6

# Playwright Testのインストール

## コマンドラインでPlaywright Testをインストールする
コマンドラインで以下のコマンドを実行して、Playwright Testをインストールします

“`bash:コマンド
npm init playwright@latest
“`

## ブラウザのインストール
– Playwright Testでは、Chromium、Firefox、Webkitの各ブラウザをテストに使用できます。
– 必要なブラウザをインストールするには、以下のコマンドを実行します

“`bash:コマンド
npx playwright install
“`

## テストコード作成
– テストコードを作成するには、以下のコマンドを実行します

“`bash:コマンド
npx playwright codegen [URL]

論理演算子の秘密：&&と||をマスターして、コードを魔法のようにシンプルに！

## 論理演算子の考え方
### && (AND)について
こんな記述があるとして
“`
result = a && b;
“`
aとbがtrueならtrueを返すって認識だったんですが、間違いらしいです…

&&（論理AND演算子）は、左から右に向かって評価します。つまり、次のような流れです：

最初に左側の式 a を評価します。
a が偽（falsy）であれば、その時点で評価を停止し、a の値が結果となります。
a が真（truthy）であれば、次に右側の式 b を評価します。
b も真であれば、全体の結果は true となります。一方、b が偽であれば、全体の結果は false となります。

要するに、`&&`は両方の値が`true`のときにだけ`true`を返しますが、最初の値が`false`の場合には、もう一方の値は無視されて`false`が返されるということです。

### 例
“`
let a = true;
let b = false;

let result = a && b; // 結果は false
“`

この例では、`a`が`true`なので、次に

【JavaScript】someメソッドとeveryメソッド

# someメソッド
配列に対して、コールバック関数で指定した条件に合致する（trueを返す）要素が1つでも
ある場合にtrueを返すメソッド。
例：配列内に文字型の要素が含まれるかどうかを判定する処理
“`JavaScript
const isString = function(elem){ return typeof elem === ‘string’; }
const Array01 = [1, 2, 3 ,’4′, 5, ‘あ’];
const Array02 = [1, 2, 3 ,4, 5, 10];
const isIncludesString01 = Array01.some(isString);
const isIncludesString02 = Array02.some(isString);
console.log(isIncludesString01); // trueが返る
console.log(isIncludesString02); // falseが返る
“`
### 内部の動き
(1) コールバック関数で、配列内要素を１つずつ取り出して条件に合致

JavaScript: 文字列ろ過

文字列から特定文字を除外して全体の容量を削減、あるいは縮めやすくする魔法を紹介します。本記事ではこの工程を濾過と呼びます。
その対象文字となるのは**全角英数字、Greek、Cyrillic、平仮名、片仮名、半角片仮名**となります。同種の文字が連続しているほど効果が高くなります(2文字目からは1 byte)。

## 原理
以下の規則で変換します。当然可逆変換です。元の文字列に`[#-~]`が含まれていても問題ありません。

* 全角英数字 → 半角英数字. 但し `＼(\uFF3C)`, `～(\uFF5E)`は除外
* Greek(`[\u0391-\u03CE]`) → `[A-~]`
* Cyrillic(`[\u0410-\u044F]`) → `[?-~]`
* 平仮名(`[\u3041-\3093]`) → `[#-u]`
* 片仮名(`[\u03A1-\u30FC]` → `[#-~]`
* 半角片仮名(`[\uFF61-\uFF9F]` → `[@-~]`

## 実装
“`js
/* 対象文字自動設定
@txt: 文字列
@encode: 真なら濾過、偽なら逆濾

TypeScript勉強して学んだこと！

# はじめに
こんにちは！WEBエンジニア転職を目指しているK.Yです！
TypeScript勉強してわかったことをメモとして残そうと思って今回書きました。
以下、TSに置き換えたコードです。

## コード
“`typescript
import React from ‘react’;
import { Link } from “react-router-dom”;
import { FormEvent, useState } from “react”;
import “./App.css”;

type InquiryType = {
name: string ;
email: string;
message: string;
};

type ErrorsType = {
name?: string;
email?: string;
message?: string;
};

const InquiryPage: React.FC = () => {
const [inquiryData, setInquiryData] = useState

【Javascript】画面遷移時に、ブラウザに送信処理を予約してデータ送信する

## はじめに
PC・スマホの両方で、画面遷移時にユーザーの画面操作ログを送信したい。
加えて、確実に送信処理が実行されるようにしたいとします。

PCのみの場合は、unload、beforeunload イベントの場合に送信すればいいですが、モバイルでは、ブラウザーは unload、beforeunload、pagehide イベントを発行しません。
ということで、今回の処理ではこれらイベントは使えません。

そういう場合には、visibilitychange イベントで、document.visibilityState === “hidden” の条件で送信するようにすればいいです。

これは、ユーザーが新しいページに移動したり、タブを切り替えたり、タブを閉じたり、ブラウザーを最小化したり閉じたりしたとき、あるいはモバイルではブラウザーから異なる形のアプリに切り替えたときに発行されます。

## navigator.sendBeacon()
確実に送信処理が実行されるようにしたい、そういうときに使えるのが、navigator.sendBeacon()です。

このAPIはブラウザに

Axios 簡単なデモページの作成2[JavaScript]

APIから情報を取得する方法を学んだので、
その知識と今まで学んできたことを総合して簡単なデモページを作成していこうと思います。

デモページの内容：

TV番組の検索を行えるアプリを作成していきます。

検索したTV番組に応じた画像を、ループを回して表示する一覧画面を作成していきます。

こちらでは、作成した内容を要約しながら、作成手順や具体的に使用した関数やロジックの内容をまとめていけたらと思います。

目次：
– [デモページ詳細](#デモページ詳細)
– [HTMLファイル](#htmlファイル)
– [ロジックの説明「JavaScriptファイル」](#ロジックの説明javascriptファイル)

## デモページ詳細

今回は、TVMAZEというTV番組のAPIから情報を取得していきたいと思います。

ま