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

画面更新時にイベントを消失してしまう原因

# はじめに
先日下記の事象について苦戦し、自分なりの結論までたどり着いたので共有します。

現在携わらせていただいている業務システムの UX を改善するため、JavaScript イベントによる .NET メソッドの呼び出しを実装していた際、表題の事象が発生しました。
UX の改善についてですが、今回はとあるデータの更新処理を行う際、現行システムではボタン押下を契機としていましたが、ボタンの押し忘れによる更新漏れが見受けられたため、ユーザーが最後にキーを押した時点からの経過時間を契機として、半強制的に更新処理を呼び出すよう改修したいと考えました。

# 事象
苦戦したのは、setTimeout 関数によってｎミリ秒間待機している最中に、別操作による画面遷移やブラウザの再読み込みが発生すると、コールバック関数が失われてしまうという事象についてです。

# 原因
画面遷移や再読み込みなどブラウザが更新される際 HTTP 通信が発生しますが、HTTPプロトコルの持つステートレス性という性質（状態を保持しない）が起因して、リクエスト前のブラウザの状態をレスポンス時には失っていたことが原因だと

JavaScriptで作る入力フォームのバリデーションチェック パスワード・メールアドレス

パスワード・メールアドレスのバリデーションチェックで使用する正規表現と、実装コードのサンプル

## 正規表現
### パスワード
・半角数字、半角英字のみ
・半角数字、半角英字がそれぞれ一文字以上使用されている
・文字数が8~16字以内

“`
/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/
“`

### メールアドレス
・半角英小文字、半角数字、「-」(ハイフン)、「.」(ドット)、「_」(アンダーバー)のみ
・一文字目はアルファベットのみ
・「.」(ドット)は、連続使用・@の前の使用は不可

“`
/^[a-z]+[a-z0-9_-]+@[a-z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i
“`

## パスワードチェック
確認ボタンをクリックで正規表現によるチェックが入る

春なので、担任の先生objectをmapでぶん回す

### 春です。
暖かくなってきましたね。
春といえば、新学期。
そして新学期といえば、クラス替えですよね。

みなさん担任の先生には”いい思い出”もあれば、”悪い思い出”もあるのではないでしょうか。

**「担任の先生を生徒が選べないのはおかしい！！」**

ということで、好き勝手に担任の先生を選べるプルダウンを作っていきます。
実装はnext.jsを使います。

担任の先生はこちらの記事、ランキング１位から６位を拝借しました。
[担任の先生になってほしい芸能人ランキング 1位から10位](https://ranking.goo.ne.jp/column/7591/ranking/53511/)

それではまちに待った担任の先生の発表です。

どどん
“`
const teacher = {
　　　　a: ‘仲間由紀恵’,
　　　　b: ‘阿部寛’,
　　　　c: ‘武田鉄矢’,
　　　　d: ‘反町隆史,
　　　　e: ‘櫻井翔’,
　　　　f: ‘ムロツヨシ’
}
“`

クラスはaからf。
担任はランキング１位から順に並べました。
屈強なヤンキーたちを治めた、信頼と実績の

Phaser3.jsで、CPU対戦4人UNOを作りました。

Phaser3.jsで、CPU対戦4人UNOを作りました。
とりあえず、遊べます。
CPUはめっちゃ弱いです。
スコアの履歴登録等、細かい点は順次実装していきます。
https://www.new-doumeishi.me/vsUno_/

npm run build でビルドする際にwarnings when minifying css: ▲ [WARNING] “@charset” must be the first rule in the fileのエラーが出てしまう時の解決法

# ビルド（npm run build）とは？
npm run buildとは、作成したVueアプリケーションをコンパイルし、サーバーアップロード（本番環境）向けにファイルサイズを小さくしたものを生成するコマンドです。
npm run buildコマンドを実行すると、同じ階層に **dist** というフォルダが生成されるので、このフォルダをそのままサーバーにアップロードするだけでアプリケーションを実行することができます。
このように、本番環境用のフォルダを生成することを **ビルド** といいます。
今回はビルドツールに**Vite**を使用しています。
・[Vite日本語ガイド](https://ja.vitejs.dev/guide/)
・[Viteとは何なのか](https://qiita.com/inagacky/items/ad424821653067c99253)

# npm run build 実行時のエラー
npm run buildを実行したところ、下記のようなエラーが出ました。
“`
warnings when minifying css:
▲ [WARNIN

Javascript ウインドウアラートを表示する

## 初めに
window アラートを画面に表示させる
## 教科書

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

## 実践
“`js:画面を開いた瞬間にダイアログアラートが出てくる

“`

Nuxtをインストール後にnpm run devでエラーを吐く時の解決方法

**解決方法：NodeをLTSバージョンに変更**

Nuxtをインストールしてよし始めるぞとなった時に下記のエラー吐きました。
“`
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at module.exports (/Users/tenopee/work/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/tenopee/work/node_modules/webpack/lib/

しぐじり英語　—アプリ名間違えて名付けた編—

# 始めに
“Jack the Porker”というSafari拡張機能を作成しました。
## 拡張機能の概要
“Jack the porker”は、ポップアップページ内でカードを数えるための拡張機能です。
この拡張機能は、カードをクリックすることにより、カードを数えることを手助けします。
一つのカードをクリックした場合、そのカードは暗くなります。
全てのカードをリフレッシュしたい場合、”Refresh”ボタンをクリックすると全てのカードが明るくなります。

## スクリーンショット

![screenshot2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634761/f3b73a9a-c574-3337-9d16-ee9f5e9820fb.

javaScriptの課題の追加と踏み込んだ学習の際の書籍

また、もっと踏み込んだ学習する際に、
おすすめの書籍を聞かれることがあって、
サイ本という分厚い本があるので、
そちらをおすすめしたりしてます。

記事はこちらに移動しました

[【プログラミング学習者向け】javaScriptを一歩、踏み込んで学習をするためのおすすめの一冊](https://manabupanda.net/study_programming/web-programming/javascript-study-step-up-books/)

新卒2年目によるペットの体重管理アプリの作成記録

はじめに
—
当時のレベル感
* 新卒2年目半
* 理系卒（情報専攻ではないです）
* 大学生時代、授業で少しだけプログラミングしたことがある
* 新卒1年目の時から現在まででProcessing，openFrameworks，Pythonでコーディングしたことがある
* HTMLの\

って何だったっけ
* CSS，Javascriptはほぼ触ったことなし（名前はよく聞く）

メンバーとIoT機器を使ったプロダクトを作ろうということでアプリのコーディング部分担当に。
作成期間の昨年21年10月から今年22年3月までの約5か月間を振り返ります。

当初の計画
—
当初挙がった必要な機能とデータ
* 日付
* 個体番号
* 体重
* メモ書き
* 複数頭を管理できる
* それ以外にスマホで確認できると便利なデータがあれば

参考にしたものなど
—
始めに見た本は[できるポケット Web制作必携 HTML&CSS全事典](https://www.amazon.co.jp/%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%

jQuery で ダークモード設定時に画像をすり替える

## はじめに

ちょっと凝ったダークモードを設定して、ユーザーにより良いWeb体験を提供します。

## 一般的には

“`style.css

// MDNより転載

@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}

@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}
“`

とか

“`puutin.html 【husky v7対応】React×TypeScriptの開発環境をcreate-react-appで構築する

## この記事に書いてあること
create-react-appを使った、`React×Typescript`の開発環境構築

## create-react-appとは？
Reactの面倒な開発環境をコマンド一発で作成してくれる機能。
Reactを学習したり、新しいシングルページアプリケーションを作成するときに使います。

Node >= 14.0.0 及び npm >= 5.6 の環境が必要です

“`
nodebrew list //nodeのバージョン確認
nodebrew use v16.14.0 //nodeのバージョン切り替え
“`

## 各パッケージのバージョン
– React v17.0.2
– React-dom v17.0.2
– TypeScript v5.0.0
– husky v7.0.0
– lint-staged v12.3.7
– prettier v2.6.2

## create-react-appする
下記コマンドで開発環境を構築
“`
npx create-react-app app –template typescript
“`

OBS用の行き先案内板シミュレータを作る

# いきなり成果物

OBS用の行き先案内板シミュレータできた～
※ 駅名は西鉄天神大牟田線より pic.twitter.com/OmUpDOfunk

— 国際トロッコ会社?️‍? (@CIB_MC) April 4, 2022

# 制作の経緯

駅にあるパタパタ式の行き先案内板、浪漫ががありますよね。
(日本国内には稼働中の現物は存在しないようですが。)

というわけでOBS用にJavaScriptで作っ

ストリームアルゴリズムを用いて確率抽選を行う

ゲームにおけるアイテムのドロップなどにありがちな、
* Aというアイテムは50%で出現する
* Bは30％で出現する
* Cは20％で出現する

という確率に従ってA,B,Cを抽選するという処理を考えます。
様々な実装方法がありますが、ここでは**ストリームアルゴリズム**的な実装方法について記載します。

# ストリームアルゴリズムとは
**ストリームアルゴリズム**とは、forループを用いて逐次的な処理で実現するアルゴリズムを指します。

例えば、配列から最大値を求める時に
“`javascript
const arr = [3, 1, 4, 2]
let max = arr[0]
for(let i = 1; i < arr.length; i++){ if(arr[i] > max) max = arr[i]
}
console.log(max) // 4
“`
のような実装をしますが、これがストリームアルゴリズムです。

# ストリームアルゴリズムによる抽選方法
では本題の抽選についてですが、次のように実装します。
“`javascript
const arr =

Javascript を書く場所

## はじめに
Javascriptを書く場所について考える
## ゴール
JSを書き込む場所を知ること
## 教科書

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

## 内容
“`html:html内に直接記載する
————-

“`

“`html:jsを読み込む部分を記述する

“`

“`js:上に読み込むJSファイル「script.js」を作成する
‘use strict’;
console.log(‘よく柿食う客だ’);
“`

React 公式の Ref の記事を簡潔にまとめました：DOM操作編

## Manipulating the DOM with Refs

[前回](https://qiita.com/ItsukiN32/items/2e4a120fec1823229fdd)の続きです。
今回は `ref` による DOM操作に関する記事です。

https://beta.reactjs.org/learn/manipulating-the-dom-with-refs

## `ref`がよく使われるケース

– ノードにフォーカスする、ノードまでスクロールする、ノードのサイズやポジションを測定するなど

## 使い方

`

`　のようにしてDOMに `ref` を移植するだけです。
これでDOMに対して 以下のようなAPI を使用して操作が可能

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

例えば、`myRef.current.scrollIntoView()`でそのノードまでスクロールできます。

## 自作のコンポーネントに `ref` を使う場合

`

React 公式の Ref の記事を簡潔にまとめました

## Referencing Values with Refs

`ref` について分かり易いとお薦めしてもらった公式の記事を読み、箇条書きでまとめたものです。

https://beta.reactjs.org/learn/referencing-values-with-refs

## `ref` とは

*コンポーネントに何らかの情報を「記憶」させたいが、その情報が新たなレンダリングのトリガーになることは避けたい場合、refを使用することができます。これは、コンポーネント内に情報を保存するための秘密の「ポケット」のようなものです。*

– ステートとは別のデータの保存先のようなもののようです。

## `ref` の特徴

– `ref` は プレーンなJSのオブジェクトです。
– `ref` の更新をしてもコンポーネントが再レンダリングされません。
– ステート は更新すると基本的には再レンダリングされます。ここが大きな違いでもあるようです。
– `useRef(初期値)` で呼び出すと、 `{current: 初期値}` をもったオブジェクトが返る。
– `ref`

React v18の変更内容まとめ

# 20220401_React v18に関する理解

1. **Automatic Batching**

“`jsx
// Before: Reactのイベントがbatchされた時のみ
// それぞれのstateのupdateごとに1回ずつ、合計2回render（描写）する。
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
}, 1000);

// After: setTimeoutの中でのupdateをまとめて行う
// 最終的には1回のみre-renderする。
// これがbatch。
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
}, 1000);
“`

2. **Urgent updates, Transition updates**
– Urgent updates: 画面内における「タイピング」「クリック」「キーボード押下」など、すぐにresponseが欲しいupdate。
– Trans

Javascript object の配列をあるメンバ変数を利用してソートしたい

# Javascript objectの配列をあるメンバ変数でソートする

# たぶん今後自分が一番よく使う比較関数を利用するパタン
値を２つ受け取ってそれらの大小をjavascriptルールに従って判定して、大きければ1を小さければ-1を返すというのを作成
“`javascript
function compare(a,b) {
let rtn_value = 0;
if(a > b) {
rtn_value = 1;
} else if (b > a) {
rtn_value = -1;
}
return rtn_value;
}
“`

これを sort 関数の引数として渡してあげるとその評価関数にしたがってソートしてくれる
“`javascript
const array = [2, 4, 3, 8];
array.sort(compare);
// => 2, 3, 4, 8
“`

# これを応用する形でオブジェクトのメンバ変数を指定した比較関数を書いておく
objectのメンバ変数にdista

Javascript 脱初級メモ

#はじめに

この記事は開発メモです。随時更新していきます。

—
# テーマ

## プラットフォーム固有コード

1. iOS/Safari 13+: モーションセンサーによる磁北取得

—

# おすすめモジュール

* platform.js: PCかスマホやタブレットなのか判定するために利用

## platform.js

[platform.js](https://github.com/bestiejs/platform.js)は、WebブラウザとWebブラウザを実行しているOSを識別するためのモジュール。window.platformで参照。

|プロパティ名|説明|iPhone SE2(14.6)|macOS Mojave|
|:-|:-|:-|:-|
|name |Webブラウザ名|Safari|Chrome|
|version|Webブラウザのバージョン番号|14.1.1|100.0.4896.60|
|product|製品名|iPhone|null|
|os.family |OS名 |iOS|OS X|
|os.version|OSのバージョン番号