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

React18がリリースされたので、開発環境をゼロから構築してみる。【前編】

React 18が、2022年3月29日にリリースされました。

> 本家
[React 18 is now available on npm!](https://reactjs.org/blog/2022/03/29/react-v18.html)

また、React 18用のtypescript定義ファイルも2022年4月7日にリリースされました。

最新の環境を「create-react-app」とゼロからで構築し比較してみます。

## create-react-app
“`
npx create-react-app r18 –template typescript
“`
で、環境構築します。

package.jsonは、以下の通りです。@types/reactは、最新版ではなくReact17用です。
“`
“dependencies”: {
“@testing-library/jest-dom”: “^5.16.4”,
“@testing-library/react”: “^12.1.4”,
“@testing-library/user-e

Canvasを画像化する

# はじめに
Canvasで作成したイメージは、そのままだとスマホで画像保存できません。
したがって、一度画像に変換して上げる必要があります。

以前記事で紹介したWebサービスをアップデートする際に実装しました。

https://qiita.com/soh_mitian/items/86c8eccf060a72607c29
# コード
基本的な流れはimgタグに対して、src属性としてBase64に変換したCanvasを食わせる形です。

## HTML

“`html

“`

## Javascript
“`javascript
document.querySelector(‘#selectPeopleImg’).addEventListener(‘change’, (event) => {
const file = event.target.files[0]
if (!file) return

const reader = new FileReader()
reader.onload = (event) => {

Microsoft Cognitive Services Speech ServiceでZoomの字幕ツールをつくる

# 動機

監訳を担当した書籍『[デザインと障害が出会うとき](https://www.oreilly.co.jp/books/9784873119854/)』が2022年3月22日に出版されることになり、その記念イベントを3月26日にZoomビデオウェビナーで開催することになりました。この本はデザインと障害の交差がテーマですので、できるだけ多くの方に参加していただけるようにしたい、ということでチャンネルの一つとして字幕を提供するためのツールを探し始めました。

字幕を提供するためのツールは既に世の中に沢山あります。ですので、当初はその中のどれかを選んで使うつもりでした。しかしながら、やりたいと考えていた次のことを実現できるツールが無いということが分かってきました。

– 認識中のテキストを仮想カメラとして提示する
– 認識後のテキストをZoomの字幕として提示する
– 各スピーカーに特別な準備をお願いすることなくホスト側の準備だけで対応できる

認識中のテキストを仮想カメラとして提示するという部分に関しては、「[Webカメラの映像に自動字幕を重ねるWebページ](https://gi

プログラミングスクールに関して

# はじめに
どのスクールどのコースといった詳細については避けるが、
半年にわたるプログラミングスクールのコースを修了したので、
学んだ内容の復習を今後記事にしていく。

検討している人、学習中の人の参考になればと思う。

最終的にはlaravelで簡単なウェブアプリを作るコース。

# 受講のきっかけ
– プログラミング自体には前から興味があった
– 業務でVBAなど簡単なプログラミングに触れる機会があった

を起点に、学びたいという意思はあったが何から手を付けていいかわからない、という状態。
どの言語を使えるのが有利なのか、環境構築の仕方など、ネットの広大な海に情報は落ちているが、
知識のない素人に情報の優先度の判断、取捨選択は難しいので情報を金で買う、という判断をした。

# 受講を終えて
かなり不真面目な生徒だったと思う。
実生活でのトラブルから精神的に不安定だったこともあるが言い訳に近い。
教材を読みはするがコーディングは全くせず、提出できない課題も多かった。

教材というロードマップはあるが、しっかりと勉強の時間は確保しないといけなかった。

最後の2週間程度でちょ

JavaScriptで遊べるゲーム【Screeps: Arena】チュートリアル（随時更新）

「JavaScript」で遊べるゲームがsteamで出たということで、チュートリアルの内容ざっくり日本語にして書いてみる。プレイするタイミングでまったり随時更新していく予定なので間違ってたらそっとコメントでおしえてください:innocent:

# Screeps: Arenaとは
プログラミング言語を打ち込んでキャラクターを操作する対戦ゲーム。
基本的なJavaScriptはわかっていること前提。
[Screeps: Arena](https://store.steampowered.com/app/1137320/Screeps_Arena/?l=japanese)

# チュートリアル

## Loop and import
チュートリアルへようこそ！ここでは、コーディングによってScreepsArenaをプレイする方法の基本を学びます。
### イントロダクション
「Screeps」は「クリープのスクリプト」を意味します。ゲームでは、プログラミング言語として実際のJavaScriptを使用して、ユニットまたはクリープの動作をスクリプト化します。JavaScriptについては説明

【LINE Messaging API】複雑な単語検索ができるLINE Botを作った

## はじめに
複雑な単語検索（クロスワード検索＋α）ができるLINE Bot「ことばさがし」を作った。前半は主に機能の説明、後半は制作にあたり必要になった技術やソースコード、参考ページを部分的に紹介する。

## LINE Bot「ことばさがし」

## 背景
謎解きを作っていると「Xを含むN文字の単語」「XがM文字目にあるN文字の単語」などを考えることがよくある。このような条件の単語検索が手軽にできればと思い、この LINE Bot を作ること

【Recoil入門】Selectorの使い方

今回はRecoilのselectorについて説明します。
Recoilの環境構築、atom、useRecoilStateについての説明はこちら↓。

https://qiita.com/itachi/items/69784d66dbe624ebaceb

## selector

`selector`は`atom`や他の`selector`からの派生stateです。
`atom`や他の`selector`の値を何らかの計算や加工をして返します。
また、`atom`や他の`selector`に何らかの計算や加工をした値を設定することもできます。

## selectorの作成
`selector`はアプリケーション全体で一意なキー、getプロパティ、setプロパティを設定します。

– `key`: アプリケーション全体で一意なキーを設定。他のatomやselectorと重複不可。

– `get`: atomや他のselectorの値を何らかの計算や加工して取得することができます。
– get(): atomや他のselectorの値を何らかの計算や加工して返します。引数にat

ESP32をBlocklyで動かしてみた

以前、以下の投稿で、ESP32上でMakecodeを使ったノーコードプログラミングを動作させました。

・[MakeCode for M5Core2 を作った](https://qiita.com/poruruba/items/be4b86a65af91c8dca45)
・[MakeCode for micro:bitで作ったプロジェクトをM5Atomで動かす](https://qiita.com/poruruba/items/8feed48b7dccb218f29b)

これをベースに、いろいろ拡張しようと思ったのですが、いろいろ制限がきついので、いっそのこと、素のBlocklyをベースにノーコードプログラミング環境を作ろうかなあと思いました。
UIFlowもBlocklyをベースにしているようで、同様のことを、自分の好きなように作りこんでいこうと思います。

Blockly | Google Developers

https://developers.google.com/blockly

ESP32側は以下のファームウェアを使っています。Javascript実行環境をESP32

footerをサイト下部に固定する方法

メインのコンテンツが少ない場合はフッターが上にきてしまう

それを防ぐためにjsでフッターを下部に固定する

コード

“`

“`
手順

１、window.innerHeightで画面全体の高さを取得
２、＄fto.ffset().topでfooterまでの高さを取得
３、＄ftr.outerHeight()でfooter自身の高さを取得
４、＄ftr.offset().topと＄ftr.outerHeight()を合計する
５、4の合計よりwindow.innerHei

javascript 入力内容をもとにアクションを変える

## はじめに
javascriptでプロンプトをだして入力した値で分岐する
### 教科書

確かな力が身につくJavaScript「超」入門 第2版

## 実行内容
“`js:yesと入力されたら次のメッセージをだす。違う場合は無反応

“`
### メモ
`let answer`で変数のanswerになり後から中身を変更可能
`const answer`で定数のanswerになり後から変更は不可能

「ワールドトリガー」で雑に理解る！JavaScriptの関数・メソッド・this

## はじめに
この記事は、漫画などにたとえて理解（わか）ったつもりになる、ほぼ自分用のアウトプットです。
なんとかこじつけているので、技術側、漫画側も表現の正しさそっちのけです。
また、元ネタを知らない場合は完全に何言ってんだコイツ状態でしょうけどそっ閉じしてください。

## 「ワールドトリガー」とは

週刊少年ジャンプで連載されてた遅効性SF漫画です。ボーダーと呼ばれる部活動軍隊が不思議な力「トリオン」で動作する武器を使い、日々部隊同士で模擬戦による訓練を行い、ネイバーと呼ばれる異世界人からの侵略を防衛します。現在はジャンプSQに移籍し連載中。

## 関数・メソッド概論

### 戦闘員が関数やメソッド

JavaScriptにおける関数・メソッドとは、大雑把にいうと「実行可能なオブジェクト」です。
ワールドトリガーの世界ではボーダーに所属するもの、しないものもあわせていろんなひとがいます。
これらすべての人を「オブジェクト」として考えましょう。オブジェクトは「情報のあつまり」です。

このうち、戦うことができる、すなわち実行することができるのは、ボーダー所属の戦闘員だけです。

【個人開発】自作アプリやSNSで使えるチャットボットを簡単に作れるサービスを作りました

　この度、『[QnAクリエイター](https://qnacreator.com)』というチャットボット作成サービスを作りました。
　通常ではホームページが必須のチャットボットを無料かつノーコードで作成し、ホームページ無しで運用できます。

# チャットボットってなに？
　チャットボットはWEB上の接客やお問い合わせへの対応を自動化するツールです。
　お問い合わせを自動化して人件費を削減するだけでなく、FAQやよくある質問を分かり易くお客様に提示することで、顧客満足度やサービスの利用率の向上を図ることができます。

　チャットボットについてさらに詳しく知りたい場合は、[こちら](https://qiita.com/NUPDATA/items/776e76ca977a7cc63ff3)や[こちら](https://active.nikkeibp.co.jp/atclact/active/17/100200154/120700020/)の記事か、私の作りました[こちら](https://qnacreator.com/QnACreator.php?i=MQ==)のボットをご覧ください。

Backbone.jsの基礎知識

# 目的
就業先でBackbone.jsが必要となり勉強を始めたのですが、Backbone.jsに関する日本語の記事が少なく、、、(´・ω・｀)困ったので自分用にまとめていきます。

# 目次
– Backbone.jsとは
– Backbone.jsの特徴
– Backbone.jsの導入方法
– Backbone.jsにおけるMVCの機能
– 参考文献

# Backbone.jsとは
**JavaScript によるアプリケーションフレームワーク**です。
大規模なアプリケーションを作る時に、効率的に開発できるツールになっています。

# Backbone.jsの特徴

– フロントエンドで動作する必要最小限の**シンプルなフレームワーク**
– 他のフレームワークと比べて**設計の自由度が高い**
– JavaScriptプログラムを**Model・View・Controllerの3つに分けて記述**する
– 大規模開発の場合でもプログラム全体を一定のルールに従って管理できる
– **nderscore.jsとjquery.jsに依存**している

先人が分かりやすくまとめてく

Web Animations API でアニメーションしてみる

## はじめに
皆さん、Web Animations API というものはご存知でしょうか？
JavaScript でも CSS の keyframe でアニメーションをするのと同じような書き味で、アニメーションを実装することができるAPIです。

この記事では、Web Animations API の`composite`という機能が Safari の最新機能を試せる Technology Preview 142 でサポートされるとのことで、その使い方についてまとめてみました。

https://developer.apple.com/safari/technology-preview/release-notes/

## 目次
– 概要
– 使い方
– animation定義
– コントロールメソッド
– デモ①（基本定義・コントロールメソッド）
– アニメーションの重ねがけ
– デモ②（重ねがけ）
– まとめ

## Web Animations API
### 概要
Web Animations API（以下、WAA）は、JavaScript を使ってアニ

JavaScript　型を調べる

## 用途
– JavaScriptのコードで型を調べたい時に使用する。
:::note warn
注意
`typeof` は「null」や「object」を正しく判別できない。
その場合は `Object.prototype.toString.call()` を使用する。
:::

## 使用方法
## typeof
“`js:書き方
typeof(型を調べたい値);
“`

“`js:例
console.log(typeof(“hogehoge”));
console.log(typeof(1));
console.log(typeof(null));
console.log(typeof([hoge1, hoge2, hoge3]));

// 結果
// string
// number
// object
// object
“`
「null」と「配列」が `object` で返ってくる。

## Object.prototype.toString.call()
“`js:書き方
var hoge = Object.prototype.toString;
conso

コピペで完結 超簡単 JavaScript クイズ 記述式

## はじめに
こちら開発の雑メモです。
JavaScriptの記述式のクイズの記事は案外探してみると少なかったり、理想のものが出てこなかったので、もし役に立てれば幸いです。
## 完成イメージ
完成イメージです！gifが小さいのでクリックして拡大してみていただければと思います。

## 実際のコード
“`html:quiz.html

Q1)日本で一番大きい山はなんでしょう？

（答え記入後、「回答する」をクリックしてください）

答え：

【５日目】メモ帳アプリの作成 [２]

# １．本日の課題
本日は前回作ったメモアプリを、一つだけ保存できるものから複数を保存できるものに改良する。
まずは前回作ったプログラムのおさらい。

See the Pen
Untitled by mizmizsan2 (@mizmizs

javascript if文でメッセージを出し分ける

## はじめに
javascritのif文の書き方を学ぶ
### 参考書

確かな力が身につくJavaScript「超」入門 第2版

## ゴール
if文でダイアログのボタンごとにメッセージを出し分ける
## 手順
“`js:ダイアログボックスを表示してOKまたはキャンセルでメッセージを出し分ける

“`

### メモ
`window.confirm`これで確認ダイアログボックスが出せる

配列の要素を削除、減らす　JavaScript

## 用途
– 配列の要素を削除したい時、要素を減らしたい時に使用する。

## 使用方法

## shift
“`js:書き方
配列名.shift();
“`
配列の先頭の要素を削除し、残りの要素を戻り値として返す。
配列が元から空だった場合は `undefined` を返す。
残っている要素についてはインデックスが1つずつ小さくなる。
“`js:例
var hoge = [“hoge1”, “hoge2”, “hoge3”];
hoge.shift();

console.log(hoge);
結果
[“hoge2”, “hoge3”]

console.log(hoge[0]);
結果
hoge2

console.log(hoge.shift()) // 削除した値を取得
結果
hoge1
“`
配列の先頭の要素を削除し、残りの要素のインデックスが1つずつ小さくなった。

## pop
“`js:書き方
配列名.pop();
“`
配列の末尾の要素を削除し、残りの要素を戻り値として返す。
配列が元から空だった場合は `undefined` を返す。
“`js:例

OBS｜音楽用キーボードでスイッチング

nanoKEY2 Switcher – https://youtube.l8r.jp/MidiSwitcher.html
obs-websocket 4.9.1 – https://github.com/obsproject/obs-websocket/releases/tag/4.9.1

“`html:NanoKey.html