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

【Next.js】ページ遷移時に入力内容破棄の確認モーダルを表示する便利なカスタムフック作ってみた。

# はじめに
実務を経験する上で、
「入力フォームなどがあるページで入力途中の内容がある場合に、
ユーザーがページ遷移をしようとした時に入力内容の破棄をアラートする。」
といった対応が必要なケースがあると思います。

そういったケースで、
簡単に使えるカスタムフックスを作成しました。

## 使用技術に関して
主にこのフックス内で使用しているパッケージとそのバージョンは以下です。
`Next.js: ^12.1.7-canary.41`
`react: 18.2.0`
`@mantine/core: 4.2.9`
`@mantine/hooks: 4.2.9`
`tailwindcss: ^3.1.3`

# 目次
[1.コードはこんな感じ](#1-コードはこんな感じ)
[2.それでは解説](#2-それでは解説)
[3.終わりに](#3-終わりに)

# 1. コードはこんな感じ
“` JSX:usePreventLeavePage.tsx
import { Modal } from “@mantine/core”;
import { useDisclosure } from “@m

【JavaScript】関数とスコープ② 〜巻き上げ・クロージャ〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 巻き上げとは
* 関数における巻き上げの挙動
* クロージャとクロージャ内部の仕組み

# 関数宣言と巻き上げ
* `巻き上げ`とは、宣言部分がもっとも近い関数またはグローバルスコープの先頭に移動しているように見える動作のこと。
* 代表的な例として、`functionキーワードを使用した関数宣言より前に関数を呼び出しをしてもエラーにならない`挙動がある。

“`js
// この時点では関数は定義されていないのに関数を呼び出せる
hello(); // => hello

// この位置で関数を定義している
function hello() {

【JavaScript】関数とスコープ① 〜スコープ〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# スコープとは
* 変数や関数などを参照できる範囲のこと。
* `スコープ内`、`スコープ外`といった表現を聞くことがある。
* スコープには`関数スコープ`や`ブロックスコープ`がある。

## 関数スコープ
* 関数内で定義された変数は`関数内でのみ参照を可能`とする。
* `関数の外側`から参照しようとすると例外が発生する。
* 関数の`仮引数`についても関数内でのみ参照できる。

“`js
const func = arg => {
const str = `関数スコープの${arg}`;

// スコープ内なので参照できる
console.log(arg)

【JavaScript】文字列④ 〜正規表現オブジェクト〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 正規表現を用いた文字列の検索方法

# 正規表現による検索
* 文字列による検索に比べ、柔軟な検索が可能となる。
* 検索する`パターン`と、検索モードを指定する`フラグ`から構成される。
* 特殊文字`\ ^ $ . * + ? ( ) [ ] { } |`のいずれかを`パターン`に含める場合はエスケープ(`\`)が必要。
* 正規表現オブジェクトを作成するには、`正規表現リテラル`と`RegExpコンストラクタ`を使用する2つの方法がある。

“`js
/* それぞれフラグは必須でないことに留意 **/
/* 正規表現リテラルで表現できる場合は

【JavaScript】文字列③ 〜文字列の取得、検索〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 指定した文字列の取得、検索方法

# 文字列の一部を取得
以下のメソッドで文字列から一部を取得できる。
* `slice`メソッド
* `substring`メソッド

これらのメソッドを使用する場合、
* 指定するインデックスは`0以上`
* 第二引数を指定する場合は`第一引数の位置 < 第二引数`の位置にする ことが推奨される(詳細はそれぞれのメソッドの挙動を理解すると分かる) ## sliceメソッド * 第一引数に開始位置、第二引数に終了位置を指定し、`その範囲を取り出した新しい文字列`を返す。 * 返される文字列には、`第二引数に指定し

【JavaScript】文字列② 〜文字列の分解・結合、比較〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 文字列の分解、結合方法
* 文字列の長さを取得する方法
* 文字列の比較方法

# 文字列を配列へ分解(split)
* 第一引数に文字列の区切り文字を指定し、分解した配列を返す。
* 第一引数には正規表現も指定できる。

“`js
const str1 = “A!B!C”;

console.log(str1.split(“!”)); // => [ ‘A’, ‘B’, ‘C’ ]
“`

# 配列の要素を結合して文字列にする(join)
* 第一引数に区切り文字を指定し、その区切り文字で結合した文字列を返す。

“`js
const arr

【JavaScript】文字列① 〜文字列の作成・結合・アクセス・内部変換〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 文字列の作成方法
* JavaScriptにおける文字コード

# 文字列の作成
* 文字列リテラル(`”`、`’`、“ ` “)のいずれかを利用し、文字列を作成する。
* `対となる文字列リテラル`で、文字を囲う必要がある。

“`js
// ダブルクォート
const str1 = “文字列1”;

// シングルクォート
const str2 = ‘文字列2’;

//　バッククォート(ES2015〜 テンプレートリテラルという)
const str3 = `文字列3`;

const str4 =`複数行記載することができます
複数行記

【JavaScript】プロトタイプオブジェクト

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* プロトタイプオブジェクト(Object.prototypeプロパティで定義されたオブジェクト)とは
* Objectの継承
* プロトタイプメソッドとインスタンスメソッドの優先度

# Objectはすべての元
* `Object(クラス)`は、全てのオブジェクトの元である。
* `Array`オブジェクトや`String`オブジェクトなどは、この`Object`を継承している。*1

> *1 「ArrayオブジェクトやStringオブジェクトなどは、このObjectを継承している。」とは、
> 正確にはObject.prototypeプロパティで

return(戻り値)を使う理由は？

# プログラミングの超基礎を学習されている方向けの「return」

Progateを始めたばかりなど、超基礎学習時は例題がシンプル過ぎて、紹介されている技術に対して「わざわざ使う理由が分からない」となりがちです。

そこで実践的な用例・コードを見ていきながら、returnを使う理由を理解していきましょう。

この記事では、returnを使うべき局面で「returnを使ったコード」「returnを使わなかったコード」の2パターンを比べます。

どのように違ってくるか？returnを使わなかったことでどのような損害が起きてしまったか？を説明します。

Githubにソースを用意しています。実際に触ってみたい方はダウンロードしてご活用ください。
● [reasons-for-using-return](https://github.com/n-haruka/reasons-for-using-return)
※Qiitaでは仕様上ソースが縦に並んでしまうので、見やすい状態で確認したい場合はソースをダウンロードの上エディタに表示していただくのがおすすめです。

## サンプルの仕様

###

p5.js で createGraphics() の描画領域を見えるようにして利用してみる（＋ 特定の処理に関して明示的なリセットが必要な話）【小ネタ】

p5.js の createGraphics() は、[公式リファレンス](https://p5js.org/reference/#/p5.Graphics)の説明内で「an off-screen graphics buffer」という表現を使って書かれているとおり、描画データを保持する不可視のバッファのようなものです。

その createGraphics() 周りの話について以下のような流れがあって、「もしかして、簡単に表示できる設定にできるのでは？」と思って試したのが、今回の主な内容です。

– createGraphics() を活用した試行錯誤をする中で、コンソールに中身を出力してみていた時に「style の display が none になっている canvas要素」が含まれていた
– [公式の createCanvas()

create-react-app無しで環境を構築(Webpack)

今回は、create-react-appを使わずに、ReactとTypeScriptの環境を構築していこうと思います。
最近では、Viteが人気ですが、今回は安定のWebpackで構築していきます。
ではさっそく始めていきます。

## package.json作成

まず初めに、プロジェクトのルートディレクトリにて、以下のコマンドでPackage.jsonを作成します。

“`html
npm init -y
“`

package.json とは、パッケージのメタデータを管理するためのファイルです。

[こちら](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477#npmcli)に詳しい説明が書いてありますので、読んでみてください。

## Reactインストール

次に、以下のコマンドでReact関連のモジュールをインストールしていきます。

Reactの型定義ファイルである「@types/react」「@types/react-dom」も同時にインストールします。

“`html
npm install re

【JavaScript】関数とthis

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* JavaScriptにおけるthisの参照先、参照条件
* 関数・メソッドにおけるthisの挙動
* 関数・メソッドとベースオブジェクトの関係

# 関数とthis
`this`の参照先は、主に以下の条件によって変化するとされている。
* 実行コンテキストにおけるthis
* コンストラクタにおけるthis
* 関数とメソッドにおけるthis
* Arrow Functionにおけるthis(以降、Arrow Function = アロー関数)

# 実行コンテキストとthis
* JavaScriptには実行コンテキストとして、`Script`、`

リファラポリシーの必要性とその値

## リファラとは（ざっくり）

リンク先がどこから飛んできたか（リンク元）を知れる。
例えば、`http://example.com`（リンク元）に貼られたリンクから`http://hogehoge.com`（リンク先）に遷移する場合
リファラヘッダーに
`Referer: https://example.com`のような情報が含まれる。

リンク先の管理者はこのリファラを見ることで、ユーザーが`http://example.com`から自分のサイトに訪問したのだとわかる。

## なぜリファラの設定が必要か
極端な例ですが、リンク元のサイトが`http://sample.com?user_id=999&pass=1234`かつリファラを参照できる状態のサイトの場合を考えてみます。

リンク元サイトから他ページのリンクに飛んだ時、リンク先は`http://sample.com?user_id=999&pass=1234`この情報をゲットできるので、ログインに必要な情報が分かり簡単にログインできて、ログインページで操作が可能になります。
セキュリティ的にリンク先に情報を渡したく

【2022年夏】配列をループ＆pushで初期化する考え方はそろそろ捨てよう

**ひょっとしてまだ、配列をループ＆pushで初期化する人生を送っていますか？**

先日、仕事中に他の方が作った**JavaScriptコードでエラーが出ている**のに気が付きました。
古いコードではありません。現在進行形のプロジェクトです。対象ブラウザはChrome/Edgeの最新版です。

“`javascript
// cdが50を超えるものを抽出
var list = [];
for (i = 0; i <= ret.data.length; i++){ var item = ret.data[i]; if ( item.cd > 50 ) {
list.push(item);
}
}
“`

**「ret.data」という配列があり、その配列の要素のcdが50を超えていたらlistにpushする**、というものです。
つまり、ret.dataのデータを「cd > 50」という条件でフィルタリングした結果をlistに入れる、ということですね。

さて、どこでエラーになっているかお分かりでしょうか。
そうです、ループ条件の「**i <

[Deno] fetchする時にUser-Agentを設定する方法

Denoでは`fetch`でHTTPリクエストを送る際、リクエストヘッダーの`User-Agent`に`Deno/<バージョン名>`という値が入っています。この部分を変える方法です。

## デフォルトのUser-Agent

デフォルトのUser-Agentヘッダーは以下のコードで確認できます。

“`ts
const res = await fetch(“https://dump-headers.herokuapp.com/”);
console.log(await res.json());
“`

上のコードを実行すると、User-Agentヘッダーが「`Deno/1.24.1`」であることが分かります。もちろんバージョン番号部分はお使いのDenoのバージョンによって異なります。

また、単に`navigator.userAgent`とすればプログラムから取得することもできます。

“`ts
console.log(navigator.userAgent); // “Deno/1.24.1”
“`

## User-Agentヘッダーの書き換え

`Request`オブジ

JavaScriptのClassについて part5

# 初めに
今回はクラスの基本概念`instanceof`演算子と、単一継承でのミックスインの実現をまとめていきたいと思います。

参考文章はこちらです。
[Class checking: “instanceof”](https://javascript.info/instanceof)
[Mixins](https://javascript.info/mixins)

# instanceof
インスタンスと親の所属関係を表す演算子です。プロトタイプチェーンのチェックにもよく使われています。
基本の構文：[instanceof – MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/instanceof#%E6%A7%8B%E6%96%87)
“`jsx
object instanceof constructor
“`

インスタンスの関連図は前の文章でもよく使っていました。
[JavaScriptの.__proto__とprototypeとinstance](https://

【JavaScript】文字列とUnicode

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* JavaScriptにおける、Unicodeの構成要素との関係

# Code Point
* Unicodeはすべての文字に一意のIDが定義されており、そのIDを`Code Point（符号位置）`と呼ぶ。
* Code Pointを扱うメソッドとして`codePointAt`メソッド、`String.fromCodePoint`メソッドが存在する。
* それぞれ`ES2015`から導入された。

## codePointAtメソッド
* 文字列の指定インデックスにある文字のCode Pointの値を返す。

“`js
// 引数にインデックスを

【JavaScript】配列⑤ 〜メソッドチェーン〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 配列におけるメソッドチェーンを利用した処理方法

# メソッドチェーンとは
* メソッドを呼び出した返り値に対して、さらにメソッド呼び出しを行うパターンのこと
* `.`で繋げていく。
* 処理の`見た目を簡潔にできる`ことが特徴(途中の一時的な変数を省略できたり..)
※メソッドチェーンのことを知らないと最初は複雑に見える(た)
* `長過ぎるメソッドチェーン`は読みにくくなる。

“`js
const numbers1 = [1, 2, 3, 4];
const numbers2 = [5, 6, 7, 8];

// 異なる配列を結合(

【JavaScript】配列④ 〜配列を反復処理するメソッド〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 配列の反復処理方法およびメソッド

# 配列の反復処理でよく利用されるメソッド
* `foreach`、`map`、`filter`、`reduce` メソッド。

## Array.prototype.forEach
* 配列の要素を`先頭から順番にコールバック関数へ渡し`、反復処理を行う。
* コールバック関数へ`要素`、`渡された要素のインデックス`、`反復処理対象の配列`を引数として渡す。

“`js
const array = [“One”, “Two”, “Three”];

// forEachでの反復処理
array.forEach

【JavaScript】配列③ 〜配列を操作(要素の追加・削除)するメソッド〜

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 配列の要素の追加、削除方法
* 配列の結合方法
* 配列の展開方法

# 配列の要素の追加、削除
* 要素を配列の末尾へ追加(`push`)
* 配列の先頭へ要素を追加(`unshift`)
* 末尾から配列の要素を削除(`pop`)
* 配列の先頭から要素を削除(`shift`)

## 要素を配列の末尾へ追加(`push`)

“`js
const numbers = [ 100, 200, 300 ];

// 配列の末尾へ要素を追加
numbers.push(400);
console.log(numbers); // => [ 100,