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

30歳業界完全未経験が案件参画しました。

新卒から務めた業界大手整体サロンを辞め、完全未経験のIT企業に転職しました。
そんな私が案件参画まで何をしたのか、どんな会社で勤めているのかなどを書いていきます。

## 私について
– 学歴：某体育大学卒業
– 職歴：業界大手整体サロンへ入社 6年間勤務したのちに現在のIT企業へ転職
– 転職理由：整体業界のDX化に貢献したいと思い転職を決意
– プログラミング経験：なし、転職後に社内のカリキュラムを履修
– 現在は：某大手企業のコーポレートサイトの改修にフロント側で携わっています

## 現在の会社へ入社してから今まで
転職活動は、現在勤めている会社と同じような会社を数社受けました。
内容としては、【未経験からでも挑戦ができる】【社内のカリキュラム制度が充実している】【一般稼働をしながら勉強ができる】といった会社です。
現在の会社に入社を決めたのは、単純に面接官が自分のやりたいことに対して共感し、そうなるための道筋や入社後何ができるのかを詳しく丁寧に伝えてくださったことです。
あとは、コワーキングスペースを展開している会社なので、勉強をするのに良い環境と感じたからです。

###

ChatGPTと一緒にJavaScriptをゼロから勉強する記録【JSの基礎】#01

# はじめに
こんにちは。web開発未経験からwebアプリケーションエンジニアになるため、勉強を始めようと思い記事にいたします。
私のこれまでの経験はC言語を嗜む程度であり、コンピュータサイエンスに関する知識がゼロのところからのスタートとなりますので暖かく見守っていただけると幸いです。最終的にはReact、Next.jsとモダンなweb開発?へと繋げていけたらと思います。また、初学者の方は、私の記事と一緒に勉強していけたらと思います。
よろしくお願いいたします！

# 1.変数
どの言語でもそうですが、変数を宣言してあげる必要がありそうです。
“`javascript
var name = ‘Kenta’;
let age = 30;
const country = ‘Japan’;
“`
`v

【DAY23】Loading画面の作成

## はじめに
Webアプリケーションを作成したのですが、画像を表示する時などのロード時間が気になりました。そこで、ローディング画面を作成し、ロード中であることが視覚的に分かりやすくしようと考えました。
ローディング画面実装に、以下のサイトを使用しました。
https://loading.io/
また、以下の本を参考にしました。
[1冊ですべて身につくJavaScript入門講座](https://www.amazon.co.jp/%E3%80%90Amazon-co-jp-%E9%99%90%E5%AE%9A%E3%80%911%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-DL%E7%89%B9%E5%85%B8-JavaScript%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88-%EF%BC%91%E5%86%8A

Expressでjoiを使ってバリデーションを実装する

前回の記事では、Reactでバリデーションを実装してみました。

https://qiita.com/ngq299/items/47fbe64bd7201dc01a66

今回は、バックエンドでExpressにおいてJoiライブラリを使ったバリデーションの実装をしてみたいと思います。

### Joiライブラリの基本的な使い方

Joiライブラリは、データのバリデーションを簡単かつ強力に行うことができるツールです。
Joiのドキュメントを参照して、基本的な使い方を見てみます。

https://joi.dev/api/?v=17.13.3

まず、Joiライブラリを下記コマンドでインストールします。

“`
npm i joi
“`

下記コードを作成します。

“`javascript:index.js
const Joi = require(‘joi’)

const schema = Joi.object({
name: Joi.string().required(),
age: Joi.number().min(0),
location: Joi.string

時間を巻き戻す await の魔法

[Promise と async function の 同期実行される範囲について #JavaScript – Qiita](https://qiita.com/juner/items/f433aed166b25a4069c2)
↑この @juner さんの記事にインスパイアされました。

### 問題

このコードを実行すると、コンソールにどのように出力されるでしょうか。

“`js
let x = 0;
(async () => {
console.log(x)
console.log(await (x++))
console.log(x)
})()
console.log(x)
“`

回答折りたたみ

### 回答

“`
0
1
0
1
“`

インクリメントした`x`の値が巻き戻ってる？！

### たねあかし

処理順がこうなっているのが原因です。

“`js
let x = 0;
(async () => {
console.log(x) // — 1

テスト向けのjavascriptスクリプトを入力すると実行するサイトです。

# はじめに
javascript、jqueryのスクリプトをテキストエリアへ入力して、OKボタンを押すと実行して、結果を確認できるシンプルなサイトです。
スクリプトの初心者向けに利用していたたければ、うれしいです。シンプルなコードであれば、実行して確認できます。デフォルトのコードがあらかじめ、セットしてありますので、OKボタンを押すと、確認できます。
サンプルのように、jqueryでも動作します。

# サイトリンク
[https://favorite.tecoyan.net/slim/testGenerator.php](https://favorite.tecoyan.net/slim/testGenerator.php)

# サンプルコード
webサイトの作成で、コードの確認をしたいときにすぐに利用できます。
一般的には、ネットにあるサンプルコードを確認したいときは、自前のサーバにテストページをつくってから実行して確認します。その手間を省くことができます。ただし、現状は、複雑なコードは確認していません。あくまでもスクリプトコードのみです。静的なhtmlタグを直接入力すること

カーソルストーカーを表示する

カーソルストーカーを表示するためにChatGptで勉強した結果このようになりました。
追加分だけを記述します。
“`App.jsx

“`
“`App.css
.custom-cursor {
position: absolute;
width: 20px;
height: 20px;
background-color: red; /* カーソルの色を赤に設定 */
border-radius: 50%; /* 丸いカーソルを作成 */
pointer-events: none;
transform: translate(-50

illustratorCC2024プラグインでダイアログを使う

Adobe illustrator CCでダイアログを使う場合inDesignと挙動が違ったためメモ。

## 参考
– [InDesign CC 2024 プラグインでダイアログを使う](https://qiita.com/mzone/items/3b206358fdfdab61eed9)

## 環境
– illustratorCC(2024)
– Visual Studio Code
– plugin: [ExtendScript Debugger v2.0.3](https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug)

## ダイアログに入力項目を入れておく場合

inDesignとの違いは、`textEditboxes`が出てこない、`add`関数を使うなど、全く違ってしまった（両方共通の方法があるかもしれませんが、今回見つけられませんでした）

“`js
// 実施したい処理
function run(inPutText) {
alert(inPutText

ウェブカメラの映像にリアルタイムでモザイクをかけて重要な情報を保護するゲーム。



### ウェブカメラの映像にリアルタイムでモザイクをかけ、スライダーでモザイクの大きさを調整することができます。

モザイク処理とは、画像の一部をぼかしたり、小さなブロックに分割してその平均色で置き換える処理です。
スライダーでブロックサイズ（モザイクの解像度）を調整できます。

“`html

[Javascript入門した]tsconfig.jsonについて

## このページについて
私個人の備忘録シリーズです.
体系的な解説ではないので悪しからず.

## tsconfig.jsonとは
tsconfig.jsonは、Typescriptプロジェクトで使用される設定ファイルで、Typescriptコンパイラがどのようにコードをコンパイルするかを記載したファイル.

## 主な役割
– コンパイル対象の指定
どのTypescriptファイル（.ts）をコンパイルするかを指定できる.
– コンパイラオプションの設定
どのバージョンのJavascriptにコンパイルするかや、型チェックの厳しさを調整するなどの、コンパイル時の動作について詳細に設定できる.

## 主な要素
– compilerOptions

コンパイラの動作を制御するオプションの指定
“`
“compilerOptions”: {
“target”: “es5”, // どのバージョンのJavaScriptにコンパイルするか
“module”: “commonjs”, // モジュールシステムの指定（例:

Node.jsって何？どうやって使うの？

# Node.jsについて調べてみた
今回、アプリケーション開発にあたりNode.jsを使用することになったので
Node.jsについて調べてみました。

## Node.jsとは

Node.jsとはJavascriptの実行環境です。
Webアプリケーションのバックエンドを制御するため、
HTTPリクエストを処理することが主な仕事のひとつです。

## 使い方について
**1.Node.jsをインストール**

まず、以下のリンクからNode.jsをインストールします。

https://nodejs.org/en

**2.プロジェクトの初期化**

今回はappディレクトリを作成し、移動します。
“`
$mkdir app
$cd app
“`

その後、以下のコマンドを実行します。
“`
$ npm init
“`
このコマンド実行後、package.jsonというファイルが作成されます。

**3.アプリケーションファイルの作成**

javascriptを使用し、app.jsという名前のアプリケーションファイルを用意します。

**4.アプリケーション実行**

昔作った自作サイトをリニューアルしたい(part1)

## はじめに

どうも、豆腐メンタルです。(いつもの挨拶)
最近ブログも学習も止まり気味だったので、そろそろ何か書こうと、学習しようと思い
重い腰を上げて学習を再開しようと思った次第です。

しかし、何かいい感じに練習できるものはないか?
基本的に学習はUdemyで講座を受けて、学習…という感じだったのですが
どちらかというとインプットに比重を置きすぎていて、アウトプットをできていたかというと
正直できてなかったと…

じゃあ、１からまたアプリを作るか~となれたらいいんですけど、まあ残念ながらズボラな自分はそこまで踏み切れないところあるので(開き直り)
「なんか学習したことをアウトプットできる場所ないかな〜」とPCで睨めっこしていた時に

**突如、電流が走る…!!**

「そういえば、就職活動の時に作っていた自作サイトあったな…あれを学習で使えないだろうか」と…

というわけで、思いつきで企画が始まりました。
今後、学習した内容をアウトプットする目的で過去に作った自作サイトを活用していきます。

学習した技術だったり、備忘録を残していければと思います。

##

Promise と async function の 同期実行される範囲について

# Promise も async function も 同期実行される範囲があります。

これを実行したらどう実行されるかわかりますでしょうか？

“`js
console.log(‘1’);
new Promise(resolve => {
console.log(‘2’);
resolve();
});
console.log(‘3’);
“`

これを実行したらどう実行されるかわかりますでしょうか？

“`js
console.log(‘1’);
(async function() {
console.log(‘2’);
})();
console.log(‘3’);
“`

答えは

“`text
1
2
3
“`
です。

なぜなら
– Promise コンストラクタは同期実行されるから
– async await に於いて、非同期になるのは await されたときから

だからです

とりあえず同期で動いてほしくないならこれでいいです。

“`js
console.log(‘1’);
Promise.resolve()
.then(()

DOMContentLoadedとloadの違いについて

# 発火するタイミングが違う

`DOMcontentLoaded`は HTML が全て読み込まれた時点で発火します。
`load`はページ全体（CSS や JS ファイル、外部リソースなども含む）の読み込みが完了した時点で発火する。

という違いあるようです。

# 使い分け

`DOMcontentLoaded`は、ボタンなどにイベントリスナーを追加したい場合に使用するなど。画面上に要素が存在しているので、仮にスタイルがあたっていなくても、ユーザーのリクエストに応じて、反応するようにするため。

`load`は、画像のスライダーなどに用いると良いようです。画像は非同期的に読み込まれるため、全てが読み込まれた時点で発火する`load`が適しています。

# まとめ

普段何気なく使用していたイベントですが、しっかりと違いなどを気にかけることは大事だと改めて気が付くことができました！

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

# 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