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

URLSearchParamsを活用する

`URLSearchParams`を使ってみたら、けっこう便利でした。

## `URLSearchParams`とは

`URLSearchParams`は、URLのクエリ文字列を生成するための、JavaScriptにあるオブジェクトです。死に体なIE11を除けば、サポートの続くブラウザでほぼ利用可能です（[Can I use](https://caniuse.com/urlsearchparams)）。

## 何が便利か

何も使わずにクエリ文字列を組み立てようとすれば、ループを回しつつエスケープをかけたりなど、各種の作業が必要となります。`URLSearchParams`は、そういった作業を全部担ってくれるので、中身のデータを作るのに専念できます。

また、HTTPリクエストを投げる際に、`application/x-www-form-urlencoded`は`multipart/form-data`よりデータがコンパクトになりますので、その点でも有利です。

## 生成する

`new URLSearchParams`で生成できますが、コンストラクタに渡せる引数のパターンがい

Ajax通信後に要素のイベントが発火しなかった時の備忘録

# はじめに

Ajax通信後に要素のイベントが発火しなかった時の備忘録を残す

# やり方

## 動的に追加した要素やリダイレクト時にクリックイベントが発火しなくなった

“`javascript:sample.js

window.addEventListener(“load”, function () {
/**
* @summary 取消ボタン
*/
$(“#skillSheet_template_target”).on(“click”, ‘#js_jobOffer_delete_button’, function () {
$(this)
.closest(“.scout_job_offer_template_child”)
.fadeOut(function () {
$(this).remove();
});

return false;
});
});
“`

## イベント対象が読み込

JSでname属性を前方一致で複数取得したい

#前方一致で取得する
「onclick」でJSの関数を呼び出して引数にformを渡す場合、欲しい要素が１つならこの方法でも取れるみたい

“`html

“`

でも欲しい要素が複数の場合、これではできない。。。
そこでこうする

“`html

ブラウザゲームを作ってみよう(その4)

#はじめに
[その3](https://qiita.com/noji505/items/44d87dfe4404551b9268)ではキー入力を行いました。
今までは1つのJavascriptファイルに全て記述していたのですが、コード量が増えてくるとソースの可読性が悪くなりメンテナンスが難しくなってくるため用途毎に分割したいと思います。

#ファイル分割イメージ
以下のように分割しました。

| ファイル用途 | フォルダイメージ | ファイル説明 |
|:-:|:-:|—|
| 共通ファイル |  | [index.html](#indexhtml)
ユーザがアクセスするページファイル

[main.js](#mainjs)
実行するメインファイル |
| ライブラリファイル(commmonフォルダ) | ![02.p

typeof と instanceof

変数 `s` が文字列かどうかを確認するコードで、

“`js
typeof s === ‘string’ || s instanceof String
“`

というものを見かけた。

名前の通り、あるクラスをインスタンス化してできたものは `instanceof` で判別、それ以外で作られたものは `typeof` で判別？

“`js
str1 = new String(‘str1’)
str2 = ‘str2’

console.log(typeof str1) // object
console.log(typeof str2) // string
console.log(str1 instanceof String) // true
console.log(str2 instanceof String) // false
“`

# 読んだ記事

– https://stackoverflow.com/questions/899574/what-is-the-difference-between-typeof-and-instanceof-and-when-shou

[JS]繰り返しの処理

アウトプットとして

Rubyの繰り返しの処理とは違う書き方をするので、自分の中で整理するために記事にしたいと思います。

##for文
JavaScriptでは、繰り返し処理を行う際にfor文を使用する。
構文は以下の通り

“`javascript
for([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}

//例
for ( let i = 1; i <= 100; i++ ) { // 100回処理を繰り返す } ``` ①初期化式（initialization）：for文の中で使用する変数を定義する。ここで定義した変数は「今何回目の処理か」を判定するために参照される。 ②条件式（condition）：for文の処理を何回繰り返すかを指定する。この条件式の戻り値がtrueで有る限り処理が行われ続ける。往復する前に評価される。 ③加算式（final-expression ）：初期化式として定義した変数の増減を記述できる。往復した後に評価される。 例）i = i+1とすれば1周ごとに1が加算されて、処理が実行されます。 i = i

素のJSでQiitaAPIを叩く(Ajax)

# AjaxとAPIの学習用

ソース書く前に取得できるかcurlコマンドで確認。
※以降、XXXXXXは自分のアクセストークン

“`
curl -H “Authorization: Bearer XXXXXX” https://qiita.com/api/v2/authenticated_user
“`

“`JavaScript:api.js
// 素のJavaScriptでAjax
const api_endpoint = “https://qiita.com/api/v2/authenticated_user/items”;
const token = “XXXXXXX”; // 個人のアクセストークンを利用
let out = document.getElementById(“out”);
console.log(out);
/**
* Qiita API v2で、自分のアカウントプロフィールを取得
* @param {string} url – エンドポイントurl
*/
let readQiitaApi = (url) => {
console

3行3列の行列の固有値の代数的求解

## はじめに

3次方程式の解の公式は調べれば出てくるし、3*3な行列の固有値を手計算で求める方法も出てきます。
しかし、3*3な行列の固有値を解の公式を用いて数値計算しているものが見つけられなかったので、ここに残しておきます。

なお、前半では数式を、後半ではJavaScriptによるプログラムを、ぞれぞれ説明します。

## 数式で求める

### 3次方程式の解の公式

3次方程式

“`math
a’_3 x^3 + a’_2 x^2 + a’_1 x + a’_0 = 0
“`

は、全体を$a’_3$で除算することにより

“`math
x^3 + a_2 x^2 + a_1 x + a_0 = 0
“`

とすることができます。この代数的な解は[Wikipedia](https://ja.wikipedia.org/wiki/%E4%B8%89%E6%AC%A1%E6%96%B9%E7%A8%8B%E5%BC%8F)によると、カルダノの公式より

“`math
x = \omega^k \sqrt[3]{-\frac{q}{2} + \sqrt{\left(\

【JavaScript】HTMLのある要素の親の親の要素を取得する方法

本記事では、ある要素の親の親の要素をJSで取得する方法を紹介します。

##やり方

closestメソッドを使います。
このメソッドはparentNodeメソッドと同様、親要素を取得するメソッドです。
しかし、parentNodeメソッドと違い、このメソッドは全親要素（親の親や、親の親の親の要素など）を取得できます。
（parentNode.parentNodeみたいな事をする必要はありません！）

##実例

今回使用するHTMLは以下です。
idがgrandParantのdivタグを取得します。
取得処理はtest.js（後述）に記載し、htmlファイルからこのjsファイルを呼び出します。

“`ruby:test.html

子ども

【React】ストップウォッチの作成方法【JavaScript】

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## ストップウォッチの作成方法

### react-timer-hookを導入

“`:Terminal
$ npm install –save react-timer-hook
“`

### コンポーネントの作成

“`MyStopwatch.jsx
import React from ‘react’;
import { useStopwatch } from ‘react-timer-hook’;

export const MyStopwatch = () => {
const {
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
reset,
} =

第1回 世界一やさしいReact 「Reactについて」

#自己紹介
こんにちは。
4年前に未経験からこの業界に入り、React開発を初めて3年のエンジニアです。
下記リンクの会社の採用担当のリーダーもやってたりします。
[HP](https://allsmart.co.jp/)
是非興味のある学生は…笑

最近、思うのは結構この業界って
「え？書いてあるじゃん」とか「わからない理由がわからない」って思ってたり、口に出してる人が多いなっていう印象です。
僕も、わからないことだらけの中苦労しながらやってきたので、**Reactの勉強するぞ！**っていう人の参考になればと思い記事を書いていこうと思います。

コンセプトは**「世界一やさしい」**

具体的な仕組みとかの説明というよりは、こういうもんなんだよって噛み砕いて今後説明していきます。

#Reactとは
Reactはプログラミング言語ではありません。
Facebookが主導で作っているJavascriptのライブラリ（Javascriptを拡張したものっていうイメージ）です。
なのでJavascriptの知識があると書きやすいかもしれません。
#Reactを勉強するメリット

**現在流

useHistory が使えない時

react-route の v6 からは、useHistory ではなくて useNavigate が推奨になりました。
使い方は、下記です。
## useNavigation
“`javascript:index.jsx
import {useNavigate} from “react-router-dom”

const navigation = useNavigate()

/* ページ遷移は下記を使う */
navigation(“/hoge”) /* /hoge に遷移 */

/* history.goBack()は、 */
navigation(-1)
“`

react-route、v6 から変更が多くて、昔のコードが使えないことが多い (から への変更など) 。

javascriptでgame制作＃１７

####こんにちは
今回は、石の採掘の時間の制限をかけていきたいと思います

####barの作成
今回はbar式に作っていこうと思います
まずはこの文章を`main.js`の最後に入れてください
※新しい関数を作ります

“`main.js
//バーの作成
function number_bar(x,y,size,number_all,number) {
const canvas = document.getElementById(“canvas”);//キャンバスの取得
const ctx = canvas.getContext(“2d”);//2Dコンテキスト取得
//全体のゲージバーを作成
ctx.beginPath();
ctx.fillStyle = “rgba(” + [0, 0, 255, 1] + “)”;
ctx.fillRect(x-(size/2)+16, y, size, 5);
//赤ラインの長さを求める
let p = Math.ceil(size*(number/number_all));
//赤色のラインを作成
ctx.beginPath();
ct

【GASV8 ベーシック認証対応】KintoneManagerを改良したKintoneManagerV8を作成しました! #kintone #GAS

※この記事は自分自身の[ブログ](https://so.sha-box.com/2022/01/kintonemanagerv8/)で公開した内容をQiita用にしたものです｡

kintoneをGoogle Apps Script(GAS)で使用する際にお世話になる[KintoneManager](https://qiita.com/Arahabica/items/063877b0da439020d2c2)

こちらは2015年に公開されたされた記事で、当時のGASではclassを使って書くことはできず、prototypeを使って書かれています。
今回は自分のclassへの理解を深めるために公開されているコードのファクタリングと使いやすいようにメソッドをいくつか増やしたものを作成しました。
基本的な使い方については､元のKintoneManagerと同じです｡
まずはそちらの記事も読むことをオススメいたします｡

元記事:

[kintone とGoogle Apps Script連携](https://qiita.com/Arahabica/items/063877b0da439

JavaScriptの関数を宣言する方法と、それぞれの違いについて

# はじめに
JavaScriptには、関数を宣言する方法が複数あり、それぞれ書き方や特徴が異なるので、まとめておきます。

# 関数の宣言方法は3種類
– 関数宣言
もっとも基本的な関数を宣言する方法?

“`js
function fn(args){
// 処理
}
“`
– 関数式
関数式はfunction式を使って関数を作る。また、関数名を省略できる?
[MDN: 関数式とは](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function)

“`js
const fn = function(){
// 処理
}
“`
– アロー関数
アロー関数はES6から導入され、従来の関数宣言よりも短くかけることや、細かい挙動が異なる関数宣言方法?

“`js
const fn = () => {
// 処理
}

/

JSでライトモード/ダークモード変更をリアルタイムに検知する

以前、こちらの記事を書きました。

https://qiita.com/a01sa01to/items/7072a7e0a4d32e38ecca

しかしこの方法では、JS側でライト/ダークモードの切り替えを検知できません。
（正確には、「検知できなくもないけど、毎秒確認することになりそう :confused:」）

そこで、本記事ではそれを検知する方法を書いていきます。

# 使う機能

JSの `Intersection Observer API` と、前記事で紹介したCSSの `prefers-color-scheme` を用います。

前者は簡単に言えば、監視したい要素が別の要素に交差するときに発火する関数を指定できます。
「別の要素」を指定しないか、`null`と指定すれば、ビューポートに出入りしているのかを判定できるようです。

書いていると長くなりそうなので、詳しくは以下MDNのドキュメントをご覧ください。

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

後者は、ユーザーが

JavaScriptの反意図性(クソ挙動)を指摘するバズツイ周辺解説

先日このようなツイートが話題になりましたね

犯罪にも認定されるjavascriptの反意図性 pic.twitter.com/VH5urmXacJ

— Hカップの論文を読むタイプのMLエンジニアver0.02 (@SupervisedAi) January 21, 2022

無論この件は例のコインハイブ事件で言われるような反意図性とはずれる話題ですが、直感的ではないという点でうなずくものがあります

今回はなぜこれらがこのような結果になるのか、回避方法等順に説明しようと思います

というのも、この中の**いくつかはJavaScript固有のものではない**ので、他人事と思わないようにしていただきたく……
その上でJavaScriptの本当の意味でヤバイ箇所も説明できたらいいなと思います。

# ①`typeof NaN`
“` javascript
> typeof NaN
< number ``` `NaN`とはNot a Numberの略、なのになんでnumberなんだ！！ この値は他のオブジェクトを数値に変換する関数`parseInt(x)`が失敗した場合、`0*Infinity`等の不確定な計算をした時に出力される値で、エラーを表現する値の一つです。 内部表現的にはただの浮動小数

JavaScript AJAX勉強

メソッドの使い方などなかなか覚えられないので、アウトプットして定着させる目的で書きます。。。

# Fetch

JavaScriptは必要な時にいつでもサーバーにリクエストを送れる。
– 入力データのSubmit
– ユーザーデータのロード
などが、ページをリロードしなくても可能になる。

JavaScriptからのリクエストはAJAX(Asynchronous JavaScript And XML)と呼ばれる。
歴史的な経緯からついた名前で、特にXMLを使う必要はない。

AJAXの方法の一つとして`fetch()`メソッドがある。
基本的な構文は以下。

“`js
let promise = fetch(url, [options])
“`
– url : リクエストを送るURL
– options : methodやheaderなど

`fetch()`はpromiseオブジェクトを返す。
サーバーからの応答を見るため`then()`メソッドを使って、

Free fake APIでテスト。

https://jsonplaceholder.typicode.com/

[JavaScript]aタグのダブルクリック対策をしたい

# はじめに

– aタグのリンクを押したときにformのsubmitを実行する、というHTMLがあった
– マークアップが先に作られておりこれを担保しつつ、ボタン機能を持たせる必要があった
– 例として以下のようなマークアップで「ログイン」ボタンが作られていたとする

“`html

ログイン

@csrf

“`

処理としては

1, aタグで作られたログインボタン押す
2, `login`の要素を持つformタグ内でsubmit()を実行
3, actionで指定したルートへPOSTする

といった感じで処理が走る状態

## やりたいこと

今回はこのaタグが**ダブルクリッ

【Nuxt.js×Firebase】ログイン状態を永続的に保持させる（リロード対策）

#はじめに
こんにちは！
今回はログイン状態を永続的に保持させる（リロード対策）についてアウトプットしていきます！
※内容的にかなり難しいので、抽象的、間違いの部分があると思いますのでご了承ください。メモ感覚で本記事を執筆しております。

#対象
・ログイン状態を保持させたい方
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方（[こちらの記事](https://qiita.com/Yudai_35_/items/cb6f360863cf2838b7d5)参考）

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7 |
|firebase |9.6.1 |
|firebase-tools |9.23.3 |
|@nuxtjs/tailwindcss |4.2.0 |

##使用ファイル,概要

|ファイル名 |概要 |
|:-:|:-:|
|middleware/authenticated.js |firebase.jsの情報から処理内容の記述。stateへ再保存。|
|plugins