JavaScript関連のことを調べてみた2022年07月10日

Leetcode easy: 1480. Running Sum of 1d Array(JavaScript)

[Leetcode](https://leetcode.com/)を始めたので記録しています。

## やった問題
1480.Running Sum of 1d Array
>Given an array nums. We define a running sum of an array as runningSum[i] = sum(nums[0]…nums[i]).
Return the running sum of nums.

Example:

>Input: nums = [1,2,3,4]
Output: [1,3,6,10]
Explanation: Running sum is obtained as follows: [1, 1+2, 1+2+3, 1+2+3+4].

https://leetcode.com/problems/running-sum-of-1d-array/
## 処理の流れをざっくり考える
– 配列を初期化して乗算の結果を追加していく
– 前の計算結果を使うようにする

## 最初に書いたコード
“`javascript
/**
* @par

Leetcode easy: 1672. Richest Customer Wealth(Javascript)

[Leetcode](https://leetcode.com/)を始めたので記録しています。
## やった問題
1672.Richest Customer Wealth

https://leetcode.com/problems/richest-customer-wealth/

>You are given an m x n integer grid accounts where accounts[i][j] is the amount of money the i​​​​​​​​​​​th​​​​ customer has in the j​​​​​​​​​​​th​​​​ bank. Return the wealth that the richest customer has.
A customer’s wealth is the amount of money they have in all their bank accounts. The richest customer is the customer that has the maximum wealth.

E

JavaScriptでconstのみでのRGB-HSV相互変換関数

RGB-HSVの色空間変換をconstのみで完結に書きたかった備忘録。
三項演算子を多重ネストするよりはスマートじゃないかな。

canvasのImageDataで使うの前提なのでUint8Arrayで扱えるよう、Hの範囲は180度です。
360度の場合は`30->60, 180->360`に置き換えます。

参考: [RGBからHSVへの変換と復元](https://hooktail.org/computer/index.php?RGB%A4%AB%A4%E9HSV%A4%D8%A4%CE%CA%D1%B4%B9%A4%C8%C9%FC%B8%B5)

“`js
const rgb2hsv = (r,g,b) => {
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const d = max – min;
const h = d && 30 * ({
[r]: (g – b) / d + 6,
[g]: (b – r) / d + 8,
[b]: (r – g) /

Reactのstateに関数を値としてsetするときハマったので備忘録。

# ReactのStateにコールバック関数をセットしたい
初めに。Stateにコールバック関数をセットするという実装が本当はよくないのかもしれませんが、誰かの助けになれば幸いです。

開発中のNext.jsのアプリでStateにコールバック関数をセットしたいという状況にでくわし、初めに以下のようなコードを書いていました。

“`typescript
const [callback, setCallback] = useState<() => void>()
//中略
setCallback(() => {console.log(“Call back!”)})
“`

勘の良い方ならこの時点でピンときたかもしれませんが、当然このコードでは動きません。
原因としては、stateのset関数では、引数に関数が指定された場合、
引数として指定された関数は即時実行され、その返り値をstateの値としてセットするよう振る舞うからです。

なので、関数自体をStateの値として扱いたい場合、以下のように記述する必要があります。

“`typescript
const [callback, s

HTMLのテーブル操作（列の表示/非表示を切替）

# やりたいこと
① レスポンシブ
② Bootstrap使ってみたい
③ テーブルの列を操作したい（表示/非表示を切替）　※メイン

# フォルダ構成
Test
　├ html
　│　└ test01.html
　├ js
　│　└ display_column_switching.js

# 早速書いてみた（「Setting」ボタン以外は適当）

“`html:test01.html

ノンビン塾～エンジニアとしての成長記録6～

## ノンビン塾について
そもそもノンビン塾ってなに？
→[過去の記事参照](https://qiita.com/kenny_engineer/items/fc3a45ef2c123ce49495)

## 今回の講義
#### 【テーマ】
　配列・オブジェクト（連想配列）を理解しよう！
　※ノンビン塾で学んだ事　と　自分で自習した事　を纏めて記載する

#### 【事前準備】
　・Node.js(v16.14.2）
　・VSCode
　・適当なディレクトリでtest.jsを作成する

### 1）配列について

【複数のデータを順番に並べた構造の事】であると理解した。
1つの箱（変数）に同じデータ型の複数の値を入れる事ができる。

また、配列は、`[ ]` で囲まれている。

そして、目的のデータが「何番目にあるのか」を指定すると、
そのデータを取り出すことができる。

以下例
“`test.js
const list = [“1個目”, “2個目”, “3個目”];

console.log(list);
“`
上記のようにlistを宣言し、console.logで確認して

Node.jsでAPIを呼び出すときの同期処理のメモ

毎回、同期処理で悩みます。

Promise とか async とか意味わからんし・・・。

用語の意味から混乱します。

同期処理は、最初のコードから次のコードへと順次処理（実行）されていくこと。
非同期処理は、ある処理が終了するのを待たずに、別の処理を実行すること。

　
今日は冷静になって、同期処理を研究してみました。
私はど素人なので、もっといい方法があれば教えてください。

## APIを呼び出すときの同期処理の研究

### 利用API

気象庁のAPIからデータをとる事例でいろいろ試してみました。

https://www.jma.go.jp/bosai/forecast/data/overview_forecast/340000.json

こんなJSONファイル
“`
{
“publishingOffice”:”広島地方気象台”,
“reportDatetime”:”2022-07-09T21:27:00+09:00″,
“targetArea”:”広島県”,
“headlineText”:””,
“text”:”　中国地方は、湿った空気の影響で概ね曇

HTMLで縦書き台本を描画

声劇台本を投稿できるサイトを作成しました。
旧ボイコネフォーマットの台本をそのまま投稿できるようにしています。

https://taltal3014.lsv.jp/

ただ、台本は横書きだと読みづらい・・・。
旧ボイコネの縦書き仕様が好きだったので、同じように縦書き台本を表示できるかを試してみました。

【環境】
　・PHP7.4 （フレームワーク：fuelPHP)
　・MariaDB
　・jQuery3.3
　・Bootstrap4

【やりたいこと】
　・DBに格納された台本テキストを横書きHTMLで描画
　・「縦書きで表示」ボタンを押すとモーダルで縦書き画面を表示

【DBに格納された台本テキスト原文】
　
【ブラウザ上での表示（横書き）】　※ボタンを押すと縦書きに切り替わる
![スクリ

【React Router v6】【Javascript】ログイン状態によるアクセス制御を行う

フロントは ` React.js （JavaScript採用） `　、バッグエンドは ` Springboot ` で SPA アプリを作成しており、ログイン状態の管理に悩みました。

理由は下記の通りです。
– 認証情報を保持し、アクセス制御を行う機能が React.js にはデフォルトで備わっていない（Vue.jsには備わっている）
– React Route v6 が新しく、情報が少ない
– 情報があったと思ったら　TypeScript の情報だった

そこで、自分なりに設計し、実装しました。
# 1. はじめに｜できること

– 未ログイン状態
– ログインページへアクセスした時、ログインページへ遷移する
– ログインページ以外へのアクセスした時、ログインページに遷移する
– ログイン状態
– ログインページへアクセスした時、設定したページ（本記事では「メインページ」）に遷移する
– ログインページ以外へアクセスした時、ログインページに遷移する

# 2. 対象読者
– SPA アーキテクチャを採用し、アクセス制御方法に悩んでいる人
– Reac

Hello Deno

最近、Denoの動向をzennやtwitterで目にする機会が増えてきた実感があって、
azukiazusaさんの [Deno の Web フレームワーク Fresh チュートリアル](https://zenn.dev/azukiazusa/articles/fresh-tutorial)　の記事や
日野澤歓也さん（@kt3k）の[Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう](https://eh-career.com/engineerhub/entry/2022/06/17/093000)　の記事の影響で、Denoに入門してみました。

#### Denoとは？
Node.jsの作者のライアン・ダールが、2018年に開発を開始したサーバサイドJSのランタイムで、2020年にv1.0がリリースされています。
現状、サーバサイドJSのランタイムとして、Node.jsがデファクトスタンダードとなっていますが、
Denoが生み出された理由は、ライアン・ダールが、いくつかNode.jsの設計に後悔している点が

Web Audio APIでループBGMを再生しよう！

# 概要

## 何をするの？

Web Audio APIでElectronで製作したゲーム用のBGMを再生します。

## HTMLAudioElementじゃダメなの？

長い間HTMLAudioElement（`new Audio()`で生成できるオブジェクトのこと。`audio`タグと同等。）を使っていました。しかし、ループ素材を再生するとどうもうまくいかないのです。

“`javascript
var audio = new Audio(“<音声のURL>“);

audio.loop = true;
audio.play();
“`

このソースコードで再生しても、微妙な隙間があります。そして何よりめんどくさいのが、BGMが複数ある際、それぞれ`volume`プロパティを設定したり保持したりする必要があります。めんどくさいです。

## Web Audio APIってすげー（小並感）

Web Audio APIというのは、HTMLAudioElementより多くのことができる低レベル（かな？）音声のAPIです。

これを使えばJavaScriptでDAWができます。

JavaScriptの非同期処理を理解する

# そもそも同期処理、非同期処理とは・・・？

+ ### 同期処理
タスクを順番に処理をすることです。
リクエストを出したら、レスポンスが返ってくるまで次の処理に進みません。

+ ### 非同期処理
タスクの完了を待たずに、次の処理をすることです。
リクエストを出したら、レスポンスが返ってこなくても次の処理に進みます。

非同期処理のメリットとしては、リクエストを出している間に他の処理を実行することができます。
商品情報を複数ページ表示する場合に、同期処理で実装してしまうと1ページの表示が完了するまで、次のページに進むことができません。
使っているユーザは遅いWebページと感じます。

非同期処理で実装すれば、スクロールで最下層にいった場合に、1ページ目の表示が完了する前に最終ページの情報を取得して表示することができます。
画面がサクサク表示されてるようにみえユーザビリティが高い画面になります。

# 同期処理をJavaScriptで実装してみる
以下、同期処理を実装したJavaScriptのコードです。
“`