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

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

私は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 >=

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

[Rails7] Popper.js Popper__namespace.createPopper is not a function エラー解決方法

## 目的
Rails7で後からbootstrap5を導入しました。
その際にPopper.jsのエラーにハマったのですが無事解決でき、記事が少なかったので備忘録として投稿します。

## 開発環境
– rails 7.0.4.3
– ruby 3.1.2
– Bootstrap 5.3.3
– Popper.js 2.11.8

## Bootstrap5導入方法
rails7で後からBootstrap5の導入をしたい方はこちらを参考にしてください。

https://qiita.com/PJZ9n/items/03341f942c2c84713c99

投稿者はこの記事を参考にしてBootstrap5を導入する途中でPopper.jsのエラーにハマりました。

## エラー内容
ブラウザでBootstrapのjavascriptで動く部分の動作確認をしていたら、下の写真のようなエラーに遭遇しました。

エラー名：`Popper__namespace.createPopper is not a function`

![スクリーンショット 2024-05

栄養を気にしてくれる人(Bot)を作りました！

# 突然ですが・・
毎日時間に追われて過ごしている皆さん、朝食を取らずに出社したり、適当に菓子パンを頬張りながら仕事したり、昼食は毎回ラーメンやファーストフードで済ませたりしていませんか？
たまにならいいんです。おいしいですもんね。分かります。
でも、毎日の積み重ねで不健康が加速して、10年前の自分はこんなんじゃなかったとぼやく未来なんて悲しいですよね。

# いやいや、そんな考えてる暇も自炊する暇も無いよ😠
そうですよね。栄養を気にしてくれる人がいたら・・なんて妄想する人もいることでしょう。
そこで、コンビニや食堂で手軽に手に入るメニューをおすすめしてくれる人(の代わり、LINE Bot)を作ってみました！

# 活用ツールや技術
・Node-RED
・JavaScript
・LINEmessagingAPI

# フロー
![スクリーンショット 2024-05-28 11.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/9f201bb9-524f-4c33-0930-38f

繰り返し処理 for文、while文などの基本 [Java Script]

繰り返し処理

プログラミングのコードを書いていると、同じ処理を数回繰り返して処理を行いたい時があります。

例えば、

:::note warn

ある処理を１０回繰り返し行うように書きたい。

:::

なので、１０回同じ処理を書く！
“`js
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
“`
“`text: 出力結果：
1
2
3
4
5
6
7
8
9
10
“`

これは、読みにくいコードになってしまうし、とても非効率です・・・

そのために、各プログラミング言語には
**繰り返し処理**というものが存在し、それを活用することで、
複数の処理を１つの式として短縮して書くことができます。

#### 例：
・console.logの出力を１つの式でかける。
・配列の中のすべての数字の合計値

【CSS】被写界深度を再現してみた

## はじめに
皆さんは、[codepenのChallenges](https://codepen.io/challenges)を知っていますか？
毎月html,css,javascriptのお題がcode penから出されて、それを実装するというcode penが実施しているイベント（？）です。
今日はこの五月のチャレンジ「フィルター」をテーマにして、カメラの「被写界深度」を再現してみたので紹介します。

## 被写界深度とは？
被写界深度とは、カメラのピントが合う範囲のことです。カメラをよく知っている人ならF値によって設定されるものですね。下の図のようなイメージで被写界深度を上げる（f値をあげる）とピントの合う範囲が広がりより多くの被写体に対してピントを合わせることができます。

![被写体深度2.png](https://qiita-im

自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。 例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。

自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。
例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。
“`