JavaScript関連のことを調べてみた2022年09月21日

WordPress【WooCommerce】セット販売商品の商品画像を表示させるjQuery

①「商品データ」を「グループ化された商品」にする

②「関連商品」の「セット販売商品」「アップセル」に同じ商品を入力

③javascript記述。

＜js概要＞
アップセル商品画像が商品ページの下部に表示されるので、そのa要素をコピーして、セット販売商品にも画像を表示させる

④CSSで整えて完了！

“`javascript
$(function(){

//商品画像横の「セット商品」のIDを取得
let grouped_product_id_nums = [];

$(‘.woocommerce-grouped-product-list > tbody > tr’).each(function(){

//ID名（.ex）”product-1111″を、”post-1111″に変えて配列に追加する

grouped_product_id_nums.push( “post-” + $(this).attr(“id”).slice(8));
});

//先ほど取得した「セット商品」のID番号と一致するclass名”post-11

【JavaScript】if文の中でgotoしたい

こういうコードがあったとする。
これをスッキリとさせたい。（今はa, b, cしかないが、後々d, e, f…などと追加されたとき面倒だから）

“`javascript
if (a.isHoge111) {
a.hoge111();
}
else if (b.isHoge111) {
b.hoge111();
}
else if (c.isHoge111) {
c.hoge111();
}
else if (a.isHoge222) {
a.hoge222();
}
else if (b.isHoge222) {
b.hoge222();
}
else if (c.isHoge222) {
c.hoge222();
}

if (a.isHoge333) {
a.hoge333();
}
else if (b.isHoge333) {
b.hoge333();
}
else if (c.isHoge333) {
c.hoge333();
}
else if (a.isHoge444) {
a.hoge444();
}
else if (b.isHoge444)

[JavaScript]連想配列備忘録(hash in array, object in array, map in array)

## この記事ついて
主に`[{}, {}, {}]`のような構造についての操作の備忘録です。主はいつも忘れてしまうので、手早く探せるように作ります。

## indexを探す
普通探す時は`indexOf`を使うのだが、`[{}, {}]`のような構造な時はfindIndexを使うのが一番手早い。

“`js
// hash in arrayなのでhiaで略称させていだだく
const hia = [
{id: 1, value: “a”},
{id: 2, value: “b”},
{id: 3, value: “c”},
]

hia.findIndex(elem => elem.id === 2) // output: 1
“`
具体的な違いについてはmdn公式ページへどうぞ

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

https://developer.mozilla.org/ja/docs/Web/J

JavaScriptによるカンマ区切りプログラム（配列の挿入を使う方法）

JavaScriptによるカンマ区切りのプログラムです。
今回はカンマ区切りの関数(Number(value).toLocaleString)は使用禁止として作成しました。

“`JavaScript

process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
//数字変数
var num = lines[0];
//数値を配列にする
var num1 = num.split(”);
//配列の長さ
const leng = num1.length;
//挿入する配列の位置の変数定義
var

paizaラーニング レベルアップ問題集Aランクレベルアップメニュー JavaScript 座標系での向きの変わる移動

座標系での向きの変わる移動 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_move_boss

JavaScriptで解いてみました。

# 解答例(C++の場合を参考)
各移動の方向LかRをmで受け取って、関数 move に現在の向きと移動の方向を渡し、関数を実行します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const direct = [‘N’,’E’,’S’,’W’];
let dcount = 0;

//移動の関数定義
const move = (D, M) => {
let [LR, add] = [1, 1];

if(M == ‘L’){
LR = -1;
add = 3

JavaScriptのStringについて part3

# 初めに
今回はテンプレートリテラルの使い方をまとめていきたいと思います。

# Template literals(Template strings)
## Basic usage

https://es6.ruanyifeng.com/?search=%E9%81%8D%E5%8E%86&x=7&y=8#docs/string#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2

すでに使い慣れたと思ったけど、実際調べたら別の使い方や応用もあるので色々とメモしたいです。
`HTML`のタグとタグの間空白があっても画面に表示されないのであまり気にしませんでしたが、意識しないうちにそれがバグの原因にあったかもしれないので、`trim()`で空白を排除するのがいいと思います。
“`jsx
let str = `

• first
• second

`.trim()
console.log(str)
/*

• first
• second

React redux-redux-toolkitで確認ポップアップを実装する方法

# React redux-redux-toolkitで確認ポップアップを実装する方法

## まえがき

モーダルポップアップを表示させ、その結果によって処理を変えたい場合があると思います。

confirmメソッドの ように簡単にどこからでも呼べて便利なポップアップを実装方法を共有したいと思います。

もし、改善点などございましたら、コメント・連絡いただけますと幸いです。

## 実装例

javascriptの`confirm`メソッドと同じように呼び出し、使用することを目的とします。

#### サンプルコード

ディレクトリ構造

“`
├──components
| ├──functions
| | └──useConfirmationModalManagement.js
| └──pages
| └──Test.jsx
└──stores
├──Popup.js
└──index.js
“`

Test.js

“`jsx
import React from “react”;
import Button from “@mui/

paizaラーニング レベルアップ問題集Aランクレベルアップメニュー JavaScript マップの判定・縦

マップの判定・縦 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step4

JavaScriptで解いてみました。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map(Number);
//盤面
const board = lines.slice(1).map(line => line.split(“”));

//盤面全てのマスについて調べる
//y座標、行について
for (let i = 0; i < H; i++) { //x座標、列について for (let j = 0; j <

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript マップの判定・横

マップの判定・横 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step3

JavaScriptで解いてみました。

# 解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = lines.slice(1).map(line => line.split(“”));

//盤面全てのマスについて調べる
//y座標、行について
for (let i = 0; i < H; i++) { //x座標、列について

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 盤面の情報変更

盤面の情報変更

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step2

JavaScriptで解いてみました。

解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W , 与えられる座標の数を表す整数 N 
const [H,W,N] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { board.push(lines[i].split("")); } //盤面の与えられた座標の文字を "#" に書き換えた後の盤面を出力 for (let i =

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 盤面の情報取得

盤面の情報取得 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step1

JavaScriptで解いてみました。

# 解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W , 与えられる座標の数を表す整数 N 
const [H,W,N] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { board.push(lines[i]); } //与えられた座標の盤面を出力 for (let i = 1; i <= N;

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 座標系での規則的な移動

座標系での規則的な移動 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_move_step4

JavaScriptで解いてみました。いくつか解答例を載せましたので、理解しやすいもの、しっくりくるものを参考にしてみてください。

# 解答例1

## 考え方
規則性を考えると、東に1歩、南に１歩、歩く歩数が+１増えて、西に2歩、北に2歩、…となっています。

### 方向

まず、方向について、初め東Eを向いていて南S、西W、北Nの順に変わるので、この順で、移動方向`d = [‘E’,’S’,’W’,’N’]`を作ります。

方向の決め方は、dのインデックス `direction`でします。初期値は`direction = 0`(東向き)です。

方向を変える時が来たら、direction+=1することで、右90度に方向を変えられます。directionが4になったら、また0になるように`%4`します。これで0,1,2,3,0,1,2,3と、4ごとに繰り返されま

マイクロタスクとマクロタスク

## マクロタスク
* マクロタスクはタスクキルと呼ばれているもの
* イベントループで処理が回ってきたら一つずつ格納されているタスクを実行する
“`js
setTimeout
setInterval
requestAnimationFrame
// など
“`
`setTimeout`
一定時間後に1度だけ特定の処理を行う
`setInterval`
一定時間ごとに特定の処理を繰り返す
`requestAnimationFrame`
画面のリフレッシュレート(１秒あたりの描画切り替え回数)に合わせて繰り返されるのでリフレッシュレートに沿って滑らかなアニメーションが実現することができる。

https://ics.media/entry/210414/

この記事のイラストが非常にわかりやすい

60Hzと144Hzのリフレッシュレートの画面があった場合、setIntervalでは固定で再生されるのに対して、requestAnimationFrameはリフレッシュレートに応じたアニメーションが再生される

requestAnimationFrameの利点としては要素の移動やインタラ

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript マップの判定・縦横

マップの判定・縦横 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_boss

JavaScriptで解いてみました。いくつか解答例を載せたので、理解しやすいところ、しっくりくるところを参考にしてください。

# 解答例(上下左右判定)
上下左右ひとつひとつ調べました。

“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { boar

WebRTCでボイスチャットルームを作成した時の備忘録

# 概要
業務にてwebrtcを用いたボイスチャットルームを作成する機会があったため、技術的な仕様や概要を記事としてまとめておく

# 前提
– ピュアP2Pで実装
– Skywayやagoreなどの外部SDKは利用しない

# WebRTCとは

[MDN Web Doc](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)より

> WebRTC (Web Real-Time Communications、ウェブリアルタイムコミュニケーション) は、ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャしたオーディオ／ビデオストリームの送受信を可能にする技術です。 WebRTC に関する一連の標準規格は、ユーザーがプラグインやサードパーティ製ソフトウェアをインストールすることなく、ピア・ツー・ピアにて、データ共有や遠隔会議を実現することを可能にします。

要約するとWeb上でメディア(音声や映像)を扱ったり、データをリアルタイムに送受信するためのJavaScri

さっくり解説するReact hooksのuseState

# そもそもフック(hook)とは？

フックはReact16.8で追加された機能であり、
これによりstateなどのReactの機能を、クラスを書かずに使えるようになりました。

# useStateとは？

useStateは関数コンポーネントにてstateを保持・更新するための機能です。
初回のレンダリングで、初期値となる値をuseStateに引数として渡し、その値が1つ目の要素のstateとなります。
2つ目の要素はstate値を更新するための関数となり、基本的にこの関数を使ってstate値を更新します。

以下のように定義します。

“`TypeScript
import React, { useState } from ‘react’;

const Example = () => {
const [state, stateを更新する関数] = useState(初期値);

~~~~
“`

# useStateを試してみる

“`TypeScript:Example.tsx
import React, { useState } from ‘react’;

Promiseで定義したコールバックの実行順序

Promiseを定義したときにasync/awaitするとコードを見たまま上から下に実行されるので難しくないのですが、then/catchで後の処理を定義するとどのタイミングでコールバックが実行されるのかわかっていませんでした。

ちょっと調べてみたのでまとめます。

# サンプル

aとbというPromiseを作ってそれぞれの関数の中でログを出力してみます。
また、各定義の間と、aとbをPromise.allした後にもログを出力します。

“`TypeScript
const a = new Promise((resolve, reject) => {
console.log(‘a’);
resolve(‘a: resolve’);
})
.then(() => { console.log(‘a: then’); });

console.log(‘aの後’)

const b = new Promise((resolve, reject) => {
console.log(‘b’);
resolve(‘b: resolve’);
})
.then(() =

JavaScript 忘備録 ~効果音の鳴らし方

# JavaScriptで効果音の鳴らし方
JavaScriptを用いて効果音を付けたいときのプログラムを書いていきます。howlerというライブラリを使います。
# HTML側
“`html

“`
# JavaScript側
“`javascript
//タイプ音読み込み
const sound = new Howl({
src: [‘./sound/type.mp3’]; //パスは変えて下さい
});
sound.play();// 任意タイミングで
“`

正規表現：曖昧なパターンはエンジンによって動作が変わる（教訓）

検索してどういうことなのか調査してみようとしたのですが、上手に検索できませんでした…。
検索しても全然それっぽい情報が出てこない！
のでとりあえず記事にしてみます。

もし原因をご存じの方いましたらお教えいただけると嬉しいです…！

# 環境
– グループ1（JavaScript系）
– JavaScript (Firefox 104.0.2)
– JavaScript (Google Chrome 105.0.5195.127)
– グループ2（Perl系など）
– PCRE (PHP 7.3.11 & PCRE 10.32 2018-09-10: [RegExr.com](https://regexr.com/))
– Python 3.10 (re モジュール)
– コメントに頂いた検証：Ruby 3.1.2 (Onigmo)
– コメントに頂いた検証：CotEditor 4.3.4 (ICU)

PCREは「PCRE ライブラリは、Perl 5 と同じ文法構文を用いた 正規表現パターンマッチ処理を実装した関数群ですが、多少異なる点もあります (以下を

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript プログラミングレベル

プログラミングレベル (paizaランク C 相当)

https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step1

JavaScriptで解いてみました。

# 解答例
問題は好きな順序で解くことができるので、考えやすいように、aを難易度が小さい順にソートしておきます。
あとは、問題文に従って、aの難易度が小さい順に、以下の条件を満たすか調べていきます。
>難易度 a_i の問題を解くには「プログラミングレベル」が a_i 以上である必要
>難易度 a_i の問題を解くと「プログラミングレベル」が a_i + 1 になる

変数flagを使って判定をします。
途中で解けなかったらfalse→No、全部解けたらtrue→Yesを出力します。
“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines