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

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた Part.5

こんにちはWebエンジニアのmasakichiです。

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた5つ目の記事です。

全部で５記事あります。

– [Introducing asynchronous JavaScript](https://qiita.com/Naughty1029/items/63f27d4a514d16d1c184)
– [Cooperative asynchronous JavaScript: Timeouts and intervals](https://qiita.com/Naughty1029/items/03ebb4cb4480127673de)
– [Graceful asynchronous programming with Promises](https://qiita.com/Naughty1029/items/227d3c66224f66f7ba22)
– [Making asynchronous programming easier with async and await](https:/

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた Part.4

こんにちはWebエンジニアのmasakichiです。

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた4つ目の記事です。

全部で５記事あります。

– [Introducing asynchronous JavaScript](https://qiita.com/Naughty1029/items/63f27d4a514d16d1c184)
– [Cooperative asynchronous JavaScript: Timeouts and intervals](https://qiita.com/Naughty1029/items/03ebb4cb4480127673de)
– [Graceful asynchronous programming with Promises](https://qiita.com/Naughty1029/items/227d3c66224f66f7ba22)
– Making asynchronous programming easier with async and await　←いまここ
– [

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた Part.3

こんにちはWebエンジニアのmasakichiです。

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた3つ目の記事です。

全部で５記事あります。

– [Introducing asynchronous JavaScript](https://qiita.com/Naughty1029/items/63f27d4a514d16d1c184)
– [Cooperative asynchronous JavaScript: Timeouts and intervals](https://qiita.com/Naughty1029/items/03ebb4cb4480127673de)
– Graceful asynchronous programming with Promises　←いまここ
– [Making asynchronous programming easier with async and await](https://qiita.com/Naughty1029/items/4ea93bba49e83d61be1c)
– [

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた Part.2

こんにちはWebエンジニアのmasakichiです。

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた2つ目の記事です。

全部で５記事あります。

– [Introducing asynchronous JavaScript](https://qiita.com/Naughty1029/items/63f27d4a514d16d1c184)
– Cooperative asynchronous JavaScript: Timeouts and intervals　←いまここ
– [Graceful asynchronous programming with Promises](https://qiita.com/Naughty1029/items/227d3c66224f66f7ba22)
– [Making asynchronous programming easier with async and await](https://qiita.com/Naughty1029/items/4ea93bba49e83d61be1c)
– [

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた Part.1

こんにちはWebエンジニアのmasakichiです。

MDN Web Docsの「ウェブ開発を学ぶ – 非同期 JavaScript」を翻訳してみた1つ目の記事です。

全部で５記事あります。

– Introducing asynchronous JavaScript ←いまここ
– [Cooperative asynchronous JavaScript: Timeouts and intervals](https://qiita.com/Naughty1029/items/03ebb4cb4480127673de)
– [Graceful asynchronous programming with Promises](https://qiita.com/Naughty1029/items/227d3c66224f66f7ba22)
– [Making asynchronous programming easier with async and await](https://qiita.com/Naughty1029/items/4ea93bba49e83d61be1c)
– [

Vue-infinite-loading で no-resultsなどの設定を共通化する方法

“`

読込中

全件取得しました

データがありません

“`

#これ毎回コンポーネントにかくのだるくね？

だるいだるいだるい!!!!!

##やったこと

公式ドキュメントを読んだ。
https://peachscript.github.io/vue-infinite-loading/

英語と中国語　?

##解決策

“`

import Vue from ‘vue’
import InfiniteLoading from ‘vue-infinite-loading’

Vue.use(InfiniteLoading, {
slots: {
spinner: “データないです”,
noMore: ‘もうないです。’,

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

自分用メモ
JavaScriptでボタンクリックのイベント発火させようとしたところ、consoleに以下のエラーが出た。

“`
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
“`

ちなみにその時のコードがこちら

“`html:index.html

Vuexはもう古い！？これからの状態管理はPiniaを使おう

# はじめに
煽り気味のタイトルですみません。Vuexは使わない方がいいという話ではなく、別の有力な選択肢が出てきたというレベルの話であると最初に断っておきます。

みなさん、Piniaという状態管理ライブラリをご存知ですか？僕は昨日知りました。
調べてみるとどうやら先月Vueの公式リポジトリ入りをしており、今後さらに注目が集まるライブラリになりそうです。
* ちなみにPiniaはVuexを置き換えるものではなく、Vuexは今後も開発を継続していくようです（現在はVuex5を開発中）。

Vueの状態管理といえばVuexというイメージがありますが、TypeScriptとの相性が良くないだとか、そもそも冗長だとかで長らくVue3時代の状態管理のベストプラクティスがよくわからない状況が続いていました（？）

僕の知っている限りではVue状態管理の方法は
1. Vuex
2. provide/inject
3. 単にグローバルでリアクティブ変数を宣言する
4. Pinia

の4つですが、1の問題は前述した通りで、2、3はシンプルですがプロダクトやチームの規模によっては無秩序になりやすい

いまさら理解する jQuery Deferred

# 概要

現代の JavaScript における Promise と jQuery Promise では、非同期処理の振る舞いが異なることを示します。また、混同されがちな jQuery の `then` と `done/fail/always` の使い分けについて解説します。

この記事のすべてのコードは、以下のページで試すことができます。
https://at6ue.github.io/jquery_deferred_demo/

# jQuery の Deferred と Promise

[Deferred Object](https://api.jquery.com/category/deferred-object/) は jQuery において主に非同期処理を扱うための仕組みです。例えば、以下のように非同期処理の完了を待って `then` に登録したコールバックを実行させることができます。

“`js:01.js
const fn = () => {
const deferred = $.Deferred();

setTimeout(() => {
co

qittaの記事を見てぱっと見謎だったfilter, reduceに渡すアロー関数を理解した

qittaの記事を見てぱっと見謎だったソースが以下。

“`index.ts
function sumOfPos(arr: number[]): number {
return arr.filter(num => num >= 0).reduce((acc, num) => acc + num, 0);
}
“`

まず以下の部分

“`index.js
arr.filter(num => num >= 0)
“`

javascriptのfilter関数の公式を見てみると

“`index.js
let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])
“`

そうかfilter関数の引数にコールバック関数を渡すのか。
とすると無名関数を渡しているので以下と同義。

“`index.js
arr.filter(function(num){
return num >= 0;
});
“`

続いて以下の部分

“`index.js
reduce((acc, num) =

語彙診断をより簡単に

# はじめに
皆様はhttp://testyourvocab.com/ というサイトをご存知でしょうか。
以下のような単語リストにチェックを付けていくと、今の語彙レベルが分かるというサイトです。


# 問題点
一括選択がない…
そう、このサイトにはすべての単語を一括で選ぶことはできません。

# そこで
　簡単なScriptを組みました。

“` javascript
document.querySelectorAll(“input[type=’checkbox’]”).forEach(function(v){v.checked = true});
“`

　あとは開発モードを開いてこれを実行するだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaw

PDFをブラウザ全画面モードにしてスライドショーができる、ビデオ会議で便利かもしれないツールを作ってみた

# 概要

Webブラウザで、手元のコンピュータの中にあるPDFを1つのタブのなかでスライドショー的に投影するためのツールを作ってみました。

デモページは[github.ioのこちら](https://hrkt.github.io/my-pdf-slideshow/)からどうぞ。

リポジトリは[GitHubのこちら](https://github.com/hrkt/my-pdf-slideshow)。

メニューはこんな感じです。


PDFレンダラは[PDF.js](https://mozilla.github.io/pdf.js/)のサンプルそのまんまで、キーボード操作のあたりだけをメインに足しました。

# 動機

ブラウザでPDFを見るときに、ツールバーがないものを作ってみたかったので。

利用シーンとしては、以下のようなものです。

1

DenoであらゆるPythonライブラリが使えるようになったらしいので試す

Denoからあらゆるpythonライブラリを呼び出すことができる、その名も「python」というライブラリが公開されました。

https://deno.land/x/python@0.1.0

これは面白そう…！ということで、使ってみようと思います。

## 使い方

### 1. Pythonのインストール

最初にPythonをインストールする必要があります。
自分の場合は最初からPythonが入っていたので、この手順は必要ありませんでした。
Pythonが入っていない人は適宜ググってください。

### 2. Pythonを呼び出すJSコードの作成

まずはfizzbazzを実行してみます。コードは以下のような感じになりました。

“`ts
import { python } from “https://deno.land/x/python@0.1.0/mod.ts”;

// `python.runModule`メソッドは、引数のpythonコードをモジュールとして実行する
const fizzbuzzModule = python.runModule(`
def fizz

JavaScript ライジングスター 2021


[2021](https://qiita.com/rana_kualu/items/b23a1bccae742bd031ef) / [2020](https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d) / [2019](https://qiita.com/rana_kualu/items/4727a0d64657aa837ce3)

JavaScriptライブラリのトレンドを紹介している[bestofjs.org](https://bestofjs.org/)が、2021年に最もホットであったJavaScriptライブラリのランキングを発表しました。
選考基準は累計スター数ではなく、『2021年の一年間で増えたスターの数』です。
過去流行っていたけど落ち目となった技術は出てこないので、最近注目さ

JavaScript の Fetch API を用いた HTTPリクエストで簡略な時間的制約を設ける

タイトル通りの内容の、ちょっとしたメモです。

## 今回の内容
[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API) などを使って HTTPリクエストを実行する際に、例えば「1度 HTTPリクエストを送ったらその後 5秒間は HTTPリクエストを送る処理を実行しないようにする」というような、時間的制約をかける話です。
指定の時間が経過するまでは HTTPリクエストを実行しようとしてもその処理をブロックするようなフラグを立てておく、という形で実現してみます。

## 時間的な制約をかける
「処理をブロックするようなフラグ」という話を書きましたが、このフラグがオンになった後に、一定の時間が経過したらフラグがオフになる、というような処理を実装します。
具体的には、「JavaScript で sleep処理を実現する方法」というような方向性で情報を探した時によくでてくる、「async/await を使った sleep処理」を使います。

●非同期関数 – JavaScript | MDN
　https://d

ajaxzip3からYubinBangoに変更したが相変わらず素晴らしい件

# はじめに

今まで郵便番号の自動保管に`ajaxzip3`を利用していました。

https://github.com/ajaxzip3/ajaxzip3.github.io

しかし、新しいプロジェクトで導入しようと思いリポジトリを開くと以下の記載がありました。
> 新規の設置には yubinbangoライブラリの使用をオススメしています。

`yubinbango`? なんぞそれ？　って感じだったので実際に触ってみましたので紹介します。

https://github.com/yubinbango/yubinbango

# やり方

とりあえず`README`に従い実装してみた

“`html

Japan

〒

お正月休みにGitをインタラクティブに操作できるサブコマンドツール作ってきました

年末からお正月にかけての時間で趣味でツールを作ってみました?
Gitのちょっと面倒な操作をインタラクティブに行えるGitのサブコマンドツール[git-ex](https://github.com/yasukotelin/git-ex-js)を作成してnpmに公開しています。

https://github.com/yasukotelin/git-ex-js

https://www.npmjs.com/package/@yasukotelin/git-ex

僕は普段はAndroidエンジニアとしてKotlinを書いていますが、趣味ではVimのカラースキーム作ったり、Goでツール作ったり、Rustに手を出したり、、、など色々しています。今回はJavaScriptのターミナルのライブラリがとても良さそうだったのでnode製のCLIツールを作ってみました?！

このQiita記事では前半にツールの紹介と、後半で実装面を書いてみようと思います。

## ツールの紹介

僕は普段Gitをターミナル上でコマンドで使っているのですが、たまにSourceTreeなどのGUIツールやTIGなどのツール

JavaScriptでPrimitive Type vs Reference Typeについて調べよう

JavaScriptはPrimitive TypeとReference Typeという二つのデータ型を提供し、オブジェクトを除いた全てのものはPrimitiveな性格を持っている。

Primitive Type : 基本型/データの情報が入っている
Reference Type : クラス型/オブジェクト実体の場所情報入っている

## Primitive Type (基本型)
Primitive Typeのデータは変数に割り当てられる時、メモリ上に固定された大きさで保存され、当該変数が原始データの値を保管する。 Primitive Typeのデータ型はすべて変数宣言、初期化、割り当て時に値が保存されたメモリ領域に直接的にアクセスする。 すなわち、変数に新しい値が割り当てられる場合、変数に割り当てられたメモリブロックに保存された値をすぐに変更する。

### Primitive Typeの種類
– Boolean
– number
– String
– undefined
– BigInt
– シンボル

### Primitive Typeの変数

【React】ToDoリストを作ってみた

## 背景

実務でReactも使っているようで、入社前のキャッチアップとしてToDoリストを作成します。
まずは基本的な部分の理解を深めたかったのでJavaScript+Reactで作っていこうと思います。

## 完成イメージ


今回はあくまでReactの学習に重きをおいているのでHTML/CSSは省きました。
機能としては４つ、それぞれ以下のように動きを区分しました。

### 1. タスク追加機能
– フォームに文字列を入力
– 追加ボタンをクリックするとタスク追加、追加後はフォームの値を””にする
– 追加すると、ID、コメント(=タスク名)、状態ボタン、削除ボタンを表示
– IDは0から始まる連番
– 入力後の状態は作業中

### 2. タスク削除機能
– 削除ボタンを押すと同じ行のタスクを削除
– 削除後はID更新

【VS Code】JavaScriptのconsole.logをコンソール画面に出力する方法

本記事では、JSのconsole.logを、VS Codeのコンソール画面に出力する方法を紹介します。

# 環境情報
OS：Windows 10
VS Codeのバージョン：1.63.2

# 手順

以下の手順を行うことで、コンソール画面にconsole.logの内容を出力できます。
①Live Preview拡張機能インストール
②Live Previewの設定変更

## ①Live Previewインストール

Live Preview拡張機能をインストールします。
以下記事の「インストール」セクションに、インストール方法が記載されているので、そちらを参照ください。
https://creating-homepage.com/archives/8616#sec2

## ②Live Previewの設定変更

Live Previewのインストールが完了した後、Live Previewの設定をいくつか変更します。
・変更する設定
　　Auto Refresh Preview
　　Debug On External Preview
　　Open Preview Target