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

CapCutの高品質なTTSを使いたいからラッパーAPIを作ったお話

# あいさつ
記事を見ていただきありがとうございます！

電子工作したり、サーバーいじったりソフト作ったり…
いろいろしてる大学生です

地味に今回が初記事(いろいろあって消えた)になります！

## 注意事項
この記事、実は2024年2月ごろに書いていたのですが、以前の手法が使えなくなりアップデートに時間がかかっていたため、一部古いURL等があります。
ご了承ください。
# 目次
[・なにこれ](#なにこれ)
└[・昔のお話](#昔のお話)
[・使い方](#使い方)
[・APIドキュメント](#APIドキュメント)
[・終わり](#終わり)

# なにこれ
みなさん、TikTok や YouTube Short でたびたび流れてくる動画に使われている合成音声のクオリティーに驚くことはないでしょうか？
私も初めて見た時、あまりにも自然でかなりびっくりしました。

そんなこんなで検索してみたところ、TikTokのアプリ自体についている読み上げ機能や**CapCut**という編集ソフトに付属している読み上げ機能であの声を作っていることがわかりました。

CapCutの合成音声を知らな

スコープ 関数スコープ、ブロックスコープ [JavaScript]

JavaScriptにおけるスコープとは？

:::note info
変数が「参照できるか」？を現す有効範囲のことです。
:::

どこで変数を定義したかによって、どこからその変数を参照できるのかが決まります。
(関数の中？ 関数の外？ for文の中？ if文の中？)

そして、スコープにより参照できる範囲が限定されることで、
変数名の競合を避け、無駄なメモリの消費を抑える役割があります。

## 目次：

– [関数スコープ](#関数スコープ)
– [ブロックスコープ](#ブロックスコープ)

## 関数スコープ

関数の中のスコープ（有効範囲）についてみていきたいと思います。

#### 例： 関数の中のスコープ（有効範囲）について

collectという関数を定義します。

その中では、total = 10という数字を定義し、
それをconsole.logとして出力しています。

“`js

function collect(){
let total = 10;
console.log(total);
}
“`

“`text: 出力結果
10
“

【雑メモ】Reactの公式ドキュメントを読んでみて

# はじめに

自身の忘備録として投稿しています。
Reactの公式ドキュメントを読んで、覚えておいた方がいいなって感じた点の雑なメモ集です。

# メモ集
・***コンポーネントは純関数に保つ***
純関数とは、同じ入力には毎回同じ出力をして、レンダー前に存在するオブジェクトや変数を変更しないもの

・レンダーは厨房での料理みたいなもの
　表示はDOMへのコミットで、料理を提供するようなこと

・***propsに関数を渡す際、関数が実行されてしまう状態で渡したらいけない
　だから引数が必要なときは、無名関数で包んで関数を渡している***

・イベントは伝播されるから、それを停止するやつもある

・イベントハンドラは純関数である必要がなく、副作用を持っても良い

## State周り

・***コンポーネントは初回と、stateの変更時にレンダーされる***

・***ローカル変数の変更はレンダーをトリガーしない、レンダー間で値を保持しない***

・***stateのセットは、現在のstateを変更するのではなく、レンダーをトリガーするだけ***
stateはその値自体を変えてる

JavaScriptにおける基本的なDOM操作まとめメモ（追加予定）

JavaScriptのDOM操作について学習の過程で出てきた基礎的な事項をまとめました
何か間違いなどあればご指摘いただければ幸いです

## イベントとイベントハンドラ
**イベント**とはユーザがブラウザ上で行う様々な動作のことです
マウスのクリックや、ポインタの挙動などあらゆる動作のことを指します
**イベントハンドラ**とはイベントの発生をキッカケとして、何らかの処理を実行することです

### プロパティを使ったイベントとイベントハンドラの関連付け
“`javascript:JavaScript
// イベントの発生を検知したい要素を指定します（getElementByIdは後ほど説明します）
const event = document.getElementById(‘イベントを検知したい要素のid属性値’);

// 指定した要素がクリックされたときに任意の動作を行う
event.onclick = () => {
// 行いたい処理を記述する
}
“`
`onclick`によってクリックイベントとイベントハンドラを関連づけることができます
イベントの種類は任

まだ手書きでJSONバリデーションしてるの？

# はじめに
みなさま、良きJSONライフは送ってますか？
バリデーションってめちゃめちゃ面倒ですよね。バグがあったら僕たちの責任ですよね。そんなのイヤですよね。じゃあ**型**にその責任押し付けてやりましょう。

**令和のこの時代にJSONのバリデーションを手動でやるのはやめましょう！**

# 読者対象 ✏️📕
* Rustを触ってみたい方
* プログラミングのことが最近好きになった方
* バリデーション処理を書きたくない方
* 型をキツキツにして、バリデーションを簡潔にしたい方

# 本日のJSON 🥺
おやおや、とあるユーザがサービスに登録しようとしてるみたいですね。
こちらの**お便り**(JSON)をご覧ください。
“`json:user.json
{
“name”: “John”,
“password”: “p@ssw0rd”,
“age”: 43,
“friends”: [“Tom”, “Hanako”]
}
“`

# サービスの要件 🤖
今回の想定するユーザ登録サービスには

* **1文字以上**の`

要素の垂直位置の取得方法（JQuery↔︎JavaScript）

JQueryをJavaScriptに書き換えている際、「あれ要素位置どうやって取得してたっけ…？」となったのでメモ。いい加減覚えたい。

## JavaScript
### 絶対位置
– `window.pageYOffset` はページの垂直スクロール位置を返す
– `element.getBoundingClientRect().top` は要素のビューポートからの垂直位置を返す

“`
window.pageYOffset + element.getBoundingClientRect().top
“`

### ビューポートからの相対位置
“`
element.getBoundingClientRect().top
“`

## JQuery
### 絶対位置
– `element.offset()` はドキュメントの左上隅からの絶対位置を返す
– `.top` プロパティを使って垂直位置を取得

“`
element.offset().top
“`

### ビューポートからの相対位置
– `$(window).scrollTop()` は現在の垂直スクロール

defineXXXXの関数を使うとnot definedと出る時の対処法

ここでいうdefineXXXX関数は以下のような関数(?)です。
– defineProps
– defineModel
# 初っ端からの結論
結論を言いましょう。defineXXXXの関数はマクロなので**デリケート**だからです！
# マクロとは
このマクロは、.vueファイルとかからコンパイル(Vite等)するときにdefinePropsから別形態に変化します。
Vue SFC Playgroundで見ると分かるでしょう。

https://play.vuejs.org/#eNp9kU1PwzAMhv9K8GlI0yax21QmAdoBDjABx1yq1m0zmg/lY1Sq8t9xUnXsMO1m+3ltv05GeDJmdQoIWyhcZYXxzKEPZseVkEZbz0aLTWSN1ZJxICUHriqtnGcle2Q1NkLhwWrjFvczkK4lRH0LDh32vb7jQLBYTxtoNiUepelLj5QxVnQPu3GkvhiLNcVJfCGAJXhHsxvRro5OK3I7pjYOlZZG9Gg/jBe0m8OWZZJYSZt/33LN24DLuV51WP1cqR

[JavaScript] filterメソッドとは

# まとめ

#### `map`メソッドとは
> `filter()` は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

つまり、**`filter`メソッドは、配列の各要素に対して指定した条件を満たすかどうかをチェックし、条件を満たす要素のみを含む新しい配列を返します。**

# 目次
– [基本構文](#基本構文)
– [活用例1](#活用例1)
– [活用例2](#活用例2)

# 基本構文
配列`numbers`の値を`num`としてコールバック関数`num => num * 2`に渡し、新たな配列`doubled numbers`として返している。

~~~JS:JavaScript
const numbers = [1, 3, 6, 8, 11];

スクリーンショットテストのプラクティスについて調べるメモ

私はAndroidでエミュレーター無しでスクショテストができる [Roborazzi](https://github.com/takahirom/roborazzi) というライブラリを作っていて、もう少し周辺について詳しくなっておこうと思いまして、周辺技術のベストプラクティスを薄く広く軽く調べて見ます。

# Jestを使ったスナップショットテスト:

https://www.browserstack.com/guide/snapshot-testing

テストの流れが以下のように書いてあります。
1. 実行して、画面を描画する
1. Captureする
1. 保存する
1. もう一度実行する
1. 比較する
1. 画像をアップデートする

比較のところではdiffや比較の画像を出したりする。

以下のtoMatchSnapshot()で、なければ保存したり、あれば比較したりする。

“`js
test(‘should match snapshot’, () =>
{
const data = {name: ‘John’,age: 30,email: ‘john@exam

関数基礎 function( ) 、return [JavaScript]

JavaScriptの基本的な構成要素の一つに**関数**というものがあります。

:::note info
関数を利用することによるメリット

・関数を使うことでコードの再利用が可能になる。
・まとまったコードを定義して、後で実行できる。
・目的ごとにコードを分けておくことができる。
:::

関数は、あらゆる場面で使用し、
JavaScriptでプログラミングをするにあたって必要不可欠な存在です。

#### 例：

6人で人生ゲームをします。

６人それぞれに１つずつサイコロが渡され、毎回それぞれ１回サイコロを振ります。

#### サイコロの作り方：
・ランダムな1-6の値の整数を作るには？

１、Math.random()
0以上１未満のランダムな少数の値を生成してくれる。
例：0.1.. 0.4.. 0.9.. など

２、生成したランダムな少数の値に必要な範囲の整数を掛ける
（今回のサイコロの例で必要なのは、6までの値なので、6を入れる。）

また、必要な値は１から６までの数字なので、掛け合わせた数字に＋１をする。

Math.random() *(掛ける) 6 + １

【一口メモ】CSSやjavascriptなどのファイルを編集した後何回再読み込みしても更新されないときの対処法

## 困ったこと
CSSやJavascriptを編集した後サーバーなどにあげたりし、再読み込みしても更新されないときがある。

## 原因
①Webページが参照する画像ファイルやCSSファイルなどの**キャッシュ**、あるいは②Webページで実行されたJavaScriptが動的に読み込んだファイルなどの2次的なキャッシュが残っているためである。

**キャッシュ**というのは、2回目以降に開かれるWEBページをよりスムーズに開くため、一定期間内に同ページを開くときは、前回開いていた履歴を表示するものである。

1回目に開いたときと2回目で開いたときの間に、HTMLファイルが変更されない、かつCSSファイル等の外部ファイルが更新されると、高速化するために便利なキャッシュが、逆に正確性を欠くものとなる。

## 解決策

基本的にキャッシュを削除すればよい。ブラウザにフォーカスされているときに次の操作を試みる。

### 解決策1　Ctrl + Shift + R　または　Shift + F5

Webページから直接参照している画像ファイルやCSSファイルなどのキャッシュを破棄してリロー

Node.js のパッケージ「Node Web Bluetooth（webbluetooth）」の情報を見てみたり toio との組みわせを試して見る

以下の記事を書いている際に見かけた Node.js のパッケージ、「Node Web Bluetooth（webbluetooth）」が気になったので、まずは情報を見てみたという話です。

●Mac で noble を使って BLE対応のデバイスをスキャンする＋α（2024年5月版） – Qiita
　https://qiita.com/youtoy/items/44216ea20c6506d80ed8

同じような名称のもので、ブラウザで BLE を扱う Web Bluetooth API がありますが、これと同じ使い方ができる Node.js のパッケージというもののようです。

●thegecko/webbluetooth: Node.js implementation of the Web Bluetooth Specification
　https://github.com/thegecko/webbluetooth

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

テストコードで呼び出される回数によって関数の返り値を変えたい

# 1. 背景
呼び出される回数によって関数の返り値を変えたいことがありました。

以下の例で言うとsubFuncの返り値を呼び出される回数によって変えたいです。

“`ts
const mainFunc = () =>{
let result = ”
result = subFunc();
result = subFunc();
result = subFunc();
return result;
}
“`

# 2. 実現できるコード

https://jestjs.io/docs/mock-function-api#mockfnmockreturnvalueoncevalue

mainFunc,subFuncはテストコードで呼び出すのでexport宣言をしています。

“`ts:test.ts
jest.mock(
‘ファイルパス’,
() => ({
subFunc: jest
.fn()
.mockReturnValueOnce(‘1回目に返される

JavaScript:ジェネレータとメモ化を用いた素数列

[遅延シーケンスを用いた無限素数列 in JavaScript](https://qiita.com/kohyama/items/0f6643d30ce2ffa98572) を読んで勉強になったので、メモ。

+ 遅延を用いると素数の計算とかがよりシンプルに記述できる

しかし最終的には効率化のためにメモ化関数にしています。計算には使用してるものの遅延リスト関係なくなっちゃった。

ここではメモ化することを前提に、遅延アイテムとしてジェネレータを使って素数列を作ってみたいと思います。
効率もよくなるだろうし、見た目もいけてる感じになればいいなあ、的なことです。

# メモ化関数

一般化されたメモ化関数はこんな感じです。

“`js:
const memoizer = inits => rule =>{
const memo = […inits]
return makeA(rule)(memo)
}

const makeA = rule => memo => n => {
if(n >= memo.length){
for(let i = memo.len

Dayjsでタイムゾーン変換

Dayjsを利用する際にタイムゾーンの変換について毎回調べている気がするので記載しておく。

前提としてDayjsのデフォルトタイムゾーンを`JST`としている。

“`typescript
import dayjs, { Dayjs } from ‘dayjs’;
import ‘dayjs/locale/ja’;
import timezone from ‘dayjs/plugin/timezone’;
import utc from ‘dayjs/plugin/utc’;

// UTCプラグインを読み込み
dayjs.extend(utc);
// timezoneプラグインを読み込み
dayjs.extend(timezone);
// 日本語化
dayjs.locale(‘ja’);
// タイムゾーンのデフォルトをJST化
dayjs.tz.setDefault(‘Asia/Tokyo’);
“`

# 現在の日時をJSTで表現する
※現在日時 `2024-05-28T22:06:53+09:00` の場合
## OK
“`typescript
dayjs().tz

ヤマハルーター CustomGUIの設定例

# 前置き
ヤマハさんのルーターの機能のひとつで、
ユーザー毎に専用画面を表示できるカスタムGUIという機能があります。
そこからルーターにコマンドを送ったりできるんですね。
ボタン操作でマジックパケットを送ったりとか、用途によっては便利なわけです。


# 本題
ヤマハさんの公式ホームページに設定例がありますが、コールバック関数の例しかないので、コマンド投げるだけで戻り値いらないパターンとか、戻り値を再利用してもう一回ルータに命令送って・・・とかやろうとすると、大変困るわけです。
そこで、Promise で動くコードにしました。
`.then`で好きなだけつなげて、インデントも増えない。

# 実装コード

Mac で noble を使って BLE対応のデバイスをスキャンする＋α（2024年5月版）

以下の記事の、2024年5月バージョンの内容です。

●Mac で noble を使って BLE対応のデバイスをスキャンする（2021年4月版） – Qiita
https://qiita.com/youtoy/items/d9c8ff3a33985359f39b

上記の BLE 絡みの話の一部は、久しぶりにやってみると OS のバージョンアップの影響など、何らかの要因で突然動かなくなるということがあるので、久しぶりに試してみたという話です。

## 試す環境
試す環境は以下の通りで、当時と異なる部分に「★」をつけてみました。

– 機器
– MacBook Pro（13-inch, 2020, Four Thunderbolt 3 ports）
– OS
– ★ macOS Sonoma 14.5
– Node.js のバージョン
– ★ v22.1.0
– パッケージ
– [@abandonware/noble ]()

## 軽く試してみる
### パッケージのインストール
それでは、パッケージをインストールします。

“`zsh
npm i @abandon

JavaScriptの関数呼び出し前後にログ出力処理を追加する方法(Proxy)

## はじめに

関数の「呼び出し直前」と「処理完了後」にログ出力がしたい場合、何かいい方法がないか？と調べたところ、
組み込み機能の[Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)でできることがわかりました

https://github.com/murasuke/js_method_proxy

## Proxyとは

あるプロパティが参照されたとき及び代入されたときや、関数が呼び出されたときの動作をカスタマイズすることができる(JavaScriptの標準)機能です

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy

## Proxyの使い方使い方

関数の呼び出しだけに絞った簡単なサンプルです

func()をProxyでラップすることで、関数呼び出し時にapply()が割り込みます

“`javascript
/**

Splideでスライドの高さをコンテンツごとに可変させる

今までスライダーにはSwiperを使用していましたが、Swiperよりも軽量ということで『Splide』へ変更することになりました。

https://ja.splidejs.com/

特に問題なく置き換えられたんですが、Splideで１つ出来ないことが『スライドの高さに合わせて、全体の高さを自動調整する』です。
Swiperでいうところの『autoHeight』がないのです。

オプションに一応あるんですが、trueにしてもSwiperのような動きはしません（使用目的が多分違うのだと思います）。

## やりたいこと

Splideでもスライドの高さに合わせて全体の高さを自動調整するようにしたい。

## 原因

そもそも、スライドを並べてるエリアは“display:flex“で横に並べており、全体の高さはコンテンツ内で一番高いものに揃うのが当たり前なんですよね。

では、Swiperはどうやっているのか？
『autoHeight』をtrueにすると、アクティブになっているスライドの高さを取得→スライドを囲むdivに高さを指定、ということで自動調整するようになっていました。

毎日16時に心にひびく名言を届けたい

# なぜ16時なのか
シンプルに疲れがたまる時間だから。
# どんな名言？
アドラー心理学に基づいた名言(自作でリストを作成）と、名言教えるよAPI（著名人による名言）を連携させて、２種類の名言を送るよ。
# アドラー心理学を簡単に説明
> アドラー心理学は、オーストリアの精神科医アルフレッド・アドラーが提唱した心理学理論です。 アドラーは「人間の行動にはすべて目的がある」という目的論とともに、「すべての人生の決定は、自分が選択している」と考えます。 これをアドラー心理学の基本理論では自己決定性と呼びます。
出典:indeedキャリアガイド
https://jp.indeed.com/career-advice/career-development/what-is-adler-psychology#
# 活用ツール
・Node-RED
・JavaScript
・LINEmessagingAPI
・名言教えるよAPI（https://meigen.doodlenote.net）
# フロー
![スクリーンショット 2024-05-28 17.33.01.png](https://qiit