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

Script Lab で Excel のユーザー定義関数を書く

## はじめに
最近、**Script Lab**でExcelのユーザー定義関数（カスタム関数）をよく書いています。
Googleスプレッドシート + GAS(Google Apps Script)に近い感覚で手軽に操作できます。

Script Labは無料のOfficeアドインです。
WindowsやMac上のExcelだけでなく、Excel on the web（Web版Excel）もサポートしているのでMicrosoftアカウントがあれば、**ブラウザからでもすぐに試してみることができます**。

詳細は下記にて。
+ [Script Lab, a Microsoft Garage project](https://appsource.microsoft.com/ja-jp/product/office/WA104380862?src=office&tab=DetailsAndSupport)

Script Lab未体験の方、TypeScript・JavaScript入門者の方を対象に、簡単な例をいくつか示します。

:::note warn
注意
本記事中、**ユーザー定義

MUI DataGrid を JSDom でテストする

– この記事を書いた時の @mui/x-data-grid のバージョン: 5.5.1

## 問題

[MUI の DataGrid](https://mui.com/x/react-data-grid/) を Jest でテストする場合に、jsdom 上で全てがレンダリングされない問題が発生することがあります。一部の行がレンダリングされなかったり、カラムについても一部だけがレンダリングされたりすることがあります。

そのため react testing library の `findByText` などで表示されるはずのエレメントを探してもテストが落ちるとか、`toMatchSnapshot` で記録されるスナップショットファイルの中に表示されるべき列が記録されないといった問題が発生します。

– 表示されているはずの列が Jest 上の testing-library から見つからない
– スナップショットを撮ってみると、その中に一部の行や列が含まれていないので正しくリグレッションテストができない
– Storybook での表示とスナップショットが一致しない

## 解決方法

JavaScriptでシーン管理

# 前書き

Vue.jsとかthree.jsとかとは無縁のVanillaJS的な話です。
ぶっちゃけ99.9%の人にとってどうでもいいし、一生使わないような話です。
なんでこんな面倒なことしてんの？ライブラリやフレームワーク使えばいいのにとか言わないでください。
ほぼ自分用です。

jQuery使ってますが別にVanillaJSでも書けます。

# 言葉の定義

上図のようなスタート画面、ゲームのメイン画面、ゲームオーバー画面などをシーンとここでは呼ぶことにします。

# 何がしたいの？

ゲームなどでは各画面でUI、キーのイベントなどが異なるためシーンごとに定義したい。

# で？

次のクラスを作ってください。

“`javascript:scene.js
class Scene {
$app;
star

【10分AWSハンズオン】ExpressをAWS Lambda+API Gatewayにデプロイする

# やること

Lambda 上の Express にアクセスできるようにする。

# 学べること

* サーバレス Express アプリケーションの作り方
* Lambda へのデプロイ
* API Gateway と Lambda の連携

# 扱わないこと

* Infrastructure as Code
* TypeScript
* CI/CD

# STEP 1 : Serverless Express

1-1. 適当なディレクトリに Node.js プロジェクトを作成し、必要なパッケージをインストールします。

“`sh
$ npm init -y
$ npm i express @vendia/serverless-express
“`

:::note warn
`Node.js` がインストールされている必要があります。
`n` という Node.js のバージョン管理ライブラリを使用するのがおすすめです。
Mac を使用している方で、Homebrew がインストール済みの方は、以下のコマンドで Node.js をインストールできます。

“`sh

【コピペで使う】選択可能テーブル

ジャカジャーン！

See the Pen
選択可能テーブルデモ by mugentaishibyo (@mugentaishibyo)
on CodePe

img.onerror発生時にimgをdivに置き換える方法

`img.onerror`発生時に、`img.src`を書き換えて代替画像を表示したり、`img.style.display = ‘none’`を設定してDOMから``を削除するという方法があります。
– [How to replace HTML img broken by missing or erroring image src](https://stackoverflow.com/a/64610546/7947548)
– [How to hide image broken Icon using only CSS/HTML?](https://stackoverflow.com/a/22051972/7947548)

私の場合は、`img`の代わりに適当な`div`を表示したかったのですが、Google検索しても見つからず・・・。実験してみたところ、`img.outerHTML`を設定すれば`div`に置き換えられると分かりました。

MarinDeck（TweetDeck）で画像のサムネのアスペクト比を元画像通りにするカスタムCSS, jsを書いた

# 大変なことが発覚した（2022/4/28 00:03追記）

Android版のMarinDeckには「Display images in the original aspect ratio」の項目があって、この記事でできるようになることは公式に設定が可能なのでAndroidをお使いの方々はそっちを使うのがいいと思います

私みたいにiPadで使ってるぜって方々はこの記事が役に立つかも？

# 事の発端

私の友人にMarinDeckを勧めたら下の画像のように聞かれた

まあ、確かにそうやね
私も結構MarinDeckを使ってて不便だなとは思ってたからこの際解決しようということでカスタムCSS, jsを書いた

—

MairnDeckを知らない人は下のリンク先を見るなりググるなりしてね

https://hisub

M5Stackに繋いだセンサーの値を、Electronに送ってみる１ー M5Stack編 ー

# はじめに
ElectronとVueを使ってデスクトップアプリを作っていますが、画面の操作を、タッチパネル以外に、物理的なボタンやセンサーを使って操作したい事がたまにあります。
今回はそんなセンサーの値をElectronに送って、画面を動かす方法をM5Stackを使って作っていきたいと思います。
また、M5StackはBluetoothやWifiなど、無線での操作もできると思いますが、今回はUSBを使って、有線でシリアルポートの値を受け取ってみたいと思います。
# 環境
– vue : 3.0.0
– electron : 13.0.0
– serialport:10.4.0
– Arduino IDE
– WebStorm
– Windows10 Home
# 今回使ったセンサー類
– [M5Stack M5Go](https://www.switch-science.com/catalog/7363/)
– [M5Stack用 ToF測距センサユニット](https://www.switch-science.com/catalog/5219/)
– [M5Stack用 回転角ユニ

fetch()を使ってGoogle Blogger API v3で投稿データを取得しました。

背景

これまでは、Googleブログの投稿データは、$.Ajax()を使って取得していました。$.Ajax()でも問題なく取得できていましたが、最近は、fetch()を使った例題もでてきましたので、今回、fetch()に挑戦してみようと思い立ちました。fetch()の方が多少、ステップ数も少なく、可読性もよさそうなので、、メリットもあるかと思いました。

準備

Google BloggerのAPIを使うには、事前にGoogleアカウントとAPIサービスの認証情報を登録しておきます。これは、Google Cloud Platformサイトを開いて登録します。詳細は省きます。

サンプルのコード

ここのコードは、「なつかしの曲(ポータル)」の本番環境でも使用している
ものです。

//******************************************************************************
//この非同期関数は、ブログサイトから指定のブログの全投稿データを取得します。
//ge

【JavaScript】JavaScript or jqueryの小ネタ

# コード

連番数値の配列を作る

“`javascript

const num = 15;

console.log([…Array(num).keys()]);

// １から始めたいなら
console.log([…Array(num).keys()].map(n => ++n));

“`

# 結果

“`
[
0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14
]

[
1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12,
13, 14, 15
]

“`

Stripe Checkoutの決済ページへのリダイレクト方法を、`redirectToCheckout`から変更する

2022/04現在、ドキュメントではStripe Checkoutで決済ページにリダイレクトする際に、「Stripe.js SDKの`redirectToCheckout`を**利用しない**」方法を紹介しています。

https://stripe.com/docs/checkout/quickstart

この記事では、`redirectToCheckout`を利用しない方法への切り替えについて紹介します。

## `redirectToCheckout`を利用しない理由

2021/09より、ドキュメントで紹介している標準的な方法から、`redirectToCheckout`は外れています。

これにはいくつかの理由がありますが、2022/4時点で最もインパクトの大きい違いは、「カスタムドメインが利用できないこと」です。

https://stripe.com/docs/payments/checkout/custom-domains#troubleshooting-integration

https://qiita.com/hideokamoto/items/d36602a12

名所と名言、動的に変化させ表示させる(JavaScript)

# はじめに
絶景と名言が好きなので、まとめて表示してみようと思います。（”絶景を見ながら偉人の名言を”、という本は、たくさん出版されていますが、それと同類のものです）

# 内容
– Webサイトに写真を表示し、そこに文字を入れる（写真＝自分で撮影した世界の名所、文字＝名言集）
– アクセスする度に、写真も文字も動的に変化させる
– 写真のリスト、名言のリストはGoogleスプレッドシートに用意してAPI連携する

##### 使用する技術
– Javascript / GoogleスプレッドシートAPI連携
– bootstrap(v5)のimage-overlays
https://getbootstrap.jp/docs/5.0/components/card/#image-overlays

# サイト
[作成したサイトはこちら](https://anotherskyjp.site/pic_proverb/pic_proverb.html)　
![Screenshot_2.png](https://qiita-image-store.s3.ap-northeast-1.ama

JavaScript基礎概念勉強ノート6

# 初めに
今回はES6一部の基礎概念を勉強ノートとしてまとめてみました。

# Scope in JavaScript
基本的に以下の四種類があります。
– Global Scope：どこでもアクセスできる。
– Function Scope：関数式内だけ。
– Block Scope：ブロック（｛｝）内だけ。
– Module Scope：モジュール内だけ。
参考資料はこちら↓
[function – What is the scope of variables in JavaScript? – Starck Overflow](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript)
[javascript – ES6 module scope – Starck Overflow](https://stackoverflow.com/questions/30287977/es6-module-scope)

## `let` & `const` – Block

メモ:条件演算子(?:)とNull合体演算子(??)の違い

## 概要
つい最近TypeScriptでコードを書いていて、条件演算子(?:)とNull合体演算子(??)の違いに引っかかったので忘れないようにそれぞれの違いと、どこに引っかかったのかをメモした記事です。

## 条件演算子(?:)
条件演算子は以下の形式で使用され、**条件が真値であった場合**に左辺を、**条件が偽値であった場合**に右辺を実行します。
“`
条件 ? 左辺 : 右辺
“`
JavaScriptで偽値として扱われるのは次の値です。
– false
– 0
– 0n(BigInt)
– 負の値
– 空文字列(“”)
– null
– undefined
– NaN

そのため、上記の値を条件として利用した場合は全て右辺が実行されます。
“`TypeScript
false ? “true value” : “false value”
// false value

0 ? “true value” : “false value”
// false value

“” ? “true value” : “false value”
// false value

【非同期処理(Ajax)】SpringBootでJavaScriptによる非同期処理(Ajax)の実装方法

# はじめに
今回は、SpringBootによるAjaxの実装について解説します。

プライベートでのWebアプリ開発で実装した方法なので、比較的実践に近い方法だと思いますので、参考にしていただけますと幸いです。

なお、今回の実装では、**jQueryではなく素のJavaScriptを用いての実装**となります。
(全然、素のJavaScriptでの実装を書いた記事がなかった・・・)
※ 本記事の内容は、以下の前提に当てはまる方向けです

# 前提
– JavaScript中級レベル以上
– Ajaxについて基礎知識がある
– SpringBootのMVCモデルについての基礎知識がある
– SpringのRestについての基礎知識がある

# 実装方法
実装する方法は、コントローラーを`Rest`とし、非同期通信処理を行うリクエストをJavaScriptで指定し、JavaScriptでサーバーとやり取りするという流れで実装します。

そのため、メインはフロントエンド部分の実装となり、CRUDなどのビジネスロジック(Serviceクラス等)については触れませんので、ご了承ください。

【discord.js v13 + Discord Player】よくあるmusic botを作成する

# はじめに
こんにちは、こんばんは、ナマステ
今までdiscord.js+@discordjs/voice+ytdl-coreでmusic botを動かしていたのですが、
[Discord Player](https://discord-player.js.org)を使用したところかなり便利だったのとQiitaにこれを使ってる記事が無かったので、備忘録がてら基本的な使い方を書きます
[Discord Developer Portal](https://discord.com/developers/applications)からアプリケーションを作成して～みたいな初っ端の手順は、他の記事が大量に転がってるので端折ります

# 前提
この辺知らないと途中で混乱するかも、知ってても文章がヘタクソだから混乱するかもゴメン
– JavaScript/Node.jsがとりあえず書ける
– discord.jsを触ったことがある
– discordのスラッシュコマンドを知っている([この記事べんり](https://qiita.com/gaato/items/55b32bc4777905ac162

Azure Functions で 認証ユーザー情報にアクセスする

リクエストヘッダに、`X-MS-CLIENT-PRINCIPAL-NAME` および `X-MS-CLIENT-PRINCIPAL-ID`などのキーで含まれている。

***ただし***
> Different language frameworks may present these headers to the app code in different formats, such as lowercase or title case.

https://docs.microsoft.com/en-us/azure/app-service/configure-authentication-user-identities#access-user-claims-in-app-code

`JavaScript` の場合小文字でした。


ExpressでREST APIを実装する時にreq/resのvalidationを楽に実装できるライブラリを使ってみた

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

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

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

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

https://github.com/yuta-katayama-23/node-express/commit/7e5a64e54f99b7fb8019f89b6dbfe5846e205148

何か作れるようになるまで

# あらすじ
ひょんなことからフロントエンドコーダーとしてインターンで採用され、WEBサイトをコーディングしてきたが、今一度立ち返って自分の能力を評価すると「HTMLとCSSしかちゃんとかけてないじゃん」となった。
将来は立派なエンジニアになりたい私はこの1年間で立派なポートフォリオを作って大学を卒業しようと心に決めた。。

# 技術選定
とりあえずRubyとReactを選びました。理由は特にないです。
なんでもいいからとりあえずプログラミングをできるようになりたいという理由だけなので、特に深く考えずに「プログラミング言語　おすすめ」で検索して無難そうなものを選んだ感じです。

# 今後の予定
各言語でキャッチアップを始めています
– Ruby
– まずはRubyだけで色々なものを作ってみる
– 目的としては、「基礎文法の理解」と「のちのフレームワークの理解を早めるために言語の仕様はしっかり理解しておく」
– Paizaとか使おうかな
– React
– チュートリアル
– 脳死で作れるようになる→PropsやStateの理解を完璧にする

Javascriptの基礎 概要編

## JavaScriptとは

HTML/CSSで作られたサイトは静的なものになってしまします。
※突き詰めるとCSSでアニメーションのようなものも作れるみたいですが、僕は初学者なのでまだ理解していません、、すみません。

ただ、JavaScriptを用いることで、サイト自体に『動き』を出すことが可能になります。

例えば、、、
– 入力の際に間違いや、空欄があったときのエラーメッセージ
– googleの検索フォームで、文字を入力時に予測変換で出てくる
– 地図の拡大や縮小

その他にも様々な場面で使われています。

2021年時点ですが、世界的に見てもJavaScriptは一番習得されている技術のようです。

また移り変わりの激しいITの業界でもこの言語だけは変化することなく、常に求められている言語のようです。。

**現在のWebサイトには欠かせないプログラミング言語**としてJavaScriptは習得した方がいいと思いました。

基礎から勉強していきたいと思います。

## まず第一歩目として

まず実際にchrome表示させてみたいと思います。

使用する物
– Visua