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

【JavaScript】クラス⑤ 〜継承〜

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

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

# この記事で理解できること
* クラスの継承とは
* 継承の方法
* 継承時の各挙動(コンストラクタ、フィールドなど)

# 継承
* 継承とは、`クラスの構造や機能`を引き継いだ新しいクラスを定義すること。
* `extends`キーワードを使って既存のクラスを継承した新しいクラスを定義できる。
* 継承されるクラスを`親クラス`、親クラスを継承するクラスを`子クラス`と呼んだりする。

“`js
// 継承される側
class Parent {
}

// extendsキーワードで親クラス(ここではParent)を継承して新しいクラスを作成
class Child exte

【JavaScript】クラス③ 〜クラスフィールド〜

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

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

# この記事で理解できること
* クラスフィールド構文について
* Publicクラスフィールド、Privateクラスフィールド、静的クラスフィールド
* 静的メソッド

# クラスフィールド構文(ES2022〜)
* クラスのインスタンスが持つ`プロパティ`、またはその`初期化をわかりやすく宣言的にすることができる`構文。
* Publicクラスフィールド、Privateクラスフィールド、静的クラスフィールドが存在する。

“`js
// クラスフィールドの構文
class クラス {
プロパティ名 = プロパティの初期値; // クラスフィールド
}
“`

【JavaScript】クラス④ 〜プロトタイプオブジェクト〜

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

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

# この記事で理解できること
* プロトタイプメソッド、インスタンスメソッドの違い
* プロトタイプイオブジェクト、プロトタイプチェーンの仕組み

# プロトタイプメソッドとインスタンスメソッドの違い
当関連記事「クラス②、③」で記載したプロトタイプメソッドとインスタンスメソッドには以下のような特徴がある。

## プロトタイプメソッド
* `クラス`に定義したメソッド。
* メソッドを`プロトタイプオブジェクト`という特殊なオブジェクトに定義する。

## インスタンスメソッド
* `クラスフィールド`に定義したメソッド。
* クラスの`インスタンス`に対してメソッドを定義する。

【JavaScript】クラス② 〜プロトタイプメソッド・アクセッサプロパティ〜

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

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

# この記事で理解できること
* クラスのプロトタイプメソッド、アクセッサプロパティについて
* クラスのプロトタイプメソッド、アクセッサプロパティの定義方法、使用方法

# クラスのプロトタイプメソッドの定義
* クラスの動作は`メソッド`で定義する。
* クラスに対して定義したメソッドは、`プロトタイプメソッド`と呼ばれ、`各インスタンスで使用できる`メソッドとなる。
* メソッドの中からクラスのインスタンスを参照するには、`this`を使用する。

“`js
// 人間の構造を定義する例として、クラスHumanを定義
class Human {
// 初期化処理で使用する

【JavaScript】クラス① 〜クラスの定義・インスタンス化〜

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

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

# この記事で理解できること
* クラスとは何か
* クラスの定義方法
* クラスのインスタンス化

# クラスとは
* 動作や状態を定義した構造のこと。
* クラスを基に作成したオブジェクトを`インスタンス`と呼ぶ。

よく「`クラス = 設計図`」という言葉を見かけるので、その例をとって少し自分なりの解釈を加えてみる。

## 「クラス = 設計図」の解釈：建築士と設計図
ドラマや映画などで、建築士が大きな用紙にある建設予定の建物(家やマンション、ビル)の設計図を描いている描写(筒状の入れ物に設計図を入れて背負っていたり)を見かけたことがあると思う。

ここでいう`設計図`がまさ

【JavaScript】Map/Set② 〜Set〜

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

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

# この記事で理解できること
* Set、WeakSetオブジェクトについて
* Set、WeakSetオブジェクトで使用できるメソッドについて

# Set
* セット型のコレクションを扱うためのビルトインオブジェクト。
* 配列と異なり要素は順序を持たず、インデックスによるアクセスはできない。

> **セットとは**
> 重複する値がないことを保証したコレクションのこと。
> ※コレクションは「何らかのデータをまとめて格納するデータ構造」

# セットの作成と初期化
* Setオブジェクトをnewすることで、新しいセットを作成できる。
* コンストラクタの初期値として、`ite

【JavaScript】Map/Set① 〜Map〜

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

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

# この記事で理解できること
* Map、WeakMapオブジェクトについて
* Map、WeakMapオブジェクトで使用できるメソッドについて

# Map
* マップ型のコレクションを扱うためのビルトインオブジェクト。
* マップが持つ要素について挿入順で反復処理を行うことができる。

> **マップとは**
> キーと値の組み合わせからなる抽象データ型のこと。
> ※他のプログラミング言語の文脈では辞書やハッシュマップ、連想配列とも呼ばれる

# マップの作成と初期化
* Mapオブジェクトをnewすることで、新しいマップを作成できる。
* コンストラクタの初期値として、`エン

JavaScriptのError handlingについて

# 初めに
今回はエラーハンドリングの基本概念と応用についてまとめていきたいと思います。

参考文章はこちらです。
[Error handling, “try…catch”](https://javascript.info/try-catch)
[Custom errors, extending Error](https://javascript.info/custom-errors)

# try…catch(…finally)

動作の仕方

– 実行は`try{}`から始まり、エラーがなければ`catch(err)`が無視されます。
– エラーがあれば即時に停止し、`catch(err)`に入ります。
– `finally{}`ではエラーあるなしに関わりなく必ず実行する内容です。

注意点

– 実行段階（runtime）に有効なコードだけ動作します。
– 解析段階（parse-time）でエラーが出

ブラウザの戻るボタンで戻ってきた時にもページの初期化を行うJS

# 概要

あるページから他のページに遷移し、ブラウザの戻るボタンで元のページに戻った時、画面の状態を初期化したいことがあります。
例えば、スイッチ系UIの選択状態を初期状態に戻したい時などです。
その際にも使える初期化コードです。

# サンプル

“`javascript
// 初期化を求めるフラグを立てます
let isNeedInit = true;

function initPage() {
// 初期化フラグが立っている場合にのみ実行します
if (!isNeedInit) {
return;
}
// 初期化フラグを折ります
isNeedInit = false;

/* ページの初期化処理をここに書きます */

};

// ページ離脱の際に初期化フラグを立て直します
window.addEventListener(‘pagehide’, () => {
isNeedInit = true;
});

// ページ再訪問時に初期化を求めます
window.addEventListener(‘pageshow’, initPage

【JavaScript】Objectのプロパティ定義方法

# はじめに

JavaScriptのプロパティ定義には以下のような方法があります。

“`js
const o1 = {
prop: ‘hoge’,
propFn: () => 10000,
};

const o2 = new Object();
o2.prop = ‘hoge’;
o2[‘propFn’] = () => 10000;
“`

そしてこれら定義されたメンバは[for…in](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for…in)によって列挙することができます。

“`js
for (const property in o1) {
console.log(`${property}: ${o1[property]}`);
}

// expected output:
// prop: hoge
// propFn: () => 10000

for (const property in o2) {
console.log(`${pr

Nodejsでフォルダ内のファイルから繰り返し処理でmoduleを読み込む

こんにちはAmpoiです。Skuronosukeから名前を変えて初めての投稿となりますが、この記事ではDiscordJSでコマンドの情報と各コマンドの実行内容を繰り返し処理で取得したい時などに使えるNodejsでフォルダ内のファイルから繰り返し処理でmoduleを読み込む方法を紹介していきます。

# やりかたー
fsモジュールを使ってフォルダ内のファイルを繰り返し処理で取得し、それらのファイルの中にあるデータをfsコマンドで取得・リストに格納します。

# コード
“`js
//./commands/hogehoge.js

//commandsフォルダ内にあるファイルの一例
module.exports = function(){
return {
data:{
name: “bot”,
description: “どういうことBOT「どういうこと」”,
options: [
{
type: 3,
name: “moji”,
required: true,

React ではオーバースペックな場面で使用する JSX で書けるライブラリを作った

React とか SolidJS などのフレームワークって便利ですよね。
コミュニティとエコシステムが成長し、ググれば記事なんて沢山転がってますし。
でも、場面によっては不要な機能が沢山付いてしまいますよね。

そこで、**DOM のレンダリング**と **JSX 構文のエッセンス**だけに絞った超軽量なライブラリ **Hiroshi JS** を作成してみました。

▼ NPM パッケージは以下

https://www.npmjs.com/package/hiroshi

▼ GitHub リポジトリは以下

https://github.com/kato83/hiroshi/

# 特徴

## 超軽量

2022/08/12時点で、BundlePhobia での計測値は zgip 圧縮で 657B（未圧縮なら 1.12kB）となっています。

https://bundlephobia.com/package/hiroshi

比較するのもおこがましいのは百も承知ではありますが、他のライブラリとも BundlePhobia で比較してみました……

|ライブラリ名|未圧縮

JavaScriptの基本的な機能について

# はじめに
React を実務で使用するために、現在 TypeScript を学習しております。
しかし、そもそもの JavaScript の理解が不十分だと判断し、アウトプットと備忘録のために投稿することにしました。
ES2015 以降に実装された書き方を中心にまとめています。
エディタは sandbox を使用しました。
内容に不備などございましたら、ご指摘いただけますと幸いです。

# 基本的な機能の一覧
## var の変数宣言
var は古い変数宣言の方法になります。
var での変数宣言は以下のように、上書きや再宣言どちらも出来てしまいます。
しかしプロジェクトが大きくなると、意図しないところで変数を上書き＆再宣言してしまう問題があるため、使用するには注意が必要です。

https://typescriptbook.jp/reference/values-types-variables/vars-problems

“`javascript
var val1 = “var変数”
console.log(val1);

// varは上書きが可能
val1 = “var変

毎朝Qiitaトレンド記事が届くLINE Botを開発してみた

## はじめに
ども、Qiita初投稿です。

今回は、GoogleAppsScriptでQiita非公式APIとLINE Messaging APIを利用して、毎朝7〜8時にQiitaトレンド上位5記事をスプレッドシートに自動で書き込んで、LINEに自動通知させるLINE Botを開発したので、解説していきます。

このLINE Botを開発した背景として、以下の記事を読んで「これは使えそう！僕も開発してみたい！」と思い、作成してみました。
[【個人開発】通勤時にQiitaのトレンド記事が届くLINE Botを開発した](https://qiita.com/KNR109/items/e1b5ebd94393441fff74?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=df8908bc43-Qiita_newsletter_527_08_10_2022&utm_medium=email&utm_term=0_e44feaa081-df8908bc43-50582981)
（ええ、パクリです…）

#学び3 forEachメソッド

forEachメソッドはJavaScriptで配列に対して用いられるメソッド
配列名.forEach((引数)=>{処理});という形で記述することで、配列内のすべての要素に対して、繰り返し同じ処理を行うことができる。

【React / Next】動的な値でメディアクエリのブレイクポイントを変更してレスポンシブ対応する

個人の備忘録です。

# 環境
– react: 17.0.2
– next: 11.1.3
– react-responsive: 9.0.0-beta.10
– sass: 1.49.9
– @chakra-ui/react: 1.8.5

# やりたいこと
– 親component から動的な値を受け取って、ブレイクポイント値としたい
– ブレイクポイント値以下の時に、要素を display: none; で消す

# ライブラリのインストール
“`bash
yarn add react-responsive
“`

# react-responsive について

https://github.com/yocontra/react-responsive

– CSS メディアクエリの状態を追跡する React の hooks
– `8.0.0` 以上のバージョンから hooks になった
– component内で簡単にブレイクポイントを設定できる
– hooks なのでリアクティブに値を返してくれ、描画後にブラウザサイズを変えても正しく判定してくれる
– 仕様の複雑な U

【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
/* それぞれフラグは必須でないことに留意 **/
/* 正規表現リテラルで表現できる場合は