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

モダンJavaScriptの基本

## React学習にあたって最低限抑えておきたい基本JS
“`ruby:qiita.rb
puts ‘The best way to log and share programmers knowledge.’
“`

#### 1\. 変数宣言
① `var` : 再代入○ 再宣言○
② `let` : 再代入○ 再宣言×
③ `const` : 再代入× 再宣言×

##### `const`の特性
・ほとんど`const`しか使わない
・オブジェクト型/配列型はプロパティの変更が可能
“`ruby:qiita.rb
const val1 = {
name: “ナオキ”,
age: 22,
};
val1.name = “naoki”;
val1.address = “Sapporo”;
console.log(val1);

const val2 = [“cat”, “dog”];
val2[0] = “bird”;
val2.push(“mo

命令型プログラミングと宣言型プログラミングの違いをまとめてみた

Reactを学び始めたときに、「JSは命令型プログラミングなのに対し、Reactは宣言型プログラミングです。」という説明を受けてもピンとこなかったので、もう少し噛み砕いてみることにしました。

### 命令型と宣言型の違いをピザ:pizza:で例えると？
イメージがつきやすいように、料理に例えてみましょう。

**命令型プログラミングを例えると**
– シェフにピザの作り方を手順ごとに指示するようなものです。生地を作り、ソースを塗り、チーズを載せ、オーブンで焼くまで、**すべてのステップを詳細に伝えます**。

**宣言型プログラミングを例えると**
– **ピザを注文するようなもの**です。何を食べたいかだけを伝え、具体的な作り方はシェフに任せます。シェフはその指示に従って、最適な方法でピザを作ってくれます。
![declar

React入門のためにJavaScriptの基礎を学び直した

## Reactを学びたい動機
こんにちは。私は普段RubyやRailsでのバックエンド開発をメインに行っています。
昨今の流れとして、バックエンドはRailsのAPIモードで用意して、フロントエンドはReactやNextJS で記述するといった構成が増えていると思います。
私は常々Reactも使いこなせるようになりたい！とは思いつつも、JavaScriptの理解が不十分だったこともあり、いざReact構文に触れても、そもそも意味がよくわからないといったことが多かったように思います。
そこでReactを勉強していくうえで必要最低限のJavaScriptを勉強してからReactを触っていこうと思いました。
この記事はそれらを端的にまとめたものです。

## JavaScript基礎
以下雑多に必要そうだと思ったことを書き連ねています。
JavaScriptのバージョンはES6想定です。

### const で定義されている中身の値は書き換え可能

“`js

const val5 = [“dog”, “cat”];
val5[0] = “bird”;
val5.push(“monk

javascriptで表示と非表示

“` html

google

google

非表示

yahoo

yahoo
非表示

ibm

ブラウザでAWS IoTのMQTTブローカーを署名バージョン4認証で購読する

# 概要

Firefoxなどのブラウザを用いてAWS IoTのMQTTブローカーに接続します。ブラウザからの接続の場合、WebSocketでの接続になります。AWS IoT Coreデベロッパーガイドの[デバイス通信プロトコル](https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/protocols.html)の表によるとMQTT over WebSocketはPublisおよびSubscribeに対応しており、認証方法は署名V4(SigV4)とカスタム認証を使うことになっています。

> |プロトコル|オペレーション|認証|ポート|
> |:–|:–|:–|:–|
> |MQTT over WebSocket|発行, 購読|署名V4|443|
> |MQTT over WebSocket|発行, 購読|カスタム認証|443|

https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/protocols.html

独自の認証を使いたい場合はLa

[p5.js]VSCodeとp5.jsの開発環境 #1

[Cursor](https://www.cursor.com/) or [Visual Studioc Code(VSCode）]()で、[p5.js](https://p5js.org/)をコーディングする開発環境の作り方。

p5.jsは、”p5.js Web Editor”でコーディングするのが定番ですが、VSCodeでコーディングした方が断然便利ですので、こちらで進めてみます。今回は、JavaScriptを使ったとてもVanila（デフォルト、プレーン）な環境をつくります。

# 拡張機能
p5.jsをコーディングするのに便利な機能拡張をインストールします

### 定番 の拡張機能
– Live Server
– HTMLとJSを自動的にリロード（ホットリロード）してくれて、更新を確認しやすくなります
– Prettier – Code formatter
– コードを自動的に整形。きれいなコードを保てます

### for p5.js
いくつかp5.js向けの機能拡張がありますが、ここではこちらの3点を紹介します。どちらかをインストール。
– p5.vs

【JavaScript】 ISO 8601形式 から年月日時分秒を取得する

1999-12-31T15:00:00.000Z という日付文字列の Z は、ISO 8601 形式で表された日時における「Zulu Time」の略で、協定世界時 (UTC: Coordinated Universal Time) を示している.
これを日本時間で取得してみよう.

“`js:test.js
const date = new Date(‘1999-12-31T15:00:00.000Z’);

// タイムゾーンを確認
const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(‘タイムゾーン: ‘, timeZone);

// JST に変換してから年・月・日を取得
const localYear = date.getFullYear(); // JST 基準の年を取得
const localMonth = date.getMonth() + 1; // JST 基準の月を取得 (0-based なので+1)
const localDay = date.getDat

【React】onClickで複数の関数を実行する方法

# はじめに
私は現在、Reactを使用して開発を行っています。今回は、onClickで複数の関数を実行したい場合にどのように実装すれば良いのか悩んだため、その解決方法を紹介します。

# 実装方法
今回、Chakra UIを使ってボタンを作成しており、onClickにonClickAddTodoとonOpenの2つの処理を追加したいと思っていました。（最終的には、この処理は不要になり、1つの関数にまとまりましたが、経緯を説明します。）

最初に書いていたコードは以下のようなものでした。onClickに対して関数を2つ渡せば動作するだろうと考えていたのですが、これではうまく動きませんでした。
“`react

登録

“`

そこで、下記のように修正しました。

“`react
{ onOpen(); onClickAddTodo(); }}>
登録

How to show React API Data

import { useEffect, useState } from ‘react’
import reactLogo from ‘./assets/react.svg’
import viteLogo from ‘/vite.svg’
import ‘./App.css’

function App() {
const [user, setUser] = useState([])
const [ageValue,setAgeValue] =useState(”)
const url = ‘https://dummyjson.com/products’;
// const url = ‘https://dummyapi.online/api/movies’;

const updateAgeValue = (e) => {
console.log(e.target.value)
setAgeValue(e.target.value)
}

async function fetchApi(url) {
const res = aw

視線を利用して、青い丸をコントロールするゲーム。


### 視線(実際には顔の動きの検出なので頭を大きく動かして青丸をコントロールです。)を利用して、青い丸をコントロールするゲーム。

### このアイデアでは、赤い点の位置の変化（速度）に基づいて青い丸の位置を制御し、視線を利用した操作のシミュレーションを行います。

コードでは、青い丸の位置を赤い点の動き（速度）に応じて変化させるために、次の手順を実装します：

赤い点の動きを検出: 顔の動きから計算された赤い点の座標を使用します。
速度の計算: 前の赤い点の位置から現在の位置の変化量を使って速度を求めます。
青い丸の加速度に変換: この速度を使って青い丸の位置を加速度的に更新します。

#### 論文風の解説。
1. はじめに
本研究では、視線の動きを利用したインタラクティブなユーザーインターフェースの開発を目的とし、ウェブカメラ

axious エラーハンドリングについて考える

今回対象となるコード
“`typescript
const handleSubmit = async(event : React.FormEvent) => {
event.preventDefault();
setFieldErrors({});
try {
const response = await axios.post(‘http://localhost:4000/signUp’, formData);
console.log(“this is response of form” , response);
console.log(“response is received”);
setFormData({
username : “”,
password : “”,
retypePassword : “”
});
} catch (error) {
//ここのエラーハンドリングについて考える。
//またフ

【JavaScript】ABC371まとめ（A~E）

AtCoder Beginner Contest 371

https://atcoder.jp/contests/abc371

A~Eの5完（97分）でした。
1155perfでレートは703->758（+55）です。
この記事ではA~E問題についてまとめます。

# A – Jiro
https://atcoder.jp/contests/abc371/tasks/abc371_a

コンテスト中のACコードを少し改良した解法を記載します。
まず、$i={0,1,2}$をそれぞれ${A,B,C}$と対応させます。次に、他の兄弟と比較した結果年上であった回数を記録する$\text{win}=[0,0,0]$を用意します。
例えば、1つ目の比較$S_{AB}$が「<」であれば、$\text{win}=[0,1,0]$となり、「>」であれば$\text{win}=[1,0,0]$となります。
これを全ての比較に対して実行すると、本問では必ず年齢の異なる長男、次男、三男であることが保証されているため、$\text{win}$配列は必ず$0,1,2$をそれぞれ一つずつ持ちます。次男はこのう

電卓を作りながら勉強ー1

お疲れ様です。

JavaScriptを使って、まずは簡単に作れるものはないか探していたところ、今日偶然にも私用で使う電卓を購入したことを思い出し、「電卓作ってみよう！」ということで、考え方を検索:computer:

いろいろと見てきましたが、要素の意味なども説明してくださっている [@bumpfuji10様](https://qiita.com/bumpfuji10/items/2b9470667530f67696ca) の記事を見て、分かりやすそうと思いましたので、分からないところは調べて理解しつつ、進めていこうと思います！
**※bumpfuji10様のページ内でも書かれてあることですが、[ウェブカツブログ様](https://webukatu.com/wordpress/blog/27277/)のコードを元にbumpfuji10様なりの解釈で書かれたコードとなっております。これを盗用し私発信とすることが目的では一切ございません。気になる方はぜひ上記ページをご覧ください！**

まずは進捗です。

JavaScript　初心者落書き(全く正しくありません)　オブジェクト志向

# クラス
“クラス｛
コンストラクター(○○){this.プロパティ = ○○}
メソッド
｝“
で設計図を作る

new クラス()；でインスタンス化

## プロパティに値を渡す方法
“クラス｛
コンストラクター(値){this.プロパティ＝値}
メソッド
｝“

new クラス(値)；

# コンストラクター
クラスをインスタンス化するためのメソッド
インスタンス化:オブジェクトのプロパティに値を渡してあげる

# 継承:クラスを進化させる
親クラスをスーパークラス、子クラスをサブクラスと呼ぶこともある

## プロパティやメソッドの追加
“継承先クラス　extends 元クラス{
コンストラクター(新引数){this.新プロパティ＝〇〇}
新メソッド
｝“

## プロパティのオーバーライド
“継承先クラス　extends 元クラス{
コンストラクター(新引数、旧引数){super();
this.オーバーライドしたいプロパティ=××;}
｝“

## メソッドのオーバーライド
“継承先クラス　extends 元クラス{
コンストラクター(){s

forEachでawaitを使おうとしたら怒られた

# はじめに
forEachでawaitを使おうとしたら、エラーになり、どうやったらループでawaitを使えるか調べたので、簡単に記載します。

# await とは？
awaitは非同期処理が終わるまで処理を止めておいてくれる便利なもの
jsはawaitやpromiseを使わないと、処理が終わる前に他の処理を実行してしまうので、直列に処理を実行したいときなどは利用すると良い

“` js
// 非同期関数
async function asyncTask(name) {
console.log(`Task ${name} started.`);
await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒間スリープ
console.log(`Task ${name} completed.`);
}

// メイン処理
async function main() {
console.log(“Main started.”);

// `await`を使って非同期処理を待つ

p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示

以下の記事にも書いた「YouTube の IFrame Player API」と「p5.js」を組み合わせてみた話の続きです。

●YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す
　https://qiita.com/youtoy/items/90b1ad79291a826aff2b

今回、お試しで実現した内容は以下です（先々月にやっていたけど、記事には書いてなかった…）。

https://x.com/youtoy/status/1817011942491586930

YouTube動画を再生したり停止させたりすると、上記での YouTube動画の真下あたりで「Current Time」と書いてある部分に、動画の再生位置の時間が表示されます。

## 実装した内容
p5.js Web Editor上で実装したコード全体は、以下のとおりです。

基本的な部分（主に setup()内の処理）は、[前回の記事の内容](https://qiita.com/youtoy/items/90b1ad7

nandだけで、xorを作ってみる。

# 概要
nandだけで、xorを作ってみる。

# not


# and


# or


# nor

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

CodeWars オススメ問題 #3【超入門編】

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/56dec885c54a926dcd001095/solutions/javascript

### 例
`number`を与えるので、`-number`を返せ、という問題です。

“`
1: -1
14: -14
-34: 34
“`
### 難易度
分類は 8kyu です。
– アルゴリズム問題の作法を知りたい
– JavaScriptに初めて触れる

という方にちょうどいいと思います。

# オススメの回答
「評価が

SJISからUTF8に変換(GAS)

前職にて、「csvが文字化けしてスプレッドシートで見れない！」と問い合わせが来ました。よくよく話を聞いてみたら、「古いシステムから吐き出されたcsvをGoogle Driveにアップロードし、中身を見たら文字化けしている。」とのことでした。ということで今回はSJISのファイルをUTF8に変換する関数のご紹介です。そもそも古いシステムを新しくした方が良いかもしれませんが、それまでの応急処置にどうぞ！
# コード
こちらの関数に引数としてSJISの文字列を渡せば、UTF-8の文字列が返ってきます。
“`javascript
/**
* 受け取ったSJISの文字列をUTF-8の文字列に変換します。
* @param {String} shiftJISString SJISの文字列
* @return {String} UTF-8の文字列
*/
function convertBlobsTextEncodingFromSjisToUtf8(shiftJISString) {
return Utilities.newBlob(shiftJ

JavaScript　初心者落書き(全く正しくありません)

あくまでイメージです

# コールスタック
同期処理タスクの待ち行列
# スタックキュー
非同期処理の待ち行列。ここにいるタスクはコールスタックが空になればタスクキューからコールスタックに戻ってくる。

# setTimeout
setTimeout(cb, 時間）で表す。中の処理は実行時にスタックキューに送られ、時間後にコールスタックに戻ってくる。

# promise()
– new promise((resolve,reject) =>{});
– 中の処理が完了しているならresolve,完了しないならreject状態になる。
また、resolve(),reject()の関数で状態を変更できる。
– resolve状態ならthenメソッドに、reject状態ならcatchメソッドに進む。
– catchが実行されたらpromiseはresolve状態となる
– thenメソッドcatchメソッドにはresolve(),reject()の関数の引数が渡される。
– thenをチェーンしたい場合。(promise.then().then())⇒thenの中でpromiseをリターン