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

ReactでMaterial-UI Dialogを使ったときのワーニング解消

# 発生現象
Material-UIのDialogの中身を自作のコンポーネントを表示させようとしたところ、警告がでた。
## 警告内容

## ソースコード
App.jsx

“`react
import React, { useEffect, useState } from “react”;
import Dialog from “@mui/material/Dialog”;
import DialogActions from “@mui/material/DialogActions”;
import DialogContent from “@mui/material/DialogContent”;
import DialogTitle from “@mui/material/DialogTi

Amazonで金額指定して、検索したい！！

Amazon で検索をかけるときに金額指定を行いたいのですが、何故かamazonの金額指定は、「0~1500」、「1500~10000」というざっくりした範囲しかありません。
なぜ、詳細な数字が指定できる便利機能が存在しないんだ！！！！！

ということで作成しましたww

# 作成したページとリンク
作成した内容（htmlファイル 40行分だけですがw）は以下の github でページを公開してあります。

https://nagajun1.github.io/amazon_product_search/

ページデザインはこんな感じ…というか、デザインにこだわらなかったため、これだけしかないですｗ
（画面は、修正前のものです。）

各項目を入力し、「検索」を押下すると、そのまま検索結果のページに飛ぶ仕様です。
例えば、商

静的サイトジェネレーター「Astro」を軽く調べて立ち上げてみた

## Astroとは？

? Introducing Astro: A New Kind of Static Site Builder

⚡️ Works with React, Preact, Svelte, Vue
⚡️ Astro renders everything to static HTML
⚡️ Result: 0 bytes of JS, by default
⚡️ Interactive components load on demand

Ship less JavaScript.
https://t.co/lFNN3OVUXi

— fred (@FredKSchott) June 8, 2021

—
直訳
>? Astro紹介：新しいタイプの静的サイトビルダー
⚡️ React、Preact、Svelte、Vueで動作する
⚡️ Astroはすべてを静的なHTMLにレンダリングする
⚡️ 結果：デフォルトでJSは0バイト
⚡️ インタラクティブなコンポーネントをオンデマンドで読み込む
—

特に気になるのは
>⚡️ Astroはすべてを静的なHTMLにレンダリングする
⚡️ 結果：デフォルトでJSは0バイト
⚡️ インタラクティブなコンポーネントをオンデマンドで読み込む

ですかね。
今回は実際にローカル

ボトルの残量を推定する

| 満タン | 半分 | 空 |
|:-:|:-:|:-:|
|  |  |  |

ISO-2022-JP（7bit JIS）のeml形式データをApps Scriptで解読する

Google Driveにバックアップしておいたeml形式のメールデータをApps Scriptで読み込んでみました。文字コードがISO-2022-JP（7bit JIS）だったのですが、Apps Scriptの`Utilities`のおかげでいい感じに読めました。

# ISO-2022-JPのeml形式データを読み込むには

生データに`ISO-2022-JP`と書いてあったので、文字コードを`JIS`に指定して読み込みます。

“`javascript
const driveUrl = ‘https://drive.google.com/drive/folders/…’;
const folderId = driveUrl.split(‘/’)[5];
const childFolderName = ‘backups’; // driveUrlの下にあるフォルダー名
const fileName = ‘a.eml’; // フォルダーの下にあるファイル名
const file = DriveApp.getFolderById(folderId).getFoldersByN

ブラウザに戻ってきたことを検知する

# はじめに
ブラウザからスマホアプリに遷移した後、アプリから再度ブラウザ（特定のページ）に戻ってきた時に処理を行うという場面があったのでその際の解決方法について記録します。

# PageVisibilityAPI
調べてみたところ、`PageVisibilityAPI`を使うことで検知できそうなことがわかりました。
Page Visibility APIについては以下通りです。

> タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。
引用元:[Page Visibility API – MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/API/Page_Visibility_API)

PageVisibilityAPIによりウィンドウが最小化されたり、他のタブに切り替えた時

【Nicehash API+Nodejs+LINE Notify】マイニングリグのステータスを24時間監視してLINEに通知する

# まえがき

グラボ4枚でマイニングしているんですがパソコンの調子が悪いときは急に落ちたり（電源は入った状態）、ネット回線の影響でマイニングできてなかったりします。

これを心配して外出先で毎回Nicehashのダッシュボード見るのも疲れたので、エラーのときやエラー回復したときだけLINEで通知してくれたらいいなと思って作ったものをまとめました。

前からやってマイニングリグ監視をnicehash apiとline notifyで通知するやつ完成したのでqiitaに記事あげます#Bitcoin #マイニング pic.twitter.com/PIVMs2bSms

— のどかもめ@HackBomb Steamで好評リリース中 (@nodokamome) October 16, 2021

# 必要なもの

各トークンの取得方法については割愛します。ググればだいたい出てきます。

1. Nicehash APIのアクセストークン
– https://www.nicehash.com/docs/
1. LINE Notifyのアクセストークン
– https://qiita.com/iitenkida7/items/576a8226ba6584864d95#line%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7-notify-%E3%81%A

javascriptからtypescriptへ変更を考えている場合

javascriptからtypescriptへ変更を考えている方やtypescriptをやって見たいと思っている方が考慮して欲しい内容やその差について、お話ししたいと思います。

ネットで、よく言われているjavascriptとtypescriptの差は以下のものですね。

JavaScriptとの互換性が高い
型定義
クラスを作成することができる
動作が速い
事前のバグ検出がやりやすい

上記のことで、一つ一つお話しして見ましょう。
JavaScriptとの互換性が高いと言うお話しですが、typescriptはビルドされたら、javascriptになります。
つまり、javascriptベースの言語と言うことで、typscriptにてできることはjavascriptもできると言うことです。
内部の規約により、型定義しているように見えると言う感じですね。
その代わりに、javascriptに新しいバージョンが出てそのバージョンでしか利用できない機能があるとしたら、それをtypescript内部開発者が、開発してくれない限り、typescriptとしては、エラーになり、利用ができないと

【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.head関数

# 【JavaScript関数ドリル】初級編の_.head関数の実装のアウトプット

“`javascript:_.head関数の挙動
_.head([1, 2, 3]);
// => 1

_.head([]);
// => undefined
“`
配列の先頭を返し、配列がなければ`undefind`となる。
## _.head関数の課題内容

## _.head関数に取り組む前の状態
– `i = 0`とし、`return array[i];`とすればよさそう

## _.head関数に取り組んだ後の状態
– 変数に０を代入する必要がないことに書きながら気づいた
– 別問題として、ターミナル上でnode.jsを用いて実行する際に同じディレクトリにないjsファイルを実行するためのパスの書き方を理解していないので、一度`cd`を実行しルートから辿っていくという方法しか出来なかった
– 今後は「`.`」、「`/`」の用法を正しく理解して、どこからでも任意のファイルを実行できるようにしたい

## _.h

Select2でAjaxによりリモートデータを取得する最小サンプルを解説

# はじめに
Select2でAjaxを使うためのノウハウを、最小サンプルをベースに解説したい。

# 環境
本サンプルの環境は以下の通りである。

– Select2 4.0.6-rc.1
– python
– flask

# サンプルの概要
2つの県を選択することができる画面である。

各Select2のフォームでは、データの初期設定、クリア、データの取得、親ウィンドウからの値の設定ができるようになっている。

画面を見ていこう。
メインの画面は以下の通りである。

それぞれ北海道と東京都が初期設定されている。「get_data」ボタンで設定された値を取得し、「add_data」でボタン「埼玉県」を追加する。また、「open_window」ボタンをクリックすると下のようなウィンドウが表示され、手動で要素を追加し、親画面のフォームに反映させ

Node.jsのインストール　npmの使い方について学んでみた。

## はじめに。。

今回、Node.jsとnpmコマンドについて学習したので、その復習として記事を書きました。
学習するに当たって利用したのは、環境構築を必要とせずに、PCとブラウザさえあれば利用できてしまうというオンライン学習サービス、Envaderを利用しました。

リンクはこちら　[Envader](https://envader.plus/)

## この記事でわかる事

– Envader is 何？
– Node.jsのインストール方法
– npmコマンドの使い方
– package.jsonの意味、意義

### 動作環境

EnvaderはLinux環境なので、コマンドもそれに付随します。
“`bash
OS Linux
ディストリビューション　Ubuntu 18.04.6 LTS
“`

## Envader is 何？

Envaderとはなんぞや？
全体を紹介すると、以下のコースを学習することができるサービスです。

– Linuxコース (一部無料あり)
– セキュリティ基礎コース(無料)
– ターミナルカスタマイズコース(有料)
– Databa

Javascript DOMContentLoaded & loadイベント

外部からjsファイルをheadタグ内で読みこみbodyタグにあるbuttonタグのクリックをきっかけに処理をする為にjsの処理としてDOMContentLoadedイベントを使用しました。
これと似たイベントでloadイベントというのもあると発見したので今後意識して使い分けられるように記録します。

**DOMContentLoadedイベント** : HTMLの解釈が完了したタイミングで発生。
**loadイベント** : HTMLに加えて画像の読み込みも完了したタイミングで発生。

前回使用したケースは画像の読み込みは関係なかった為、DOMContentLoadedで問題なく処理できましたが、それでいい気になって今後画像の読み込みが関わる時にエラーで嵌らないように上記２つのタイミングの違いは意識していきたいと思います。

正規表現を使って FizzBuzz

この記事は、FizzBuzz の書き方がわからない初心者の方のための解説記事……*ではなく*、正規表現に苦しむ駆け出しプログラマーを応援する記事……*でもなく*、**くだらなくて面白い FizzBuzz の書き方**を追求する記事です。

—

FizzBuzz の条件分岐には普通、剰余を用いますが、それを完全に正規表現で置き換えたバージョンを作るのが、この記事の目的です。

まず、正規表現で 3 の倍数・5 の倍数を表す方法を考えます。(以下、数値は全て十進法とします。)

# 5 の倍数

これは簡単ですね。一の位が 0 か 5 なら 5 の倍数です。

“`
\d*[05]
“`

# 3 の倍数

こちらは一筋縄ではいきそうにありません。

取っ掛かりとして、3 の倍数を次のように分割してみましょう。

– 上の位から順に区切っていく
– 各部分ができる限り小さな 3 の倍数になるようにする

“`:(例)
123456 → 12 3 45 6
11202201 → 11202 201
3275910026414877 → 3 27

【discord.js v13】登録したslash commandを削除する

# 概要
[discord.js でスラッシュコマンド（Slash commands）を使う](https://qiita.com/gaato/items/55b32bc4777905ac162a)
これを見ながら適当にサンプルコマンドを作成して
「ほーんこんな感じで作れるんか、で、削除どうすんの？？？？」
って小一時間ハマった

Googleで「discordjs slash command 削除」とかで検索かけたら1ヶ月くらい無回答で放置されてるteratailが出てきて涙を流したので、メモ程度に残しておく

# 消し方
“` javascript
// GUILD_IDはdiscordのサーバアイコン右クリ→IDをコピーで取れる
const guild = client.guilds.cache.get(GUILD_ID);

// こいつで全削除
guild.commands.set([])
.then(console.log)
.catch(console.error);
“`

# 参考
[discord.js 公式ドキュメント](https://discord

Javascriptでメッセージテンプレートをclassで管理する

## 背景
ノーコードツールでの開発で、メッセージの定義などができる機能がないので何かいい実装方法はないかと、考えてたんですが、JavaScriptからAPIリクエストを投げて結果をもとにメッセージを出すという実装なので、画面側でメッセージを持っておきたいと思ったのがきっかけです。

## 経緯
ただ、ライブラリが使えない環境なので、JavaScript・jQueryだけでメッセージを管理する
楽な方法がないか調べました。けれど、あ、これでいいやっていう方法が見つからず。。(´・ω・｀)ﾏ?

まあ、replaceメソッドを使えば何とかなるだろうと。ほかでも使えるかなと思い、ここに残します。

## ソースコード

“`javascript:Message.js
class Messages {
#common_mes = {
“required” : “$1 is null or empty.”,
“maxLength” : “$1 within $2 characters maximum.”
}

makeCommo

Discordbotを使って、テスト自動化に関するConnpassイベントを通知する

今回はConnpassイベントを通知するDiscordbotを作成してみました。
Discordbotの作り方と簡単なコマンドを紹介しているので、bot作ってみたいという方は是非見てください。

# なぜこのbotを作ろうと思ったのか

近年コロナ渦ということもあり、ソフトウェアテスト関連のオンラインイベントが増えてきました。
そのため、いろんなイベントに参加して情報収集を行いたいのですが、
毎度Connpassを開いて検索する行為がめんどくさくなってきました。

そんな時に、イベント通知botを作っている記事を見かけました。

– [connpassからQA関連イベントを取得してSlackに通知する](https://better-software-testing.hatenablog.com/entry/2022/02/01/061657)

この記事ではslackとawsを使って、イベントを通知しています。
私はslackbotの作り方もawsの使い方も詳しくなかったですが、
2021年の9月に開催したXP祭りにて、discordbotを作った経験があったので、
今回はそちらで作

【メモ】local環境でWebRTCを用いて映像を撮影した時のデータ保存について

### 該当箇所のコード
“`index.js
function startRecorder() {
navigator.mediaDevices.getUserMedia(constrains)
.then(function (stream) {
recorder = new MediaRecorder(stream)
recorder.ondataavailable = function (e) {
console.log(e);
// id testを操作できるよう取得
var testvideo = document.getElementById(‘test’)

// id testに属性を追加する
// https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute
testvideo.setAttribute(‘controls’, ”)
testvideo.setAttribute(‘width’, width

TypeScript のオブジェクト型まわりの整理（インデックス型やRecord型など）

この記事は Zenn に移行しました。
https://zenn.dev/riemonyamada/articles/33e6d292ed23db

JavaScriptにおける無名関数とアロー関数の「this」のスコープの違いについて

# 前置き

これについて学ぶ発端となったのは、以下のコードを書いているときでした。
リクエストを並列に走らせたく、Promise.allを使う必要がありました。
Promise.allの引数には、配列でPromiseオブジェクトを渡す必要があるので、下のputs（）というPromiseオブジェクトを返す関数も作成しました。

以下ではエラーが出るのですが、どこが間違いか気づきますか？

“`JavaScript
method(A, B) {
// 処理
}

puts(A, B): Promise {
return new Promise(function(resolve) => {
this.$api
.get(‘/tech-talk’)
.then(response => {
this.method(A, B)
})
.then(() => resolve())
})
}

funcA(): Promise {
const pr

【個人開発】誰でも、気軽に使える！エンジニア向け案件マッチングサービスを作ってみた。

# はじめに

はじめまして、まーと申します。
Twitter↓
Tweets by KPz234iNYoOQZF5

今回作成したサービス↓
https://match-engineer.com/

昨今では、コロナウイルスの影響もあり、「テレワーク」や「リモートワーク」といった言葉が一般の方々にも浸透しました。そんな中、「自分も案件を獲得してみたい！」「まずは副業からはじめてみたい！」といったニーズも増えています。
(参考：https://xn--pckua2a7gp15o89zb.com/news/20211109)

しかし、そのようなニーズが増えている一方で、経験の浅い学生や主婦のような方々が、**気軽に挑戦できる環境が整っているとは言いづらい状況**となっています。エンジニアの方が案件を獲得するクラウドソーシング