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

語彙診断をより簡単に

# はじめに
皆様は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

MIDIキーボード.js

仕様とか解説読んでいくと右脳と左脳がぐちゃぐちゃになるｗ
これならわかりやすかと

“`js:javascript

//https://jumbleat.com/2016/11/26/midi_send_by_arduino/
//https://www.inspiredacoustics.com/en/MIDI_note_numbers_and_center_frequencies

$(e=>{
new MidiKeyboard({
NoteC3 : e=>console.log(‘ド’),
NoteD3 : e=>console.log(‘レ’),
NoteE3 : e=>console.log(‘ミ’),
NoteF3 : e=>console.log(‘ファ’),
NoteG3 : e=>console.log(‘ソ’),
NoteA3 : e=>console.log(‘ラ’),
NoteB3 : e=>console.log(‘シ’),
NoteC4 : e=>console.log(‘いっこ上のド’),
NoteCS3 : e=

今回はおみくじを作ります　＊1日1回御神籤編

前回は、おみくじ何回も押せる編を、作りました
今回は、1日1回編です
＊ページを更新すると、また、押せます。ページを閉じてまた開くと、また押せます
そこには、ご了承ください

“`html

？？

＊＊＊