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

検索キー（Lookup Key）を利用して、Stripeに登録した最新の価格情報を検索・取得しやすくする

商品一覧やサービスのプラン表など、Stripeに登録した価格データを一覧表示させたいケースは少なくありません。
そしてStripeでは、表示させたい価格データを絞り込み・検索する方法がいくつか用意されています。

今回はその方法のうち、「検索キー（Lookup Key）」を利用する方法について紹介します。

# 検索キーとは？

検索キーは、StripeのPrice APIの機能の１つです。
Stripeに登録した価格データをより検索しやすく、また価格の変更を反映しやすくするために作られました。

以下のコードサンプルのように、Price APIのListで特定の検索キーを持つ価格データだけを取得することができます。

“`js
const result = await stripe.prices.list({
lookup_keys: [‘membership_free’, ‘membership_bronze’, ‘membership_silver’]
})
“`

# 検索キーを価格に登録する

検索キーは、APIから登録することができます。
登録済みの価格に設定する場

【JS】undefinedについてまとめみた！

## `undefined`とは
`undefiend`は、「未定義」である事を示す値です。

## `undefined`になるケース
以下が`undefined`になるケースです。
– 初期化されていない変数の値
– オブジェクトに指定されていないキーの呼び出し
– 関数の`return`を書かなかった場合の戻り値
– 引数のある関数を呼び出すときに引数を与えなかった場合の値

以下がコードになります。
Javascriptを実行出来る環境で試してみてください！！

“` js
// 初期化されていない変数の値
let testUndefined;
console.log(testUndefined); // undefined

// オブジェクトに指定されていないキーの呼び出し
const test = {};
console.log(test.name); // undefined

// 関数の`return`を書かなかった場合の戻り値
function testFunc() {}
console.log(testFunc()); // undefined

// 引数

画像ギャラリーに使う画像を拡大させる方法

lightboxを使うと簡単にポップアップ表示できます。

まず、lightboxのサイトでファイルをダウンロードします。

参考にした記事

https://github.com/lokesh/lightbox2/releases

ファイルを解凍してファイルのdistファイル内のcssとjsの中身を
index.html用のcssファイルとjsファイルに移します。

“`html:index.html
内に読み込む “`
“`html:index.html
前に読み込む

“`
最後にポップアップ画像のコードを書きます。

“`html:index.html
画像文字を書き込む

数多くいる推しVtuberの配信を自動収集する

# 前置き

唐突ですが、みなさん推しのVTuberはいますか？
そして推しのVを追いかけようにも、たくさんいて配信を見逃してしまうなんてことはありませんか？

そういった難民を減らすため、大手の事務所には配信情報の専用ページがあります。
有名どころでは[ここ](https://schedule.hololive.tv)などでしょう。

では個人Vを追いかけたいときはどうするか？チャンネル登録と通知の組み合わせが自然だろうけど、その数が増えると通知に埋もれてしまって追いかけられない……。あるいは他のVも追いかけたくなるけど、情報が手に入らない……。

そう個人的にも関わりが深い将棋系Vもそういった悩みを配信者側も視聴者側も抱えていました。

それなら配信情報のまとめサイトを作ろう！

この記事はそこから始まる物語。

なおこの記事を応用することで、個人レベルでも専用の情報収集プログラムなどができます。

# まずは宣伝

この記事のタイトルを見て将棋系Vに少しでも関心を持たれた方、あるいは完成版を見たい方は次のリンクをポチッとしてください。

[将棋V総合情報サイト](https://

New Relic でも ctrl-h で backspace したい

# 何が起きたか

[New Relic One](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/get-started/introduction-new-relic-one) には謎のキーバインドが張られており、ctrl-h を押すと前のページに戻ってしまう。ctrl-h で backspace したい派としては、クエリの入力欄でミスタイプしてctrl-hで消そうとするたびに前のページに戻ってしまい不便だった。

# 解決策

New Relic がバインドしてくる [`keydown` イベントを `stopPropagation`](https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation) しちゃえばいい。

“`javascript
document.addEventListener(‘keydown’, (event) => {
if (event.key === ‘h’ && event.ctrlKey)

webview_flutterでページが表示されないときに確認すること

まず前提としてエラーは出ていないけどなぜかページは表示されないという状態を想定しています。
# 解決方法

解決方法はシンプルです。
WebViewにjavascriptModeをしっかり指定することです。

“` Dart
class MyWebView extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Expanded(child:
WebView(
initialUrl:’https://example.com’,
javascriptMode: JavascriptMode.unrestricted,
)
);
}
}
“`

【React Final Form】formatOnBlurを使っているフォームを初期化するとフィールドの状態がおかしくなる(初期化されない etc..)


# tl;dr

– React Final Form には、format機能があります。
– フィールドの表示内容に対して、*全角英数→半角英数* のような変換処理が行えます。
– :warning: しかし、format機能を使うと、変換処理が走るたびにIMEが閉じてしまうので、IMEが使い物になりません。
– そこで、`formatOnBlur` prop を指定しましょう。
– blur (つまりフォーカスが外れた)の瞬間にしか format が走らないようになり、
– 変換処理のたびにIMEが閉じてしまうのを抑制できます。
– :warning: しかし、そうすると、フォームをリセットした時にフィールドの状態がおかしくなります。
– → **結論：`value={input.value ||

15分でできる！opnizハンズオン！

# はじめに

本記事はM5Stack系デバイスへのopnizセットアップから、Node.js SDKでLチカするハンズオン記事となります。
だいたい15分ほどで完了します。

M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteが本記事の対象となります。

# 対象読者

* JavaScript / TypeScriptでIoTしてみたい方（C / C++は書きたくない）
* できるだけ安くIoTしてみたい方
* 正直M5Stack積んでる方

# 用意するもの

* M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteのいずれか
* M5ATOM Lite推奨
* M5Stackの場合は別途LEDと抵抗が必要です
* USB Type-Cケーブル
* デバイスをPCに接続する用
* PC
* Windows / Mac / LinuxどれでもOK
* Node.js v12以上をインストールしておいてください

# [opniz](https://github.com/miso-develo

はじめてのJest

# そもそもJestとは？

### 一番人気なJSのテストフレームワーク
[https://2020.stateofjs.com/en-US/technologies/testing/](https://2020.stateofjs.com/en-US/technologies/testing/)

### なぜ人気なのか

> 筆者がJestを選ぶ一番の理由は、依存が少なく高機能であることです。

↓こちら参照
[https://www.codegrid.net/articles/2017-jest-1/](https://www.codegrid.net/articles/2017-jest-1/)
テストランナー、アサーション、モックが全て含まれている。
カバレッジも見ることができるらしい。　

# インストール方法は？

公式からパクリ

“`php
npm i jest @types/jest ts-jest -D
“`

– `jest`
– jestフレームワーク（これが普通jestと呼ばれるもの）
– `@types/jest`
– [https:

JavaScript使ってタブ切り替え

# １．はじめに
JavaScriptの世界へようこそ！今回はruby on rails のHTML/CSSを通して、**タブのページ切り替え**を行なっていきます。
今後もJavaScriptをデザインに適応させていくための糧にすることが`今回のGoal`だよ！

# 2. JavaScriptを導入する環境を作っていくよ！

最初にVSCodeで自分のアプリケーションファイルを開くよ！
**app/views/layouts/application.html.erb**を開きます。

“`app/views/layouts/application.html.erb





<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag '

JavaScript Primerさんの クラスで作られたTodo 練習アプリをクラスを使わない方法でやり直す

## JS の迷わないための入門書　としてJavaScriptが 学べるページ
URL: https://jsprimer.net/use-case/todoapp

以前にもここで勉強させてもらったことがあるのですがしばらく JSを触らなくなってしまってすっかり忘れてしまったので再度勉強しにやってきました。

第二部の応用編にある練習用Todoアプリなんですが、VueやReactを使わずに、またライブラリも自前で容易してしかもクラスでコードを書いてあるので、どういった仕組みで動いているのかがわかってすばらしい出来の練習アプリになっています。

この練習アプリをせっかくクラスで書いてあるのを敢えてクラスを使わなかったらどういったコードになるのかを試してみたいと思います。

index.jsを書き換える感じなので、 HTML CSS ライブラリは、そのまま使わせていただきます。

簡易サーバーとして、vscode の拡張機能で Live Server でやっていきたいと思います。
JavaScript Primerさんのと見比べるとわかりやすいです。

“`shell
.
├── i

Oura Cloud APIにNode.jsからアクセスする #iotlt

[Oura Ring](https://ouraring.com/)のAPIドキュメントを眺めていたら結構簡単に取得できそうだったので少し調べたらnpmライブラリとして公開している人がいたので試してみました。

https://www.npmjs.com/package/oura-cloud-api

## 環境

– Node.js v17.3.0

## インストール

“`bash
npm i oura-cloud-api
“`

## トークンの取得

https://cloud.ouraring.com ここからログインすると簡単に取得できました。

## コピペコード

npmのページにある通りにやると動作します。

2022年1月16日だけを取りたいとかならこんな感じです。

npmのサンプルよりも多くの情報が取れそうな`getSummaries()の関数を利用してみてます。

“`js
const Client = require(‘oura-cloud-api’);

(async () => {

const accessToken = ‘

マークダウン記法から装飾を外す

単純に マークダウン記法のテキスト→HTML→HTMLタグ削除の流れで外しています。

markdown-itを使用します。

使いまわしそうなのでパッケージにしてます。
`npm i markdown-it-remove`([リポジトリ](https://github.com/s-n-1-0/markdown-it-remove))

“`typescript
export function removeMdPlugin(md,
{
removeTags = true,
replaceNewlineValue = null,
escapeHtml = false,
}={}) {
md.renderer.__oldRender = md.renderer.render;
md.renderer.render = (…params)=>{
let html:string = md.renderer.__oldRender(…params);
var tmpHtml = (removeTags)

WebSocketを使ってAPIを作ってみた

# なぜ作ったのか
大学の授業で何かシステムを作れとの課題が出たから(グループワーク)

# 実行環境
開発言語: node.js
使用したDB: MySQL
サーバ: AWS(EC2 t2.micro)

# 仕様書を書こう
複数人でチームを組んでやる授業だったので，仕様書を書かなければ情報が共有できません．という事で仕様書を書きます．APIの仕様書は以前クライアントのプログラムを作っていた時にデザインが良かった[slate](https://github.com/slatedocs/slate)を使いました.
今回作成したAPIでは，JSON-RPC形式のメッセージをやり取りする形で通信を行います．(ただし，様々な事情によりエラー時のレスポンスが本来のJSON-RPCの形式になっていません．)
あと，クライアントのデータ等はサーバにあるDB

laravelBreezeにvue.js3ど導入しようとした件

laravel breezeをインストールしたんだけれど、breezeのJSは**Alpine.js**で**Vue.js**が入ってなかったので、

####じゃあ、alpine.jsを使えばいいじゃん！####

資料が少なすぎて無理・・・

ということで、breezeにvue.js3を導入します！
useEffectとuseRefを使ってプルダウンをつくる

## 背景

Reactを使ってプルダウンを実装することになったのですが、useRefやuseEffectなどの基本だけども初学者には理解しづらい内容だと思い、自分の理解を深めるために記事にまとめました。
改善点やアドバイスがあれば優しくご指摘いただければ幸いです。

## 制作イメージ

### 要件

– 生年月日のプルダウン
– 年・月・日でそれぞれ別の選択肢をもつ
– 年は西暦と和暦、両方表示

＊平成と令和の切り替え、うるう年、30日と31日の表示分けは今回実装しません。

“`jsx:完成コード
import React, { useRef, useState, useEffect } from “react”;

export const BirthDate = () => {
const birthYearRef

`deno test` で付けたほうがよさそうなオプション

denoには組み込みのテストランナーが備わっています。テストランナーは`deno test`コマンドで利用できますが、いくつかのオプションを指定することができます。その中から便利そうなものをピックアップして紹介します。

## `deno test`で付けたほうがよさそうなオプション

### `deno test –jobs `

`–jobs`オプションを指定すると、複数のCPUを使ってテストを並列実行します。
`–jobs`の後に続けて数字を記述して、使用するCPUの個数を指定することもできます。

“`shell
> deno test –jobs # CPUの個数分並列実行する
> deno test –jobs 4 # 4並列で実行する
> deno test # –jobsオプションが指定されていない場合は並列実行しない
“`

`–jobs`オプションを指定しない場合、並列実行されないので注意しましょう。
筆者の場合は、`–jobs`オプションを指定することで、1分半かかっていたCIを45秒に短縮することができました

Vueで要素外クリック検出

例えばメニューを実装する際に、メニュー外をクリックしたら閉じるようにしたいときが割とあるため備忘録として。

Nodeのcontainsを使い、クリックされた要素がメニュー要素の子孫に含まれるかどうかを判定しています。
vueでwindowやdocumentにイベントリスナーを追加するとコンポーネントがunmountされてもイベントリスナーが残り続けるため、必ずunmount時にremoveしましょう。

“`vue