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

【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を返すというのを作成
“`
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 関数の引数として渡してあげるとその評価関数にしたがってソートしてくれる
“`
const array = [2, 4, 3, 8];
array.sort(compare);
// => 2, 3, 4, 8
“`

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

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のバージョン番号

node.js(express)でmysqlに登録したデータのIDを取得する（備忘録）

# MySQLに登録したデータのIDを取得する
MySQLにデータを登録した際、auto_incrementで自動的に一意なIDが与えられる場合を想定しています

“`index.js
const express = require(‘express’)
const app = express()
const mysql = require(‘mysql’)
const cors = require(‘cors’) // APIとして利用する場合は必要
const port = 8000

app.use(express.json())
app.use(cors()) // APIとして利用する場合は必要

const con = mysql.createConnection({
//ご自身の環境に合わせてください
host: ‘localhost’,
user: ‘root’,
password: ‘root’,
database: ‘data’
})

// mysql接続
con.connect((err) => {
if (err) throw e

最新のreact-router-domを使いたい（v5からv6へのアップデート）

前回、機材共有SNSを作成した記事を書きました。
今回はそれに使われている __react-router-dom__ を最新版にアップデートした話です。

前回の記事はこちら → [__ReactとFirebaseでギターマニアのためのSNSを作った話__](https://qiita.com/roki_na/items/b79c9a84cd847b0cd92e)

# react-router-dom
https://www.npmjs.com/package/react-router-dom

__React__ のルーティング用のパッケージですね。
__React__ をさわっている方は大体使ったことあるのでは？というくらい有名なので説明は割愛します。
今回はこれを __v5系__ から __v6系__ にアップデートします。

# とりあえずアップデートしてみる
“`zsh: コンソール
mynewgear % ncu -u react-router-dom

react-router-dom ^5.3.0 → ^6.3.0

mynewgear % npm i
“

JavaScript: Number()が数値型に変換できる文字列

JavaScriptの`Number`関数は文字列を受け取り、それをパースして数値型の値を返すことができる関数です。文字列から数値型への変換するのに便利です。

`Number`は`123`や`1.23`のような数字だけからなる単純な文字列以外に、様々な文字列フォーマットにも対応しています。そのため、入力文字列のパターンが限定できていない場合、想定外の値になってしまうといった問題に遭遇する可能性があります。

`Number`で文字列→数値への変換を行う場合は、`Number`の仕様を理解した上で、想定外の結果にならないよう、追加の処理を加えたほうが良さそうです。たとえば、ユーザー入力など、入力文字列のパターンが無数に考えられる文字列を扱う場合は、`Number`に渡す前に正規表現などでバリデーションするなど。

## 空文字列

空の文字列は`0`になります。

“`javascript
console.log(Number(“”));
//=> 0
“`

## 空白文字だけからなる文字列

半角スペース、全角スペース、タブなどの空白文字だけからなる文字列は`0`になります。

promise async awaitメモ

参考サイト

https://qiita.com/cheez921/items/41b744e4e002b966391a#promise%E3%81%AB%E3%81%AF3%E3%81%A4%E3%81%AE%E7%8A%B6%E6%85%8B%E3%81%8C%E3%81%82%E3%82%8B

https://qiita.com/cheez921/items/41b744e4e002b966391a#promise%E3%81%AB%E3%81%AF3%E3%81%A4%E3%81%AE%E7%8A%B6%E6%85%8B%E3%81%8C%E3%81%82%E3%82%8B

同期処理と非同期処理のはなし

https://qiita.com/monji586/items/aa4

【Javascript】配列内の重複要素を削除する

# はじめに
配列内の重複要素を削除する方法を備忘録として残しておきます。

# indexOfを使用する
“`javascript
const array = [1, 2, 3, 4, 5, 1, 2, 1, 1, 4, 6, 7, 3]

const unique = array.filter((item, index) => {
return array.indexOf(item) === index
})

console.log(unique); //=> [1, 2, 3, 4, 5, 6, 7]
“`

# new Setを使用する
“`javascript
const array = [1, 2, 3, 4, 5, 1, 2, 1, 1, 4, 6, 7, 3]

const unique = [… new Set(array)]

console.log(unique); //=> [1, 2, 3, 4, 5, 6, 7]
“`

# どちらを使うべきか？
結論 `new Set`を使う。
以下の記事にもあるように、どちらでも重複要素を削除するこ

最近のJavaScriptのナウいコードを書きたくない理由

## JavaScriptの書き方がどんどん新しくなって困惑

これは、はたしてどうなのでしょうか。

ナウいコードのうち、特にこれはとても簡単に覚えられそうなものですが

“`test.js
const value=1;
let test=1;
“`

どうしても、このコードを書くことができず、
結局以下のコードを書いてしまいます。

“`test.js
var value=1;
“`

## 理由1 2バイトも多い！

var より const のが 2バイトも多いので、転送速度にも影響するかもしれません。

それなら
“`
let test=1;
“`
ってのもあるかとは思いますが。。。どうも。。。

圧縮してしまえば全く影響ないものの、8bitPCをいじってたあたしにとっては、たったの2バイトのコードが増えるだけでも非常に抵抗あります。

## 愛用の Yahoo製 yuicompressorが動かない

別途 packerも通す上で、minifyするツールとしては、今でも最強だと思っています。

しかし、yuicompressorで、constもletもコードを入

Terraformで作ったAWSリソースの情報をWebpackで動的にJavascriptに埋め込む方法

# はじめに
Javascriptで開発をしていると困るのが、Terraformで作ったAWSリソースのURIが動的に払い出されてしまうため、開発環境とプロダクション環境で冪等にスクリプトを作れないということがあるのではなかろうか。

今回は、Webpackを使ってどんな環境でも同じコードベースで動作するように定義することをチャレンジしてみたい。

なお、今回の例ではフロントエンドのフレームワークにはVue.jsを使用している。
Vue.jsの基本的な文法や環境構築は別途前提知識として備えていることを前提としているのでご留意いただきたい。

# Javascriptの設定
さて、URIはどこに埋め込んでも良いが、main.jsなりapp.jsなりのメインに、Vue.mixinを使って埋め込むのがシンプルで良いのではなかろうか。
定数なので、グローバルとして保持しても特に問題ないだろう。
今回は、Javascriptの環境変数として保持しておきつつ、バンドル版にパックするときに置換する仕組みとする。
これにより、ローカルテスト時は環境変数をlocalhostにしてあげればモックに向けて通

JavaScript 学習 – 定数と変数

## JavaScript 定数と変数
JavaScript学習のアウトプット、兼自分用メモとして作成。
今回は定数と変数についてです。
前の記事はコチラから↓↓

https://qiita.com/Kiku-cha/items/402699c97359d8434552

:::note warn
**目次**
[定数と変数について](#01_定数と変数について)
　└ 定数
　└ 変数
　└ 命名規則について
[02_比較演算子について](#02_比較演算子について)
[次回の予定](#次回の予定)

:::

## 01_定数と変数について
### 定数
定数は`const`と記述し、**宣言した定数に値を再代入することはできないという特徴があります。**

“`JavaScript:js/main.js
‘use strict’;

const number = 300;

console.log(number); // consoleで「300」が表示される
console.log(number*10); // 掛け算：consoleで「3000」が表示される
“`

特許庁が作成したmultimulticheckerに機能を追加した

# 1 始めに
　特許庁のmultimulticheckerは、ブラウザ上で動作し、請求の範囲に、マルチマルチクレームが記載されていることを警告するものです。JavaScript で記載されています。

https://www.jpo.go.jp/system/patent/shinsa/letter/multimultichecker.html

　そして、筆者による修正を施したmultimulticheckerを以下URLにデプロイしました。幾つかの機能が追加してありますので。よろしければお試しください。

https://jpoapi.azurewebsites.net/multimultichecker_ver_1_1_modified/multimultichecker_ver_1_1_modified.html

　筆者による修正版のmultimulticheckerでは、以下のようなマルチマルチクレームも検出可能です。
（１）　特開2008-84045の請求項４，８、９のように「請求項１から、請求項２・・・」のような、接続詞の前後に句点を含む記載。
（２）　再表2017/

【JavaScript】関数多くないですか！？

## はじめに
こんばんは、プログラミング初心者だいごです。
最近、ちょっとずつJavaScriptの学習を始めています。
学習を進める中でいっぱい関数っていう言葉が出てきます。
関数宣言やら関数式、無名関数などいろんろ出てきて頭がパンク寸前ですw
そんなこんなで今回は関数を簡単にまとめていきます。

## 様々な関数
今回はこのラインナップです。
１個ずつ簡単に解説していきます。
– 関数宣言
– 関数式
– 無名関数
– 即時関数
– アロー関数

### 関数宣言
“`javascript
function 関数名(引数){
// 関数内の処理
}
“`
王道中の王道！これが関数宣言です。
特徴としては関数の定義がfunctionから始まるところです。
この関数宣言は、宣言を含むスコープが実行されるまでにfunctionオブジェクトが生成されます。

### 関数式
“`javascript
変数 = function(引数){
// 関数内の処理
}
“`
はい！これが関数式です。
特徴としては、無名の関数を変数に定義または代入して関数を定義するところです。
ま

Vue.js v-onの使い方

# 概要
JavaScriptではクリックして何かを実行させる場合に`onclick`を使用します。
しかし、Vueの場合以下のような処理を実装することはできません。
“`
onclick=”{{ value }}++”
“`

そこで`v-on`という構文を使用します。
# 記述方法
`v-on`構文は以下のように記載します。
“`
v-on: イベント名=”処理”
“`
# 実例
例としてクリックするごとに1インクリメントする処理を記述します。
“`
template: ‘

‘
“`

上記のように書くことで`value++`が認識されるようになります。