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

requestAnimationFrameで端末負荷を測定する

## 背景
最近ブラウザから端末負荷を測定したい場面に出くわしました。
弊社ではwebrtcを扱っていて、ライブ中の端末負荷の変化を測定したかったのですが、残念ながらブラウザAPIは用意されていません。

そこで`requestAnimationFrame`apiを使用して画面の描画回数を測定することで、間接的に端末負荷の指標とすることにしました。

## Window.requestAnimationFrame()
requestAnimationFrameは本来はアニメーションを実装するために使用するAPIです。

https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
> ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。

ブラウザが画面を描画するたびにコールされ、そのタイミングで任意の関数を実行したい場合に使用するのが一般的かと思います。

今回は、ブラウザが画面を描画するたびにコールされることを利用

kintone 関連レコード詳細画面で遅延表示の動作検証

kintone のアップデートで、関連レコードの詳細画面で遅延表示となったので、kintone イベント処理時の動作検証をしてみました。
試しに関連レコードの文字列項目を赤表示してみます。

# 関連レコードの詳細画面で遅延表示の概要

関連レコードを遅延表示することで、「詳細画面で表示が開始されるまでの待ち時間が短縮」されるようです。

[kintone 2021年10月版 主なアップデート](https://kintone.cybozu.co.jp/update/main/2021-10.html#point2)
>関連レコード一覧フィールドが配置されているアプリのフォーム表示開始までにかかる時間を短縮
アプリのレコード詳細・編集画面にて、読み込みに時間のかかる関連レコード一覧が配置されているとき、フォームの表示が開始されるまでの待ち時間が短縮されました。
・レコード詳細画面の読み込み（９月版まで）：
レコードの内容が何も表示されない待ち時間が長く、その間、何もすることができませんでした。
・レコード詳細画面の読み込み（１０月版より）：
関連レコード一覧以外のフィールドが素早く表示

3kbのHTML to Reactパーサ「DOMParserReact」で、aタグをNext.jsのLinkコンポーネントで表示する

作ったライブラリの宣伝記事です。

https://www.npmjs.com/package/dom-parser-react

## DOMParserReactとは

DOMParserReactは軽量なHTML to Reactパーサーです。HTMLテキストをReactのコンポーネントに変換して表示します。また、表示の際にHTMLのタグを任意のコンポーネントに置き換えることができます。

主な使用想定は、個人ブログなどのコンテンツ部分です。コンテンツ部分は、MarkdownのファイルやヘッドレスCMSのリッチテキストで管理し、それをHTMLにしたものを表示していると思います。このライブラリを使用すれば、そのHTMLを表示する際、CSS in JS等のReactの技術を使って装飾したり、タイトルのようにaタグをSPA用の `Link` コンポーネントに置き換えたりすることができるようになります。

そして、このライブラリの一番の特徴は、その軽さです。minifyで3kb(v0.2.0時点)しかありません。類似ライブラリと比べて非常に軽量なのは、独自のパーサーを使わず、ブラウザJ

JavaScriptのコンテキスト

# はじめに
コンテキストについて学習したので備忘録を残します。
初学者です。
間違っている箇所がありましたら申請お待ちしております。

# コンテキストってなに？
JavaScriptでの意味
実行コンテキスト(コードを実行する際の文脈・状況)

# コンテキストには3種類ある
*覚えるべきは2つ*
**グローバルコンテキスト**
**関数コンテキスト**
~~evalコンテキストは不要~~ 関数eval自体が非推奨のため

**グローバルコンテキスト**
*使用可能な値*

– 実行中のコンテキスト内の変数・関数
– グローバルオブジェクト
– this

**関数コンテキスト**
*使用可能な値*

– 実行中のコンテキスト内の変数・関数
– arguments
– super(特殊な環境でのみ使用可能)
– this
– 外部変数

# 実際のコードで確認しよう
コメントアウトをみてね

“`javascript
// グローバルコンテキスト JavaScriptファイル内直下の実行環境(変数や関数)
let a = 0;
function b() {
console

【JavaScript】変数と参照の振り返り④　AND条件とOR条件

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/263dc7a74981fc33a27c

#目的

* 変数についての理解を深める

#本題
###1.AND条件とOR条件

####ANDの条件と仕組み

““javascript
// AND条件　かつ　a && b
// aとbがtureでないといけない

const a = 1;
const b = 1;
// 出力結果で1が返ってくる　＝　ture
console.log(a && b)
“““

““javascript
const a = 0;
const b = 1;
// まずaがturethyなのかどうか確認する　
// aがtureの場合 ＝＞　bの値を返す
// aがfalseの場合 　＝＞　aの値を返す
// ここではaは０なのでaの値を返す
c

バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA

本記事は、掲載元で2日で23K「いいね」を獲得した[Sviat Kuzhelev](https://sviat-kuzhelev.medium.com/)氏による「[Say goodby to Server Side Rendering. Prerender.io — SPAs with SEO in mind.](https://sviat-kuzhelev.medium.com/say-goodby-to-server-side-rendering-prerender-io-spas-with-seo-in-mind-62e6f68eb323)」（2021年9月21日公開）の和訳を、著者の許可を得て掲載しているものです。

#バイバイ、サーバーサイドレンダリング。Prerender.ioーSEOを考慮したSPA

image is taken from [this resource](https://miro.medium.com/)

##はじ

VSCodeでJestを活用するための便利な拡張機能

Jestを少しでも簡単・便利に書くために便利な拡張機能です。

## Jestとは
JavaScript用のテストフレームワークです。

“`sample.js
const sample = (param) => {
return param + 1;
};
export default sample;
“`

“`sample.test.js
import sample from “./sample”;

test(“sample”, () => {
expect(sample(1)).toBe(2);
});
“`

## 拡張機能
### 1. [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
ファイルを変更したタイミングで、自動でJestが実行される。
コード記入→`yarn test`とか叩く必要がなくなるので、テストコードの記入やリファクタリングの高速化が図れる。

![image.png](https://qiita-image-store.s3

npm install / yarn add したら tsc が通らなくなった話

React のカスタムフックをテストするために [`@testing-library/react-hooks`](https://github.com/testing-library/react-hooks-testing-library) をインストールしました。
そして `tsc` を実行すると types 周りがコケる現象が発生しました。

“`bash
$ tsc –noEmit
node_modules/@testing-library/react-hooks/node_modules/@types/react/index.d.ts(3092,14): error TS2300: Duplicate identifier ‘LibraryManagedAttributes’.
node_modules/@testing-library/react-hooks/node_modules/@types/react/index.d.ts(3103,13): error TS2717: Subsequent property declarations must have the

【覚書】JSDoc + ts-check で as any as を実現する

`//@ts-check` で JS を書いていて、
`as any as` とか `as unknown as` とか
`(T as any).hoge` とかみたいな書き方がしたくなったので調べた。

# ふつうはこうなる

“`js
//@ts-check

document.createElement(“div”).innerText = 12345;
// -> Type ‘number’ is not assignable to type ‘string’. ts(2322)
“`

# TypeScript ならこれでゴリ押せる

“`ts
document.createElement(“div”).innerText = 12345 as any as string;
document.createElement(“div”).innerText = 12345 as unknown as string;
“`

でも JSDoc では当然このような書き方はできない・・・

# `ts-expect-error` は代案にならない

TypeScript では

【Javascript】画像URLを入力した瞬間に画像プレビューできるテキストエリアを作ってみた

#### はじめに
最近業務でjavascriptでUI実装をする機会が増え、その最中今後も使いそうな機能については備忘録をのこしておこうと思っての投稿です！
「ネット検索した画像URLをそのまま画像出力をする機能が必要だったためその機能実装メモです！
### こんなかんじ?


#### 完成コード
“`php:hoge.blade.php

TSVバナー画像のベースURL

早期リターン（ガード節）の書き方メモ

勉強したはずなのに早期リターンの書き方の方がいいよと指摘されたときにそれなんだっけってなったので（やばい）思い出しがてらメモです。リーダブルコードにも書いてあって勉強した気がしますが記憶が抹消されていました。

#早期リターン（ガード節）とは
メソッドなどで処理の終端に到達する前に、条件を満たしたときにはすぐにreturn や continue/break で抜ける方法です。

#書き方
`age`データがある場合に年齢を判断して乳幼児、未成年、成人を返す関数があるとします。

“`.js
function checkAge(age) {
let result;
if (age != null) {
if (age == 0) {
result = “乳幼児”
} else if (age < 20) { result = "未成年" } else if (age >= 20) {
result = “成人以上”

Webブラウザ・JavaScriptエンジン・ECMAScript

# 初めに
JavaScriptを学ぶ上でコーディングだけでなくメカニズムを学ぶ機会があったので備忘録
的な意味も込めて記事にした。
初学者ですので間違っているとこが多々あるかもしれません。

# ブラウザとJavaScriptエンジン
**Webブラウザの種類**
– Google Chrome（グーグルクローム）
– Firefox（ファイヤーフォックス）
– Microsoft Edge（マイクロソフト エッジ
– Internet Explorer（インターネットエクスプローラー）
– Safari

*JavaScriptエンジンってなに？*…
説明: JavaScriptが実行されるエンジン(この機能の上でJavaScriptが動く)
**JavaScriptエンジンにも種類があり、Chromeの場合(V8)を採用している**

ブラウザ名|JSエンジン
– | –
Google Chrome|V8
Firefox|SpiderMonkey
Microsoft Edge|近年V8に移行
Internet Explorer|30
Safari|JavaScrip

VSCode で javascript/typescript の定義ジャンプ等の機能が効かないときの対処法

#### 発生した問題
vscodeで .js,.tsファイルを書いている際、以下の機能が不能になった。

– 定義ジャンプ
– マウスホバー時のポップアップ
– その他、[programmatic-language-features](https://code.visualstudio.com/api/language-extensions/overview#programmatic-language-features) 全般が効かない

#### 解決方法
ESLint の拡張機能が下記の拡張機能を無効にしてしまうらしく、


拡張機能で `@builtin typescript` と検索し、`TypeScript and JavaScript Language Features`

【初学者向け】JavaScriptのjoinについて

今回はJavaScriptの『join( )』について丁寧に解説していきます。

今回も基本イメージについてサラッとと解説して、そこから具体的にコードでも解説して行こうと思います

##join( )とは？
まず先に注意点になりますが**英語の「join」**という単語に引っ張られすぎて**単純に「何かが加わる」**と捉えない方が理解しやすいかなと思います。

大事なpointとしては２点。
**【point①: 配列を文字列に変換する】**
ここが最重要です。『配列→文字列』に変わるんです！
**イメージ**としては『配列に丁寧に並べられた要素を**ぎゅぎゅっと**詰めて1つにくっつける』でOKです

**【point②: 1つにくっつける際、間に指定したものを挟める】**
こちらは注意点で言及したようなjoi

【Vue.js】 v-bindについて

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-bindについてアウトプットしていきます！

# V-bindとは
v-baindとは**要素に含まれる属性を動的に設定・変更することが出来る設定方法**です。
オプションに指定したデータを、**データバインディング**することでテキストが表示されます。

データバインディングとは**データと描画を同期する仕組み**のことです。

#書き方

基本的な書き方は以下のようになります。

“`HTML

“`

“`Vue.js
var app = new Vue({
el:’#app’,
data:{
message:’Hello vue.js!’
}
})
“`

![スクリーンショット 2021-10-10 15.30.28.png](https://qiita-image-store.s3.ap-northeast-1.

JavaScript ECMA ES6 などの言葉を整理する

## ECMA
– **エクマ**と読む
– 情報通信分野の**標準化**を行う団体である
– 参考：[ECMAとは](https://kotobank.jp/word/ECMA-1401)

## ECMAScript
– ECMAが定義するJavaScriptに関する標準規格である。
– 標準規格とは言わば**基準**のことで「JavaScriptに関する動作はこれに従ってくださいね」と言うもの
– **各種ブラウザでJavaScriptが独自の動作をすることが問題となり**、ECMAScriptが登場した模様

> It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.　(Google翻訳：これは、さまざまなWebブラウザ間でWebページの相互運用性を確保することを目的としたJavaScript標準です) – [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)

【JS】2つの配列それぞれの値どうしをindexOfで検索したいけど方法がわからない【作業ログ】

# この記事について

本記事は、なにかの問題を解決するためのものではありません。

# やりたいこと

Chromeの開発者ツールから、入力欄（`input[type=”text”]`）の値の一部を変更したい

## 具体的に

– 日付部分を20210201から20210301に変更したい
– ただし、日付の前に特定の番号（引数で指定する）がついている場合は変更しない

# 実行環境

– OS: Windows10
– ブラウザ: Google Chrome（94.0.4606.81）

# 実際に書いたコード

Consoleで実行するJavaScriptはこう書いた。（実際は意図通りに動いてないので、以下は正しくないのですが…）

– 配列で取れる入力欄要素を、`forEach`でループさせる
– 関数の引数に指定した文字列の配列に対してループを回す
– 入力欄の値の中に引数の値が含まれているかチェックする
– 含まれている場合：何もしない。次のループに移る
– 含まれていない場合：入力欄の値に置換をかけ

【公式ドキュメント和訳】TypeORM Migration

:::note warn
この記事は、2021/10/10時点のTypeORMの仕様に依存します。
TypeORMのバージョンが違ったり、記事の公開から長い時間が経っている場合、正確ではない可能性があります。
:::

> typeorm: v0.2.38
> 翻訳元: [migrations.md](https://github.com/typeorm/typeorm/blob/91d5b2fc374c2f7b1545d40ee76577272de21436/docs/migrations.md)
> ライセンス: [The MIT License](https://github.com/typeorm/typeorm/blob/91d5b2fc374c2f7b1545d40ee76577272de21436/LICENSE)

## 目次

* [マイグレーションとは](#マイグレーションとは)
* [マイグレーションを作成する](#マイグレーションを作成する)
* [マイグレーションを実行する](#マイグレーションを実行する)
* [マイグレーションを自動生成する](#マイグレ

これからReact始めたい人のための今日だけでできるTODO#20 useRefとuseState

## useRefとは？
要素の参照を行うためのフックで、DOMへのアクセスで利用される。
コンポーネント内で変数に値を保持させることができ、値が更新されても再レンダリングされないのが特徴です。

値を保持するという点では`useState()`と同じですが、`useState()`は値が更新された時に再レンダリングされるのでその点が異なっています。

## コード例
useEffectによってレンダリングされるたびにconsole.logにレンダリングの文字が表示されるようにしています。

“`js:App.js
import React, { useState, useRef, useEffect } from ‘react’;

const SampleUseRef = () => {
const inputRef = useRef(null);

const [text, setText] = useState(”);

useEffect(() => {
console.log(‘レンダリング’);
});

const handleClick

【JavaScript】変数と参照の振り返り③　等価性とtrue or falseについて

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/f5b18b61718e96e629b1

#目的

* 変数についての理解を深める

#本題
###1.厳格な等価性と抽象的な等価性

厳格な等価性：a === b
抽象的な等価性： a == b

違いは**型の比較をするかどうか**にあります。

例①

“`javascript
function printEquality(a,b){
// 厳格な等価性で比較　数値と文字列で不一致（false）
console.log(a === b);
// 抽象的な等価性　中身は一緒なので一致（ture）
console.log(a == b);
}

//文字列
let a = “1”;
// 数値
let b = 1;
printEquality(a,b);
“