JavaScript　型を調べる

## 用途
– JavaScriptのコードで型を調べたい時に使用する。
:::note warn
注意
`typeof` は「null」や「object」を正しく判別できない。
その場合は `Object.prototype.toString.call()` を使用する。
:::

## 使用方法
## typeof
“`js:書き方
typeof(型を調べたい値);
“`

“`js:例
console.log(typeof(“hogehoge”));
console.log(typeof(1));
console.log(typeof(null));
console.log(typeof([hoge1, hoge2, hoge3]));

// 結果
// string
// number
// object
// object
“`
「null」と「配列」が `object` で返ってくる。

## Object.prototype.toString.call()
“`js:書き方
var hoge = Object.prototype.toString;
conso

コピペで完結 超簡単 JavaScript クイズ 記述式

## はじめに
こちら開発の雑メモです。
JavaScriptの記述式のクイズの記事は案外探してみると少なかったり、理想のものが出てこなかったので、もし役に立てれば幸いです。
## 完成イメージ
完成イメージです！gifが小さいのでクリックして拡大してみていただければと思います。

## 実際のコード
“`html:quiz.html

Q1)日本で一番大きい山はなんでしょう？

（答え記入後、「回答する」をクリックしてください）

答え：

【５日目】メモ帳アプリの作成 [２]

# １．本日の課題
本日は前回作ったメモアプリを、一つだけ保存できるものから複数を保存できるものに改良する。
まずは前回作ったプログラムのおさらい。

See the Pen
Untitled by mizmizsan2 (@mizmizs

javascript if文でメッセージを出し分ける

## はじめに
javascritのif文の書き方を学ぶ
### 参考書

確かな力が身につくJavaScript「超」入門 第2版

## ゴール
if文でダイアログのボタンごとにメッセージを出し分ける
## 手順
“`js:ダイアログボックスを表示してOKまたはキャンセルでメッセージを出し分ける

“`

### メモ
`window.confirm`これで確認ダイアログボックスが出せる

配列の要素を削除、減らす　JavaScript

## 用途
– 配列の要素を削除したい時、要素を減らしたい時に使用する。

## 使用方法

## shift
“`js:書き方
配列名.shift();
“`
配列の先頭の要素を削除し、残りの要素を戻り値として返す。
配列が元から空だった場合は `undefined` を返す。
残っている要素についてはインデックスが1つずつ小さくなる。
“`js:例
var hoge = [“hoge1”, “hoge2”, “hoge3”];
hoge.shift();

console.log(hoge);
結果
[“hoge2”, “hoge3”]

console.log(hoge[0]);
結果
hoge2

console.log(hoge.shift()) // 削除した値を取得
結果
hoge1
“`
配列の先頭の要素を削除し、残りの要素のインデックスが1つずつ小さくなった。

## pop
“`js:書き方
配列名.pop();
“`
配列の末尾の要素を削除し、残りの要素を戻り値として返す。
配列が元から空だった場合は `undefined` を返す。
“`js:例

OBS｜音楽用キーボードでスイッチング

nanoKEY2 Switcher – https://youtube.l8r.jp/MidiSwitcher.html
obs-websocket 4.9.1 – https://github.com/obsproject/obs-websocket/releases/tag/4.9.1

“`html:NanoKey.html


DOM、Node、Elementを理解する

# 概要
JavaScriptで動的にHTMLを操作することが増え、より深く仕組みを知ってみたいと思い、理解した内容を記載する。
※結論、タイトルとは逆の順で理解した方がわかりやすかったので、その流れで記載する。

# Element(要素)
* Element(要素)とは、`

要素の内容

`のように`「タグ」+「内容」`の組み合わせのこと。
* 各要素は、共通したインターフェースを継承し、さらに細分化したインターフェースを実装している。
* また、これらは`文書を構成する要素(Object)`と考えることもできる。

> ここでいう**インターフェース**とは
> プロパティ(情報)、メソッド(処理のまとまり)などを定義しているもの。
> 継承すると継承元で定義されているプロパティや、メソッドなどを参照・実行できる。
> また、これらは`DOMインターフェース`と呼ばれる。

## 例：pタグ、imgタグが継承しているインターフェース
「pタグにはsrc属性が指定できないが、imgタグではsrc属性が指定できる」という事象をもとに考えてみる。

* pタグは「

FileReader APIをPromise化する方法

# 概要
フロントエンドのWebアプリでユーザーが指定したファイルをアップロードする前に、Base64に変換することが常套手段です。
その理由は、Base64はファイルサイズが多少大きくなるが、データ破壊を防げるからです。

2進コードファイルをブラウザでBase64に変換するには、FileReader APIを使います。

ただ、このFileReader APIはかなり古いようで、なんと、Promiseに対応していないのです！

そこで、そのFileReader APIをPromiseに包む、Promise化の方法をここでご紹介します。

# コード
ブラウザのHTMLInputElementから取ったFileListを引数としてもらいます。

ファイル一つのみの場合は以下のように使います。
“`typescript
convertToB64 = (filesList: FileList) =>
new Promise((resol

push　配列の末尾に追加　JavaScript

## 用途
・配列の末尾に値や要素を追加したいときに使用する。

## 使用方法
“`js:書き方
var array = 配列;
array.push( 追加したい要素, 追加したい要素, 追加したい要素…… );
“`
`配列` + `.（ドット）` + `push` で繋ぎ、`()` で追加する要素を囲う。
追加する要素は、複数でも可能。また、数値・文字列・オブジェクトなど多様な要素の追加が可能。

“`js:例
var hoge = [hoge1, hoge2];
hoge.push(hoge3, hoge4, hoge5);

console.log(hoge);

結果
[hoge1, hoge2, hoge3, hoge4, hoge5];
“`

———————————————————-

:::note warn
注意
連想配列では使えない
:::

“`js:例
var hoge = { class:’A’, color:red };
hoge.push([‘B’, gre

ラジオボタンが選択されていない時にバリデーションエラーを出す

今更ながらですが、簡単なフォームならjQueryでバリデーションして、フォームにエラーを出したりしたいですよね。
その時にラジオボタンがどれも選択されていない状態だったらバリデーションエラーにしたい、つまりユーザーが必ず意思を持ってラジオボタンを選択して欲しい、ということがあります。

そんな時、どのように書きますか？
以下のようなHTMLがあります。

“`html
銀行振込
クレジットカード
PayPay払い
“`

これを選択されてなかったらバリデーションエラーにしたいわけです。
では、jQueryで書いてみましょう。

### 方法1

“`javascript
// チェックされ

Javascript HTMLを書き換える

## はじめに
Javascriptの使い方を学ぶ
### 参考書

確かな力が身につくJavaScript「超」入門 第2版

## 目的
HTML内の要素を書き換える
## 実行内容
“`html:要素を書く

この要素を書き換える

“`
“`js:choice要素を時刻に置き換える

“`
このように表示される。

JS スクロールすると要素がフワッと出現する方法

最初は見えない状態から、ブラウザをスクロールすると
画像のように要素が下から上へ少しだけ動きながらフワッとフェードインする方法をやっていきます。

_HTMLコード_
“`

タゴ’sクリエイト

Content

　　　　　　　　　　　　・
　　　　　　　　　　　　・
　　　　　　　　　　　　・
　　　　　　　　　　　　・

シークレットキー作成

nodeのcryptoモジュールを使うと簡単にシークレットキーを作成できます。
“`
npm i crypto
node
> require(‘crypto’).randomBytes(64).toString(‘hex’)
‘032bb3825ed806cc184267557995068ea4eee83ec7559f0f38fbdba3527193d47854ba8836c8a78ac8f8e959ad6918a38be18c3d0fec332082d62f84a3e84198’
“`

↓こちらの動画の4:15:00ぐらいに出てたテクニックです。

便利ページ：Web Serial APIでCOMポート出力のコンソールを作る

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。

ESP32を使っていると、COMポートの出力を手早く確認したいときが多いです。
もちろん、Visual Studio Code＋PlatformIOのSerial Monitorを使うのもありですが、Visual Studio Codeを立ち上げていないときにも、COMポート出力を確認したい場合がありました。
一方で、Web Serial APIというJavascriptでCOMポートを読み書きできる便利な機能があるので、使わない手はないです。

mdn：Web Serial API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API

ソースコードもろもろは以下のGitHubに上げてあります。

poruruba/utilities

https://github.com/poruruba/uti

Vueデータバインディングにおける逆ブラックリストcheckboxコンポーネント

# はじめに

　この記事は、配列要素の表示/非表示を指定するブラックリストを、Vueのv-modelデータバインディングされたcheckboxで実現した内容を記す。

# 動機: ホワイトリストに見えるブラックリストcheckbox

　ある共有された現場リストがある。担当ごとに異なるため、人によって無関係な現場が必ず存在する。サーバが現場リストを返却したとして、フロントでは自分に関係のある現場データだけ個別に表示/非表示を指定したい。

　「初期状態が表示」で、かつ「チェックが外された状態を管理」しなければならない。

　ブラックリストは選択したものを除外するためのリストで、ホワイトリストは選択したものを残すためのリストである。「初期状態が表示」なのはホワイトリストのように見えるが、実際にやっていることは除外リストを作っていることになるのが普通の状況と異なる点である。

# Vueデータバインディング
## checkboxのtrue-valueとfalse-value

現場リストはプロパティprojectsに格納されているとする

“`HTML

JavaScriptでネットワーク構成図を自動生成してみた

# 経緯
NW構成図をExcelやPowerPointで作っていますか？
自身の経験上、NW構成図は作るのが大変、構成情報に変更があった際の修正が大変、管理が大変、など色々思うところがありました。
構成図を自動で描きたい、構成情報の変更を即座に反映したいと思って、
「NW構成図 作成」などで検索してみたもののなかなかいい記事にたどりつけなかったため、
無いなら自分で作ってしまおうということで、チャレンジしてみました。

# やったこと
– 構成図情報のインプット形式の検討
– 構成図表示のロジック、アルゴリズム検討
– 構成図の画面表示
– 障害箇所の強調、接続されている線の縞々化
– 疎通が通っていること示すようなアニメーション表示
– ユーザーがドラッグ＆ドロップで自由に配置を編集

# 自動生成した構成図がこちら
今回は入力を以下のjso

Konva.jsでcanvasにカメラ映像を表示する(iPhone実機 Safari対応版)

# デモ

See the Pen
Web Camera Streaming for iPhone by Konva.js by qwe001 (@qwe001)
on CodePen.

Qiita始めました！

# 目次
[1.はじめに](#1-はじめに)
[2.自己紹介](#2-自己紹介)
[3.おわりに](#3-おわりに)

# 1. はじめに
初めまして！
日報アプリgamba!（ガンバ）でエンジニアをしている池田です！
この度、日報アプリgamba!のメンバーでブログを始めることになりましたので、
この記事では私の自己紹介を書かせていただきます。

# 2. 自己紹介
現在、フリーランスのエンジニアとして
日報アプリgamba!（ガンバ）に参画している池田遼介（イケダリョウスケ）と申します!

### 趣味
趣味はゴルフと歌でゴルフは月１で行っています！スコアはアベレージ105あたりです！
あとは、歌が趣味なので、去年まで１年間ほどアプリで歌のライブ配信などもや

時系列図を作るライブラリを作ってみた

## 作ったもの
下記のような簡単な時系列図？タイムライン？を作るための、svelteのコンポネントライブラリを作ってみました。


– デモ: https://svelte-vertical-timeline.vercel.app/
– リポジトリ: https://github.com/K-Sato1995/svelte-vertical-timeline

## Svelteでのコンポネントライブラリの作り方

### 概要
svelteのwebアプリを作成するためのフレームワークにsvelte-kitがあります。
このsvelte-kitを使用することで簡単にsvelteコンポーネントを使用したライブラリを作成し、npmに公開することが可能です。

https://kit.svelte.dev

### 具体的な方法

svelte-kitでwebアプリを作成する際とライブラリを作成する場合の違いはpublic(ユー

作業用の背景音を流すだけのサービスを作ってみた

## サイト概要

タイトルでも記載しましたが作業中に使える背景音を流すだけのサイトです。
存在する背景音は全て同時に再生する事が可能です。

– サービスへのリンク: https://focus-sounds.vercel.app/
– Github(ソースコード): https://github.com/K-Sato1995/focus-sounds


## なぜ作ったか

### 理由(1)
普段YoutubeやAppleMusic/Spotifyを使って音楽やらを聴きながら作業していました。
しかし、どうしても自分が好きな動画や音楽を再生してしまい、そちらに集中しすぎて気付いたらかなりの時間を消費していた事がかなりありました。

### 理由(2)
もともと同じ様なサービスを知っており、久しぶりにそちらを使用しに行ったのですが、”アップグレード”され、様々な追