Javascriptでアナログ時計

以前こういう課題を触る機会があったのだが、やってみると意外と面白かったので備忘録代わりに残す。
# HTMLとCSS
シンプル。position:relativeな文字盤の上にposition:absoluteな針を置いているだけ。初期状態で90度回った状態になっているので計算時にずらす。

“`html:clock.html

【配列】次元数の意味

## 結論
**次元数 ＝ 階層数**

次元数は、要素数ではなく階層数を指す。（完全に勘違いしていた。）

## コード
“`js:一次元配列：階層数１
[ ‘a’, ‘b’ ] // １
“`

“`js:二次元配列：階層数２
[ // 1
[‘a’, ‘b’]… // 2
]
“`

“`js:三次元配列：階層数３
[ // 1
[ // 2
[0,0,0]… // 3
]
]
“`

Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ

R2に動画ファイルをアップロードしてみます。

## 通常はCloudflare Workers上からアップロードするのが良い

ただ重たい処理などがあるとCloudflare workers上だと処理がキャンセルされてしまうことがあります。

– 重たいファイルを扱う場合
– その他単純にR2を外部から使いたい

などの時はNode.jsからアップロードするという選択肢も持っておくと良さそうでした。

## node-cloudflare-r2

パッと調べて出てきたこのライブラリが手軽でありがたかったです。

https://www.npmjs.com/package/node-cloudflare-r2

“`js
$ npm i node-cloudflare-r2
“`

`accountId`、`accessKeyId`、`secretAccessKey`の3つのキーはCloudflare R2のページから取得できます。
`https://xxxxxxxxxxxxxxxxxxxxxx.r2.dev`といった形のPublic URLも必要ですが、同じくページから確認で

【変換】Object.entriesの動作

## 結論
`Object.entries`は、オブジェクト（連想配列）を配列に変換してくれるメソッド

## 変換動作イメージ
変換前のオブジェクト
“`js:js
const object = {
math: 80,
english: 90,
};
“`

変換後のオブジェクト
“`js:js
const array = [
[‘math’, 80],
[‘english’, 90]
];
“`

**キーと値**の組み合わせが **\[キー, 値]**という配列に変換される。
* キー：`math` / 値：`80`
* キー：`english` / 値：`90`

## 取得処理イメージ
“`js:js
array.forEach(prop => {
const subject = prop[0];
const score = prop[1];
console.log(`${subject}: ${score}`);
});
“`

`prop[0]`で`math`が、`prop[1]`で`80`を取り出す。
この動作が繰り替される。
`

【配列】仮引数への要素代入の順番

## 結論
配列から取り出して仮引数に要素を代入する順番は、仮引数名に関係なく以下の順番で代入される。

:::note info
各要素の内容 → インデックス番号
:::

## サンプル配列
“`js
scores = [ “70”, “90”, “80”, “85” ]
“`

### 仮引数の順番がindex,scoreの場合
“`js
{
scores.forEach((index,score)=>{
console.log(`${index}：${score}`)
})
}
“`
上記の場合、コンソールでは以下のように出力される。
“`console
“70：0”
“90：1”
“80：2”
“85：3”
“`

### 仮引数の順番がscore,indexの場合
“`js
{
scores.forEach((score,index)=>{
console.log(`${index}：${score}`)
})
}
“`

上記の場合、コンソールでは以下のように出力される。
“`consol

【演算子】インクリメント・デクリメントの位置と動作の違い

## 結論
＋ / ーが**前**だから**先に計算**、**後で代入**
“`js
$box = ++$hoge
$box = –$hoge
“`

＋ / ーが**後**だから**先に代入**、**後で計算**
“`js
$box = piyo++
$box = piyo–
“`
*【初心者向け】javascriptの演算子一覧：種類や使い方を解説 より引用*

## 参考

【初心者向け】javascriptの演算子一覧：種類や使い方を解説

Reactで頭の片隅に置いておきたいイベント一覧

# はじめに
この記事はReactで使用できるイベントの一覧をまとめた記事です．

# 本文
### アニメーション系
onAnimationStart: CSSアニメーションが開始するとき
onAnimationIteration: CSSアニメーションが繰り返されるたび
onAnimationEnd: CSSアニメーションが終了するとき
### クリップボード系
onCopy: ユーザーがコンテンツをコピーするとき（例えば、Ctrl+Cを使用するとき）
onCut: ユーザーがコンテンツを切り取るとき（例えば、Ctrl+Xを使用するとき）
onPaste: ユーザーがコンテンツを貼り付けるとき（例えば、Ctrl+Vを使用するとき）
### コンポジション系
onCompositionStart: テキスト入力のためのコンポジション（組み立て）が開始されるとき
onCompositionUpdate: コンポジション中にテキストが更新されるとき
onCompositionEnd: コンポジションが終了するとき
### ドラッグ＆ドロップ系
onDragStart: ドラッグ操作が開始

Bingo

# はじめに
今回はBingoとかに使うマシーンについて紹介していこうと思います。と思います。
Bingoマシーンを利用するときに思ったことは

– HTML,CSS,jsを分けたほうがわかりやすい、
僕のおすすめはやはり上の分けるやつですかね。
# プログラム
**html**
“`html

Tap for B

Javascript 再入門

JavaScript (node.js) に再入門する必要があったので、Copilot Chat 先生に教えていただいた内容を忘れないように整理しておきたい。
　多分普通にやっている人には何の必要性も無い情報だと思うが、自分の知識の整理のためにやっている。

経緯としては、GitHub Actions のカスタム Action を書くにあたって、JavaScript/TypeScript が必要になったので、ひっさびさに触ってみたが、いろいろ進化しているようなので、そのあたりを整理する。

元々の目的が、Custom GitHub Action の作成だから、[Creating a JavaScript action](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action)にしたがってNode.js 20を使用してコードを書いている。書きたいコードは単純で、ファイルをダウンロードして、Unzipするという極めて簡単なもの。Copilot Chat も生成してくれたが動かない。

初めてのTwitchAPI利用方法

# はじめに

TwitchAPIには100種類上のエンドポイントが用意されており、それらすべてを無料で利用することができます。(レート制限あり)

今回はTwitchAPIの利用までの流れを紹介していきます。

# 目次

1. Twitch Developersでアプリケーションの登録
2. アクセストークンの取得
3. 利用したいAPIにアクセス

# 1. Twitch Developersでアプリケーションの登録

まず、[Twitch Developers](https://dev.twitch.tv/login)にアクセスし、アプリケーションの登録をします。登録手順に関しては、以下の記事で丁寧に説明されていたため、そちらを参考にしてください。

※アプリケーション名「test」「test_app」では作成できなかったため、
　おそらくアプリケーション名の重複が許されていないかと思います。
　重複していてもエラー表示が特に出ないため、要注意です。

https://qiita.com/pasta04/items/750d71d41e5edd12932b#new-twit

p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う

## はじめに
p5.js でのシェーダーを使った描画に、WebGL 2.0（GLSL ES 3.0）を使ってみたという話です。

以下に書いたページの情報を参考にやってみます。

### WEｂGL 1.0（GLSL ES 1.0）の場合の公式サンプル
以下は、WEｂGL 1.0（GLSL ES 1.0）の公式サンプルです。バーテックスシェーダーの処理の部分を参考にします。

●learn | p5.js
　https://p5js.org/learn/getting-started-in-webgl-shaders.html


### WEｂGL 2.0（GLSL ES 3.0）のシンプルなシェーダーのプログラムが書かれた記事
[WebGL2RenderingContext](https://developer.mozilla.org/en-

[Next.js14] Static RenderingとDynamic Rendering

# Static Rendering(静的レンダリング)

**Static RenderingはNext.jsにおけるデフォルトのサーバーレンダリング方法です。**

この場合、データはビルド時かリバリデート後にレンダリングされ、キャシュに保存されます。データベースを参照することなく、キャッシュされたデータを参照するのでサイトへのアクセスが高速になり、サーバー負荷の軽減にも繋がります。

しかし、ビルド時かリバリデート後でなければデータが反映されないため、頻繁に更新されるコンテンツには推奨されていません。

データのないUIや、更新の少ないドキュメントなどで利用するのが良さそうです。

# Dynamic Rendering(動的レンダリング)

Dynamic Renderingでは、ユーザーそれぞれのリクエスト時にレンダリングされます。

この場合、頻繁に更新されるデータをリアルタイムで取得できる他、ユーザーのアクションに基づいたデータの更新やCookie・URLパラメータなどのリクエスト時にのみ知ることのできる情報にアクセスできます。

Static Renderingはデフォ

JavaScript の for ループの代替え品

## この記事は？

JavaScript の Array において、「各要素に対してこうする」というコードを書く機会がしばしばあります。基本的な実装方法は、「要素数だけ `for` ループを回して処理」です。

しかし、`for` を用いずにそれを実現できるメソッドがあります。上手く使えると、コード量を削減し、より簡潔に記述することができます。

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

ただし、**可読性などの観点で、for のままのが良いシチュエーションもあるので注意。** 各要素に対して複雑な処理をするのであれば、`for` で書いた方が無難です。

## 前提知識 – アロー関数式

次の 3つの関数は、いずれも「引数を 2倍した値を返す」という動作で等価です。

“`js
function (e) {
return e*2;
}
“`

“`js
e => { return e*2; }
“`

“`js
// 関数の内容が retu

条件文の重複をinterfaceで解消する（「良いコード悪いコードで学ぶ設計入門」復習）

# 背景
「良いコード悪いコードで学ぶ設計入門」の復習用でTypeScriptで記述します。
今回は「条件文の重複をinterfaceで解消する」ことについてです。

車の基本仕様
| 項目 | 説明 |
| —- | —- |
| 名前 | 車の名前 |
| スピード | 車の速さ |
| 燃料の量 | 消費する燃料の量 |

車一覧
| 項目 | 説明 |
| —- | —- |
| 芝刈り機 | 速さは遅く、消費燃料の量は大きい |
| レースカー | 速さは速く、消費燃料の量は大きい |
| コンパクトカー | 速さは普通で、消費燃料の量は小さい |

# 悪いコード（同じ条件式のswich文が複数書かれていく）
“`ts
type CarType = “Lawnmower” | “RaceCar” | “CompactCar”;

class CarManager {
getName(carType: CarType) {
let name: string = “”;
switch (carType) {
case “Lawn

JavaScriptで配列をランダムで表示させたい

## はじめに
アンケートを取る機能において、ユーザーがチェックボックスの一番上の項目しかチェックしない問題に直面しました。改善策の一つとしてチェックボックスの項目をランダムに表示させるようします。本記事では、JavaScriptを使用してランダムに表示される方法を書いています。

## TL;DR
* Math.random() は0から1未満の浮動小数点数を生成する。
* Math.random() – 0.5 は-0.5から0.5までの浮動小数点数を生成する。
* Math.random() – 0.5 を使用することで、範囲指定のランダムな数値を得やすくなる。

## Math.random() とは
Math.random() メソッドは、0以上1未満のランダムな浮動小数点数を生成します。以下はその基本的な使い方です。

“`javascript:index.js
const random = Math.random(); // 0以上1未満のランダムな数値を生成
“`

## Math.random() – 0.5 の使い方
Math.random() – 0.5 を使

ReactアプリでAnt Designを試してみた

# やりたいこと
・JavaScriptでReactアプリを作る
・アリババ社のCSSフレームワークであるAnt Designを導入する

# ①Reactアプリを作る
まず、Reactアプリを構築

“`
npx create-react-app react-app
“`
すると、react-appというフォルダが作られ、フォルダへcdしてください

“`
cd react-app
“`
Reactアプリに必要なモジュールが自動で入れられ、package.jsonがこんな感じ

“`ruby:package.json
{
“name”: “react-app”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@testing-library/jest-dom”: “^5.17.0”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^13.5.0”,
“react”: “^

React のフック

# 1. React Hookの基本

**「ReactのHookとは何か、なぜHookが導入されたのか？」**

**具体的な使用例**:
たとえば、ToDoリストアプリを構築しているとします。Hookが導入される前では、ToDoリストの状態を保存するためにクラスコンポーネントを使用する必要がありました。Hookの導入により、`useState`を利用したよりシンプルな関数コンポーネントで同じ機能を実現できるようになりました。

## Hook導入前：クラスコンポーネントの利用

Hookが登場する前は、コンポーネント内で状態を利用したい場合、通常クラスコンポーネントを使用していました。以下に、クラスコンポーネントを使用してToDoリストを実装する例を示します。

### **核心的な概念**:

1. **状態(state)** は **`this.state`** で定義され、それはオブジェクトです。
2. **状態の更新** は **`this.setState()`** メソッドを使用して行われます。
3. コンポーネントの振る舞い（ユーザー入力の処理やフォームの送信など）は

TypeScriptでメソッドチェーンを使って与えた文字列を次々に変換する方法

こちらの記事のコードを少し変えて、[文字列を変換する関数]を引数にとるメソッドを用いてメソッドチェーンを実現する方法を考えました

https://qiita.com/takahasinaoki/items/1dd0017c5c44819874d6

“`typescript
class StringManipulator {
private value: string;
constructor(input: string) {
this.value = input;
}
toString(): string {
return this.value;
}
// [文字列を変換する関数]を引数にとるメソッド
changeString(fn: (str: string) => string): this {
this.value = fn(this.value);
return this;
}
}
“`

実行例
“`typescript
class StringManipulator {
private value

JavaScript: CompressionStreamを記る!

またつまらぬものを記ってしまったかどうかは定かではないかもしれませんが、browserで組み込み圧縮伸長関数が実装されているので紹介します。その実態はdeflateとその包括形式であるgzipとなります。非常に高速ですが地味に使いにくく、圧縮加減も指定できないという、とても素晴らしい仕様となっております。
まずどう不便かと言うとObjectを複数作る必要がある点と、Promiseを経由する必要がある点です。面倒臭い仕様と言わざるを得ません。単純に書くと以下のようになります。
“`js
(async()=>{
var c=new CompressionStream(“gzip”),//”deflate”も可
w=c.writable.getWriter();
//圧縮したいArrayBufferを渡す
w.write(new Uint8Array([84,104,97,116,32,116,104,97,116,32]));
//追加も可
w.write(new Uint8Array([105,115,32,105,115,32,116,104,97,116,32,116,

ReactのJSX記法についてまとめてみる

https://ja.react.dev/learn

# JSXとは
Reactで使用する構文。

# データの表示

`{}`で囲むことによって変数を扱える
“`javascript
return (

{user.name}

);
“`
属性の中にも使える
“`javascript
return (

);
“`

# 条件付きレンダー
“`javascript

{変数(bool) ? (
< trueだった時のコンポーネント />
) : (
< falseだった時のコンポーネント />
)}

// 使用例

{isLoggedIn ? (

) : (

)}

“`
まず`{}`を書き、
条件とする変数を書く。
`?`を記載。
`()`で表示したいコンポ