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

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++`が認識されるようになります。

Javascript コンソールにアウトプット

## はじめに
以下の書籍を購入したのでその本に書かれていることを実践/整理するために本ページを作成しています。
### 参考書

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

## 目的
簡単なJavascriptのコードをブラウザ上のコンソールに書いて実行する
## 実践
### 作業環境
MacBookPro(2016)
macOS monterey(12.3)
chrome
### 手順
“`javascript:文字列を出力
console.log(‘おうむ返し’);
“`
「おうむ返し」と表示される
“`javascript:足し算
console.log(2 + 3);
“`
「5」と表示される
“`javascript:引き算
console.log(150 – 38)
“`
「112」と表示される

##まとめ
console.log（）で括弧内の文字を出力したり、計算したりできる。

REST API（更新系）に対するCSRFにどう対処すべきか

# 結論

* 攻撃者サイトが用意したページにおける`

`での攻撃に対しては、カスタムヘッダ必須によるプリフライトチェックを入れると楽に対処できる。
* XSSに対しては、トークンチェックやカスタムヘッダ必須によるプリフライトチェックは通用しない。XSSに対して鉄壁の防御を構築するしかない。
* IEはWindows Updateしなければまだ使える（edgeの強制起動を回避できる）ので、IEの面倒を見続ける必要のあるサイトというのもあると思う。IEは[CSP](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy)で`