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

【小ネタ】p5.toio を使ったプログラムの実行中に toio のバッテリー残量を確認する（開発者ツールのコンソールを利用する形）

以下の記事でも書いた「p5.toio」の話です。

– [p5.toio を使ったシンプルな p5.js のプログラム：接続中の toio の数の表示や move()、rotate() などによる走行 – Qiita](https://qiita.com/youtoy/items/f67e6a3624ec260f2022)
– [toio をブラウザ上から簡単制御！ p5.js用ライブラリの p5.toio の始め方（p5.js Web Editor上からの利用） – Qiita](https://qiita.com/youtoy/items/0544183ed0f0dba65f51)

内容は、p5.toio を使ったプログラムの実行中に toio のバッテリー残量を確認する、という小ネタです。

p5.toio を使った作品を那須で行われた展示イベントに出していた際、展示作品を動かしたまま、予備の toio との交換が必要そうなバッテリー残量になっていないかどうかを確認できないかと、今回の内容を試しました（※ 動作中のプログラムに手を入れず、とりあえずで確認できたらという目的）。

世界の時間を表示する

世界中の時間を表示します。
worldsDataに場所と日本からの時差を入れます。

“`html

“`

“`js
const worldsData = [
{
location: “東京”,
TimeDifference: 0
},
{
location: “ベルリン”,
TimeDifference: -8
},
{
location: “上海”,
TimeDifference: -1
},
{
location: “ニューヨーク”,
TimeDifference: -14
},
{
location: “ロサンゼルス”,
TimeDifference: -16
},
]
const content = document.getElementById(‘world-time’);

worldsData.forEach(function (world) {
const now = new Date

MapLibre でタイルを縮小表示させて情報量を増やす

## はじめに

ある地域を俯瞰しようとした場合、市町村界や交通ネットワーク（主要な道路、鉄道・駅、港湾・空港等）、河川・地形等が１枚にまとまって掲載された地図があると便利です。防災・災害対応等で利用する際の背景地図としても、このような情報は有用だと思います。

[地理院地図Vector](https://maps.gsi.go.jp/vector/)/[最適化ベクトルタイル](https://github.com/gsi-cyberjapan/optimal_bvmap)では、ズームレベル（ZL）11まで拡大すると上記のような情報が表示されてきます。一方、私の経験上ですが、複数の市町村を含む地域を24インチの画面に表示したり、A3用紙に印刷しようとすると、地理院地図Vector/最適化ベクトルタイルで ZL10 がちょうどよいと感じることが多いです。たとえば、能登半島地震関連で、能登半島全体をこのサイズに収めたいと思うと、ZL10にする必要があります。

しかしながら、地理院地図Vector/最適化ベクトルタイルで ZL10となると、市町村界や駅名等が表示されません。このままだと、

【覚えておきたい】HTML CSS Javscriptのチップ集

様々なコンポーネントを開発するにあたってのサンプルレシピを記載します。
※この記事は、随時更新します。

# トグルスイッチについて
(完成イメージ)

“`Index.html

“`
“`Index.css
.switch_outer_1 {
width: 105px;/*120px*/
height: 50px;/*60px*/
background-color: lightgrey;
border-r

【JavaScript】同期通信と非同期通信の違い

# 同期通信・非同期通信とは
同期通信と非同期通信は、コンピュータサイエンスやネットワーキングの文脈で使われる用語で、それぞれ異なる動作や処理の方式を指します。
# 同期通信（Synchronous Communication）
– 同期通信では、処理が順番に実行され、次の処理は前の処理が完了するのを待ちます。つまり、一つの処理が終了するまで次の処理が開始されません。
– シンプルで直感的なプログラミングが可能ですが、処理が完了するまで他のタスクを実行できないため、効率が悪い場合があります。
– 典型的な例は、関数の呼び出しやファイルの読み込みなどです。
# 非同期通信（Asynchronous Communication）
– 非同期通信では、処理の完了を待たずに次の処理が開始されます。つまり、複数のタスクが同時に実行され、結果が返ってくるまで待つ必要がありません。
– ファイルの読み込みやネットワークリクエストなど、長時間かかるタスクを効率的に処理するために使用されます。
– 典型的な例は、コールバック関数やプロミス、非同期関数（async/await）などです。

以下は、同期通

エスケープとは

# エスケープとは
エスケープ（Escape）とは、コンピュータプログラミングやテキスト処理において、特別な意味を無効にしてくれる文字、あるいは特別な意味を付与するための文字のことです。
主な使用目的は以下の通りです。

1\. **特殊文字の表現**: 文字列中に特殊文字（例: シングルクォート、ダブルクォート、バックスラッシュなど）を含める際に、その文字を特別な意味ではなく、そのままの文字として解釈させるためにエスケープします。

2\. **制御文字の表現**: 文字列中に制御文字（例: 改行文字、タブ文字など）を含める際に、その文字を文字列の一部として解釈させるためにエスケープします。

3\. **予約語の表現**: 特定のコンテキストで予約語（例: JavaScriptの予約語、SQLの予約語など）を文字列として使用する際に、その意味を特別な意味として解釈させないためにエスケープします。

エスケープは、通常、バックスラッシュ（\）や特定のエスケープシーケンス（例: \n、\tなど）を使用して行われます。エスケープシーケンスは、バックスラッシュの後に特定の文字を記述すること

【JavaScript】テンプレートリテラルとは　

# テンプレートリテラルとは
テンプレートリテラル（Template literals）は、JavaScriptの文字列の記法の一つであり、バッククォート（“）で囲まれた文字列リテラルのことを指します。テンプレートリテラルを使用すると、文字列内で変数や式を埋め込むことができ、より簡潔で読みやすいコードを書くことができます。

テンプレートリテラルの主な特徴は以下の通りです。

1\. **変数の埋め込み**: テンプレートリテラル内では`${}`を使って変数や式を埋め込むことができます。
“`js
const name = ‘John’;
const greeting = `Hello, ${name}!`;
console.log(greeting); // 出力: Hello, John!
“`
2\. **複数行の文字列**: テンプレートリテラル内では複数行の文字列をそのまま書くことができます。
“`js
const multiLineString = `
This is
a multi-line
string.
`;
console.log(multiLineStri

【JavaScript】DOMとは

# DOMとは
DOM（Document Object Model）は、ウェブページやXML文書などの文書の構造化された表現を提供するためのプログラミングインターフェースです。DOMは、HTML、XML、XHTMLなどの文書を、プログラムやスクリプトから操作できるようにするための標準化された方法を提供します。
具体的には次のような機能を提供します。
1\. 文書の階層構造の表現: 文書内の要素（タグ）、属性、テキストなどを木構造で表現します。これにより、文書内の要素やその関係をプログラムから操作できます。

2\. 要素へのアクセスと操作: DOMを使用すると、JavaScriptなどのスクリプト言語を使って文書内の要素にアクセスし、属性や内容を変更したり、新しい要素を追加したりできます。

3\. イベントの処理: DOMは、ユーザーの操作（クリック、キーボード入力など）やブラウザの状態の変化（ページの読み込み、スクロールなど）などのイベントを捕捉し、処理するための機能も提供します。

DOMはクライアントサイドのWeb開発で非常に重要な役割を果たしており、JavaScriptを使用

codepenでカメラ、マイクのテスト

# 概要

ハッカソンなので、getusermediaでカメラ、マイクのテストしてみた。

# 参考にしたページ

https://qiita.com/sueasen/items/abf2d27c888c4d6d268d

# 手順

– 下記のEDIT ON で、codepen を開いて、initボタン押すでは、足りなくて、htmlかcssかjsをいじってから、ボタン押下。

# 成果物

See the Pen 【JavaScript】localStorageの容量が不足した際に処理を実行する方法

以下のように記述することでlocalStorageの容量が不足した場合の処理を記述できます。

“`js
try {
localStorage.setItem(‘sample’, ‘sample’)
} catch (err) {
if (err instanceof DOMException && err.name === ‘QuotaExceededError’) {
console.log(“localStorageの容量が不足しています。”)
}
}
“`

JavascriptでEitherモナドを真似してみた。

通勤時に川沿いの遊歩道を歩きながら随伴と責圏（直積）の事を何気なくイメージしていたら突然モナドとの繋がりが頭に浮かんで来ました。そこで早速 Javascript で模倣すべくコードを書いてみる事にしました。モナドの動きが理解しやすい様に配列と短い関数の積み重ねで模倣して見ました。前回の State モナドよりも単純で追いかけ易いコードで記述するように試みてみました。
“`javascript Either.js
//
// Haskell の Either Monad を模倣してみた。
//

// 型再定義 (type)
var _right_ = true;
var _left_ = false;

var Right = val => { return [val, _right_]; };
var

【React】onClickとhandleClickの違い・使いどころ

## Reactにおける`onClick`と`hancleClick`の違いについて

TypeScriptとNext.jsを使ったWebアプリケーション制作にチャレンジしていますが、それ以外にもReact構文を頻繁に使う機会があるため、Reactもしっかり学ぶ必要性があると感じました。

Reactの関数コンポーネントを実装するなかで疑問に思った点として、ロジックを複数の処理に分けて実装するという点です。

まず理解できていない点としてonClickとhandleClick。ボタンを押したときに数字がカウントアップするようなロジックを作りたいとき、onClickで関数hendleClickに渡し、実際のカウントアップの処理はhandleClickで表現する、、、。みたいな実装方法を行う場面があります。

なぜ、ボタンをクリック〜数字カウントアップという2つの挙動を実現するために、2つの関数コンポーネントに分ける必要があるのか？という疑問があります。

この疑問は今後、幾度となく訪れる場面があると想定されるため、きちんと理解して腹落ちした状態にしておきたいと思い、よくよく調べることに

googleapisを利用してGmailをAPIで取得する

## 目的

PlaywrightでGoogle Gmail APIを使用してメールを受信すること。

Playwrightでe2eテストコードを実装する中で、メール認証時の認証コードを取得したかったのでAPIでメールを取得したかった。

## 前提

– Googleアカウントがあること

## 事前準備

まずはgoogleapisでGmailを取得するために必要な認証情報を取得します。

### Google Cloud Consoleでプロジェクトを作成

以下にアクセスしてプロジェクトを作成します。

https://console.developers.google.com/project

以下の手順でプロジェクトを作成

1. Google Cloud Consoleへアクセス
2. プロジェクトを作成ボタンをクリック
3. 適当にプロジェクト名を入力
4. 作成ボタンをクリック

### Gmail APIを有効化

サイドバーを開き「APIとサービス > ライブラリ」をクリックし、APIライブラリからGmail APIを有効化します。

https://conso

配列からオブジェクトへ変換

# 配列からオブジェクトへ変換
配列からオブジェクトに変換する方法（キーは連番）の備忘録。

### 1. `reduce()`メソッドを用いる
“`javascript
let array1 = [111, 222, 333, 444, 555, 666];

let obj = array1.reduce((acc, value, index) => {
// acc は蓄積されるオブジェクト
// value は現在の要素の値
// index は現在のインデックス

// スプレッド演算子を使用して、acc を展開し、新しいオブジェクトを作成し、新しいキーと値を追加する
return { …acc, [‘key’ + index]: value };
}, {} );

console.log(obj);
// { key0: 111, key1: 222, key2: 333, key3: 444, key4: 555, key5: 666 }
“`

#### ChatGPTによる説明

オブジェクトから配列に変換

## オブジェクトから配列に変換
GAS（Google Apps Script）でオブジェクトを操作する際の備忘録。

## 1. `Object.values()`

`Object.values()` メソッドは、与えられたオブジェクトの値の配列を返します。

“`javascript
const person = {
firstName: ‘John’,
lastName: ‘Doe’,
age: 30
};

const values = Object.values(person);
console.log(values); // [‘John’, ‘Doe’, 30]
“`

この例では、`person` オブジェクトの値が配列 `[‘John’, ‘Doe’, 30]` として取得されます。

## 2. `Object.keys()`

`Object.keys()` メソッドは、与えられたオブジェクトのキーの配列を返します。

“`javascript
const person = {
firstName: ‘John’,
lastName:

【JavaScript】Web Storageが使用可能か判定する方法

以下のように判定用の関数を作成します。

“`javascript
function storageAvailable(type) {
let storage
try {
storage = window[type]
const x = “__storage_test__”
storage.setItem(x, x)
storage.removeItem(x)
return true
} catch (err) {
return (
err instanceof DOMException &&
(err.name === “QuotaExceededError” ||
err.name === “NS_ERROR_DOM_QUOTA_REACHED”) &&
storage &&
storage.length !== 0
)
}
}
“`

`localStorage`が使用可能か判定するには以下のようにします。

“`javascript
if

コールバック関数／高階関数についてまとめてみた

コールバック関数とは、ある関数の引数として渡された関数のことを指します。このように２つの関数「受け取る側の関数」と「渡す関数」が出てきますので整理する。

* **「受け取る側の関数」について**
> 受け取る側の関数は、引数に関数をもらい処理の中で利用する。受け取る側では全体の処理は定義されており、特定のタイミングで行う具体的な処理を引数でもらう。受け取る側の関数を高階関数とも呼ぶ。
>
* **「渡す関数」について**
> 渡す関数は具体的な処理内容を持っており、適切なタイミングで実行されるのを待つ。
>

* **コールバック関数/高階関数の記述方法**

　　　

　　　![image](https://firebasestorag

DIVをスムーズに追加するアニメーション

# 1. はじめに
div要素をスムーズに追加するアニメーションを作りたくて、少し調査しました。

ソースは下記のitem_insert。（ほかのcssの練習をすることができるように、適当に大きな名前にしてあります。）

https://github.com/yo16/css_animation_sample

# 2. 課題
下記のように、黄色の内側に青があるという包含関係にあるDIV要素に対して、box1のさらに上へbox2、box3・・・と追加していくことを考えます。


このときbox2を追加したら、box2は上から降りてきて、box0とbox1は下に押し出される、というアニメーションを作りたいです。

こうかなーと適当にやると、box2を追加したとき、すでにあるbox0とbox1が最終的な位置に瞬間移動してしまいます。その押し出される

StandAloneで稼働しているUIから一部だけライブラリとしてPublishした話 feat. rollup

## はじめに

所属プロジェクトでは大量のReactコンポーネントを持っており、その中の一部(60%くらい)のコンポーネントを社内の別のプロジェクトでも使うため、ライブラリとして公開しろという指令が出ました。

実は既に社内で使われていましたが、ビルドがコンシューマ側で行われていたので、ここを何とかしろという話でした。(~~お前らのせいでビルドに余計な時間がかかるだろうが！~~)

##### 結論: rollup (https://www.npmjs.com/package/rollup) を使った。”まぁまぁ”うまくいった。

## 1. 現状とゴールの確認

#### 現状:

コンシューマが`npm install <プロジェクト>` を実行するとほぼソースコードそのものがnode_modules以下にinstallされる(babelでトランスパイルだけされている)、のでコンシューマ側でビルドが必要。

使う側はコード上で `import {Component} from @プロジェクト/src/components/library/index` のように、ファイルパスまで

JavaScriptでなんちゃって演算子オーバーロード—四則演算子

# はじめに
前回は自作の数値計算ライブラリの実行用(フロントエンド)を紹介した。
この数理計算ライブラリには複素数、ベクトル、行列クラスなどがある。
そうなると欲しくなるのが四則演算`+,-*,/`などの演算子オーバーロードである。
JavaScriptは演算子オーバーロードはサポートされていないがトランスパイラであるBabelのPluginを使うことで擬似的に作ることができる。
その方法を、備忘録を兼ねて記事にする。

## Babel Plugin
Babelは言わずとしれたトランスパイラである。
Babel Pluginはこ のBabelの処理の途中に独自の処理を加えてソースコードを書き換えるものである。
その処理には元JSからAST(抽象構文木)に変換してそれを元に別のJSに変換するのもである。
そのため、この処理をより深く理解するためにはASTの知識が合ったほうがいいがその知識は参考文献にしておく。

白状するとこの記事はほぼこの記事、[JavaScriptで演算子オーバーロードしてみる(BabelでAST)](https://qiita.com/taqm/items/1e