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

【JavaScript】継続渡しスタイルでFizzBuzz

“`js
function fizzbuzz(num) {
if (num % 15 === 0) {
console.log(“FizzBuzz”);
}
else if (num % 3 === 0) {
console.log(“Fizz”);
}
else if (num % 5 === 0) {
console.log(“Buzz”);
}
else {
console.log(num);
}
return cont => cont(++num);
}

(fizzbuzz)(1)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(f

HTML & CSS & JavaScript でwebページに雪を降らせましょう！Part_2

# 初めに
今回の頭骨は、…「投稿」は、前回書かせて頂いた
[HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです）](https://qiita.com/chi1180/items/0cfed7917cbb08c604f4)
という記事の、Part_2です！
書く予定ゼロでしたが、書いていきましょう！
今回は、背景を写真にしたり、前回説明不足なとこなどの説明を（私なりに）しっかりとやっていきたいと思います！
それでは生きましょう！…行きましょう！

# 書いていこう！
それでは、書いていきます。
が、
今回は、CSS（スタイルシート）をいじくるだけです！
大変ご不便をおかけしますが、HTML及びJavaScriptにつきましては、初めに記載させていただいたリンクから見てみてください。

それではやってきます！

まず、前回のCSS（コメント無し）

“`css:style.css
* {
margin: 0;
padding: 0;
}

.snow-container {
width: 100%;
heig

Next.jsにvitest入れ、テスト時のエラー回避

## テスト実行に発生するエラー内容

“`bash
Error:~~~hogehoge /src/test/setup.ts). Does the file exist?
“`

`src`ディレクトリ配下に`test`ディレクトリを作成して`setup.ts`がないと言われている。早速、作成してみる。

## 解決策

“`tsx
import ‘@testing-library/jest-dom’;
“`

上記を記述。早速、こちらでエラー回避することができました。

## 実行

“`tsx
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“test”: “vitest watch”,
“coverage”: “vitest run –coverage”,
“lint”: “eslint src”,
“lint:fix”: “eslint src –fix”,
“format”: “prettier . –write”

本当は dialog.open() にしたかった話

# 1. 背景
ダイアログ要素のcloseメソッドを読み漁っていた際に知ったことです。

以下のdocumentの“`We use show/close as the verbs for dialog elements, as opposed to verb pairs that are more commonly thought of as antonyms such as show/hide or open/close, due to the following constraints“`の所を和訳します。

https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element:~:text=We%20use%20show/close%20as%20the%20verbs%20for%20dialog%20elements%2C%20as%20opposed%20to%20verb%20pairs%20that%20are%20more%20commonly%20thought%2

ハンズフリーカラオケの土台をつくる

## ハンズフリーでカラオケがしたい
料理をしているとき、家で仕事をしているとき、車に乗っているとき、手は離せないけど歌いたい、そんなときのためのハンズフリーカラオケをつくってみたい！
今回は要素技術に着目してプロトタイピングをしてみます。

## どんな機能があれば良いか、要素を整理してみる

このような流れを想定しています。

音声で「カラオケをしたい」と言ったら曲が流れ、マイクで音声を拾い、歌唱力評価の演算をする、という工程です。
1. **音声でカラオケをスタートし曲を流す**
1. **歌声を録音する**
1. **録音した歌を解析し評価する**

## 1.音声でカラオケをスタートし曲を流す
voiceflowで作成します。

https://www.voiceflow.com/

シンプルに「起動→曲再生→終了」と

「継続渡しスタイル」の魔術

■魔術的コード
——————————

以下のコードを見てほしい。

“`javascript
val = n => cont => cont(n);
add = n1 => n2 => cont => cont(n1 + n2);

(val)(2)(add)(3)(console.log);
“`

初見では完全に魔術に見えるが、このコードは意図した通りコンソールに 5 を出力する。

一体なぜこのような動きが実現できるのだろうか？

■説明
——————————

この魔術は「継続渡しスタイル (CPS: Continuation-passing style)」という概念をもとに実現されている。

ステップ・バイ・ステップで理解していこう。

### step1

継続渡しスタイルでは「この処理の後で実行する内容」を引数に渡して実行する。
渡された数に+1した後でコンソール出力を実行する、単純な例を見てみよう。

“`javascript
function inc(n, callback) {

web版Outlookに表示される広告を消したいです！

# 初めに
突然ですが…私はwindowsユーザーでありまして、メールは基本的にyandex, google, そしてoutlookを使用しています∮

それでして、web版のoutlookを使用する場合、下のように、右側（必ずそうなるのかはわかりませぬが…）に広告が表示されてします。


私は広告が大嫌いでして…意識散ってメールの返信できねえ！！！
というときがありました。
その時、即興で広告を削除しようとしたら、案外簡単に出来たので、今回はそれをメモメモしていきたいと思います∮

# 実際に
それでは、やっていきましょう！
といっても、実際にはひどくシンプルな内容です。
広告が入る要素タグを削除すればよいのです！…ってそりゃそうですね(笑)

で、その、「広告が入る要素」とやらを、ブラウザの開発者ツールで調査していきます！
ちなみに、私は

client is using an unsupported version of the Socket.IO or Engine.IO protocolsの対処方法

#### 現象
PythonのFlask socketioを使って、Javascriptとデータのやりとりをしようとしたところ、以下のエラーが発生：
The client is using an unsupported version of the Socket.IO or Engine.IO protocols

#### 確認
エラーが発生した環境の各モジュールバージョン

＜Python側＞
Flask-SocketIO==5.3.6
python-engineio==4.8.1
python-socketio==5.10.0

＜Javascript側＞
Socket.IO v2.2.0

＜バージョン互換性の確認＞
https://python-socketio.readthedocs.io/en/latest/intro.html

#### 原因
過去のコードをそのまま流用したので、JavascriptのSocket.IOとPython環境のバージョンが合ってなかっただけでした・・・。

#### 対応方法

2024年1月現在、Socket.IOのリリース済みバージョン

RenderのExress.jsにReactアプリを載せる方法

# はじめに
Reactでちょっとしたものを作って公開しようとしたとき、次にどうする？を書いておきます。
①：Reactでちょっとしたものを作る（詳細は割愛）
②：Express.jsに①のアプリを載せる
③：Renderへのデプロイ

## 簡単に用語の説明
### [Express.js](https://expressjs.com/ja/)
> Node.jsのための高速で、革新的な、最小限のWebフレームワーク（Express.jsのホームページより）

HTTP(S)接続して何かしら返すAPIライブラリです。htmlを返すWebサーバーだけでなく、もちろんAPIとしてもOK。

### [Render](https://render.com/)
Node.jsだけでなく、Python、Docker、Goなど様々な環境をデプロイ・公開する環境。

## 今回作ったもの
3次元の点群CSVを表示するツールです。表面上の機能はJavaScriptでできますが、わざわざNodeとExpressとRenderを使った版。
![image.png](https://qiita-imag

ローディング・スピナーを邪魔しないCLIロガーを実装する

以下のインターフェイスをもつロガーを実装する

“`ts
const terminal = new TerminalLogger();

const spinner1 = terminal.spinner(“loading1…”).start()
const spinner2 = terminal.spinner(“loading2…”).start()

terminal.debug(“this is logging in the middle”)

spinner1.succeed()
spinner2.succeed()
“`

スピナーと通常のロギングの責務をまとめて持たせることで、スピナーの再レンダリングなどのタイミングを隠蔽して、スピナーの途中でログを吐いても画面を汚さない。

複数スピナーが同時にレンダリングされるケースも考慮できる。

あとはスピナーライブラリの依存もカプセル化できるので、たとえばこの記事ではoraをスピナーライブラリとして使うが、そこから別のスピナーに乗り換えたい、などのケースも変更点を小さく実装できる。

### 実装

具体的な実装は以

Oraを用いたローディング・スピナーの途中でconsole.logを綺麗に出力する

CLIツールを作っていて[ora](https://www.npmjs.com/package/ora)でスピナーを出しながらconsole.logでログも出力したい

例えば以下のようなケース

“`js
import ora from “ora”;

const spinner = ora(“loading…”).start();

console.log(“this is logging in the middle”);

spinner.succeed();
“`

上記を実行すると以下のようになってしまう。


途中で出力したログのせいでspinnerがおかしなことになっている。

これを回避するには `console.log` の前後でspinnerを停止し、再レンダーしないといけない

“`diff
const spinne

QRコードを生成するChrome拡張機能を作る

記事「[JIS X 0510 – QRコードの GIF 画像を HTML+JavaScript (ローカル) で生成する](https://qiita.com/ikiuo/items/824b914ccd065b57a887)」を弄って Google Chrome の拡張機能（デベロッパー モード用）としてみました。

https://github.com/ikiuo/google-chrome-extension-genqrcode

# 拡張機能

manifest.json では

– action
– default_popup (ユーザー インターフェイス)
– permissions
– storage (設定情報の保存)
– tabs (popup から現在の URL を取得)

を指定しています。

“`json:manifest.json
{
“manifest_version”: 3,
“version”: “0.1.1”,
“name”: “QRコードのGIF画像生成”,
“description”: “文字列からQRコー

Next.jsにhuskyとlint-stagedの導入とコミットの時のエラー回避

## 環境

“`bash
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “eslint src”,
“lint:fix”: “eslint src –fix”,
“format”: “prettier . –write”,
“prepare”: “husky install”
},
“dependencies”: {
“next”: “13.5.6”,
“react”: “^18”,
“react-dom”: “^18”
},
“devDependencies”: {
“@types/node”: “^20”,
“@types/react”: “^18”,
“@types/react-dom”: “^18”,
“@typescript-eslint/eslint-plugin”: “^6.19.0”,
“@typescr

【React】検索ボックス実装時のパフォーマンス改善案②

検索ボックスを実装したら画面が重たくなった…
という方向け
その②です

その①
https://qiita.com/nakakobiz0281/items/6acecb0e29824b463fb4

### 原因：onChangeのたびに不必要な画面レンダリングがされている

処理が重くなりがちな例
“`example.js
export function Example() {
const [nameList, setNameList] = useState(nameListData)
// ↓画面にレンダリングするのに高負荷がかかる長さの配列
const [veryLongList, setVeryLongList] = ([])
const filteringName = (inputValue) => {
if (inputValue) {
const filteredNames = nameListData.filter((name) =>
name.toLowerCase().includes(inputValue.toLowerCa

【JavaScript】配列でよく使用する関数

## 概要
JavaScriptの配列でよく使用する関数をまとめてみました。

## push()
push(): 配列の末尾に要素を追加し、新しい配列の要素数を返します。

引数：配列の末尾に追加する要素
返値：メソッドが呼び出されたオブジェクトの新しいlengthプロパティ
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.push(6);
console.log(arr); //⇒[1,2,3,4,5,6]
console.log(firstElement); //⇒6
~~~

## pop()
pop(): 配列の末尾の要素を削除し、その要素を返します。

引数：なし
返値：配列の末尾の要素。配列が空の場合はundefinedを返す。
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.pop();
console.log(arr); //⇒[1,2,3,4]
console.log(firstElement); //⇒

野球クイズアプリを開発します

## はじめに
突然ですが、今日からJavaScriptで野球のクイズアプリを個人開発します。

理由としてはこの前少し学んでみたJavaScriptが楽しかったこと、

そして好きな野球に関するアプリを作ってみたいという思いがあったからです。

https://qiita.com/Yuzaburo/items/750043e7b603c932ff06

## こんな機能が欲しい
Javascriptに関しては完全初心者ですが、以下のような機能は搭載したいと考えています。

* 基本的なクイズ機能
* 難易度に基づくポイントシステム
* 二人でのマルチプレイ機能
* ランキング機能

### 基本的なクイズ機能
まずは、4択クイズの基本的な機能を作成します。

– **問題と選択肢の表示**:
– JavaScriptを使用して、ランダムな問題とその4つの選択肢を表示します。
– HTMLとCSSでクイズのレイアウトをデザインします。
– **答えの選択とフィードバック**:
– ユーザーが選択肢をクリックすると、正解か不正解かを表示します。
– 正解

HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです）

# 初めに
今回のモノは、cssがメインなものになってるのかな？
と思われます。
意味不明なものは調べていただいたり、コメントして頂くと私も大変ありがたいです。

# 書いていこう
今回も説明（適当でごめんなさい）は、コード内で書いています。
cssはコメント多めですので、わかるとこは読んでいただかずとも大丈夫だと思います！
それではやってきましょう！

まず、HTML
“`html:index.html

【Web開発入門】localStorageとはなんぞや？Cookieとなにが違うんだい？

## 背景
仕事であるデータの保持期間について教えてほしいとの調査依頼がきました。
そこで社会人1年目のペーペーの自分はlocalStorageというものを知ったのでまとめようと思います。

## 目次
1. [localStorageってなんぞや?](#localstorageってなんぞや)
2. [どんなデータを保持できるのか](#どんなデータを保持できるのか)
3. [Cookieとの違い](#cookieとの違い)
4. [簡単な使用例](#簡単な使用例)
5. [使用するときの注意点](#使用するときの注意点)
6. [おわりに](#おわりに)

## localStorageってなんぞや?
Web開発を行う上で、ユーザーのブラウザにデータを保存する方法として、localStorageというものがあります。localStorageは、HTMl5の一部として導入されたWebストレージAPIの一つで、ユーザーのコンピュータ上にデータを長期間保存することができる仕組みです。これにより、サーバーにデータを送ることなく、ローカル環境でデータを保持できます。

> ユーザーのコンピュータ

WebページでKaTeXを使う

## やりたいこと
自分で作ったHTMLのWebページでKaTexがパースされるようにしたい。
ページ読み込みのタイミングではなく、ユーザーのアクションに合わせてパースされるようにしたい。

## 背景
サーバー上のcsvをjavascriptで読み取ってhtmlに表示するというwebページで、KaTeXを埋め込む必要があるということになったのですが、[公式HP](https://katex.org/docs/browser)のStarter Templateを使おうとしたら上手くいきませんでした。
今回はkatex.jsをサーバーに置いて呼び出す方法で対応することになったので、備忘録として書きます。

## 準備
[こちら](https://github.com/KaTeX/KaTeX/releases)からzipをダウンロードして、中のkatexフォルダをサーバーにアップロードしておきます。

## コードを書く
HTMLのheadタグ内にkatex.cssとkatex.jsへのリンクを記載します。
“`HTML

【websocket通信】チャットサービスでの欠落

こんにちは、私は機械学習のエンジニアとして週3、4で勤務しようとフリーランスエージェントを利用しています。

最近の面談で直近のPJでの技術的課題とその解決について聞かれ、うまく説明できなかったwebsocketでのチャット欠落問題について備忘録として残しておきます。

—
私はチャット機能のあるサービスの開発に当時携わっておりまして、無茶な工数と引き継ぎで炎上しつつもなんとか第一期リリースを終えた時にそれは起きました。

顧客から「チャットが表示されていたのに後から見直すとある時間の複数のチャットだけ無くなっている」との障害報告が来ました。

このチャットのやり取りをしている間は正常に表示できているところがややこしいところで、
##### 1.websocketはブラウザ間でハンドシェイクして通信している
##### 2.チャットのDBへの保存はサーバーへの通信で行なっている
と**二種類のレイヤーで通信している**ことに起因していると考えました。
チャットのやり取りが成功しているため。1の通信は成功していて2で失敗しているということですね。

対応策としては以下を実施しました。