f@ctor

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

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

124.コールバック関数と非同期処理　125.非同期処理のチェーン

# 覚えておくべき前提条件
#### 1.実行について
＊関数は実行されて初めて処理が始まる
例)
1.Func();–処理が始まる
2.btn.addEventListener()–『ボタンを押して初めて』実行されている
#### 2.キューについて
非同期処理にすることによってメインの処理を待たずに他の関数を実行できる
ただ非同期処理内でも、先入先出しなので、順番は守らなければならない。
#### 3.setTimeoutについて
setTimeout（）は
第一引数に処理を、第二引数に待機時間を記入するが
第二引数がないと、コールスタックが吐き切るまで、実行されない
#### 例
“`javascript
function a() {
// 2.コールスタックが全て終了するまで待機
setTimeout(function task1() {
console.log(‘settimeout done’);
});

console.log(‘fn a done’);
}

function b() {
console.log(‘fn b done’

元記事を表示

Next.js でページ遷移時の確認モーダルを出す方法の備忘録

# はじめに

仕事で Next.js のページ上でページ遷移時の確認モーダルを出すコードを作成したのでその上で知ったことに関して備忘録代わりにこちらで記載しておきます。

# useEffect の理解

今回の目的の達成のために、Next.js の **useEffect** を用いようと思います。

useEffect は引数に指定した関数の実行をコンポーネントのレンダリング後に行うことができるメソッドです。

基本的なつくりは “`useEffect(関数, データ配列)“` となっており、第二引数の配列内のデータが更新されるたびに、第一引数の関数が実行されます。

今回の目標は「ページ遷移時の確認モーダル表示」なので、コンポーネントがアンマウントされたタイミングでの処理についても気を付ける必要があります。

その為、アンマウントされたタイミングでの処理も含めての基本的な構文は以下の様になります。

“`javascript
useEffect(() => {
// レンダリング時の処理
return () => {
// アンマウント時の処理
}
}

元記事を表示

JavaScriptで配列同士を比較して、重複・差分データを抽出する方法

## はじめに
JavaScriptでオブジェクトの配列同士の比較で詰まったので、備忘録として残します。
ベストな方法ではないかもしれませんが、1つのやり方として誰かの参考になればとも思います。

## やりたいこと
以下の二つの配列があったと仮定する。
「expense1」と「expense2」で重複するデータだけ抽出したい。
“`javascript:main.js
const expense1 = [
{ name: ‘住居費’, const: 50000 },
{ name: ‘水道光熱費’, cost: 10000 },
{ name: ‘保険料’, cost: 20000 },
{ name: ‘通信費’, cost: 12000 },
{ name: ‘美容費’, cost: 8000 },
];

const expense2 = [
{ name: ‘住居費’, const: 50000 },
{ name: ‘教育費’, cost: 15000 },
{ name: ‘水道光熱費’, cost: 10000 },
{ name:

元記事を表示

Python,Ruby,PHP,Java,JavaScript,Perlのライブラリ・モジュールの比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのライブラリ・モジュールの比較

# Python

https://qiita.com/ryuichi1208/items/cb5f850a9811d2a4bc3a

# Ruby

https://qiita.com/sugamaan/items/d7871da28c0160b69609

# PHP

https://qiita.com/mikakane/items/2719df714df5b3fc6adf

# Java

https://qiita.com/haruto167/items/162551100449ea5c7e6d

# JavaScript

https://qiita.com/Nako4/items/1d8eaf731bf4370b84a7

# Perl

https://perlzemi.com/b

元記事を表示

JavaScriptの正規表現について part2

# 初めに
前回の続きです。今回は正規表現の言明（Assertions）、グループと範囲（Groups and backreferences）、数量詞（Quantifiers）、Unicode property escapesについてまとめていきたいと思います。

https://qiita.com/hu-yu/items/c381e9c191c7a7400671

# Memo

言明（Assertions）

`^`, `$`, `x(?=y)`, `x(?!y)`, `(?<=y)x`, `(?

元記事を表示

べき乗・べき根・対数の整理メモ (JavaScript)

数学よわよわ村の民でlogがいっつもごちゃるのでほぼWikipediaコピっただけ 間違ってたら教えてほしいです

# 冪乗(べきじょう): exponentiation

$$
\Huge{?^?= ?}
$$

$$
\large{底^{指数} = 冪}
$$

– ?: 底 (base)
– ?: 指数 (exponent)
– ?: 冪 (power)

$$
5^2 = 5 \times 5 = 25
$$

“`js
const base = 5;
const exponent = 2;
const power = base ** exponent; //=> 25

// const power = Math.pow(base, exponent); //=> 25 (同じ)
“`

– 指数関数(exponential function) とも呼ぶ
– 指数が自然数のとき **累乗(るいじょう)** と呼ぶ
– 指数が2のとき **平方(square)** と呼ぶ (面積 $m^2$ でお馴染み)
– 指数が3のとき **立方(cube)** と呼ぶ (体積 $m^

元記事を表示

【Vue3】ブラウザでマイク音声を録音する(Composition API)

# やりたいこと

ブラウザで録音するアプリケーションを作ります。

Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。

# 基本

ブラウザでの録音はMediaStream Recording APIを使います。

基本的には以下のソースコードと解説を参考にしました。

[MediaStream Recording API の使用 – Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)

# 全コード

短いので、テンプレートの全コードを掲載します。

“`jsx