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

ブラウザからLambdaを実行

### IDプールの作成
Cognito > IDプール管理 > 新しいIDプールの作成
認証時のロール、未認証時のロールがcognitoによって作成される

### IAM権限設定
用途に合わせて認証時のロールまたは、未認証時のロールにInvokeFunction権限を付与する

### javascript(ES6)
“`javascript
const { CognitoIdentityClient } = require(“@aws-sdk/client-cognito-identity”);
const { fromCognitoIdentityPool } = require(“@aws-sdk/credential-provider-cognito-identity”);
const client_lambda = require(“@aws-sdk/client-lambda”);
const REGION = “ap-northeast-1”;
const lambda = new client_lambda.Lambda({

JavaScriptのClassについて part1

# 初めに
今回はES6の`Class`の基礎概念をまとめていきたいと思います。

主な参考文章：
[Class basic syntax – javascript.info](https://javascript.info/class)
[Are ES6 classes just syntactic sugar for the prototypal pattern in Javascript? – stackoverflow](https://stackoverflow.com/questions/36419713/are-es6-classes-just-syntactic-sugar-for-the-prototypal-pattern-in-javascript)

# Classとは
同じオブジェクトを大量に作成するテンプレートです。
コンストラクタ関数と`new`インスタンスの関係に似ています。MDNの説明では、
>class キーワードは ES6 で導入されましたが、シンタックスシュガーであり、JavaScript は引き続きプロトタイプベースです
[継承とプロトタイプチ

JavaScript: Cookieから特定要素を見つけ出す際のトリム

jQuery.Cookieなどのラッピングされたものを使用する場合には、なんの考慮もいらないはずです。
裸のJavaScriptでハンドリングする場合に忘れがちなのがトリムです。
## サンプル
“`JavaScript
function getCookie (key) {
var cookies = document.cookie;
var cookiesArray = cookies.split(‘;’);
for (var tuple of cookiesArray){
var strArray = tuple.split(‘=’);
var str = strArray[0];
if (str.trim() == key) { // トリムしてあげましょう
str = strArray[1];
return str.trim();
}
}
return ”;
}
“`
CやPerlなんかで書く場合には、まあ忘れることはないんですけどね。私の場合、JavaScriptの場合が特に油断しますね。
ト

TypeScript（JavaScript）のswitch文で「Unexpected lexical declaration in case block」

先日、以下のようなコード書いたところ、ESLintに「Unexpected lexical declaration in case block」と怒られました。

“`ts
let input = 1

switch (input) {
case 1:
const message = ‘指定されたのは1です。’
console.log(message)
break;
case 2:
console.log(‘指定されたのは2です。’)
break;
default:
console.log(‘不明な数値が指定されました。’)
break;
}
“`

元々は下記のようなコードだったのですが、メッセージを定数`message`に切り出したところ、エラーとなるようになってしまいました。

“`ts
let input = 1

switch (input) {
case 1:
console.log(‘指定されたのは1です。’)
break;
case 2:
console.log(‘

forEach内でawaitはできない（JavaScript、TypeScript）

先日、TypeScriptでの実装で、すごく基本的なところでハマってしまったので、メモとして残しておきます。

TypeScript（JavaScript）で`forEach`内で`await`を記述したら、エラー（「’await’ 式は、非同期関数内と、モジュールのトップレベルでのみ許可されます。」）となりました。

エラーとなったコードはこんなやつです。

“`ts
const millisecs = [1000, 2000, 3000]
millisecs.forEach(millisec => {
await sleep(millisec)
console.log(millisec)
})
console.log(‘forEach完了’)
“`

`sleep()`関数は、こんなものです。
“`ts
async function sleep (millisec: number): Promise {
return new Promise(resolve => {
setTimeout(resolve, millisec)
})
}
“

LeetCode easy: 1342. Number of Steps to Reduce a Number to Zero

LeetCodeを始めたので記録しています。

## 解いた問題

https://leetcode.com/problems/number-of-steps-to-reduce-a-number-to-zero/

>Given an integer num, return the number of steps to reduce it to zero.
>In one step, if the current number is even, you have to divide it by 2, otherwise, you have to subtract 1 from it.

## ざっくり処理の流れを考える
– while文でnumが0でない状態をtrueとして回す
– 奇数偶数判定をする
– それぞれの処理をしてnumに入れる
– numが0になったときの回数を返す

## 書いたコード
“`
/**
* @param {number} num
* @return {number}
*/
var numberOfSteps = function(num) {

p5.js Web Editor上で「Web MIDI API」を使って USB MIDIコントローラー（nanoKONTROL2）の入力を JavaScript で処理する

タイトルの通りで、以下のツイートの動画の内容を試した話です。

#p5js Web Editor上のキャンバスの背景色を、USB接続の物理コントローラー（nanoKONTROL2）を使って変えてみる簡単なテスト。

ブラウザの Web MIDI API を使い、nanoKONTROL2 のノブ 1つ、フェーダー 2つの操作から得られる値（0 から 127）を取得して、色（HSB の 3つの値）に反映させています。 pic.twitter.com/KgbaPFMgFz

— you (@youtoy) July 14, 2022

USB MIDIコントローラーは、以下の「[KORG の nanoKONTROL2](https://www.korg.com/jp/products/computergear/nanokontrol2/)」を使っています。

自宅でのテレワーク中、届いた品。 pic.twitter.com/K8SZBjbaGj

— you (@youtoy) August 17, 2020

## この記事で扱う内容
この記事では、Web MIDI API を利用しますが、その詳細については一部のみしか触れません。
また、Web MIDI API はブラウザとデバイスとの間で「双方向通信」が行えますが、今回の内容では「デバイス ⇒ ブラウザ」の片方向のみを利用します。

Web MIDI API の詳細が気になる方は、ご自身でググって調べていただくか、以下の記事などをご覧ください。

●MIDIデバイスの準備不要、Web MIDI APIの基礎 | HTML5Expert

HTML + JavaScript: 見出しやボタンなどの表示文字列を統一させたいとき

とあるシステムに登場する複数のWEB画面のあいだで、見出しやボタンの表示文字列を統一させたい場合に、私が使う手法のひとつがこれです。
いろんな方が、これと同じような手法をとられていると思います。かな？
## サンプル
JavaScript側からです。これを各HTMLにインクルードして使います。
“`JavaScript
// JavaScript
function label_print () {
var arrVar = {
label_lastname: “姓”,
label_firstname: “名”,
label_birthday: “生年月日”,
};
var arrVarButton = {
button_save: “保存”,
button_cancel: “キャンセル”,
};
for (let key in arrVar) {
if(document.getElementById(key) != null) {
$(‘#’ + key).html(arrVar[key]);
}

Firestoreのコレクションやドキュメントへのパス(文字列)を取得する関数を自動生成するコマンド

# はじめに
Firestoreにアクセスするときに、`/some_collection/some_doc_id/other_collection/other_doc_id`　みたいにコレクションやドキュメントのパスを書くのって少し面倒じゃないですか？　特にWebとAndroidの両方でFirestore使っているときなんかは、TypescriptとKotlinで似たような文字列をコード中に定義することになるので、筆者は少し億劫になってしまいます。（Firestoreは書き方の自由度が高いので、そもそもこのように書かないぜって人も沢山いると思いますが、、、）

ということで、`コレクションの構造を定義したファイル`をインプットに取って、各言語ごとに、`コレクションやドキュメントのパス(文字列)を取得する関数やメソッド`をはきだすコマンドを作成しました。

今回作ったコマンドはこちらに置いてあります。(主なコードはシェルスクリプトで書きました。)

https://github.com/ppdx999/firepath

# Usage

## 前提
Firestoreのコレクション

「このページを印刷する」ボタンを作ってみた

## 「このページを印刷する」ボタン
こんな感じのボタン。

## コード
“`html

“`
単純。“`onclick“`に“`window.print();“`をつけてあげればいいだけです。
aタグとかにもつけられます。

小児科医作成＜熱性けいれん対応LINEbot＞0,1歳育児中の方向け【GAS✖️LINE】

# はじめに
このLINEbotは、熱性けいれんが起きた時にどう対応していいか示してくれる、また熱性けいれんについての基礎知識を得ることができるように作成しました。

LINEを選んだ理由は、「新規でアプリのダウンロードの必要がなく」「無料で広められ」「多くの人にとって使い慣れたアプリ」だからです。
実際に使ってみているところ

熱性けいれんbotのデモ
Qiita用 pic.twitter.com/6Xy14pa6Dm

— yi-ped (@ped_yi) July 19, 2022

QRコードはこちらです。
【分かったつもりをやめる】React × TypeScript 開発で使う記法（文法）の正式名称を整理する。 〜?編〜

# Null合体演算子(??)
左辺が `null` または`undefined` の場合に右の値を返し、それ以外の場合に左の値を返す。
“`typescript
const data = null
const result = data ?? ‘defaultValue’
console.log(result) // ‘defaultValue’
“`

# オプショナルプロパティズ(?)
型のプロパティに`?`をつけることで、その値がない場合を許容することができる。

“`typescript
// ボタンコンポーネント
type Props = {
label: string
onClickEvent?: () => void
}

export const Button = (props: Props) => {
const sayHello = () => {
console.log(‘Hello!’)
}

return (
{pr

Deno のWebフレームワーク Fresh で遊んでみた

先日、DenoのWebフレームワークFresh 1.0が安定版をリリース。


可愛い..//

> – Just-in-time rendering on the edge.
> – Island based client hydration for maximum interactivity.
> – Zero runtime overhead: no JS is shipped to the client by default.
> – No build step.
> – No configuration necessary.
> – TypeScript support out of the box.

和訳すると、

– 　エッジでのJust-in-time

ONNXファイルを読み込むだけ

## はじめに

`.onnx`ファイルを読み込むまとまった記事が見つからず四苦八苦したので、ここにまとめます。

最終的には、中間層が二つあるFFNNをPyTorchで生成し`.onnx`ファイルを出力、そしてそれをJavaScript（ES Module）により読み取ります。
とりあえず読み込んだという内容ですので、次のような内容はありません。
– 汎用的な`.onnx`フォーマットの読み込み。
– 読み込んだデータで実際に計算処理を実行。

なお、環境はLinux（Ubuntu）です。

## ONNXとは

ONNXとは、ニューラルネットワークのモデルをいい感じに保存するフォーマットの一つです。
フォーマットはProtocol Buffersにより記述されており、また`.onnx`で表されるONNXファイルはProtocol Buffersによってシリアライズされたファイルとなります。

有名なニューラルネットワークのライブラリ（TensorflowやPyTorchなど）には、ONNXファイルの読み書きをするライブラリが用意されています。
そのため、普段は中のフォーマットを意識

いろんな言語での文字列操作の比較（VBA, Java, C#, PHP, Python, JavaScript）

うちのような小さな会社が、受託案件を長年やっているといろんな言語の保守メンテをやる必要があるのですが
文字列操作、この言語でなだっけ？とよく忘れてしまいます…
よく使うものを中心に文字列操作をまとめていきます。
完全に個人的な忘備録です。

主にVBAを中心に Java, C#, PHP, Python, JavaScriptについて書いていきます

[文字数の長さを取得する](#文字数の長さを取得する)
[文字列から指定文字数の文字を取得する（トリミング）](#文字列から指定文字数の文字を取得する（トリミング）)
[文字列から左側の指定文字数の文字を取得する](#文字列から左側の指定文字数の文字を取得する)
[文字列から右側の指定文字数の文字を取得する](#文字列から右側の指定文字数の文字を取得する)
[文字列から指定文字を検索する](#文字列から指定文字を検索する)
[文字列の後ろから指定文字を検索する](#文字列の後ろから指定文字を検索する)
[文字列を置換する](#文字列を置換する)
[アルファベットの小文字を大文字に変換する](#アルファベットの小文字を大文字に変換する)

Vue3で静的なHTMLを読み込ませたかった

# やりたいこと
Vue.jsで個人開発しているSPAアプリケーションにLP(ランディングページ)を埋め込むことがありました。
実現したいこととしては、

– 静的にHTMLを読み込んでほしい(SEO的に、jsなしでも動くことが条件)
– 同じドメイン下に置きたい
– できればVueだけで解决したい(LPのためだけにNuxtやGridsomeで書き直すようなことはしたくない)

# 調べてみた
最初にたどり着いた方法が、 **リバースプロキシ** を使ってURLでレスポンスを変える方法でしたが、Vue単体で解決できてないのでとりあえず保留。

色々情報を漁っていると…
Vue.jsには **MPA** を構築する機能が標準で搭載されているらしい…？

# MPAとは
(知っている方は読み飛ばしてください)

VueやReactなど、モダンなフロントエンドフレームでは **SPA** (シングルページアプリケーション)として開発するのが主流です。つまり、基本的には1つのページで表示をすべて完結させています。

それに対し、 **MPA** (マルチページアプリ

Sequelizeを使ってDBマイグレーションをやる方法2つを試してみた

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/neb212bb61dea

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/708ed51726a961468b8c671742dd7999e3cdffd3

bundleサイズ削減、minify、gzipでフロントエンドのパフォーマンス改善をためしてみた

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n9747f43887f3

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/intro-vuecli/commit/bda5574dde4f61fcd48787e669c938c3f970443c

https://github.com/yuta-katayama-23/node-express/commit/2aeba0ac9e2f96efb5d46b07bcb9a2fcd640c8a0

JavaScript覚えたかったら「JS Challenger」がオススメ

# 背景

突然ですが **JavaScript** ってどうやって勉強していますか？

私がぱっと思いついたのは以下のような方法です。

– 書籍を最初から最後まで読む
– OSSのコードを読んで見る。
– UdemyやYoutube等の講座を見る

もちろんネット上には素晴らしい書籍や教材が豊富ですが、**ドキュメントを最初から最後まで詳細に読む**なんて方法は辛いですよね？ （やれる人もいます）

今回は手を動かしながらゲーム感覚でJavaScriptの文法を覚えられる（業務のコードが読めるようになる）[JS Challenger](https://www.jschallenger.com/)というサイトをご紹介します。

# JS Challengerとは
サイトの説明から抜粋すると

– JSに特化したコーディング演習が無料でできる
– ビギナーから上級者まで対応
– JSの基礎からDOM操作まで幅広く学べる

のように記載があり、いわゆる **JS専用のコーディング問題集** だと考えることができます。

また以下のような機能が有り、手を動かしながら徐々にJSの文法を覚えて

今すぐできるコードの品質改善

スケジュールに追われ、後回しにされがちなコードの品質。
テスト工程で障害を無くしていくのも品質改善の一つですが、プログラムの修正や機能追加などで誰が触るかわからないコードを綺麗にするのは結構大事な事かもしれません。
綺麗に書けば、最終的に障害対応もやりやすくなるはずです。

すぐに実践できるものをまとめてみました。

## 構成

[コーディング規約に従う](#コーディング規約に従う)
[適切な変数名](#適切な変数名)
[参照する変数は近づける](#参照する変数は近づける)
[不変な変数は定数に](#不変な変数は定数に)
[共通化](#共通化)
[ネストを減らす](#ネストを減らす)

## コーディング規約に従う

プロジェクトには必ずと言っていいほどコーディング規約のようなものが用意されています。
これに従うのが結局一番品質が良くなると思います。プロジェクト内で書き方が統一されていれば保守がしやすくなります。
これから説明することよりまずは、プロジェクトのコーディング規約に従えばOKだと思います。

## 適切な変数名

当たり前ですが、何が入っているかわかる変数名にしましょう