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

Denoのパーミッション指定の勘所

DenoはNode.jsの後継JavaScriptランタイムです。

https://deno.land/

Denoの特徴の一つに、実行時の **–allow-xxxフラグを使ったパーミッション制御**があります。
具体的な例を挙げると、以下のようなものです。

– `–allow-read=/path/to/dir/`：指定したディレクトリを読む許可を与える
– `–allow-write=/path/to/dir/`：指定したディレクトリに書き込む許可を与える
– `–allow-net`：外部とHTTP通信する許可を与える
– `–allow-run=deno`：指定した子プロセスを実行する許可を与える
– `–allow-all` / `-A`：全て許可する

などなど。

これを実行時にコマンドラインで指定することで、プログラムに与える権限を指定することができます。

“`shell
> deno run –allow-net ./main.ts
“`

しかし、実行時に毎回こうしたフラグを指定するのは面倒という声も聞かれます。だからと言って`-A`フラグ

Cognitoの USER_SRP_AUTHフロー や パスワード付きカスタム認証フローで必要な「SRP_A」を計算する (js, ts限定)

## SRP_A ってなに？
Cognitoに用意されている認証フローのうち、下記で必要になるパラメータだよ。
* USER_SRP_AUTHフロー
* パスワード検証付きカスタム認証フロー

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/amazon-cognito-user-pools-authentication-flow.html

上記フローでは、広く標準化された鍵交換プロトコルである **Secure Remote Password プロトコル (SRP)** を使っていて、 SRP_A はそれに関連する **「大きな整数」で生成された値** だよ。

## Cognito使ったことあるけどSRP_Aなんて聞いたことない。これっていつ使うの？
Cognitoが用意してくれるログインエンドポイント＋トークンエンドポイントを使う構成や、Amplify UI にお任せする場合には、あまり登場しない部分かもしれないね。

でも、自分で Cognito の各種 API をコールしていく実装なら、必要にな

【絶対に観ろ】英語のYoutubeチャンネル集【プログラミング】

こんにちは。masakichiです。

わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。

そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。

ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。

**なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。**

## The Coding Train

**所感**
スネークゲームやパズルゲームなどクリエイティブなチュートリアルがたくさんあるチャンネルです。運営者が教育の仕事もしているようなので、説明がわかりやすいと思いました。また、語学学校の先生みたいなノリで喋

Swift WKWebViewでWebViewのTableの行クリックからネイティブへデータを受け取る

Webのテーブルリストの行をクリックしてSwift側でその行の必要なデータをネイティブデータとして取得する例。
“`

Vue.jsの書き方忘却録

# 背景
Vue.jsの基本的な書き方を忘却録として残す

# 開発環境

PC:macOS Monterey(Intel Macbook Pro 2020)
エディター：Visual Studio Code
Vue.JS： 2系

# コード

“`javascript:app.js
var vm = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue！’
}
})
“`

“`html:index.html

{{ message }}

“`

“`:出力
Hello Vue!
“`

## 基本構文
new Vue()でVueインスタンスを生成する
インスタンスを生成することで、Vueアプリケーションが有効になる
VueはMVVMの影響を受けているので、Vueインスタンスの変数名にはvmがよく使われる

上記のapp.jsでインスタンスを生成する時の引数（オプションオブジェクト）は以下である

– el
Vueの有効範囲を指定する
elに書かれた要素配下で

JavaScriptのHTML要素を取得する方法についてまとめてみた

# はじめに
JavaScriptのHTML要素を取得する方法は複数あります。しかし、学習して間もない時はその方法について混乱したり、理解が曖昧なことがあると思います。そのため、それぞれの記述方法や特徴をまとめました。

# HTMLの取得方法
要素を取得する方法として、Id名で取得する方法、Class名で取得する方法、Name名で取得する方法、セレクタ名で取得する方法があります。それによって、取得できる要素はdiv要素であったり、HTMLCollection、NodeListなどの配列であったり変化します。

## document.getElementById(“id名”)
“`HTML

1

2

3

4

5

【JavaScript】RGB HSV 相互変換 1ステートメント版

以前 [JavaScript / PHP：RGB HSV HSL 相互変換](https://qiita.com/akebi_mh/items/3377666c26071a4284ee) で書いた`hsv2rgb`、`rgb2hsv`をそれぞれ1文で記述してみたものです。
`rgb2hsv`のほうはとくにカンマ演算子に頼っている部分が大きく、これを1文と呼ぶのは強引な気もしますが、とりあえず良しとします。

## hsv2rgb ##

引数
h: 0以上360未満の浮動小数点数,
s: 0～1の浮動小数点数,
v: 0～1の浮動小数点数

戻り値
r,g,b各値(0～255)の配列

## rgb2hsv ##

引数
r,g,b 各0～255

戻り値
h,s,vの配列

### script ###

“`js:color_convert.js
‘use strict’;
const hsv2rgb = (h, s, v) => [5, 3, 1].map(n => Math.round((v – Math.max(0, Math.min(1, 2 – Math.abs(2 –

【RxJS】Observable・Observer・Operators・Subscription

業務でAngularを使い始め、RxJSが複雑だったため、主に使用しているオブジェクトを中心に整理したいと思います。

# RxJSとは
`Reactive Extensions for JavaScript`の略称で、JavaScriptでリアクティブプログラミングをするためのライブラリ。
RxJSを用いることで、JavaScriptの非同期処理やイベントに関する処理を簡単に書くことができる。

# リアクティブプログラミングとは
時間の経過によって変化する値に対する操作を宣言的に記述するプログラミングパラダイム。

時間の経過によって変化する値を流す場所をストリームと呼ぶ。
このストリームにクリックイベントやHTTPデータなどの値が流れ、流れた値に対して加工や計算などの処理をしていく。

よくある例えとして、以下のようなもので説明される。
– ストリーム = 川
– ストリームを流れる値 = 魚
– 処理 = 大きな魚だけ捕まえる

余談ですが、[RxJS](https://rxjs.dev/)の動物は魚のような見た目をしていますね。

# RxJSで主に使用するオブジェクト
##

【JavaScript】イベントキャプチャリング、イベントバブリングについて図解で理解する ２　 〜 イベント移譲 〜。

前回の記事でイベントバブリングによって、親要素にイベントを伝播させることを説明しました。

[【JavaScript】イベントキャプチャリング、イベントバブリングについて図解で理解する。](https://qiita.com/sho_U/items/b11916cece5658ddf2e9)

これを利用して各要素にイベントを登録するのではなく、親要素にイベントを一括で登録しておくことができます。
これを**イベント移譲**といいます。

今、下記の様な実装を行ってみます。


ボタンをクリックすることにより、アラートされます。サーチを押すとインプットフォームが出現します。

以下のように各ボタンにイベントを登録して実装しました。

“`html

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ができます。