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

ReactでSVG要素をドラッグして移動、拡大縮小

# はじめに
ReactでSVG要素を書いてそれをドラッグしたくなったのですが、自分で`onMouseDown()`とか書くのは嫌だなぁと思いました。
何度かやったことがありますが細かいところでめんどくさいです。マウスダウンしたまま、ウィンドウの外に出した場合とか、移動しすぎ、拡大縮小しすぎた場合とか、やってみるとたくさんあるんです。

こんなの誰かがモジュール作ってくれてるでしょうと思ったらやはりありました。今回、この`react-zoom-pan-pinch`の使い方をさらっと説明します。インストールとか割愛。

https://www.npmjs.com/package/react-zoom-pan-pinch

今回の私のコードは下記。(canvasって名づけてしまったけどsvgです）

https://github.com/yo16/react_canvas_prac

# 使い方
“`JavaScript:MySvg1.js
import { TransformWrapper, TransformComponent } from ‘react-zoom-pan-pinc

JavaScript基礎①

学校で学んだJavaScriptの基礎の振り返りを作成していきます。
あくまでも個人メモであることをご了承ください。

まずJavaScriptはインタプリタ言語です。

:::note info
プログラムを逐次解釈しながら実行する言語のこと
:::

JavaScriptではJIT(Just-In-Time)コンパイラを利用して実行します。

JavaScriptを最低限利用するするには
テキストエディタとWebブラウザが必要です。

JavaScriptのプログラムはScriptタグ内()に記述します。

“`html:sample001.html

“`

また、JavaScriptのプログラムを外部ファイルに定義しておき
HTMLに組み込んで利用することもできます。
その場合は「src属性」を利用します。

“`html:sample002.html


```
`01234`が表示されると思ったら大間違いです。本当です信じて下さい。発動順はimg、iframe、svgとなります。配置場所は無関係です。
最後のbody要素のonloadはscript要素により書き換わっています。逆にhead要素にscript要素を記述している場合はbody要素のonloadがそのまま発動します。
さて、そうなると`1423`が表示されるのでしょうか? あいにくとそういう訳にはいきません。
何と最終的に1のみ表示されます。何でもしませんから信じて下さ

Server-Side Rendering(SSR)とは? 何が改善するの？

## Server-Side Rendering(SSR)とは? 何が改善するの？

昨今Server-Side Renderingが主流になりつつあるので、ここでまとめようと思います。

TypeScript とJavaScriptがブラウザーに現れるまで

### イントロ

TypeScriptやJavaScriptを実装した際、ブラウザーに表示されるまでに背景で起きていることをまとめます。

### プロセス

1. **Transpilation(TypeScriptのみ）**：TSは実装前に、TypeScript Compiler(tsc)でJSへと変換（Transpile)される
1. **Bundling**：WebpackやRollupを使って、１つのファイルに統合（Bundle)される。そうすることで、HTTPリクセストの回数を減らせる
1. **Minification**:コメントや空白などの余計な部分をコードから取り除き、コードのサイズを最適化する。これにより、ブラウザでのダウンロードを早くする。
1. **Execution & Compilation**: 最後に、Just-In-Time (JIT) などのエンジンが上記で最適化されたJSコードをブラウザーで実走する。並行して、JSコードはByteCodeというMahcine言語よりもAbstractなフォーマットへ変換している。より頻繁に使われるコード（Ho

classとextendsで組み込みクラスを拡張させる

ES6からArrayのような組み込みクラスに足して堅牢なサブクラスを作成でき、classとextendsを使用します。

```js
class EZArray extends Array {
get first() { return this[0] }
get last() { return this[this.length - 1] }
}

let e = new EZArray(1, 2, 3)
let f = e.map(x => x * x)
e.last // => 3
f.last // => 9
```

Arrayにはcontact()、filter()、map()、slice()、splice()というメソッドが定義されています。ES6の仕様では、この5つの配列を返すメソッドはサブクラスのインスタンスを返すとされています。仕組みは以下の通りです。

- ES6以降では、Array()コンスラクタはSynbol.spaciesというSymbol名のプロパティを持つ
- extendsを使ってサブラクスを作るときに、結果として得られるサブクラスのコンストラ

Local StorageでユーザIDを扱う

## はじめに
今回は、Reactプロジェクトにおいて、Local Storageを用いてWebサイトにアクセスするユーザのIDを扱う方法を紹介します。なお、後述するとおり、Local Storageはセキュリティ面でのリスクが高いため、機密性の高い情報を保存することには向いていません。今回はあくまでユーザの識別にのみ利用可能であり、他に悪用することができないIDの管理について紹介します。
よりセキュアにユーザID等を管理する必要がある場合は、セキュリティ対策や認証管理を行うことができるCookieを使用する方が適切かもしれません。
## Local Storageとは？
Local Storageは、JavaScriptを使用してブラウザにデータを永続的に保持するためのAPIです。
セッションストレージとは異なり、Local Storageに保存されたデータはブラウザを閉じても保持されたままとなります。ブラウザの設定からキャッシュやCookieを含むデータを削除したり、アプリケーションにて明示的に`localStorage.clear()`を呼び出したりしない限り、Local Sto

p5.js Web Editor上の処理で DualShock 4 の振動を扱う（Gamepad API を利用）

以下で扱っていた「p5.js Web Editor ＋ Gamepad API ＋DualShock 4（ゲームコントローラー）」の組み合わせに関する話です。

●p5.js Web Editor上で Gamepad API を使う： DualShock 4 を使ったシンプルな接続確認・ボタン押下判定 - Qiita
　https://qiita.com/youtoy/items/997e5720de790e36b98b

上記の記事では、ボタン押下の判定を扱いましたが、今回はゲームコントローラーの振動を扱います。

## ブラウザで振動を扱う　API　をいくつかピックアップ
ブラウザで、ゲームコントローラーの振動を扱えそうな　API を確認してみます。

### Gamepad API関連
MDN で検索すると、「Gamepad: vibrationActuator プロパティ」「Gamepad: hapticActuators プロパティ」という 2つが該当しそうでした。

それぞれのブラウザ対応状況を確認してみます。

#### vibrationActuator プロパティ
●

p5.js ＋ iPad（Safari）の組み合わせで「DualShock 4」を扱う：ブラウザの Gamepad API利用 ＋ VSCode の活用

## はじめに
PC上のブラウザを使って試した、以下の記事に書いた内容を、今回は iPad で試してみたという内容の記事です。

●p5.js Web Editor上で Gamepad API を使う： DualShock 4 を使ったシンプルな接続確認・ボタン押下判定 - Qiita
　https://qiita.com/youtoy/items/997e5720de790e36b98b

けっこう前から、iPad自体はゲームコントローラーに対応していたはずなのですが（※ 以下が公式の関連ページ）、今回は iPad のブラウザ（Safari）の API（Gamepad API）で扱えるか動作確認をしたという感じです。

●ゲームコントローラをiPadに接続する - Apple サポート (日本)
　https://support.apple.com/ja-jp/guide/ipad/ipad4c38c119/ipados

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b8

コールバック関数とは

## コールバック関数とは

コールバック関数は、ある関数が実行された後に呼び出される関数です。

通常、**他の関数に引数**として渡されます。

また、コールバック関数の範囲よりも、外側の関数から呼び出されます。
> 【引用：MDN】
> コールバック関数とは、**引数として他の関数**に渡され、**外側の関数の中**で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。

```jsx
// コールバック関数
function greeting(name) {
alert('Hello ' + name);
}

// コールバック関数を受け取り、処理の最後でコールバック関数を実行する。
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}

//* ほかの関数を呼びだす際に、その関数の引数として渡される。
// よく使われる方法として、その関数の処理が終わった後に、コールバック関数が実行される
/*

俺が考えたアクセシビリティに考慮した最強のツールチップ

アクセシビリティ素人がTooltipのアクセシビリティ、UXについて考えてみました。「俺が考えた最強のツールチップ」という妄言だと思って読んで頂ければ幸いです。

:::note warn

※ これは2022-12-09に[個人ブログ](https://bicstone.me)で公開した記事を移植し、[CC0-1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.ja)で提供しています。情報は古い可能性があります。

:::

## ツールチップとは

そもそもツールチップとは、普段は隠れているものの、ポインターをホバーしたりキーボードフォーカスを当てると、補足情報を表示するコンポーネントです。ホバーアウトしたり、フォーカスが外れたりしたら自動的に閉じられます。

普段、様々なウェブサイトを使っていく中で、ツールチップは個人的に最もフラストレーションがたまるUI要素です。

そこで、自分が最も使いやすいと感じるツールチップについて書いてみます。

## ベストプラクティス

まずは世の中のベストプラクティスを調べてみ

Does My Browser Support WebGL?

A copy of "Does My Browser Support WebGL?"

以前に[個人ブログ](https://bicstone.me)で公開していた、 Does My Browser Support WebGL? のコピーを提供します。

WebGL関連でトラブルが発生した際にお役立てください。

全画面表示は[こちら](https://kbu5zb.csb.app/ "Does My Browser Support WebGL? へのリンク")から。

https://codesandbox.io/embed/does-my-browser-support-webgl-kbu5zb?&theme=light&view=preview

window.locationとdocument.locationの違い

# 1. 背景

document.locationというのを初めて見たので、window.locationと何が違うのか調べようと思った為です。

# 2. Document.locationとWindow.locationの違い

https://developer.mozilla.org/ja/docs/Web/API/Window/location

https://developer.mozilla.org/ja/docs/Web/API/Document/location

https://stackoverflow.com/questions/2430936/whats-the-difference-between-window-location-and-document-location

https://www.web-dev-qa-db-ja.com/ja/javascript/javascript%E3%81%AEwindowlocation%E3%81%A8documentlocation%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%

JS/TSでvarは何で嫌われてるの？ 【JavaScript Node.js TypeScript 初心者プログラマー】

## 最初に
今回は**初心者向け**に何故varが嫌われているのか書いてみました。
誤字脱字等ありましたら、優しく教えていただけると幸いです。

# なんでvarって嫌われてるの？
そもそもconst let varの違いを理解していますか？
一旦それぞれの特徴について、もう一度まとめてみましょう

| 宣言方法 | 再宣言 | 再代入 |
|:-------- |:------|:-------|
|const | 不可 | 不可 |
| let | 不可 | 可能 |
| var | 可能 | 可能 |

これをふまえた上で嫌われている理由をまとめていきます。

### 1: 再宣言が可能
初心者の方は再宣言可能の何がいけないのか？と思いますよね？再宣言はプログラムが長くなればなるほど、面倒な仕様になっていきます。

```js
var hello = "hello world"

var hello = "hey"

console.log(hello)

// console: hey
```
このくらいの行数ならhelloが再宣言されているのでログ出力時にはhello wo

JIS G5502球状黒鉛鋳鉄品の黒鉛球状化率の測定（ブラウザ上で行う）

以前の記事で、JIS G5502の黒鉛球状化率の測定をJIS法とISO法で行うプログラムをPython＋OpenCVで作成して下のURLで公開しました。しかし、このプログラムの実行にはPythonの環境構築が必要になり、使える人が限定されてしまいます。

https://qiita.com/_Moony/items/2faf01955b7b88873066

そこで今回は、ブラウザで動くプログラムを作成しました。作成したプログラムは以下のURLからダウンロードできます。使い方についても以下のURLをご参照ください。

https://github.com/repositoryfiles/Nodularity-WebApp

何かのご参考になれば幸いです。

C++/Java系言語で1文字だけでコメントアウトするブロックを切り替える

# 概要

プログラミングをしていると実装の方式を試してみることがあると思います。あるいは、別の実装でうまくいくか自信のない時、今あるものはコメントアウトしておいて別の実装を試してみたり。そんな場合、今時はエディターの機能で簡単にブロックをコメントアウトしたりできますが、言語仕様をうまく使って一文字編集するだけでコードブロックをコメントアウトする小技を大昔に思いついていて今でも使うことがあるので紹介します。実装中の試行錯誤の時には便利です。

この技はC++/Java/Javascript系の、ブロックコメント`/* ... */`とインラインコメント`//`がサポートされている言語で利用できます。

# ブロックを`/`の削除でコメントアウトする

以下のように書いておくと、一番最初の`/`を削除すると最初の行がインラインコメントからブロックコメントに切り替わり、ブロック全体がコメントアウトされます。

```javascript
//*
var x = foo;
//*/
```

先頭行が`//`で始まると、最初と最後の行がどちらもインラインコメントになり、`/*`で始まるとそこ

【JavaScript】変数の宣言

# 変数の宣言
JavaScriptにおける変数の宣言には、`const`、`let`、`var`の3つがあります。

1. `const`:
`const`キーワードは、ブロックスコープ内でのみ有効な定数を宣言するために使用されます。`const`で宣言された変数は再代入も再宣言もできません。

```javascript
const x = 10;
// x = 20; // エラー: 再代入はできない
```

2. `let`:
`let`キーワードは、ブロックスコープ内でのみ有効な変数を宣言するために使用されます。`let`で宣言された変数は再宣言ができませんが、再代入は可能です。

```javascript
let x = 10;
x = 20; // 再代入が可能
```

3. `var`:
`var`キーワードは、古いバージョンのJavaScriptで使用されている変数宣言方法です。関数スコープまたはグローバルスコープでのみ有効であり、ブロックスコープではないため、変数が宣言されたブロックの外からでも

JavaScriptで体重や血圧が分かるようにゲージを作ってみた

### 背景
JavaScriptについての記事が多いので、いろんな便利な使い方があってとても参考になるが、但し、自分が本当に必要なものを突き詰めるとなかなかなくて、今回にあたります。

### ゴール


こんな感じで、毎日、血圧と体重を測定し、目標値とどのぐらいの差分があるかを数値ではなく、グラフでもなく、体重計と血圧計をそのまま載せた感じです。

人間って数値を見てもピンとこないです。例えば、「BMI28」ですと言われてもよくわからないです。

### いろいろ試み
JavaScriptでは、Pluginも多く、但し、お互いに混在した形で使うと片方が動作しないことはよくあるので、今回は「やっ」と作りました。

体重の方のみ載せます。
血圧も改良すれば、簡単に書けると思います。

```JavaScript
function drawGaug

Reactでsupabaseのデータを引用する際に画面が真っ白に...

# 初めに
今回はReactでsupabase上のデータを引用する際に、意図せず画面が真っ白になってしまいました...
その原因と解決方法を自分なりに結論づけることができたので報告します！

# 問題のコード
```react
const [todos, setTodos] = useState([]);
```

# 解決した際のコード
```react
const [todos, setTodos] = useState([]);
```

# anyとは？
今回はsupabaseを初めて利用したため、参考としていた動画のコードをそのまま記述していました。
そのため``もそのまま記述していたのですが、これはTypescriptでしか使用できないそうです。
``についてchatGPTに聞いてみました。

>`useState()`は、ReactのuseStateフックを使う際にTypeScriptのジェネリクス構文を使用している例です。ここでの``は、このステートがどのような型の値も保持できることを示しています。TypeScriptの