JavaScript関連のことを調べてみた2023年10月13日

Googleのアプリパスワード（App passwords）が見つからない時の対処法

TypeScriptのNodemailerモジュールを使ってGmailを送る処理を実装する際にGoogleアカウントのアプリパスワードなるものが必要になりました。

でも、一般的な方法（[ここ](https://dev.classmethod.jp/articles/nodemailer-gmail/)とかに書いてるやつ）ではできなかったので、今後再度必要になった時用のメモとして残します。

## 結論：直接リンクにアクセスする
以下のリンクからアプリパスワードページに飛べる
https://myaccount.google.com/apppasswords

## 確認事項
上記リンクに行く前に、**アカウントの２段階認証が有効化**されているかを確認しておきましょう。

アプリパスワードは、２段階認証が設定されているアカウントのみ使用できます。

## まとめ
直リンクで行けるのはありがたや。
ただ、リンク先を覚えておけないので、ここに記しておきます。

### 参照
https://support.google.com/mail/thread/4477145/no-app-pas

[JavaScript]イベントハンドラ

## イベントハンドラとは
JavaScriptでは、**イベントハンドラ**という、ウェブページ上でユーザーの操作やブラウザの動作、つまりは**イベント**に反応するために使用されるコードがあります。

・**イベント**: ウェブページ上で発生するユーザーの操作やブラウザの動作を指すトリガー
・**イベントハンドラ**: イベントが発生した際に実行する関数を紐付けるための**方法**

ユーザーがボタンをクリックしたとき、特定の要素にカーソルを合わせたとき、キーボードのキーを押したとき、フォームが送信されたときなど、さまざまなイベントが発生したとき、それらのイベントに対して、JavaScriptでイベントハンドラを作成することで特定のアクションや処理を実行できるようになります。

以下で、よく使われる**５つ**の**イベントハンドラ**を紹介していきます！

# 1. ボタンクリック時
**ボタンがクリックされたとき**に実行

java勉強：J2V8とJavetの比較

V8はGoogleが開発するオープンソースのJavaScriptエンジンです。高速、最新ES適用など、いろいろほめられています。V8はC++のものですが、javaからV8から利用する場合、ラッパーが必要です。

– 一番有名なのは、J2V8です。だが更新が止まっているみたいで、windows向けのバージョンは2016年の4.6.0まで、async/awaitはサポートしていないです。詳細は以下のリンクから確認してください。

https://github.com/eclipsesource/J2V8

https://repo1.maven.org/maven2/com/eclipsesource/j2v8/j2v8_win32_x86_64/

– ２番めは、javetです。V8の2023年9月のv11.7.439.16、node.jsも9月v18.17.1を利用されています。認知度がJ2V8よりちょっと低いかもしれません。後発ですからJ2V8より使い勝手がいいです。

https://github.com/caoccao/Javet

# J2V8とJavetの使い勝手の違い
te

Reactで簡単にパスワード自動生成を行う

## 今回のゴール

パスワード生成ボタンをクリックするとランダムな文字列を生成し、inputタグのvalueに代入する。

## 実践

下記は最終的なコードです。(Aboutコンポーネントというものを使用していますが、気にしなしいでください。)

“`tsx
import { useState } from ‘react’;
import ‘../../../../App.css’;

const About = () => {
const [inputPassword, setInputPassword] = useState(”);

function createPassword() {
const material =
‘abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-='; let password = ''; const passwordLength = 16; f

[JavaScript, TypeScript] スプレット構文 (…) とはなんぞや

## 初めに
これは会社で先輩のコードを見た時によく目にしていまして、
なんか気になったので、調べてみました。

## スプレット構文とは
>`配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。`
>>引用: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

ちょっと私の頭では何言っとるかわからなかったので、実際に書いて動かしてみました。↓

## 実際の挙動
“`javascript
const numbers = [1, 2, 3, 4, 5];

console.log(‘numbers: ‘, numbers);
console.log(‘…numbers: ‘, …numbers);

// 結果↓↓
// numbers

X（旧Twitter）でBADマークを押すスクリプト

### XのスペースでBADマークを押すスクリプト ###
X（旧Twitter）のスペースでBADマークを押すスクリプトです。
img要素を変えれば他のマークにも対応すると思います。
“`Javascript
javascript:(function(){var e=document.querySelector(‘div[aria-label=”反応”]’);e?e.click():console.log(“要素が見つかりません”);var t=document.querySelector(‘img[alt=”?”]’);t.click();})();

// 要素をクリックするコード
var element = document.querySelector(‘div[aria-label=”反応”]’);
if (element) {
element.click(); // 要素をクリック
} else {
console.log(“要素が見つかりません”);
}

var imgElement = document.querySelector(‘img[alt=”?”

JSONでバイナリを送ってクライアント側で画像としてダウンロード

DBに画像ファイルを取り込んでおき、JSONとして画像をブラウザへ配信します。

このときクライアント側で画像ファイルにもどすことにつまづいたのでメモします。

## 成功事例

ChatGPTが教えてくれました。

[uint8arrayで保存されているバイナリデータをJSONでarrayとして送るには](https://poe.com/s/nrZrMryxuoC7znO0WAp7)

クライアント側で受け取ったUint8Arrayを画像データに変換するには、次の手順に従うことができます。以下の例では、JavaScriptを使用しています。

“`jsx
// 受け取ったUint8Array
var receivedData = new Uint8Array([/* 受け取ったデータを入力 */]);

// Uint8ArrayをBlobオブジェクトに変換
var blob = new Blob([receivedData], { type: ‘image/jpeg’ }); // typeを適切な画像形式に合わせて設定

// BlobオブジェクトをURLに変換
var ima

TypeScriptの非同期処理メモ

# はじめに
TypeScript非同期処理メモ
(この場合JavaScriptの非同期処理になるはず)

# 参考
https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AETypeScript%E5%85%A5%E9%96%80-%E5%AE%89%E5%85%A8%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%8B%E3%82%89%E9%AB%98%E5%BA%A6%E3%81%AA%E5%9E%8B%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%BE%E3%81%A7-Software-Design-plus/dp/4297127474/?_encoding=UTF8&pd_rd_w=SevaS&content-id=amzn1.sym.188

Reactで改行を含む文字列をBRタグに置換する方法

# TL; DR

`Array.prototype.map()` のindexを活用すれば、条件分岐できることに気付きました。

# 内容

ReactのJSX内では改行文字をUI上の改行として表示できません。
また、単なる文字列置換だけでは、 `
` をDOMとして認識せず、単なる文字列として表示してしまいます。

対処方法として、様々な手法が考えられているようです。

https://kazunaka.com/react-linefeed/

https://qiita.com/suzuki0430/items/76c21e2d68f09d260872

https://chaika.hatenablog.com/entry/2020/07/12/083000

個人的には、for文を使う手法がシンプルで良さそうなのですが、やはり最後に `
` が残ってしまうのが気になります。

“`react:最後にbrタグが残ってしまう手法
export const MultiLines = props => {
const { text } = props;

[超すごい？？] Line × ChatGPTで全知全能を実現

# 全知全能の光平くんという公式アカウントを作成した。
質問やお悩み相談が来た際に、GPTエンジンを使用して、
完璧な返答をするLINE公式アカウント用のバックエンドアプリを作成しました。
ページ中央部にLineのQRコードがありますので、触って遊んでみてください。


—

## GitHub リポジトリ
下記よりコードをご確認ください
[https://github.com/kouhei-github/Line-Reply-Message-OpenAI-Golang](https://github.com/kouhei-github/Line-Reply-Message-OpenAI-Golang)

## 動作確認
下記から公式アカウントを

ASCIIと花火の意外な相性


個人的にも好きでよく見かけるの多い画像の区画を明度に合わせてアスキーに変換する手法をさまざまな動画で試していた際に、花火の動画を使った時の出来が一番おもしろかったので投稿のタイトルに使いました。この記事ではこの手法の大まかなアルゴリズムとポイントのみに絞ってまとめていきます。

※参考までとなりますが最後にコードペンを貼っています

## アルゴリズム
1. Imageを行列としてループする
2. Image[x][y]の色を取得
3. 取得した色をグレイスケールに変換
4. グレイスケールを5つのASCIIグループに振分ける
5. [x][y]にASCIIのグループの中からランダムに選択した文字を描写

## ポイント
### ループについて
画像をループする際は、例えば20 x

キャッシュを利用したデータ取得をSWRで簡単に行う

## 今回のゴール

JsonplaceholderにあるデータをSWRライブラリを用いて取得する。

### 今回使用するJsonplaceholderのURL

“`bash
https://jsonplaceholder.typicode.com/posts
“`

### 公式HP

[データ取得のための React Hooks ライブラリ – SWR](https://swr.vercel.app/ja)

### 実践

下記で使用するHeaderコンポーネントは記述がありますが、本記事の内容とは関係ないので無視で構いません。

公式のデータ取得の欄によると、fetcherという定数を定義します。

“`tsx
const fetcher = (url: string) => fetch(url).then((res) => res.json());

“`

次に`useSWR`をswrから読み込みます。第一引数には取得したいURLを記述、第二引数はfeacherを代入します。そして、公式ページに記述があるように分割代入で、取得したデータを下記のように取得して代入

Oracle Formsの近代化：CheerpJとJava Web Startの比較

　　　[]()
ウェブテクノロジーの進化に伴い、レガシーシステムの近代化は多くの組織にとって必要不可欠なものとなっています。エンタープライズアプリケーションを構築するためのフレームワークとして広く使われているOracle Formsも例外ではありません。

レガシーのOracle Formsアプリケーションは、新しいテクノロジー、ブラウザ、およびデバイスとの互換性の問題に直面する可能性があります。Oracle Formsを最新化することで、最新の Web標準との互換性が確保され、デスクトップ、ラップトップ、タブレット、スマートフォンなど、さまざまなデバイスでアプリケーションをシームレスに実行できるようになります。この互換性により、組織はモビリティを採用し、多様なユーザーベースのニーズに対応する機会を得ることができま

JavaScriptのコピーメカニズムについて調べてみた！

# JavaScriptのコピーメカニズム

変数への代入やオブジェクトのコピーが行われる際に、値の型によってコピー内容が異なる。
値の型には　**プリミティブ型** と **オブジェクト型** の2つがある。

## プリミティブ型の代入

プリミティブ型の変数は、値のコピーが保存されるため、値はそれぞれの変数に独立して保存される。

“`javascript
let name = “山田”;
let newName = name;
newName = “田中”;

console.log(name, newName); // output: 山田 田中
“`

## オブジェクト型の代入

オブジェクト型の変数は、オブジェクトの参照（メモリアドレス）が保存されるため、オブジェクトはコピーされず、それぞれの変数からオブジェクトが共有される。

“`javascript
const object = { name: “apple” };
const newObject = object;
newObject.name = “banana”;

console.log(objec

p5.jsにおける図形描画プログラムの生成ツール Shape Maker p5.js

# 1. 本記事について
p5.jsで図形を描画するプログラムの生成ツールを開発してみました。本記事では，その紹介および操作方法の説明をしていきます。本ツールは単純な操作で利用でき，オリジナルの描画関数を自動的にコーディングできることを目的として開発しました。

## 開発経緯
p5.jsはプログラミング初心者でも利用しやすいグラフィックスライブラリです。しかし，手軽に図形を描画する関数は [“`rect()“`](https://p5js.org/reference/#/p5/rect) や [“`ellipse()“`](https://p5js.org/reference/#/p5/ellipse) ，[“`arc()“`](https://p5js.org/reference/#/p5/arc) といった，長方形や楕円の類に限られます。[“`triangle()“`](https://p5js.org/reference/#/p5/triangle) や [“`quad()“`](https://p5js.org/reference/#/p5/quad) な

GeoGuessr風アプリを作ってみた

# プログラミング講師ってアプリ作れるの？

という疑問は皆さんあるんじゃないかな。
SNSでいろんなこと書かれてましたよね～数年前。もう数年前ですね。プログラミング学習は当たり前になり、基本的な知識を持つ人も多くなってきたのではないでしょうか。
但し、知識があるコード書けると「作れる」のは別のはなし。

ということで私も講師をしているので、今回アプリをサクッと作って、創れるんだよとお見せしたいと思います。

## 【何を作ったか？というと】
「GeoGuessr」の基本機能を模倣してみました。これ、意外に大変でした。以下に作ったリンクがあるので、見てくださいね。とにかくGoogleMapAPIのDocumnent読み漁り、レイアウトや細かいMAP表示の部分など制御するのが難しかった～。プログラミングより、そっちが大変(#^^#)

PixiJS v7 のマイグレーションガイドを読んでみる

## この記事は
PixiJSの7系がリリースされて約1年くらい経つ。
v5で時が止まっていた人間がいきなりv7に移行しようとしたところ、そこそこに破壊的な変更があってつまずいた。
公式がマイグレーションガイド [v7 Migration Guide · pixijs/pixijs Wiki](https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide) を出してくれているので今日はこれを読む。
あくまで個人的な備忘録であり翻訳ではない。正確性も保証しない。
原文大して長くないけど一応ね
(2023/10/11 rev33 時点)

## 概要
> ## Overview
> First and foremost, PixiJS v7 is a modernization release that reflects changes in the ecosystem since PixiJS was first published over six years ago. Browsers have gotten better, b

javascriptの無名関数について調べてみた！

## JavaScriptの無名関数について

JavaScriptにおいて、**無名関数**（または匿名関数）は、名前を持たない関数のことを指す。
関数を変数に代入するためや、他の関数の引数として渡すために利用する。

### 無名関数の基本構文

無名関数の書き方

“`javascript
const myFunction = function() {
// 関数の処理内容
};
“`

このような無名関数は変数 `myFunction` に代入して、後からこの変数を通じて関数を呼び出すことができる。

### 無名関数の利用例

#### 1. 変数に代入して利用する

“`javascript
const greet = function(name) {
return `こんにちわ、 ${name}!`;
};

const greetingMessage = greet(‘太郎さん’);
console.log(greetingMessage);

// Output: こんにちわ、 太郎さん!
“`

#### 2. 関数の引数として利用する

“`j

Vue.js 3 ref reactive 早見表

# 早見表

| | ref() | reactive() |
|——————–|—————————-|—————————|
| データ型 | 全ての型 | オブジェクト、配列、Mapなど |
| 分割代入 | サポートされない | サポートされない |
| スクリプト内でのアンラップ | .value プロパティが必要 | 自動的にアンラップ |

# どっちを使えばいいか
[公式](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html)にもあるように、現在(2023/10)時点では`ref()`が推奨されている。
(`reactive()`にはいくつかの制限があるため)

> リアクティブな状態を宣言するための主要な API として ref

Reduxの基礎知識

## はじめに
Reduxの基礎的な部分から、Redux Toolkitを使った、データの管理方法を書いていきます。

## Reduxの概念
簡単に言うと、**Reduxはデータを一つの場所で管理して、どこでも使えて楽だよね**というものです。
各ファイルで同じデータを使うのであれば、そのファイルごとでデータを取得するのは面倒ですし、コードの量のも増えてしまいます。

## Reduxの仕組み
以下の画像は、Reduxの仕組みを図で表したものです。

### Store
データの保管庫です。
データを他のファイルで使用する場合は、storeからデータを取得してきます。

### Reducer
Reducerとは、アプリケーションの状態を書き換える事が唯一できるものです。 Reduxの基本設計の1つであるSingle source of t