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

どんなものでも検索してしまいますプラグイン

# 概要
このプラグインは、yahooサーチとyoutubeサーチがベースでしたが、更に有名なサーチサイトも追加しました。プラグイン化することで、どんなwebページでも動作できます。
基本機能は、webページにある文字テキストをマウスカーソルで選択するだけで、yahooサーチもyoutubeサーチ・リスト生成・再生することができます。しかも、文字列選択するだけで、あとは自動実行します。
yyプラグインは、以下のサイトでインストールできます。
[yyプラグインのインストール(無料)](https://chrome.google.com/webstore/detail/yy%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/edooldmlaabbmllldenkkceddlbbeing?hl=ja&authuser=0)

# 特長(活用場面)
yahooサーチとyoutubeサーチをひとつにまとめたプラグインです。webページで文字テキストをマウスカーソルで選択するだけで、いずれかのサーチを実行します。ポップアップが表示され、そこで、yahooサ

【JavaScript】find,findIndex,filterによる配列オブジェクト加工例

## やりたかったこと

指定したプロパティのvalueを持つ要素にだけ、追加でpushなどをしたかった時の実装方法について少し時間がかかってしまったのでその備忘録です。
例えば、下記のようなデータがAPIから返ってくるとます。
“`js
const data = [
{
date: “2022-12-11”,
messages: [
{
text: “メッセージデータ1-1”,
creatTime: “10:00”,
},
],
},
{
date: “2022-12-12”,
messages: [
{
text: “メッセージデータ2-1”,
creatTime: “11:00”,
},
{

結婚式でスピーチを依頼された方のためにNGワードのチェックサイトを作成しました。

# 今回ご紹介したいサイト
https://wedding-speech-check.net/

# サイトを作成する至った背景
昨年(2021年)、友人の結婚式があり、祝辞を頼まれました。
祝辞のスピーチ原稿をメモでまとめていたときにNGワードがないかをチェックしていましたが、自動でチェックするツールがあれば便利だと思い作成しました。祝辞や友人スピーチを行う時は結構緊張すると思いますので、そういった方々を少しでも手助け出来れば嬉しいなと感じています。

# このサイトで出来ること
– 結婚式スピーチ(祝辞や友人スピーチ等)でNGワードと呼ばれる単語をチェックすることが出来ます。チェックできる単語については、サイトにも記載しております。
– おおよそのスピーチ時間の計測が出来ます。
– おおよそのスピーチ時間が5分を超えると警告メッセージを表示してくれます。

# 利用技術
サイトのシステム構成図は以下のようになります。
直線で通信の流れを示し、点線で資材の流れを示しています。
![wedding-sppech-check.drawio.png](https://qiita-image

JavaScriptの非同期処理でgoroutine(WaitGroup)っぽい動きを実装してみる

# JavaScriptでgoroutine(WaitGroup)っぽい動きを実装してみる
## 背景
卒業研究の検証を行う際、常に一定数の非同期処理を同時に実行するプログラムが必要になりました。`Promise.all`を用いて並行実行することはできるのですが、ある程度の処理をまとめて実行する関係上、処理の数を常に一定にすることができませんでした。他に情報も見当たらなかった(記事書いてる時に発見したやつは最後に)ので、並列処理が扱いやすいと言われているGoのWaitGroupを元にして実装してみました。

## 環境
– TypeScript Playground
– TypeScript 4.9.4

## 使い方
1. インスタンスを生成
1. 非同期処理の実行前に`addメソッド`を実行
1. 非同期処理の実行
1. 非同期処理の終了時に`doneメソッド`を実行
1. 2~4を繰り返す
1. 一通り実行したら、`waitメソッド`で全ての処理が終了するまで待機

基本的にはGolangにおける使い方([公式ドキュメント](https://pkg.go.dev/sync#Wa

FireschemaでwithConverterとセキュリティルール更新から解放されよう

# はじめに

この記事は **[TypeScript Advent Calendar 2022](https://qiita.com/advent-calendar/2022/typescript) 、** 17日目の記事です。

最近は Ubiq というメディア系のベンチャーで開発をしています。Ubiq についてはぜひ[こちらのサイト](https://ubiq-world.com/)をご覧ください！(宣伝)。
スマホアプリがメインプロダクトで、構成はフロントエンドが Flutter 、バックエンドが Firebase (Firestore Cloud Functions, Firestore) です。
私は主にバックエンドを担当しています。

開発している中で [Fireschema](https://github.com/yarnaimo/fireschema) というライブラリを採用したのですが、それがとても便利だったので今回紹介したいと思います。

# そもそも Fireschema とはなんぞや

Fireschema は Firebase JavaScript SDK

[Day17] Promise, async/await part2

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 11.5 Promise API
### 知らない単語
– フェッチとは
　　　　　- 機器やプログラムなどが特定の場所からデータなどを読み出す動作の事

### 学んだこと
Promise クラスには 6 つの静的メソッドがある

– Promise.all

複数の promise を実行し、すべて完了してから処理を開始する場合、
Promise.allを使用する
“`javascript
let promise = Promise.all(iterab

ECMAScriptの第一歩

## はじめに

この記事はHRBrain Advent Calendar 2022の17日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

株式会社HRBrainでフロントエンドエンジニアインターンをしている、若槙です。

この記事では、ECMAScriptの仕様について、いいとこ取りでまとめていきます。

## ECMAScriptとはそもそも何か？

>ECMAScript is based on several originating technologies, the most well->known being JavaScript (Netscape) and JScript (Microsoft).
>
>>日本語訳
>ECMAScriptはいくつかの起源となる技術をベースにしていますが、最もよく知られているのはJavaScript(Netscape)とJScript(Microsoft)です。

出典：https://www.ecma-international.org/publications-and

Webpackとは

## はじめに
最近、“`create react app“`で作ったアプリケーションではjsファイルへのリクエストが1つしかないことに気づきました。
それについて調べたところWebpackに出会ったので、Webpackについて書きます。

## Webpackとは
javascriptのモジュールをいい感じにまとめてくれるやつです。

https://webpack.js.org/concepts/

>At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static asset

【Q】querySelectorの使い勝手が良くて好き

JavaScriptで特定の要素を弄り倒したい！！っていうときの忘備録

## よく紹介されがちなやつ

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

`document.getElementById(id)`が紹介されていることが多い気がするし、初めて出会ったのはこれだった覚えがある。
これ、idがついてない要素にさわれないというデメリットがある。

## そこでこれだよ

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

`document.querySelector(selector)`ならCSSセレクタで要素を持ってくることができる。
idがついてなくても最悪クラスとかでたどり着ける

なお、指定したselectorに該当する要素が複数ある場合は最初のものが返される

## 複数扱いたい場合

https://developer.mozilla.org/ja/docs/Web/API/Docum

Deno入門[prisma + oakで作るAPI]

この記事は筆者の[ソロ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/panda) 17日目の記事です。

Denoの公式ドキュメントの内容を実際に動かしてみてDenoに入門してみたのでその備忘録の続きです。
今回はせっかくなのでDenoを使用して簡単なTODOのAPIを作成してみました。

[Deno入門[インストール、環境構築、ファイル実行、標準ライブラリ]](https://qiita.com/JY8752/items/9cd6c05394bf955bdd75)
[Deno入門[CLIコマンド、モジュール、環境変数、Webフレームワーク]](https://qiita.com/JY8752/items/a00866917626a8719ebb)
[Deno入門[npmモジュールの使用]](https://qiita.com/JY8752/private/d177e176a7544b693a34)
[Deno入門[prisma + oakで作るAPI]](https://qiita.com/JY8752/p

ReactHooksについてまとめる（Ref Hooks）

# 概要
Refは、DOMノードやタイムアウトIDなど、レンダリングに使用されない情報をコンポーネントに保持させることができる。
Stateとは異なり、Refを更新してもコンポーネントは再レンダリングされません。RefはReactのパラダイムからの「逃げ道」です。組み込みのブラウザAPIなど、React以外のシステムで動作させる必要がある場合に便利です。

## useRef
useRefは同じオブジェクトを返します。currentプロパティを変更して情報を保存して、あとでそれを読み出すことができます。

**refを変更しても、再レンダリングは行われません。** つまり、refはコンポーネントの視覚的な出力に影響を与えない情報を保存するのに最適なのです。例えば、インターバルIDを保存しておき、後でそれを取得する必要がある場合、それをrefに入れることができます。ref内の値を更新するには、そのcurrentプロパティを手動で変更する必要があります。

### refを使用することによるメリット

– 再レンダリングされても情報を保存することができる
– refを変更しても、再レンダリ

JavaScript の不思議な挙動を追ったらセミコロンの仕様について知れたよ

# TL;DR
– 「JS(ECMAScript)では、改行でセミコロンを代用できる」と勘違いしていた
– 実際は、以下のキーワードを解釈する際に、文法上許されないトークンが出てきたら、**その間にセミコロンを挿入している**
– let, const
– import, export
– Expression statement
– debugger
– continue, break, throw
– return

– 具体的には`}`や`line terminator`ごとに分解してセミコロンを挿入する
– 上記の構文を使う時、改行で記述を分けているつもりでも、セミコロンがなければ**予期しない解釈**をされることがある

# `;`を忘れただけなのに ?
皆さん、以下のコードはどんな出力になると思いますか？
“` constArray.js
const x = {
y:1
}

[“a”,”b”].forEach((v)=>console.log(v))
“`

普通に以下のような出力を想像したのではないでしょうか？

AndroidにおけるWebViewでのWebGLコンテンツの画面キャプチャについて

こんにちは。株式会社ZOZOでAndroidエンジニアをしております@zzt-osamuhanzawaです。[ZOZO Advent Calendar 2022](https://qiita.com/advent-calendar/2022/zozo)の17日目の担当をさせていただきます。
本記事ではAndroidのWebViewでのWebGLで描画されたコンテンツの画面キャプチャをする際の課題とどう解決したかのお話の紹介をしたいと思います。

## はじめに
まず、このWebViewの画面キャプチャというユースケース自体あまりないかもしれませんので軽くそこらへんの話をしたいと思います。現在、弊社では[ZOZOFIT](https://zozofit.com/)というフィットネスアプリを米国向けに展開しております。少し前にZOZOSUITを使って体の部位を計測するサービスがありましたが、その技術をさらに応用し、ZOZOSUIT2という計測用のハードを着用し、より身体部位の詳細な計測ができるようになりました。その新しいZOZOSUITとZOZOZFITアプリと併せて使い、ボディマネジメン

SvelteKitでSSR/SSGのプロトを爆速構築したい

# はじめに

フロントエンドに触れる機会が多いのですが、SSR/SSGに詳しくなりたい（ならねばならない）という焦燥に駆られたので、勉強も兼ねて触りたいと思います。手を動かすのであれば、何かものづくりしたいなと思ったので、話題の SvelteKit で SSR/SSG のプロト構築をしてみようと思います。

最終的には、↓のプロトタイプを完成させます。素早く。

## SSR / SSG とは

SSR は Server Side Rendering、SSG は Static Site Generator の略です。文字通りどちらもサーバ側でレンダリングや静的サイトを作成するもので、CSR(Client Side Rend

[Next.js+Node.js+Socket.io]新体操の採点システムを作った話

# はじめに

新体操の採点をすることができるWebアプリの作成をしました。
Node.jsやMongoDBをまともに触るのは初めてだったので、少し苦戦しました。
今回は、システムの説明と詰まったところや反省点について説明していきたいと思います。

使用技術
– Next.js(Typescript)
– Node.js(Express.js + Mongoose)
– WebSockt(Socket.io)
– MongoDB

# GitHubのリポジトリ

フロントエンドのリポジトリ↓
https://github.com/mrkmtkm/mrg-referee-front

バックエンドのリポジトリ↓
https://github.com/mrkmtkm/mrg-referee-backend

# 概要
ユーザーは、大会の主催者と審判の２人がいます。
簡単に説明すると、審判の採点した点数を主催者側でリアルタイムで受け取り、点数を集計し表示するシステムです。
実際はこんな感じです。

特徴としては
– 手軽で簡単に

Maputnikを使ってベクトルタイルのスタイルを設定してMapLibre GL JSで表示する

## はじめに
:::note info
この記事は [FOSS4G Advent Calendar 2022](https://qiita.com/advent-calendar/2022/foss4g) 17日目の記事です。
:::

MapLibre GL JS大好きな私でございます。

以前、GIS系のハッカソンで@smellman さんにMaputnikを使ったベクトルタイルの設定を教えてもらいました。（今思うと貴重すぎる体験・・）

当時GIS初心者の私には難しく感じて、苦手意識を持っていたMaputnik・・
MapLibreのスタイルファイルに慣れてきて、ベクトルタイルを愛用するようになった今こそ、Maputnikを学び直し、使えるようになるのだ！！

という謎の気合を込めて書いた記事になります。

ということで、国土地理院のベクトルタイルからMaputnikを使って建物データを抽出してスタイリングし、MapLibre GL JSで表示してみようと思います。

### 動作環境
OS: Window 10
MapLibre GL JS: version 2.4.0

#

【リファクタリング記事】for文【for(これ;これ;これ)】の内容を正しく説明できますか？よくある勘違いを解説します。

## 【後記】新人研修で教えられないforのお話
これ結構良かったので、勝手にパクリます（なお、パクもラレも本人です）
なんで下書きに残っとるんや…！

元々は過去日に公開していたテーマだったんですが、結構ブラッシュアップしたので別記事になりました。
とはいえ、同じ事を言っているのでそのまま更新して2022アドカレに登録する運びにします。

## 今日いいたいこと
タイトルの通り、for文の

“` php
for(
1. これ;
2. これ;
3. これ
) {
// 処理
}
“`

を正しく説明できるか？というのが本旨です。

## 研修中の説明例
“` php
for(
変数の初期値;
繰り返しの条件;
カッコが終わった後にすること・繰り返しの条件が終わるようにする
) {
// 処理
}
“`

です。
研修など時間が限られている中で解説するため、forを使うだけならこの説明でも良いです。
が、今回取り上げたいのは、この説明は**間違っている**ということです。

### for文をwhile文で書き直してみる
下記にコード例を示します

TypeScript/JavaScript: performance.mark を使うときは初回 mark は捨てる？

# 背景

ある Library 関数において無駄な処理だなぁと思った際に、感覚ではなく、客観的に見せる為に速度比較をしようとした。

TypeScript 初心者が辿り着いたのが
1. performance.now による計測
1. performance.mark/measure による計測

どちらも同じ performance なんで、何が変わるんだろうとなんも考えず計測関数を用意して測ってみたところ・・

何故か、想定通りに計測出来なかった。その原因推測と対処法の共有

そう
**Solve「本質を追求し問題を解決する」**
の実現・・の筈 :hamburger:

# 結論

– performance.mark を使う際は、一個目は cache が効いてなさそうなので、使い捨てしよう。（たぶん

ほんとかどうかは、下層まで追ってない（追い方知らない）ので不明ですので、詳しい人の教えがあると嬉しい

# 調査内容
## コード
### 計測関数
“`typescript: performance.now を使った計測関数
function measureExeFun

Monacaでボイスレコーディングアプリを作る（その3：ファイルストアの検索と録音データの再生）

NCMBとMonacaを使ってボイスレコーディングアプリを作ります。HTML APIだけを使うので、プラグインを使わずに開発できます。録音した音声をNCMBのファイルストアへアップロードし、逆にダウンロードして再生できるアプリです。

[前回の記事では音声録音処理と、NCMBのファイルストアへアップロードする処理を実装しました](https://qiita.com/goofmint/items/691a3a97024090e745c6)ので、今回はファイルストアの検索と一覧表示、そしてデータの再生までを実装します。

## コードについて

今回のコードは[NCMBMania/monaca\-voice\-recorder](https://github.com/NCMBMania/monaca-voice-recorder)にアップロードしてあります。実装時の参考にしてください。

## 今回の処理について

今回の処理はすべて `www/pages/home.html` に記述しています。

## 必要な準備

今回はファイルストアにあるファイルに対してHTTPSアクセスを行います

Monacaでボイスレコーディングアプリを作る（その2：音声録音とファイルストアへのアップロード）

NCMBとMonacaを使ってボイスレコーディングアプリを作ります。HTML APIだけを使うので、プラグインを使わずに開発できます。録音した音声をNCMBのファイルストアへアップロードし、逆にダウンロードして再生できるアプリです。

[前回の記事では画面の説明とSDKの導入まで進めました](https://qiita.com/goofmint/items/cd1993c5921d4a160f0e)ので、今回は音声録音処理と、NCMBのファイルストアへアップロードする処理を実装します。

## コードについて

今回のコードは[NCMBMania/monaca\-voice\-recorder](https://github.com/NCMBMania/monaca-voice-recorder)にアップロードしてあります。実装時の参考にしてください。

## 今回の処理について

今回の処理はすべて `www/pages/home.html` に記述しています。

## 必要な変数の用意

まず録音関係で必要な変数を準備します。

“`js
// 録音系のオブジェクト
let re