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

SKT豆腐屋と「Screeps: Arena」 のチュートリアル#3「First attack」を進めよう

# Screeps: Arenaとは
　「JavaScript」などのプログラミング言語を使って自軍の「駒」を動かし他プレイヤーと戦うゲーム
Steamからダウンロードできる。https://store.steampowered.com/app/1137320/Screeps_Arena/?l=japanese
Screepsの公式discordはこちら（英語）：https://discord.gg/screeps
超全茶discord(日本語)では一緒に楽しみたい人を募集中：https://discord.gg/Am9Rz4w　（discord)

# Screeps: Arenaのチュートリアルを始めよう
https://qiita.com/Yumenoshima/items/054e82f5fa1fab6006b0

## コメント付きサンプルコード #3「First attack」
“`javascript
import { } from ‘/game/utils’;
import { } from ‘/game/prototypes’;
import { } from ‘/

SKT豆腐屋と「Screeps: Arena」 のチュートリアル#2「Simple move」を進めよう

# Screeps: Arenaとは
　「JavaScript」などのプログラミング言語を使って自軍の「駒」を動かし他プレイヤーと戦うゲーム
Steamからダウンロードできる。https://store.steampowered.com/app/1137320/Screeps_Arena/?l=japanese
Screepsの公式discordはこちら（英語）：https://discord.gg/screeps
超全茶discord(日本語)では一緒に楽しみたい人を募集中：https://discord.gg/Am9Rz4w　（discord)

# Screeps: Arenaのチュートリアルを始めよう
https://qiita.com/Yumenoshima/items/054e82f5fa1fab6006b0

## コメント付きサンプルコード #2「Simple move」
“`javascript
import { } from ‘/game/utils’;
import { } from ‘/game/prototypes’;
import { } from ‘/g

配列でindexOfを使用して指定の値を削除したい時の注意点

# はじめに
配列で指定の値を削除する際に躓いたので記事にまとめます。
# 目次

1. [配列内のデータを消す方法](#Chapter1)
1. [indexOfを使用して躓いた](#Chapter2)

# 配列内のデータを消す方法
配列内のデータを削除するメソッドはいくつかあります。

**①popメソッド**
配列内で一番最後の値を削除します。

“`js
let array = [“a”, “b”, “c”]
array.pop()

// arrayの中身
// [“a”, “b”]
“`

**②shift**
配列内で一番最初の値を削除します

“`js
let array = [“a”, “b”, “c”]
array.shift()

// arrayの中身
// [“b”, “c”]
“`

③**splice**
削除する要素の位置と個数を指定して削除（第一引数に削除する位置、第二引数に削除する個数）

“`js
let arr

SKT豆腐屋と「Screeps: Arena」 のチュートリアル#1「Loop and import」を進めよう

# Screeps: Arenaとは
　「JavaScript」などのプログラミング言語を使って自軍の「駒」を動かし他プレイヤーと戦うゲーム
Steamからダウンロードできる。https://store.steampowered.com/app/1137320/Screeps_Arena/?l=japanese
Screepsの公式discordはこちら（英語）：https://discord.gg/screeps
超全茶discord(日本語)では一緒に楽しみたい人を募集中：https://discord.gg/Am9Rz4w　（discord)

# Screeps: Arenaのチュートリアルを進めよう

## プログラミング言語の切り替え方
– プログラミング言語の切り替えってどうやるの？
→　他の言語から「wasm」か「

WordPress で youtube を大きいサイズで楽に貼り付ける

## はじめに

xxxx年度版　とか、そのようなサイトがありますが、
ものすごく単純に、見やすく埋め込む方法を
jQueryで実装しました。

## CSSは不要です
かわりに、jqueryが必要です

## WordPressにYoutubeを貼り付ける方法

以下の方法で貼り付けた方法で動作確認しています。

“`youtube貼り付け.txt
https://www.youtube.com/watch?v=動画ID

https://youtu.be/動画ID
“`

埋め込みコードをつけるほどでもありません

### サイズを変更するJavaScript
ついでに、.youtubeのクラスも追加するようにしてあります。
“`addyoutube.js
/* youtube.sjs */
$(function() {
var width=document.documentElement.clientWidth,
height=document.body.clientHeight,

// wpcontentのクラスで探しています
// 一般的には body か

WebTransport で RTP-FEC (ProMPEG) を再現してみた話

## はじめに

Chrome M97 から WebTransport が登場しました。
これにより、DATAGRAM を使っての信頼性のない UDP のような通信がブラウザ可能となりました。
すなわち HoL(Head of Line) Blocking の無いリアルタイム通信が可能になります。

[前回](https://qiita.com/monyo-tech/items/c4c5c2e8e403728c0765)の記事では MPEGTS を HTTP-Chunked-Transfer で送ってみましたが
HoL の無い形で送れるのであれば、リップシンクもしやすくなるので是非送ってみたい。
せっかく MPEGTS を DATAGRAM で送るのであれば、既存実装と近い形で出来ると理想的です。

であれば、RTP-FEC (ProMPEG) のペイロードを送れば、目的を満たせそうに思えます。
RTP-FEC (ProMPEG) の実装自体は超単純ですので、週末の空き時間に実装してみました。

## 前提

### RTP-FEC (ProMPEG CoP3 #2)

FEC 付きの

ランニングコスト0の書籍管理webアプリ！　QuaggaJSってどんなもの？

# ランニングコスト0の書籍管理webアプリを開発！　QuaggaJSってどんなもの？

※こちらの記事の内容は2022/4/9に執筆したものです。

## 初めに

この記事は、[以下の元記事](https://qiita.com/keisuke_suzuki_engineer/items/3be494864dffb3b5543b)で紹介しているアプリを構築する際に使ったQuaggaJSの機能について紹介している記事です。元記事からご覧ください。

https://qiita.com/keisuke_suzuki_engineer/items/3be494864dffb3b5543b

## バーコードって？

書籍どころかほぼすべての商品についているバーコードですが、具体的に何なのかご存じですか？実はバーコードの招待は単なる文字(数字)でしかないのです。
文字を特定のルールで白と黒の線で表したものがバーコードなのです。つまるところ、バーコードを読み込むというのは文字を自動入力しているようなものなものなのです。

## QuaggaJSって？

QuaggaJSとはjsのライブ

#Javascript #programming # 任意の1タブを1分毎に自動的にリロードする #Chrome 拡張機能

本内容を利用した場合の一切の責任を私は負いません。

# 機能
タイトル通り。
任意の1タブは、アクティブタブのことで、拡張機能を操作した時のタブ。
公式Appではないためか、拡張機能だけではService Workerがとめられてしまう。
デベロッパーツールと併用が必要です。

# バージョン
* OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC

* Chrome: バージョン: 100.0.4896.75（Official Build） （64 ビット）

# 準備
1. 下記のリポジトリをダウンロード
[https://github.com/github895439/KToolForChrome](https://github.com/github895439/KToolForChrome)

1. ダウンロードしたものを展開

1. Chromeの拡張機能を表示
Chromeの

[Typescript] オブジェクトの特定プロパティの型を上書きする型関数をつくる

# 成果物
“`
/**
* 特定のプロパティを上書きする型関数
* Overwrite
*/
export type Overwrite = Omit< T, keyof U > & U;
“`

# 何がしたいか
“`
type Person = {
firstName: string;
lastName: string;
age: string;
};
“`
例えば上記の様なオブジェクトがあとすると、 `age` プロパティだけ型を `string` から `number` へサクッと安全に変更できる型関数を作りたい。

**※ しかしプロパティの上書きは混乱を招くので、今回の例のような場合は設計を見直すべきです。**

私たちの場合、ORMにPrismaを使っているのですが、Jsonデータを取得するときに、 `any` 型になってしまう。そういった時に、jsonデータのみを自分たちで作った型に上書きしてあげたか

javascript同期処理用の簡単なテンプレ

# 主旨

普段jsを使いません。
なので、ネットに転がっている同期処理のソースコードは読みづらかったです。
健忘な自分にとってわかりやすい簡単なテンプレートを投稿しておきます。

# テンプレ本体

“`javascript:temp.js

// ↓この行は無視。事前知識が必要なため。
const sleep = millisecond => new Promise(resolve => setTimeout(resolve, millisecond*1000));

// ↓ここからが主な部分。

// 実行したい処理を関数として定義する。
function f1() {
console.log(“f1”);
}
function f2() {
console.log(“f2”);
}
function f3() {
console.log(“f3”);
}

// この関数の中に処理の流れを記述する。sleepは処理間の待ち時間。
async function work(_n) {
f1();
await sleep(_n);
f2();
awa

スプレッドシートで和暦を西暦に変換するApps Script

和暦を西暦に変換する関数です。例えば、昭和5年11月18日を文字列「S5.11.18」と記述しているときに、「1930年11月18日」に相当するDate型に変換します。

Google Sheets（Googleスプレッドシート）で、拡張機能からApps Scriptを開き、以下の関数を記述します。

“`javascript
function getYear_(nengo, japaneseYear) {
const startYears = {
M: 1868, // 明治1年 1868年
T: 1912, // 大正1年 1912年
S: 1926, // 昭和1年 1926年
H: 1989, // 平成1年 1989年
R: 2019, // 令和1年 2019年
}
return startYears[nengo] – 1 + Number(japaneseYear);
}

function SEIREKI(value) {
const [japaneseYear, month, date] = value.spl

??(null結合演算子)ハテナハテナで条件分岐[JavaScript]

“`
const foo = value ?? null;
“`
こんな感じで条件分岐を行うことができます。
上記の場合の処理を言葉で書くと、

*valueが存在する場合はvalueを返し、fooに代入する。*
*valueがnullまたはundefinedの場合はnullを返し、fooに代入する。*

こんな感じですね。

“`
const foo = value ? value : null;
“`
この式の短い版みたいなイメージで使ってます。
ただしvalueがnullかundefinedの場合でないと右側の値へ分岐を行ってくれないので、
**true/falseで処理を分岐させたい場合には使えません。**

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

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「ことばさがし」

https://forms.gle/Ln3ajbrK4wKcebHr7

（上のボタンから友だち追加できます。フィードバックをいただけますと幸いです…!）

## 背景
謎解きを作っていると「Xを

【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