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

React Testing LibraryでUnable to find an element with the text: XXXXのエラー

# 問題

React Testing Libraryを使用してテストを実装している中で、“`screen.getByText(‘XXXX’);“`を使用すると以下のエラーが発生する。

“`javascript
Unable to find an element with the text: XXX
“`

# やったこと

まずは該当のコードをwaitFor関数で囲みます。

こうすることで非同期操作が完了するまで、テキストを取ってくるのを待ってくれるようになります。

以下が修正コードです。

“`javascript
await waitFor(() => {
const contentElement = screen.getByText(‘XXXX’);
const timeElement = screen.getByText(’10’);

expect(contentElement).toBeInTheDocument();
expect(timeElement).toBeInTheDocument();
});
“`

まだ同じエラーが出ましたが補

React Testing Libraryで非同期処理のエラーが出た時の解消方法

# 問題
React Testing Libraryを使用してテストを実装している中で、waitFor関数内で原因不明のエラーが出ていたのですが、コンソールログを入れるとうまくいったので、理由を調べてみました。

# 事象：
該当のコードがこちら。

“`jsx
afterEach(cleanup);

test(“削除ボタンを押すと学習記録が削除される”, async () => {
render();

// 削除ボタンが表示されるまで待機
await waitFor(() => {
const deleteButtons = screen.getAllByTestId(“delete”);
expect(deleteButtons.length).toBeGreaterThan(0);
// console.log(“Initial delete buttons count:”, deleteButtons.length);
});

// 初期の学習記録の数を取得
const initialRecords = sc

URLを入力してからページがレンダリングされるまでのプロセス（2）

> [URLを入力してからページがレンダリングされるまでのプロセス（1）](https://qiita.com/Jiang_Yuehu/items/08116f3311f1cd7baca7)

## 4、TCP接続

IPアドレスを取得した後、HTTPリクエストを開始することができます。HTTPリクエストは、実際にはTCP/IPプロトコルに基づくリクエストです。データ伝送の信頼性を保証するために、接続の確立には3回のハンドシェイクが必要であり、接続の切断には4回のハンドシェイクが必要です。

### 3回のハンドシェイクのプロセス：
– 第一回目のハンドシェイク：クライアントがサーバーに SYN（同期）フラグが設定されたデータパケットを送信します。
– 第二回目のハンドシェイク：サーバーが受信を確認し、SYN/ACK フラグが設定されたデータパケットを返信します。
– 第三回目のハンドシェイク：クライアントが ACK フラグが設定されたデータパケットを送信し、ハンドシェイクが完了したことを確認します。

### 4回のハンドシェイクのプロセス：
– 第一回目のハンドシェイク：クライ

JavaScript: 圧縮とかPPM star

今回の圧縮法解説もどきは、PPM starを紹介します(以後PPM\*と表記)。基本的なPPMは探す記号列の長さ(文脈の次数)の最大値を設定して処理しますが、PPM\*ではほぼ無制限です。
つまりその時点で存在する最長の文脈から探索処理を開始するのです。そのため、より高い精度で記号の予測が行えると考えられます。
しかし次数がどこまでも伸びる分、空間消費量が激しくなりそうな、**ヤバげな気配を感じます**。速度的にも不安にならざるを得ません。

## 実装編
そんなPPM\*をどのように実装するかと言うと、context trieや接尾辞木のようものを使います。
文脈の次数はShortest Deterministic Context(SDC)により選択します。
通常は、最長一致文脈から符号化を行いますが、最長一致文脈が決定性文脈(予測される記号が1種類だけ)であり、かつ低次の文脈においても決定性文脈が存在する場合、これらの文脈における最小次数の文脈から符号化を開始するという作戦です。
それでは素人でも分かりずらくJavaScriptに翻訳していきます。

### 構造体的な奴
“`j

配列とオブジェクトの分割代入

## 分割代入とは
JavaScript では分割代入と呼ばれる変数への代入方法があります。
配列やオブジェクトなどに含まれる複数の要素を別々の変数へ分割して代入することができます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

## オブジェクトの分割代入
オブジェクトの分割代入構文を用いると、オブジェクトの値を取り出す処理を簡潔に書けます。
“`ts
const obj = {
foo: 271,
bar: “str”,
“1234”: 314,
}
const { foo, bar } = obj
console.log(foo) //271
console.log(bar) //str
“`

変数名と同じプロパティキーに対応する値が変数に代入されます。
ただし型注釈をつけることはできず、変数の型は型推論によって決定されます。

### 識別子でないプロパティ名
プロパティ名が識別子ではない場合（数字で始まって

symbol型のプロパティは列挙されない

## `keyof`と`PropertyKey`型
`keyof`演算子はTypeScript の機能の１つで、オブジェクトのプロパティキーをユニオン型で取得できます。
この`keyof`によって得られる型はすべて`PropertyKey`型の部分型、つまり`string | number | symbol`型の部分型となります。

“`ts:/lib.es5.d.ts
declare type PropertyKey = string | number | symbol;
“`

オブジェクトのプロパティキーとして`symbol`型を使うこともできるわけですが、どのような用途があるのでしょうか。

この記事では`symbol`型のキーを持つオブジェクトについてみていきたいと思います。

## `symbol`型
`symbol`はプリミティブ値の1つで、「動的に一意の識別値を生成」「文字列への自動変換がされない」などの特徴を持ちます。

`symbol`の識別値はJavaScriptから直接アクセスや表示ができない内部的な値となっています。

https://developer.

JS継承の話

下記の例でJSの継承手法を解説していきたいと思います
※下記の文章を読めるにはオブジェクトのプロトタイプ知識が必要となります

### 会員システム

動画配信サイトには2種類の会員があります：

– 一般会員
– 属性：ユーザー名、パスワード
– メソッド：無料動画の視聴
– プレミアム会員
– 属性：一般会員のすべての属性、会員の有効期限
– メソッド：一般会員のすべてのメソッド、有料動画の視聴

これらの要件を満たすために、コンストラクタをどのように書けばよいでしょうか？

“`js
// 一般会員のコンストラクタ
function user(username, password) {
this.username = username;
this.password = password;
}
User.prototype.playFreeVideo = function() {
console.log(‘無料動画を視聴する’);
}

// プレミアム会員のコンストラクタ
function premiumUser(username, password

ここが違くてここは同じだよPythonとJavaScript

# この記事は何の記事？
Python と JavaScript で動きが違う点・同じ点をまとめた記事です

違う点・同じ点なんていくらでもあると思いますが，
個人的に痛い目を見た事例について取り上げていきます

他にこんなのもあるよなどあれば是非教えていただきたいです

では本編スタートです

## 変数のスコープ・宣言・代入
Python の場合，宣言だけするということはできなく，
代入したときに変数が作られます
[www.w3schools.com](https://www.w3schools.com/python/python_variables.asp)
“`Python
hensu = “あたい” # これだけ
“`

JavaScript の場合，宣言と代入はそれぞれ分けられます

“`javascript
// 宣言と代入一緒に
let hensu = “あたい”

// 宣言と代入をわけて
let sengen
sengen = “せんげん”
“`

ということで例を見ていきます
以下の流れを確認します

1. 変数 `hensu` を出力する（1 回目）

【JavaScript】子要素の取得方法はどっちが良い？

良かったらコメントで意見を聞かせてください。

# case1

“`javascript
const index = N; // 0以上の整数
const parentNode = document.getElementById(‘parent’); // ←これが本質
const childNodeList = parentNode.children;
const childNode = childNodeList[N];
“`
つまり本質としては『親要素を取得』ということだと思います。

# case2

“`javascript
const index = M; // 自然数
const childDivNode = document.querySelector(‘#parent div:nth-child(M)’); // ←これが本質
“`
つまり本質としては『特定の要素を取得』ということだと思います。

# 個人的な見解

私はいつも、以下の理由によりcase1の書き方をします。

– 配列と同様に0から要素をカウントできる（プロジェクト内で最初のインデックスが統

アメバ専用のプラグインを作りました。

# はじめに
アメバの編集画面では、youtube動画のhtmlコードを埋め込むことができますが、この時に埋め込まれるコードでは動画の再生が終了すると一時停止してしまいます。
そこで、このプラグインでは一時停止せずに自動的に繰り返し再生をするようにしました。音楽を聴いているときに引き続き再生を自動的に続行したいと思って作りました。非常に簡単なプラグインですが、作り方を解説したいと思います。

# Chromeウェブストアで公開
[Amebaリピートプラグイン](https://chromewebstore.google.com/detail/ameba%E3%83%AA%E3%83%94%E3%83%BC%E3%83%88%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/holgjedkkjpfegmhdlpplgnmiecfgbok?authuser=0&hl=ja)

# manifest.json
マニフェストは以下の通りです。
“`
{
“manifest_version”: 3,
“name”: “Amebaリピートプ

npmとは

## npmとは
Node Package Managerの頭文字をとったもの。
Node.jsでパッケージを管理するシステムで、他の人が書いたプログラムを利用することができる。

### パッケージとは
モジュール：他のプログラムから利用するプログラムや関数
モジュールをまとめて利用するものをパッケージと呼ぶ。

### パッケージ管理とは
– 利用するパッケージ内で他のパッケージを使用
– 利用する複数のパッケージ内で同一のパッケージを使用

上記の問題を解決してくれる

JavaScriptで複数のアニメーションを連続させる方法

業務で10連ガチャのアニメーション演出をSCSS、JavaScriptで実装する機会があり、その時に使用したテクニックをまとめました。

大まかに言うと、CSSのanimationプロパティとJavaScriptのanimationendイベントを使用します。

“`SCSS
.fade-in {
animation: fadeIn 2s liner 0s forwards running;
}

.spin {
animation: spin 2s liner 0s forwards running;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
“`

“`JavaScript
const targetElement = document.querySelector(‘.hoge’);
hog

JavaScript: 圧縮とか文脈混合法とか二次記号推定

圧縮の時間です。byte単位の文脈混合法に二次記号推定(Secondary Symbol Estimation)を組み合わせていきます。

## 原理
PPMに似ています。文脈木を構築し、設定した次数までの文脈に現れる各記号の頻度を足し合わせます(条件によってその倍率を変えます)。
そして最高頻度の記号が符号化したい記号と一致するかどうか、1 bit算術符号化。不一致なら記号頻度と合計頻度を調整して、追加の算術符号化。いわゆるSSE。
計算量が莫大なので非常に低速。はっきり言って使い物にならない程度に便利な役立たずです。

## 実装編
“`js
// for context tree
function Leaf(s,a){this.s=s,this.n=a<<1|1} Leaf.prototype={c:1,e:0,o:0}; //model table const CNUM=256,SCALE=1<<22,MX=8,MY=10,MET=999999, ETT=new Int32Array([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

（1冊ですべて身につく）カラーピッカーを作成する　背景色も同期させる

お疲れ様です。

これまで使っていたノートPC不具合のため、新しいPCへ移行作業などしておりましたら遅くなりました。

今日は前回の続きで、背景も選択された色になるようにコードを足しました。


追加したのは **document.body.style.backgroundColor** の部分です。
body.style.cssプロパティ名 で、cssプロパティをJSから直接設定することができるようになります。
プロパティ名を記述する際、ハイフンは使えませんので、キャメルケースで記述する必要があります。

いろいろあるJavaScriptのコンソール出力

## はじめに
JavaScriptを使って開発をする時、コンソールに値を出力するために`console.log`をよく使うかと思います。

しかし、コンソール出力をするために使えるのはこのメソッドだけではありません。
どんな種類があるのか、どのように使うのかを一つずつ確認していきます。

## consoleが提供するメソッド
Webブラウザの開発者モードから、コンソールに`console`と入力すれば、どのようなメソッドやプロパティを持っているか確認できます。

`log`のほか、様々なメソッドが定義されていることがわかります。
これらについて1つずつ確認していきます。

## 基本の出力
### log
#### 概要
これは言わずもがなだと思います。
単に引数で設定した値をそのまま出力するだけです。

#### 呼び出し方
“`java

いつもわすれるfor文の代わりたち

個人的「質はともかく継続する」36日目です

JavaScriptを書くとき、ループ処理を書こうとするといつも忘れてしまう、for文の代わりの方法をまとめました。正確には代わりではありませんが、用途としては代わりになるものたち、ですね。

## for文

まずはfor文。言語とわず、大体同じような書き方ですよね。

“`js
for (const element of [1, 2, 3]) {
console.log(element);
}
“`

“`text
1
2
3
“`

## map

つづいてmapです。個人的には一番出番が多い。これは1から３までの配列をひとつづつ取り出して、2倍したものを新たな配列とする処理ですね。mapは新たな配列を生み出します。

“`js
const doubled = [1, 2, 3].map((element) => element * 2);
console.log(doubled);
“`

“`text
[2,4,6]
“`

# filter

お次はfilterです。条件に一致するものを取り出します。この例

Rustのsimilar使って差分比較してみた

# はじめに

Rustのsimilarクレートで差分比較をしてみようと思います

といってもHelloWorld的な紹介です☀️

# プロジェクトの作成

Rustでsimilarクレートを使う。

古いテキストと新しいテキストからTextDiffを作り

ChangeTagのDelete、Insert、EqualとChangeの差分を出力する

コードはこれだけで実装完了！！(お手軽なクレート📚)

下記examplesを参考にしました

https://github.com/mitsuhiko/similar/tree/main/examples

“`rust:lib.rs

// 省略

#[wasm_bindgen]
pub fn text_diff(txtold :String,txtnew :String) -> String {
let diff = TextDiff::from_lines(&txtold, &txtnew);

let mut result = String::new();
for change in diff.it

[Node.js] JSON ⇔ XML の作成方法

# はじめに

javascript を使用して XML ファイル群を作成する必要があり、知見が溜まってきたのでこちらにまとめておきます。

# 方法

– [**xml2js**](https://www.npmjs.com/package/xml2js) というライブラリを使用しました。
XML ⇔ JSON の変換が可能で、扱いやすかったです。

### JSON から XML への変換例

#### JSON オブジェクト

“`javascript
const jsonObj = {
library: {
$: { name: ‘My Library’, location: ‘City’ },
books: {
book: [
{ id: 1, title: ‘Book 1’, author: ‘Author A’ },
{ id: 2, title: ‘Book 2’, author: ‘Author B’ }
]
}
}
};
“`

#### 変換処理

“`javascrip

非同期処理でMongoDBに接続Expressサーバーを起動

非同期処理でMongoDBに接続し、Expressサーバーを起動する方法
以下に、非同期処理を用いてMongoDBに接続し、Expressサーバーを起動するコードの例を示します。

データベース接続関数
まず、connectDB.jsファイルを作成し、MongoDBに接続する関数を定義します。

“`javascript

// connectDB.js
const mongoose = require(‘mongoose’);

const connectDB = async (url) => {
try {
await mongoose.connect(url, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
console.log(‘DB接続成功’);
} catch (error) {
console.error(‘DB接続エラー:’, error);
}
};

module.exports = connectDB;
“`
サーバー起動のための

setTimeoutの型と非同期処理

## 同期処理と非同期処理
JavaScriptの処理方式 には同期処理と非同期処理があります。

同期処理の場合には、一つ前の処理が完了するまで次の処理には移れないため、時間がかかるような処理があると他の処理を開始できなくなってしまいます[^1]。

非同期処理は、時間がかかる処理に適した処理方式で、同期処理とは異なり、処理の完了を待たずに次の処理へ移れます。

ただし、次の処理と非同期な処理が同時に並列して実行されているわけではないことには注意が必要です。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous

## 非同期処理の開始
非同期処理を行う関数の代表的なものに、`setTimeout`があります。

`setTimeout(code, delay)`のように呼び出し、`delay`ms が経過すると`code`を実行してくれるような挙動をする関数です。

“`ts
setTimeout(() => {
console.log(‘実行されました’)
}, 1000)
“`

htt