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

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.”
}

makeCommonM

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)

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

休憩時間だからこそ、テンションをあげたい時に押すボタンを作った

# 「疲れた！」という言葉を何かのエネルギーに変えたい
リモワ中、誰もいないのをいいことについ「疲れたー！！！」と叫んだりしたことはないだろうか？私はある。実際は「つっっっっっっかれたー……」という、心の底から絞り出した渾身の「疲れた」。
この言葉を **何かのエネルギーに変換することはできないだろうか？** そう、例えば **テンションをあげる何かに……**

# テンションをあげるものと言えば
テンションが上がるものは何か？ **氷川きよし**でしょ。
完成したのがこちら。
※音声は流れません

テーマ「休憩」でアプリを作りました。ものはリプに貼っておきます。 pic.twitter.com/l02IhKpxaH

— 7mst?Webサービス【ぬいmeet】制作中 (@nnmshita) March 3, 2022

# アプリ
https://condescending-bassi-b0ab17.netlify.app/

**＜使い方＞**
* マイク認証をONにして、ボタンを押す。
* 心の底から「疲れたー！」と言う。（「めっちゃ疲れた」「ちょー疲れた」でも可）
* 氷川きよしさんが煽り散らしてくれるので、こぶしを振り上げ

【個人開発】「真のナポリピッツァ協会」認定店をサクッと探せるWebサービスをリリースしました。

## はじめに
[おおの](https://twitter.com/ohno_hope3)と申します。
突然ですが、**真のナポリピッツァ**[^1]を食べたことはありますか？
これを使えば**真のナポリピッツァが食べられて感動すること間違い無し**というサービスを開発しました。

**URL:** https://www.napolipizza-club.com/
**GitHub:** https://github.com/shota-hope/True_Neapolitan_Pizza_Club

– ナポリピッツァ好きが**真のナポリピッツァ協会認定店**[^2]をサクッと探したい。
– ナポリピッツァを意識して食べたことがなかった人に**真のナポリピッツァ**[^1]の感動を伝えたい。
– ナポリピッツァ界隈の発展を応援する想いを込めて *

JavaScript: reduce [アウトプット全くしてこなかったのでアウトプットする004]

reduceを書くことがほぼなかったのでアウトプットします。

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

> reduce() で一番わかりやすいのは、配列のすべての要素の和を返す場合でしょう。

“`js
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);

console.log(sumWithInitial);
// expected output: 10
“`

“`js
(previousValue, currentValue) => previousValue + currentValue,
`

vistaでphotoshop その13

# 概要

vistaでphotoshopやってみる。
キャンバス作って、部分的にjpg読んで、pngで出力やってみる。

# 写真


# サンプルコード

“`
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
var x = 100;
var y = 100;
var selReg = [[x, y], [x + 400, y], [x + 400, y + 400], [x, y + 400], [x, y]];
activeDocument.activeLayer.copy();
activeDocume

getElementsByClassNameでの躓き

getElementsByClassNameへの理解不足で躓いたので記録として記載します。

Javascript学習の一環としてHTML/CSSで作成した静的サイトの文章を英語化しようとgetElementsByClassName, style.displayを使おうとしていましたが、getElementsByClassNameについてしっかり確認せず、名前の似ているgetElementByIdのように考えていたのでエラーとなりました。

**getElementsByClassName（）：指定したクラス名を持つ要素のリストを返す。**
**getElementById: 指定したidを持つ要素を返す。**

当初”リストを返す”を理解できておらず、その後のstyle.displayが効かなく困りましたが、配列として考えてfor分で取り出すことができるという情報を発見したので参考にしました。
pタグにクラスを持たせて取得し、取得した要素のstyle属性(display)を操作することで簡易的に日本語⇄英語の切り替えをできるようにしています。
無理やりやってる感じが強いのでスマートな

日時ライブラリのTemporalの色々なAPIをいじってみた

## はじめに

:::note warn
Temporalは現状 TC39 proposal stage 3 のものを使用しています
今後APIが変わる可能性もあるのでご注意ください
:::

JavaScriptで日時ライブラリを使用する機会があり、Temporalが stage 3 だったのを思い出したので、少し触ってみようと思いました。

せっかくなので、何か作りながら触ってみようということで、簡易的なカレンダーを作ってみました。

https://codesandbox.io/embed/green-sky-olr0m4?fontsize=14&hidenavigation=1&theme=dark

## Temporalとは

JavaScript標準ライブラリへの追加を目指して開発中の日時ライブラリです。

https://github.com/tc39/proposal-temporal

Temporalについては日本語でもドキュメントを一部翻訳いただいていたり、Qiitaにすでにいい記事がいくつかあるので、詳しくはそちらをご覧ください。

https://tc39

MediaRecorderで作ったp5.jsの超簡単録画ツール(p5.MovRec)を更新した話

# サマリ?
以前に、[MediaRecorderとffmpeg.wasmでp5.jsの超簡単録画ツール(p5.MovRec)を作った話
](https://qiita.com/tetunori_lego/items/c942eb2aad844b72dadb)で作ったツールについて、セキュリティの都合上`ffmpeg.wasm`が使えなくなるケースが多くなってしまったため、再度、高画質`webm`動画を作るツールとして再リリースすることにしました。録画手順もさらに簡単になったので、改めて記事化しておきます。

というわけで、あらためまして、`MediaRecorder`を使って、`p5.js`上で、簡単にスケッチの録画ができるツール(`p5.MovRec`)を開発しました。既存の`p5.js`のスケッチを汚すことなく、HTMLファイルにたった**1行**追加して、キーボードを押すだけで爆速で動画が生成される簡単ツールとなっています。TwitterとかYouTubeとかに作品をアップされている方にお勧めです。
※ただし、TwitterにUpする方は、[Convertio](https:

FileAPIを使い「テキストファイルでキーワード変更可能」なタイピングソフトを作ろう！：JavaScrpt初級～中級者向け

Youtubeで公開した内容を記事にしました。
タイピングソフトを作ろう！【後編】「HTML/CSS/JavaScript/PHP…のキータイピング練習にも対応」JavaScript入門
以下Youtubeでの解説動画も張っておきます。（同じ内容ですが、詳しすぎるほど説明してます（笑））

– YouTube
https://youtu.be

◆ サンプルファイル
Github からダウンロードしてご利用ください
https://github.com/yamazakidaisuke/keytyping_youtube

◆ どんなキータイピングアプリ？
外部ファイルでキーワードを管理します、以下のように並べるだけ。
これはJavaScriptでFileApiを利用することで可能になります。

以下画面構成を見ていただければわかりますが、
上記のテキストファイルを読み込めば、オリジナルのキーワードをタイピングできます！！

image.png

◆ 変数を準備
keytyping.html
//***************************************
//グ

JavaScript let constについての備忘録

# 改善点

会社でもコメントでも御指摘あった通り殆ど日記と大差なくQiitaで書く様な物では無かったのと自分が思ってるよりか説明下手なのもあったので今回からはよりエンジニア向け且つ分かり易く纏める事を意識したいと思います、御指摘して下さった方々本当にありがとうございます。

## そんな訳で本日の学習内容

午前中　主に`HTML`の学習
`HTML`の基本文法から、`HTML`の始まりを表す``タグや見出しの`タグ`、段落を表す`

タグ`と箇条書きに用いる`

`タグにその`

`タグを囲む`

`と兎に角タグ、タグ、タグと出て来ますが基本的にはタグとタグで挟むイメージと各タグの要素を少しでも覚えておけば案外混乱無くコーディング出来るのでしょうか？一先ずは``タグの間に本文を書き込むって事を頭に入れて今後の学習を進めてみましょうか。

午後　`JavaScript`の学習
`let`では無く`var`が出て来てそれでいて使い方は同じ？取り敢えず調べて見て分かった事は

– `var`は再代入、再宣言が可能な事

“`