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

async/awaitブロックの使い方

JavaScriptの非同期コードを扱うための`async/await`構文は非常に有用ですが、それを適用すべき場所とそうでない場所について明確な理解が必要です。

## ある処理を待つ必要がある場合のみ`async/await`を使用する
ある操作が完了するのを待つため、つまり非同期の操作結果を利用した何かをするためには`await`を使用します。

しかし、適用する場所が適切でないと、無駄なパフォーマンスの損失を招いてしまうことがあります。

不適切な使い方の一例として、多く見られるのが`return await`というパターンです。

“`typescript
const fetchUserPosts = async (
userId: bigint,
): Promise => {
return await database.posts.findMany({
select: { content: true },
where: {
userId,
},
});
};
“`
このコー

bcryptを使ってpasswordをハッシュ化させる際に起きた、Cannot read properties of undefined (reading ‘hashSync’) を解決

# はじめに

NestJSを使用したバックエンドの中で、bcryptを使ってパスワードをハッシュ化するために

“`javascript
const hashedPassword = bcrypt.hashSync(user.password, saltRounds);
“`
とコードを書くと、ユーザー登録時に

“`bash
Cannot read properties of undefined (reading ‘hashSync’)
“`

というエラーが発生しました。

# 解決方法

基本的にbcryptの使い方は [こちら](https://www.npmjs.com/package/bcrypt) を参考に確認しており、bcryptのインポート方法も

“`javascript
import bcrypt from “bcrypt”;
“`
と記述していましたが、これを

“`javascript
import * as bcrypt from ‘bcrypt’;
“`
と書き換えることでエラーは解決されました。

詳しくはこちらの[Stackover

AstroにおいてのSSR

# AstroにおいてのSSR

### SSGをメインとする場合

Astroは前提としてNext.jsでのSSGモードをメインとして採用しているフルスタックのフレームワークです。しかしながら部分的にSSRを実装することもできます。

“`javascript:astro.config.mjs
import { defineConfig } from ‘astro/config’;

export default defineConfig({
output: ‘hybrid’,
});
“`
outputを設定することでSSGとSSRを混ぜたサイトを構築することができます。
今回の場合であればoutputをhybridに設定することでサイト全体をSSGがメインとすることができます。

“`javascript:src/pages/randomnumber.astro
—
export const prerender = false;
—
“`
この場合は追加でこのように設定することでこの部分だけSSRモードにすることができます。

### SSRをメインとする場合

JS （php smarty内 .tpl 記述） セレクトボックス、テキストボックス制御

## ■完成イメージ
・セレクトっクス入力可　、テキストボックス入力不可

・セレクトっクス入力不可　、テキストボックス入力可

## ■機能説明
・セレクトボックスに値が入っている場合は、テキストボックスは入力不可。

・セレクトボックスが「未選択（値がない）」の場合、テキストボックス入力可、かつテキストボックスへ文字が入っている場合は、セレクトボックス選択不可。

## ■ソースコード
“`JS main.js
document.addEventListener

FlaskにおけるForm（GET/POST）のまとめ

### 本記事の背景
Flaskは最小限に開発できるように作られたライブラリであるため、関連する周辺要素についてまとまった記事を書くにはそれなりの調査時間が必要となるため、ピンポイントの記事はあるものの、まとまった記事は少ない。
本記事は、筆者の独断で入門レベル、中級者レベルに分けて記事をまとめることにする。

### 入門レベル
① templateを持たせない場合（バックエンド側の開発を想定）
下記は小生がまとめた入門記事を参照してください。

https://qiita.com/akeyi2018/items/0ac41c60b8b048f74991

② templateを持っている場合（フロントエンド側を含めての開発を想定）
下記のソースコードを参照

https://github.com/akeyi2018/FlaskStudy/tree/master/CameraControl

③ CSVファイルをPOSTした場合の事例
こちらを実行すると、CSVファイルの内容をHTMLのTableに変換され、表示されるように作成しました。

https://github.com/ak

Cloud FunctionでFirestoreのコレクションとサブコレクションをまとめて削除する方法

## 背景
あるドキュメントが削除された際に、そのドキュメント配下にあるサブコレクションは残ってしまうという問題に直面した。

## 原因
Firestoreでは、ドキュメントを削除しても、そのドキュメント配下のサブコレクションは自動的には削除されない。
これは、特にドキュメントがサブコレクションを多く持っている場合、手動で一つずつ削除するのは非効率的で面倒な作業。

## やること
ドキュメントが削除された際に、そのドキュメント配下にあるサブコレクションもまとめて削除できるようにする。

## 解決案
Firebase Admin SDKを使用して、ドキュメントとそのサブコレクションを一括で削除する方法を採用。
Admin SDKにはrecursiveDeleteメソッドがあり、これを使用することで指定したドキュメントとそのサブコレクションを再帰的に削除することができる。

## 実装 Admin SDKで再帰削除する
最初、firebase-toolsを使った方法で試みたが、tokenの問題などに引っかかったり、その方法では有効期限切れも気にしないといけない。（[ドキュメント](

バイナリファイルを16進ダンプ／逆変換するスクリプトをささっと作る

# 0. はじめに

とある事情でバイナリファイル（実行プログラム）をイジることになった。バイナリエディタを使えば一発なのだが，インストールが面倒なのとテキスト形式で変更前後の差分を残しておきたいということで

– バイナリを16進数ダンプするスクリプト
– 16進数ダンプをバイナリに戻すスクリプト

の二つを同時に作ることにした。

# 1. 基本方針

バイナリファイルの読み書きには `ADODB.Stream` オブジェクトを使う。

“`javascript:バイナリファイルの一括読み込み
var stream = WScript.CreateObject(“ADODB.Stream”);
stream.Type = 1; /* 1:adTypeBinary */
stream.Open();
stream.LoadFromFile(filename);
var bin = stream.Read(-1); /* -1:adReadAll */
stream.Close();
“`

“`javascript:バイナリファイルの一括書き込み
var stream

【JavaScript】イベントを発生させる方法

以下のように記述すると指定したイベントを発生されることができます。

“`js
const evt = new Event(“click”)
document.dispatchEvent(evt)

“`

“`js
// バブルアップし、キャンセルできない look イベントを作成

const evt = new Event(“look”, { bubbles: true, cancelable: false })
document.dispatchEvent(evt)
“`

https://developer.mozilla.org/ja/docs/Web/API/Event/Event

HTML & CSS & JavaScript で作る「超適当な電卓」

# 初めに
これは、前回書いた、「Tkinter で作成する超適当な電卓」にひき続くものです。link:https://qiita.com/chi1180/items/861d60d8fea59240dc9d
はい、今回は、「webで動かしたいぜ！」を基に作成しましょう！！
毎度のことながら、解説はコード内で適当にいたします。
今回のコードは前回とくらべ量もそれなりにあり、前提知識がそれなりに必要になってくるかと思いますが、なんでも大事なのは、「適当さ」です！…と、だれか言ってたきがする。

# 書いていこう！
それではコードを書いて行きましょう！
ちなみにですが、私はコードエディタは、cursor（綴りあってんのかな？）を使用しています。
うぇい。

## HTML
HTMLのコードです。
そんなコメント書いてないし、わかんないこといっぱいですが、ググればなんとかなる！・・・ハズである。（！）。

“`html:index.html

【React＋MUI】検索ボックス実装の例

## まずAutocompleteを使えないか検討してみる。

こんなの↓
[AutoComplete（MUI公式）](https://mui.com/material-ui/react-autocomplete/)

MUIはそれぞれのライブラリに豊富なサンプルコードがあるので、そちらを参考にしながら実装してみましょう。

## Autocompleteが使えそうにない場合

例えば
– 入力フォームとリストを横並びにしたい
– 入力フォームに文字を入力してもリストはずっと表示しておきたい
など

作

スクワットの運動に連動してFlappyBirdsをブラウザでしたい。

M5Stackでスクワットをして、その動きに連動してゲームができるようなプロダクトを作りたい。

以前の記事に引き続き、M5stackでスクワット運動でゲームするようなスクリプトを作成しています。
↓以前の記事(M5Stack側のスクリプト)

https://qiita.com/hato_pippo/items/55ff47a1a848685ca7b1

# 作成する
PC上でゲームを作成するやり方はいくつか存在するが、 p5.jsを利用してゲーム作成を目指すことにした。
こちらの記事を参照して、M5stackのセンサー情報を元に図形を動かす方法を把握した。

M5StickC Plusとp5.jsを接続してWebブラウザで図形を描画する

今回はゲームを作成するというところから、
ベースとしては同じで図形ってところからFlappyBirdsができるようにすることを目指すことにした。

# ゲームの内容
・M5stackのスクワットをするごとにプレイヤーのBirdが動く
・FlappyBirdsのスクリプトは参照先の元を利用した

https://fal-works.github.io/m

Java csv 値挿入

~~~java
import com.opencsv.CSVReader;
import com.opencsv.CSVWriter;

import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.util.List;

public class CSVInsertValue {

public static void insertValueToCSV(String inputFilePath, String outputFilePath, int columnIndex, String newValue) {
try (CSVReader reader = new CSVReader(new FileReader(inputFilePath));
CSVWriter writer = new CSVWriter(new FileWriter(outputFilePath))) {

/

JavaScriptのイベント種類

### JavaScriptの[イベント](https://developer.mozilla.org/ja/docs/Web/Events#Standard_events)とは？
ユーザがボタンをクリックしたり、キーボードで入力したりなど操作することで何らかの動作をする、**きっかけ**のことです。

イベントの設定は`addEventListener()`メソッドを使います。

“`
何が.addEventListener(どうなったら,どうなる);
“`
と記述します。

例：
“`
btm.addEventListener(‘click’, comment);
“`
これは「ボタンがクリックされたらコメントを表示」という意味です。

この**どうなったら**の部分でよく使われるイベントには様々な種類があります。

| イベント名　　　　| 発生するタイミング　　　　　　 |
| —- | —- |
| submit|フォームが送信されたとき |
| reset| フォームがリセットされたとき |
| scroll| 画面がスクロールされたとき |
| copy

LangChain.js の公式情報などを見つつ Azure OpenAI Service（モデルは GPT-4 Turbo）との組み合わせを試してみる

## はじめに
今回の内容は、Azure OpenAI Service に関する内容です。

Azure OpenAI Service を使った内容に関しては、最近、JavaScript（Node.js）を使って以下の記事に書いた内容を試していました。
以下の記事では、Azure OpenAI Service の「GPT-4 Turbo」のモデルを「@azure/openai」 を使った内容を書いています。

●Azure OpenAI Service の公式情報などを見つつ「GPT-4 Turbo」の「Chat Completions の JSON Mode」を試す：【Node.js（JavaScript）で「@azure/openai」を利用】 – Qiita
　https://qiita.com/youtoy/items/c9a879624c18d40bbdd7

今回の記事でも JavaScript（Node.js）を使うのと、「Azure OpenAI Service の GPT-4 Turbo のモデル」を試すのは同じです。
上記の記事との違いは、「@azure/opena

フロントエンド学習記No.4 クラスとモジュールを使ってポケモンTodoアプリ作ってみる

# はじめに
今回は、TypeScriptでクラスとモジュールの使ってミニアプリを作ることで理解を深めて行きたいと思います。
クラス、モジュールって何？という方は以下を参照してください。

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

## 目標物
クラスやモジュールを使うということで複数の機能を組み合わせたアプリにしていきます。
大まかな機能は以下の通り
* ユーザー作成機能（PokeAPIでポケモンのデータでユーザ登録する）
* Todo機能
* レベルアップ機能（タスクを消化するたびに経験値がたまる、上限値までたまるとレベルアップする）

このような形で作っていきます。
今まで作ってきたものと+αを掛け合わせた感じですね笑

## 作成した結果はこちら

https://github.com/rikuya98/ts_PokeTodoApp

## ソ

データ型ってなに？

# データ型とは何か
データ型は、プログラミングにおいてデータの性質や取り扱い方を定義したもので、それぞれのデータには特定の型が割り当てられます。データ型はプログラミングが亜データを理解し、処理する際に役立ちます。

### データ型の例
#### 1.数値型（Number）
* 整数や乳動小数点数を証言します。　例）：’5′, ‘3.14’
#### 2.文字列型(String)
* 文字のシーケンスを表現します。　例）: “Hello, World!”
#### 3. 真偽値型(Boolean)
* ‘true’ または ‘false’のいずれかを表現します。 例）: ‘true’
#### 4.オブジェクト型(Object)
* 複数の値やプロパティをまとめたものを表現します。 例): ‘{name: “John”, age: 20 }’

# なぜデータに「型」があるのか
なぜデータに「型」があるのかについては、主に以下の理由が挙げられます
#### 1.　効率的なメモリ利用
* データ型によって、プログラムはメモリの適切な領域を確保し、無駄なメモリの使用を防ぐことが

JS ズンドコ コードゴルフ

数年前に散々こすられたズンドコキヨシプログラムをJSでコードゴルフしていく。

なお今回は改行文字はカウントしない流派だよ。

“`js:81文字
t=”
for(c=1;c;)
t+=Math.random()<.5?(c++,'ズン'):(c=c<5,'ドコ') console.log(t+'キ・ヨ・シ！') ``` ## その他（没） ```js:86文字 for(t='';!t.includes`ズンズンズンズンドコ`;)t+=Math.random()<.5?'ズン':'ドコ' console.log(t+'キ・ヨ・シ！') ``` ```js:86文字 t='' while(!t.includes`ズンズンズンズンドコ`) t+=Math.random()<.5?'ズン':'ドコ' console.log(t+'キ・ヨ・シ！') ``` ```js:91文字 a='ズン' b='ドコ' for(t='';!t.includes(a+a+a+a+b);)t+=Math.random()<.5?a:b console.log(t+'キ・ヨ・シ！') ``` ##

consoleはlog()だけじゃない！　

## 環境
Chrome（バージョン: 119.0.6045.105）

## console.assert()
第１引数がfalseのときは第２引数のメッセージを出力する。

“`jsx
const isEven = (number) => {
if (number % 2 === 0) {
return true;
} else {
return false;
}
}

console.assert(isEven(3), ‘奇数です’);
console.assert(isEven(2), ‘偶数です’);
“`

## console.clear()

コンソールをクリアする

↓実行後
JavaScript API連携　自分メモ

# 概要
XMLHttpRequest(XHR)を利用してWebAPIを処理する実装を行っていた。
記述量が多くなりがちな印象。
> XMLHttpRequest（XHR）とは、Webブラウザなどに実装されているJavaScriptのAPIおよびオブジェクトの一つで、スクリプトからHTTPを利用してWebサーバにアクセスする機能を提供するもの。
>
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

そこからFetchを利用してWebAPIを処理する実装へ変わっていった。
Promiseを使用できるので成功・失敗の処理を記述しやすい印象。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

さらに使いやすいaxiosへ

https://github.com/axios/axios

# XHR API連携

“`script.js
const req = new XMLHttpRequest();
// リクエスト生成

【Nuxt・Vue】フォーカスで数値、フォーカスアウトでカンマ付き数値のテキストフィールド

## はじめに

金額系のテキストフィールドを実装する際に以下のようなUI仕様にしたいってありますよね。
1. 通常は「100,000」のように3桁でカンマ区切りで数値をテキストフィールドに表示したい
2. マウスやTABキーなどでテキストフィールドにカーソルが当たったら「100000」と普通の数値の編集ができる
3. カーソルがテキストフィールドから外れたら再び「100,000」の表示になる

今回はVue(Nuxt)でこの機能を実装したテキストフィールドコンポーネントのサンプルコードを紹介します。

:::note warn
これはプロトタイプです。
最低限の機能のみなので、要件に応じてここからpropsなどを追加してアレンジしてくださいね！
:::

## デモ

https://codesandbox.io/embed/jdd57d?view=Editor+%2B+Preview&module=%2Fsrc%2Fcomponents%2Ftextfield.vue

“`vue:App.vue