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

パソコンが熱々になっても気づかないので炎を出してみた

# PCで作業をしている傍らで炎が出るデスクトップアプリ
こんな演出をつくってみました。温度が上がるほど炎が激しくなります。


デスクトップの左下に表示させました。

**PCが火傷しそうなくらい熱くなる時はありませんか？** 気づいた時にはPCを冷やすようにしていますが、作業に集中しているときは気づかないこともあります。そこで、PCの温度が高いと炎の大きさで知らせるアプリをつくりました

温度はこのようにセンサーがPCの熱を持つ部分に設置します。ベタ付けです！
![IMG_20241001_

音声コマンドに基づくカラフルなパーティクルシステムの実装

論文風の解説: 音声コマンドに基づくカラフルなパーティクルシステムの実装
概要
本研究では、音声コマンドをトリガーとして、視覚的に魅力的なカラフルなパーティクルシステムを生成するウェブアプリケーションの設計および実装について述べる。音声認識技術とCSSアニメーションを用いて、音声コマンド「hello」に応答して、画面中央からランダムな方向に向かって噴出するパーティクルを表示するシステムを構築した。

音声認識の設定
音声認識には、Web Speech APIを用いて、ブラウザ上で音声コマンドをリアルタイムで認識する。音声認識の初期設定において、以下のパラメータが設定されている：
recognition.lang : ‘en-US’（英語の音声コマンドを認識）
recognition.interimResults : false（最終的な認識結果のみを取得）
recognition.continuous : true（[音声認識を継続的に行う](https://daynghekimhoan.weebly.com/blog/vang-hong-la-gi-nhung-thac-mac-ph

【Javascript】テンプレートリテラル（テンプレート文字列）

# 文字列の中に式や変数を埋め込むことができる
“`ruby:書き方
var name = “ペンギン”;
var age = 30;

console.log(“こんにちは。私は” + name + “です。” + age + “歳です。”);

↓

console.log(`こんにちは。私は${name}です。${age}歳です。`);
“`
“`
こんにちは。私はペンギンです。30歳です。
“`

# 改行文字がそのまま改行として扱われる
“`ruby:書き方
var msg = `こんにちは。
私はペンギンです。
30歳です。`;

console.log(msg);
“`
“`
こんにちは。
私はペンギンです。
30歳です。
“`

フェーズドアレーレーダーの原理。ステレオスピーカーを用いた擬似的な音のビーム形成のゲームです。

### ステレオスピーカーを用いた擬似的な音のビーム形成


フェーズドアレーレーダーの基本的な原理のゲームです。

このコードでできること：
スピーカーから音波をビーム状に発射する擬似シミュレーションを体験できます。
位相差に基づいてビームの方向が変化し、その方向がリアルタイムでキャンバスに描画されます。
マイクで取得した反射音をスペクトログラムとして表示し、音波の反射状況を視覚的に確認できます。

コードの概要：
音波ビームの擬似形成：左右のスピーカーに位相差を持たせることで、音のビームを擬似的に形成します。Math.sin() 関数を使って、時間とともに音の位相を変化させ、音波ビームの方向を変更します。
反射音の検知：マイクからの音声入力を取得し、AnalyserNode を使って周波数デー

体を動かすとモーションに応じて音が変わるゲーム。

### ウェブカメラで体を動かすと音が生成され、そのモーションに応じて音が変わります。

ページを開くと「Start」というボタンが表示されます。
ボタンをクリックすると、音声の生成が開始され、PoseNetが動作を開始します。

手の高さによって音の周波数が変わり、手の位置が低いほど低い音、位置が高いほど高い音になります。
手の位置が画面の下に近いほど音が大きくなり、上に近いほど音が小さくなります。


“`html

【p5.js】p5.sound の getSources() を使って複数のマイク入力のリストをシンプルに出力

タイトル通り [p5.sound](https://github.com/processing/p5.sound.js) を使った内容です。

前に書いた以下の記事でも、今回と似たようなことをやっていました。
その際、p5.js Web Editor・p5.js を使ったものの、マイク入力の取得は JavaScript の「[MediaDevices: enumerateDevices() メソッド](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/enumerateDevices)」を使っていました。

●PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices） – Qiita
　https://qiita.com/youtoy/items/8339313b561c503ffe39

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

【Cypressコンポーネントテスト】Object.assign を使ってVueのprops.dataを上書きする

Cypressのコンポーネントテストで、テストごとに props.data の値を変えてVueコンポーネントをmountする時、値の変わらない props.data も都度追加するのが手間だったので、良い感じにマージ出来ないか調べた際の備忘録です。

| package | version |
| ——- | ——- |
| cypress | 13.7.1 |
| vue | 3.2.47 |

### コンポーネントテストの下準備

#### まず mount する vue ファイルを importし、

“`javascript
import Page1 from “@/views/Page1.vue”;
“`

#### props に渡す data を定義し、 `cy.mount` でコンポーネントをマウントする。

参考: https://docs.cypress.io/api/commands/mount

“`javascript
const optionsDefault = {
props: {
userId: 1,
hog

[JavaScript] ライブラリなしで配列操作の遅延評価ができる（予定）

JavaScriptの言語仕様に新しく追加される予定の「Iterator Helpers」について解説します。

# Iterator Helpers Proposalについて

JavaScriptの言語仕様に、イテレータを操作するための便利なメソッドを追加しようという提案です。
2024年9月現在Stage3であり、**今のところまだ全てのブラウザやランタイムで利用できるわけではありません。**

https://github.com/tc39/proposal-iterator-helpers

この機能を使うと、配列操作を遅延評価することができます。

# 配列操作の遅延評価とは

従来のJavaScriptの配列操作関数では、メソッドを呼び出した瞬間に配列操作が走っていました。

“`ts:従来の配列操作
// .map()を呼び出すと、即時関数で渡した関数がすぐに実行され、結果の配列が作成される
const result = [0, 1, 2]
.map(val => val + 1)
.map(val => val ** 2);
“`

“`merm

「npm i」と「npm ci」の違いについて簡単にまとめ

# はじめに
Node.jsの世界で開発をしていると、避けて通れないのがnpm（Node Package Manager）です。npmは、JavaScriptのパッケージ管理ツールとして広く使われており、プロジェクトの依存関係を管理する上で欠かせない存在です。
特に`npm install`コマンドは、エンジニアであれば馴染み深いコマンドかと思います。
今回は`npm install`(npm i)コマンドと似ている`npm ci`コマンドについて記事にしました。

# `npm i`とは
`npm i`は`npm install`の略称で、Node.jsプロジェクトの依存関係をインストールするためのコマンドです。
`npm i`は、`npm install`の略称として機能します。
また、`npm i <パッケージ名>`のように特定のパッケージをインストールすることも可能です。
“`
$ npm i
“`
コマンド実行をすると、`package.json`ファイルを読み込み、必要なパッケージを`node_modules`ディレクトリにインストールします。

# `npm ci`と

React入門メモ

初投稿です。
以下Udemy講座用のメモ書きとして残します。

###### モダンJavaScriptの基礎から始める挫折しないためのReact入門

https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=24T4MT92724B

## セクション3 ReactやVue等を使うために知っておきたいJavaScriptの基本
### 1. DOMとは。
* HTMLを木構造で解釈したものであり、HTMLと同じ意味である。
* 従来のDOM操作として、以下のように素のDOMに対して直接操作していた
“`javascript:test.js
$(‘ul > li:first-child’).remove();
“`

### 2. 仮想DOMとは
* JavaScriptのオブジェクトで仮想的に作られたDOM
* JS上で仮想DOMの操作により差分を出し、変更部分のみDOMへ反映する
* 変更差分が出せるようになったため、レンダリングの複雑さが楽になりパフォーマンスが向上した。

##

右クリック禁止とmouseover

## 毎日javascriptを学習します

コピペですが
本日のテーマは、

mouseover
mouseleave
右クリック禁止

“`html

```

しかし、、、ページを読み込むとコンソールに以下のエラーが出てしまいました。

```
Uncaught ReferenceError: Sample is not defined
```

ReferenceError、、、Sampleなんてのは見つからないと、、、
完全にJa

Remix SPA modeでMUIを使用するとビルド時にエラーになる件

# 環境
* pc: MacBookAir 2020 intel model 16gb
* "vite": "^5.1.0"
* "remix": "^2.12.1"

参考までに上記はpackage.jsonから抜粋

# ビルド時に発生するエラー原因
viteが自動的に依存関係を最適化する過程で、特定のライブラリを外部化してしまうとエラーが発生するようです。
回避方法はvite.config.tsにnoExternalを追加してエラー原因となるものを明示的に【外部化しない】という指示を追記してあげることで回避できます。

Next.jsではこういったものが必要ありませんでしたが、Remix(vite)を使用していく過程でやはり細かな部分は違いがあるようです。

## MUIとの相性
悪いですね〜。
使うことができないわけではないんですが、こういったエラーの他にSPA modeを使用するとアイコン系でもエラーがでました。
今回はnoExtarnalに追記する方法を記載しましたが、import で各コンポーネントでそのまま@mui/icons-materialを使用するとエラーとな

ReactでオシャレなプロフィールWebサイトを作成してみた【初心者向け】

# はじめに

こんにちは！今回は、**React**を使って簡単かつオシャレなプロフィールWebサイトを作成する方法をご紹介します。プロフィールサイトを手軽に作りたい方や、Reactを使ってみたい初心者の方に向けた内容です。

## 使用技術
- **React**
- **styled-components**（CSS-in-JSで簡単にスタイルを適用）
- **Node.js**（Reactアプリの作成）

---

## 完成イメージ

## プロジェクトの作成手順

まずは、Reactアプリを作成していきます。

### 1. Reactプロジェクトのセットアップ
```bash
npx create-react-app profile-website
cd profile-website