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

単項演算子の +, – のタイポでNaNになってしまった話

型の練習してたら、こんなタイポした。

普通しないよ、こんなタイポ…それはそう。
テンプレートリテラル使いなよ…それもそう。

“` JavaScript
const num: number = 66;
const text: string = ‘Route’;

const num: number = 66;
const text: string = ‘Route’;

console.log(num + text); // 66Route
console.log(num + +text); // NaN
“`

単項演算子の+がこんな挙動してたらしい。

### 単項演算子 + は文字列を数値型に変換する
“` JavaScript
const count: string = ‘123’;
“`

“` JavaScript
const count1: number = +count;
const count2: number = Number(count);
console.log(count1, count2); // 123 123
“`

### 単項

javascriptで let instance=await new myClass(); ってしたい

適当な非同期処理(Promise)
“`js
async function waitNsecond(n){
return new Promise(function(resolve,reject){
setTimeout(resolve,1000);
});
}
“`
type1
“`js
// set super class
var SUPER=Array;
// define async constructor
async function constructor(…args){
// console.log(this);
SUPER.call(this);
this.push(…args);
await waitNsecond(1);
}
// define async generate class
function myAsyncClass(…args){
if(new.target){
return new Promise(async function(resolve,reject){
let instance=Object.cr

Payment APIで支払い用のQRコードを発行するメモ PayPay for Developers

## はじめに

この記事は、PayPay の Payment APIを利用して、決済用のQRコードを発行するまでの手順メモです。

## ドキュメント

https://developer.paypay.ne.jp/products/docs/webpayment

## インストール

“`bash
npm i request
“`

## コード

下記のコードを`qr.js`として保存する。

“`js
var request = require(“request”);
var options = {
method: POST,
url: /v2/codes,
headers: {
‘Authorization’: ‘hmac OPA-Auth: ‘,
‘X-ASSUME-MERCHANT’: ,
‘Content-Type’: ‘application/json’,
},
body: { “amount”: 1000, “codeType”: “ORDER_QR”, “merchantPay

【JS / TS】Hooks がわからんのではない、分割代入をわかっていないだけ（配列編）

## 0.はじめに

分割代入の第2段の記事になります。

今回は、配列編の記事となります。

[オブジェクト編](https://qiita.com/daishiman/items/5acf803f252b82f970fe) の記事も見て頂けると、うれしいです。

オブジェクト編をご覧になられた方は、最後の[配列の中の一部のみ使用したいとき](https://qiita.com/daishiman/items/324dcc0eae72eb6b13cf#%E9%85%8D%E5%88%97%E3%81%AE%E4%B8%AD%E3%81%AE%E4%B8%80%E9%83%A8%E3%81%AE%E3%81%BF%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%81%84%E3%81%A8%E3%81%8D)以外は、
似たようなことを記述しているので ~~飛ばして~~ **流し読み** して頂ければです。

## 1.この記事を読んだら、できるようになること

:::note info

「分割代入まじわからん」を克服できるようになります

下記の

Amplify CLIを使って、Amplifyプロジェクトを作成する方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
Amplify CLIを使って、ローカルでAmplifyのプロジェクトと開発環境を設置する方法を紹介します。

## 背景
### Amplifyとは
GCPのFirebaseと似て、AWSの各機能を一つにまとめるために作られたサービスです。

### なぜCLIを使うのか
Amplifyにはコンソールがありますが、正式ドキュメントの多くは、コンソールによる操作より、CLIによる操作を元に用意されています。

なので、CLIの使い方からAmplifyに入っていった方が後々助かると、筆者は考えます！

# Amplify CLIをインストールする
まずは、CLIをインストールしておきます。

https://docs.amplify.aws/cli/start/install/

### npmでグローバル・インストールする
“`
npm install -g @aws-amplify/cli
“`

### curlでインストール
個人的にはnpmのグローバルインストールを避けたいのでこちらの方がおすすめです。
“`

着信認証ASPで2要素認証を実装する

## 『着信認証』について
『着信認証』は株式会社オスティアリーズが提供する電話番号を利用した認証サービスです。
詳しくは[こちら](https://www.youtube.com/watch?v=jooW8Dh7BS8)をご覧ください。
今回は、2021年よりサービスを開始しました、着信認証を手軽に実装出来るサービス『着信認証ASP』について紹介させて頂きます。
また、概要については「[大学生が【着信認証ASP】実装をやってみた！](https://www.youtube.com/watch?v=8bLNQ-MTfeY&t=1021s)」でも動画で紹介されておりますのでご参照ください。

## 利用開始まで
実装の前段階は下の流れになります。
・[『着信認証ASP』](https://asp.ostiaries.jp/signup)にアクセスしサインアップ
　↓
・登録したメールアドレスに送られる管理ツールにアクセス
　↓
・決済情報の登録の後、管理ツールが利用可能となる
　↓
・管理ツールにて『着信認証』を導入したいサービス情報の登録
　※この際にアクセスキーなどの情報が作成されま

【Rails】chartkickのlinechart、Y軸を反転させるオプション

# はじめに
chartkickでline_chartを実装してランキング表示をしてましたが、知らんうちにY軸反転が効かなくなってました。
自分の環境ではchart.jsの仕様変更っぽかったので、メモしておきます。

# 環境
– Rails 5.2
– Ruby 2.7.6
– chartkick (4.2.0)

# 変更点

“`
library: { scales:{ yAxes: [{ ticks: { reverse: true, } }] } }
“`

で動いていたのが、2022年7月に動かなくなってましたが、

“`
library: { scales:{ y: { reverse: true} } }
“`

で動くようになりました。

……最初からこうしておいてくれよ！ｗ

終わり

async/awaitを一言で説明する

丁寧な説明は多いが結局なんだっけ？となったので一言にしてみた。
要するにasync/awaitとは、

## asyncの中でawaitを使うと、promiseが返ってくるまで待ってくれる仕組みのこと

“`test.js
async function test(){
console.log(‘1’);
await setTimeout(() => {console.log(‘2 (非同期処理)’)}, 1000);
console.log(‘3’);
};
“`

出力結果

“`
1
2 (非同期処理) // awaitしたので非同期処理でも記述順に実行される。
3

// awaitしないと132となる。
“`

## ということは、awaitを使いたくなったら最後にpromiseを返せばOK

“`testPromise.js
function testPromise(){
return new Promise(function(resolve){
// 何らかの非同期を含む処理
//

無料で学ぶJavaScript入門【応用力が身につく！実践トレーニング：最新版】

# JavaScript【応用力が身につく！実践トレーニング～2022年最新版～】

:::note info

JavaScript/jQueryを使っていますが「コードを学習」することではなく
「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。

:::

### 自己紹介
ジーズアカデミー学校長 山崎と申します。
今回は、私の授業（初級者向け）で応用力を鍛えるためのサポート動画でYoutube配信したものをまとめます。
全国のプログラミング初学者・初級者の皆さんの底上げになればと思い公開させていただきます。必ず「基礎を学んだあと」に、以下動画をやり切っていただければ理解が深まります。

### 応用実践トレーニングの内容
内容は「基礎を学んだ」レベルに合わせています。
JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。
**そういった教材で「自分で考えて作れるようにならなかった人」が対象です。**
「変数・分岐処理・繰り返し処理・関数・オブジェクト…」を応用できるようにするための教材として作りました。他の学

Vue 3から始める人のための学習ロードマップ

仕事で 1 年目の新人トレーナーをやることになり、 Vue 3 に挑戦することになったのでその際の学習のためのメモです。
筆者は Vue 2 + Vuetify での SPA 構築経験（趣味）があるのみで、お仕事はバックエンド側なので、もっといいアドバイスなどありましたら教えていただけると助かります！

まだ進行中なので進捗に応じて更新するかもです。 :bow:

## 対象読者

* Web アプリを構築したい
* JavaScript は触ったことある
* TypeScript はわからない
* React とか Vue.js とかのフレームワークも何もわからん
* 小規模 & 開発スピード優先で Vue 3 を選択
* 新参なので Vue 2 との違いを解説されてもわからないよ！

な人です。

## まずはそれぞれの役割を知ろう

### JavaScript

ここはまぁ大丈夫だと思います。 DOM 操作をしたりして HTML を書き換えたりできます。元々はブラウザで動くプログラミング言語として開発されましたが、今や **Node.js** などサーバー用途でも使われてい

【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう

# YouTube

こちらの記事は、2022年7月29日18:00~19:30 YouTubeライブ配信の資料です。

▼ イベントページ↓↓↓

https://biosbootcamp.connpass.com/event/255131/

# Webページをつくる前に

マークダウン記法をご存知ですか？

▼マークダウン記法 サンプル集↓↓↓
https://qiita.com/tbpgr/items/989c6badefff69377da7

# Webページをつくろう!

チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。

こんにちは～

私には飼っている猫（こっちゃん♀）をいなばチュールのCMに出演させたい！という
夢があるのですがなかなか叶えることができず・・・
こっちゃんのために自分でＢＧＭを作り、動画までとってみよう！と
実践したことをまとめました！

**今回はYoutubeのちゅーるのうたを流すだけでは面白くないので
圧電スピーカーで音階設定して、LINEリッチメニューで使用しやすいように作成しました。**

ちなみにチュールはいなば食品グループのいなばペットフードから発売されており、
猫達が食べやすいよう水分を90%含んだペースト状のフードらしいのですが、
我が家ではほぼ猫のおやつです。
そして今年はチュール販売開始から10年という記念すべき年でもあります！

## 完成した動画

ここさんに再度お願いしてチュールCM風動画を撮りました?電圧スピーカーの音階設定難しいけど楽しい！ワンフレーズじゃ食べきれないからエンドレスで流れる設定にしつつ、リッチメニューで再生&ストップも楽ちんに✌️#ちゅーる #猫好きさんと繋がりたい #obniz #LINEBot #protoout pic.twitter.com/RjTTplD89A

— hitomi@趣味探しアプリMe Clip（ミークリップ）開発中?‍♀️ (@nghrhtm1) July 24, 2022

私の多少の音痴がチュールのうたにも出ているし、
obnizが映ってないから2回撮影しましたが、
こっちゃんは喜んで対応してくれました笑

## 使用したもの
* [obniz](https://

indexedDB の特性まとめ

# まとめ
– indexedDBのトランザクション分離レベルは一番高いシリアライザブル
– 各種操作にかかるおおよその時間比
– シンプルなオブジェクトのread＝1
– シンプルなオブジェクトのwrite=1
– readonlyトランザクションの獲得=3
– readwriteトランザクションの獲得=40

※もちろん、実行環境（Windows10 chromeで実施）によって、傾向が変わってくる可能性はある

# 背景
最近[クロム拡張作成](https://qiita.com/largetownsky/items/ee9db46b372e5adb20f0)で、滅茶苦茶indexedDBを使い倒しているが、細かい仕様を把握しきれていない事が気になってきた。特にトランザクション周りは、RDBなら[トランザクション分離レベル](https://qiita.com/song_ss/items/38e514b05e9dabae3bdb)として明確に規定されているが、indexedDBでは、明確な仕様が見つからなかったので、動作を見てみた。

# 検証環境
以下、全て適当

React+MUI+React Hook Formでタグ入力フォームの作り方

## 概要
大変だったのでシェア。

やりたかったかことは、タグ入力で使うフォーム。
オートコンプリート＋テキスト入力＋チップで構成してある。

React Hook Form的には外部ライブラリを使う場合はregisterではなく、controllerを使いましょう。ということだったのだが、デフォルト値のセットがどうやってやるのかよくわからなかったし、なぜかサブミットに値が入らなかった。
コード的には以下でできたよ。

もっといいのあったら教えてー

## コード
“`javascript:uniq.jsx
const [hogehoge, setHogehoge] = useState([]);

const { control, handleSubmit, setValue, reset } = useForm({
mode: “onChange”,
defaultValues,
});

const defaultValues = useMemo(() => {
let defaultValue = {
hogehoge: [

【データモデル】Sharperlight CANVAS

今回は、[Sharperlight](https://sharperlight.jp/)エンジンを屈指して作成した派生品 **Sharperlight CANVAS** を紹介したいと思います。
Sharperlight CANVASは、お手持ちの画像とデータを結びつけて視覚的にデータを表現するための支援ツールです。
SharperlightのカスタムWebレポート機能をフルに利用して作成しています。
Sharperlightにはこのような使い方もあるということがご理解いただければ幸いです。
### 概要 ###
HTMLとJavaScripでガシガシ書いたコードをSharperlightのWebレポートに梱包しています。
➊記述したコードをリソースとして公開クエリにインポート、➋カスタムHTMLとしてそれを参照します。
そしてSharpe

Javascriptでもアローラロコンをアーロンにする

# やる事
タイトルの通り。入力された文字列を2文字づつ飛ばした文字列にして出力する。Pythonほど楽じゃないけどPHPよりは簡単そう。Typescriptで[もっとすごいこと](https://qiita.com/schrosis/items/1835c8e5787837eb2199)をやってる人がいたけど、こういうのは勢いが大事なのでやっていく。

# 元ネタ

アローラロコンを1文字飛ばしで読むと…

>>> "アローラロコン"[::2]
'アーロン'

— 清原弘貴@ShodoでAI校正 (@hirokiky) July 27, 2022

## 触発された記事
[PHPでアローラロコンをアーロンにする](https://qiita.com/tadsan/items/828cf43ec902440255cb)

# コード
“`javascript:arora.js
function arora(str){
return new Array(…str).filter((_,i)=>(i+1)%2===1).join(“”)
}

function main(){
const str = “アローラロコン”
console.log

Reactのonchangeは、javaScriptのonchangeとは違うらしい。

どうやらReactは、Component.onChangeのリスナーをDOM element.oninputイベントに関連付けるようだ。
つまり、Reactのonchangeイベントは、javaScriptのoninputと同じ挙動になるらしい。

※javaScriptのイベントハンドラ
onchange – フォーカスを外したタイミングで発火する
oninput – フォームに入力があるごとに発火する

以下React公式ドキュメントから引用。

しがたってjavaScriptのonChangeイベントと同じだと思って使用すると
ユーザーの入力後にイベントを発火させたい時はうまくいかない。

これを実現するには、onBlurを使えば良いが
値が手動で変更されたことを確認する必要もある。
あとは

Slackが無料ユーザーに厳しくなったので引っ越すことにした

## ０．はじめに

私は、ただのドシロウトです。プログラミングの専門家ではありません。

Slackが2022年9月1日からフリープランの変更を行います。私はがっかりです。

変更前
> メッセージ1万件／ストレージ5GB

変更後
> 保存上限が撤廃だが、メッセージの保存期間が90日間
> 9月1日の時点で、5月末以前の投稿は全て非表示化

がっかりですね。

## １.…でどうするか？（私の場合）

私の場合は、SLACKは、ぼっち…(;^_^A　で運用しており、公開チャンネルふたつにメモとURLをコピペしていただけでした。（オンラインブックマーク代わり）

なのでリプライもないので２つのChannelのメッセージだけ全て取得できればよかったわけです。

私の場合は、Slackに見切りをつけてメッセージを全て取得して引っ越しすることにしました。

## ２．…で調べた

以下の方法があるみたいです。

* 標準のエクスポート機能でJSON出力し、日付毎に分かれたファイルをViewerで見る方法

> Slack Export Viewer
> https://github.com

Array.concat

RubyのArray.concatは破壊的で、
JavaScriptのArray.concatは非破壊的

https://docs.ruby-lang.org/ja/latest/method/Array/i/concat.html

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

dポイントの獲得・利用履歴を表形式で取り出す方法

以前は`csv`形式でダウンロードできた表形式のdポイントの獲得・利用履歴を、ブラウザコンソールから`JavaScript`を使って取り出す方法です。

動作環境
> Windows 10
> Firefox

:::note info
Firefox のみ動作確認していますが、JavaScript を使用しているので、
> Chrome
Edge
Safari
Opera

などでも同様に動作する可能性があります。
:::

## 利用方法

### 1. [dポイントクラブ](https://dpoint.docomo.ne.jp/index.html “dポイントクラブ”)にログインします。


### 2. dポイント合計のポイント数（赤枠）をクリックします。

![ポイント獲得・利用履歴の直前画面](https:/