JavaScript関連のことを調べてみた2021年12月21日

脱初心者を目指すなら知っておきたいasyncとawaitを使った非同期処理

# はじめに
awaitの理解がしっかりできていなかったので非同期処理の復習も込めてアウトプット
※個人ブログから技術的アウトプットはQiitaへ引っ越ししたので、こちらは過去に書いたブログとなります。

# JavaSciptの非同期処理について

– JavaSctiptはシングルスレッド。
– 同時に扱えるタスクは1個だけ。
– プログラムを順番に**前から**1個ずつ処理する（下記のように）


しかし、これでは時間のかかる処理が途中にあった場合に困る。

例えば

– データベースへの問い合わせ（FirebaseならFirestoreのドキュメント取得等）
– 重たい画像処理

などは、完了にどれくらい時間がかかるか

JavaScript（Nuxt.js）のeventオブジェクトとは

## 概要
JavaScript(Nuxt.js)におけるeventオブジェクトについて学習したので備忘録として記載します。

## eventオブジェクトとは
eventオブジェクトとは、ユーザーによってイベント（クリックイベントなど）が発生した際に
そのイベントの情報が格納されたものです。
プロパティを呼び出すことや、メソッドを使用することができます。

#### プロバティ例
`Event.target`: イベントが発生した要素
`Event.type` : イベントの名前
…etc

#### メソッド例
`Event.preventDefault()`: イベントのデフォルトの挙動をキャンセル
…etc

### 使用例
使用方法は関数に第一引数を取るだけです。
引数名は何でもいいのですが、慣例的に`e`や`event`とすることが多いです。

index.vue

“`vue

javascriptでRPG＃１１

###こんにちは
今回は、NPCの話す言葉を作っていきます。
では、これをどうぞ

“`talk.js
//下の会話文
const talk = {
“1”:”ここは…？”,
“2”:”矢印キーで移動してみよう！”,
“3”:”家の中に入ってみよう！”,
“4”:”家の中に入りますか？”,
“5”:””,
“6”:”ここは道具屋。”,
“7”:”よく見ない顔だね”,
“8”:”じゃあ、初めてあった縁として…”,
“9”:”つるはしをあげよう！”,
“10”:”これで外の岩を砕いてきてくれ”,
“11”:”石をくれるかな？”,
“12”:”石がないよ。外からとってきてくれ”,
“13”:”よし、じゃあ、この石でおのを作ってあげよう！”
}
“`

これで、NPC１の会話が追加されました。
では、NPCを取得する機構を作っていきましょう。
色んな所を変更したので、全て載せておきます。
これをコピーしてください。

main.js

“`main.js
“use strict”;
const pl = {
“x”

JavaScript の Array 処理はどれが速いのか？ (2021 年 12 月)

JavaScript で `Array` に対して処理する方法はいくつかあります。
`Array` が提供しているメソッドとループで処理した場合にどちらが速いのか調べてみました。

※ 特に記載がない限り 2021 年 12 月 18 日時点の情報になります。

## 短い結論

普通の `for` ループが最速です。

とはいえ `Array` が提供するメソッドも十分に速いです。
可読性やコード量を考えると速度がとても重要かつ高頻度で呼ばれる処理以外は `Array` が提供するメソッドで問題ないと思います。

## 先行研究

2 年以上前の記事ですが次の記事でループ処理について調べられています。
それによると普通の `for` ループが最速だけど Babel や TypeScript は `for…of` を普通の `for` ループに展開するとのことでした。

https://qiita.com/shibukawa/items/4cae2a1410754d519232

ほかにも `Array` の処理について調べた記事がいくつかありました。 [^1] [^2]

[^1

Next2D Frameworkのシーン遷移

# シーンの移動
シーンの移動は`Application`クラスで実装されてる`gotoView`関数を利用します。
各クラスの親クラスにappというgetterを実装してあり、下記のコールを行う事でシーン移動が実行されます。

“`javascript
this.app.gotoView(“シーン名”);
“`

## SPAモード
SPAモードを有効にした場合は、URLでのシーン遷移も可能です。

“`text
https://example.com/quest/list
“`
とした場合は

“`javascript
this.app.gotoView(“quest/list”);
“`

と同義になります。

# レスポンスデータ
`next2d.fw.response`に格納されたレスポンスデータは`gotoView`関数がコールされるとリセットされ、`routing.json`に設定された`requests`にリクエストを行い、取得した値を新たにレスポンスデータを格納します。但し、`cache`が`true`に設定されている場合は、cacheされた情報を再利用し

面倒なレスポンシブモックアップ画像を秒で生成するサービスを作った

## ある日のボク「モックアップ画像つくるの、だるくね？」

こういうモックアップ画像つくるのって面倒だよな？

面倒さで言えば、夏休みの宿題の進捗を
逐一確認してくるママくらい面倒だ！

*宿題のガントチャートが冷蔵庫に貼ってあるって何回言ったらわかるんだ！*


*ちなみにこの画像はボクがいつかの夏休みの宿題でつくったWeb寄書きアプリのものさ*

## モックアップ生成を超かんたんにしたい！

次の夏休みにボクはこんなことを思ったんだ

**URLか画像を入力して**
**ボタンを押すだけで**
**モックアップ画像を生成したい！**
ってね

そしてできたサービスがこれさ！

[Works Thumbnail Genrator](https://works-thumbna

お猫様ほかほか監視装置

こちらは[IoTLT Advent Calendar 2021 \| Advent Calendar 2021 \- Qiita](https://qiita.com/advent-calendar/2021/iotlt) 21日目の記事です。
### はじめに
寒くなってきたので猫が３匹いる我が家では電気毛布が欠かせません（４枚くらい稼働中）
しかし最近の電気毛布は勝手に電源が切れる安全仕様になっていて、電気毛布が勝手に止まっています（切れないタイマー）
電気毛布が切れてお猫様が寒い思いをしてしまっている OR 電気毛布の上でお猫様がほかほかになりすぎていないかをチェックして冬を快適に過ごしてもらいたいというものです
### できたもの

電気毛布の上にサーモセンサを置いて、電気毛布上の温度を計測
10分ごとにLINE Notifyで温度を通知してくれる

### 環境・材料
– 非接触温度センサ　-　[OMRON MEMS非接

Kinx Update 2021（パッケージ管理サポートなど）

# はじめに

この記事は「[言語実装 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/lang_dev)」 21日目の記事です。本記事は、2019 年末（GitHub への初コミットは 2019/11/28）頃から始めた [Kinx](https://github.com/Kray-G/kinx) という自作言語のアップデートの話題になります。

https://github.com/Kray-G/kinx

御多分に洩れず、本業の忙しさによりアップデートは細々と行っておりますが、太く短くではなく **細く長く** 続けていこうと思っておりますので、今後ともよろしくお願いいたします。話題としては以下の構成になります。

1. **Kinx 2021年総括**
* まずは Kinx 開発や主な活動に関して 2021 年を総括したいと思います。V1.0.0 を 3/16 にリリースし、Kinx パッケージをサポートした V1.1.0 をつい先日リリース（[v1.1.0 Release](https://gith

HACCPが制度化されたので、温度を定期的に取得して記録するデバイスを作成

詳細は後ほど追記します。

#HACCP制度化
食品事業者は温度記録しないと法律違反になります。

#温度ロガーに金払うのがちょっと・・・
自作します。
多少慣れていないところがあったので２時間ちょっとかかりました。

https://zenn.dev/shuyin02/scraps/491f348774f38c

リンクでごめんなさい。
単三電池1本で１年持つらしいので、結構経済的
冒頭にも書きましたが、後で詳細は書き直します。

呼称の違う連想配列系の単語でググってみた

# はじめに

**「Pythonの連想配列って何だっけ？」**

という（なんとなく、気持ちの悪い）ワードが、頭をよぎったときに、

**[ググって解決しづらかったこと Advent Calendar 2021](https://qiita.com/advent-calendar/2021/gseach)**

を思い出したため、 **勢いでエントリー** しました。

　

当初は、各言語での連想配列系の呼び方の違いを記事にしようかと考えましたが、

既に、そのような、まとめの良記事は存在しています。

https://techracho.bpsinc.jp/hachi8833/2020_07_31/95098

https://qiita.com/dico_leque/items/86fc0e48f827c3c08f4e

　

では、ネタ記事として、

**本当にあった怖い検索結果 ～pythonの連想配列～**

とかを書こうとも思いましたが、明らかな怪文書が検索結果に表示されるわけではない[^1]ため、

釣り記事になってしまう ~~?怖い~~ と、断念。

[^1]: 本

浮動小数点形式の演算結果として +0 と -0 が出てくる規則

**お断り：ここでは非数と無限大については考慮していません。**

# IEEE-754 倍精度浮動小数点形式

Python の float や JavaScript の Number は IEEE-754 倍精度浮動小数点形式となっています。

| 符号部(S) | 指数部(E) | 小数部(T) |
|:-:|:-:|:-:|
| 1 ビット | 11 ビット | 52 ビット |

式で表現すると

“`math:
\left( -1 \right)^{S} \times 2 ^{E-1023} \times \left( 1 + \frac{ T }{ 2^{52} } \right)
“`

になります。($E=0$の場合を除く)

# 浮動小数点演算器（FPU）の挙動

浮動小数点演算器（FPU）はどのような計算をしているのか考えます。

## 乗除算

指数部と小数部を考慮せず、符号部に注目すると

| 計算 | 被乗数 | 乗数 | 結果 |
|:-:|:-:|:-:|:-:|
| 正 × 正 = 正 | 正（S=0） | 正（S=0） | 正（S=0） |
|

React と ASP.NET Core (C#) でホロジュール Web アプリをつくってみた

## はじめに

苦手な JavaScript ともっと仲良くしたいので、これまで開発してきたホロジュール Android アプリの Web アプリ版を作ってみることにしました。
このラプちゃんやルイ姐やみこちのような感じで、日付ごとに顔写真やサムネイルや配信時刻などを表示してみます。


## JavaScript のカチッとしていない感じが苦手

プロトタイプに基づいたオブジェクトベースの言語？ということもあってか、C++ や C# や Java などのクラスベースのオブジェクト指向言語ばかり利用している自分にとっては、いつまでも違和感が抜けず、スコープの広さや範囲、動的で弱い型付けの変数や比較などが分かりにくいと感じています。

## JavaScript 使えないといかんでしょ

とはいえ、いつまでも JavaScript が苦手と言っ

Nullish Coalescing

#1. はじめに

　スターアプリケーションズ株式会社の吉田です。
　みなさん、strict:true やっていますか。はい、コンパイルエラーの修復ご苦労様です。TypeScriptの型チェック厳密になって大変ですね。今回、変数のnull/undefinedチェックで、AngularのNullish Coalescingを使うと、便利になるので記事にしました。
#2. 復習

　Nullish Coalescingですが、JavaScript、TypeScriptには、以前より実装済みの機能です。AngularではV12から　AngularのTemplateで使用することができるようになりました。Mark Thompson氏のブログ、[(Angular v12 is now available)](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49)から例を見ていきましょう。

`{{age !== null && age !== undefined ? age : calculateAge() }}`

console.logでMac版Firefoxをクラッシュさせる。

この記事は、[OPTIMIND x Acompany Advent Calendar 2021](https://qiita.com/advent-calendar/2021/optimind_acompany)の記事です。
この記事は、OPTIMIND 吉川が記載しています。

# console.logでMac版Firefoxをクラッシュさせる

年の暮、Log4jのご対応にてご多忙の中にも活気あふれる日々をお過ごしのことと存じます。
私は、Log4jの調査の中、ロギング処理であるという共通点を持つconsole.logを利用して、Mac版Firefoxをクラッシュできることを確認できたのでキャッキャしています。

console.logは、以下のように `置換文字列`[^1] が利用できます。
これは以下のように出力をすることができます。

“`javascript
console.log(‘Hello %s!!!’, ‘World’); // Hello World!!!と出力されます。
“`

他にも数値や、オブジェクトの出力などができます。
数値は精度による置換処理も

サイトのメタ情報を教えてくれる Safari Extension (機能拡張) の作り方


2021年9月にリリースされたiOS 15から、**Safari Extensions**が導入されました。
このアップデートによってiPhoneやiPadのSafariに、よりブラウジングを快適にするための機能拡張を追加できるようになりました。

Safari ExtensionsはHTML, CSS, JavaScriptなどの技術で実装を行うため、Webエンジニアにとって開発がしやすいものとなっています。
これはiOS開発に明るくないWebエンジニアでもApp Storeにアプリケーションを配信するチャンスが広がったと言えるのではないでしょうか。

私自身もSwift, Obj-Cを書いたことはおろか、Xcodeも数える程度しか触れたことがありませんでしたが、iOS 15が配信されてからSafari Extensionを実装し、App

fs には promis 版もあるよ

# 生成した大量のデータをファイルに書き出したい

「POSデータ処理のテストデータ作ってほしいんだよ。性能測るから1年分。ここに日付けいれてあとはフォーマットあってれば中身何でもいいから適当に作って。DBに食わせるためのCSVだから、ファイルは分けても分けなくてもいいよ。」

『はーい。適当に作りまーす。』

—-

『さくっとNodeで出すかー。』

『んーっと、500バイトぐらいのデータが1日1000件ぐらい……せめて月単位ぐらいで分けるか……』

“`javascript:main.js
const fs = require(‘fs’)

const date = new Date(2017, 0, 1)
const dir = ‘hoge’

while(date.getFullYear() < 2018 ){ const month = date.getMonth() while(date.getMonth === month){ const file = `${dir}/data_${month+1}.csv` let lines = []

Vue.jsの基本の「キ」

#教材用Qiita
プロトタイプをする上で、Vue.jsは何かと便利ですよね。
今回は後輩向けに作った教材を作り直して公開してみました。
サンプルコードみたいな形にしていますので、是非教材などにご利用下さい！

#HTML/CSS/Javascriptの基本形
##基本の形
HTML/CSS/Javascriptの役割分担はざくっとこんな感じ。
・HTML：何を入れるか決めて
・CSS：どう見せるか決めて
・Javascript：どんな処理をするか決めて
良い感じのホームページを作っている。

“`html

次のプロジェクトにすごく役立つAPI 5選

本記事は、Mehdi Aoussiad氏による「[5 Extremely Useful APIs for Your Next Projects](https://javascript.plainenglish.io/5-extremely-useful-apis-for-your-next-projects-43647920a3e4)」（2020年12月13日公開）の和訳を、著者の許可を得て掲載しているものです。

#次のプロジェクトにすごく役立つAPI 5選
>次のプロジェクトを刺激する素晴らしいAPI

Photo by [Christina@wocintechchat.com](https://unsplash.com/@wocintechchat?utm_source=medium&utm_medium=referral) on Unsplash

##はじめに

APIを使うと、開発者はプラットフォームの実装を利用して便利なタスクを実行することで、時間を節約できます

WebWorker上でS3にファイルをアップロードするときに困ったグローバルオブジェクト

本稿は[Wano Group Advent Calendar 2021](https://qiita.com/advent-calendar/2021/wano-group) 用の記事となります。

# 経緯/書くこと
大きいサイズのファイルをWebブラウザからS3に上げるには、[マルチパートアップロード](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/mpuoverview.html)する
必要があります。
この時、ブラウザによってはUIスレッドをブロックするケースがあり、対策としてWeb Worker上でのファイル部分読み出しとマルチパートアップロードを試すケースがありました。
事象自体はけっこう前なので状況が変わっている可能性もありますが、備忘録がてらそのときやったことをメモします。

# web workerとは
[ウェブ ワーカーの基本](https://www.html5rocks.com/ja/tutorials/workers/basics/)
シングルスレッドなjavascri

フロントエンドエンジニア1年目としてやったこと

## はじめに
初めまして、都内でフロントエンドエンジニアとして働くマンゴクです。
[UdonTech Advent Calendar 2021](https://qiita.com/advent-calendar/2021/udontech) の21日目になります。

本記事では1年目のフロントエンドエンジニアが技術的なキャッチアップをどのように行なってきたか書いて行きます。
2021年4月からエンジニアに転職し、最近ではチームメンバーからReactの実装力は一定水準に達したと評価をもらえる様になったので、少しでも参考になる情報を共有できたらと思います。

## 業務内容
まずは簡単に業務内容を紹介します。採用関連のプラットフォームを構築しており、ReactとTypescriptとでフロントエンド開発を行なっております。　　
具体的には、入社初期のバグ改修タスクから始まり、現在では新規プロジェクトのライブラリ選定から実装まで幅広く開発に携わっています。

## キャッチアップ方法
フロントエンドエンジニアとしての技術力を高めるために、下記の3つを上から順に取り組みました。
それぞ