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

【備忘録】React-Calendar導入

## インストール方法

“`zsh
# npmを使う場合
npm i react-calendar

# yarnを使う場合
yarn add react-calendar
“`

## コード
:::note warn
`import ‘react-calendar/dist/Calendar.css’`を入れないと
綺麗なカレンダーの見た目にならないので要注意
:::

### 基本的な使い方
“`jsx:MyCalendar.jsx
import { useState } from ‘react’
import Calendar from ‘react-calendar’
import ‘react-calendar/dist/Calendar.css’ // カレンダーのcss

const MyCalendar = () => {
const [value, setValue] = useState()

return (

MutationObserverで要素を監視

# MutationObserverとは？
MutationObserverはDOMの変化を監視することができます。

“`
// 変更を監視するノードを取得
const targetNode = document.getElementById(‘targetId’);

// オブザーバーのオプション
const config = { attributes: true, childList: true, subtree: true };

// MutationObserverオブジェクトを生成
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 変更があった時の処理
console.log(mutation.type);
}
};

// 監視をスタート
observer.observe(targetNode, config);

// 監視を停止したい時
observer.disconnect();

【JavaScript】JSONデータのデコード・エンコード

# 何の記事か
JSONファイル“.json“のデータをデコード・エンコードする手法をまとめました。
ここで、**デコード**というのはJSONデータをオブジェクトに変換すること、**エンコード**というのはその逆を表します。

# デコード
以下のようなJSONファイルがあったとします。
“`json:example.json
[
{
“country”:”Japan”,
“food”:”sushi”,
“famous_place”:[“Tokyo”,”Osaka”,”Nagoya”]
},
{
“country”:”korea”,
“food”:”kumuchi”
}
]
“`
“JSON.parse()“を記述することで、JSONファイルからデータをデコードし、インスタンスとして使うことができます。
“`javascript
const fs = require(“fs”);
const jsonData = JSON.parse(fs.readFileSync(“example.json”));
“`
“

【WebXR Device API】WebAR の「Hit Test」・「Anchors」などを Androidスマホでサクッと試した際のメモ

この記事は、「以下のツイートの動画の内容 ＝ Androidスマホで WebAR の特定の機能を試したもの」などに関するメモです（※ 主にアクセスしたページのメモ）。

Pixel 6a のブラウザで、 #WebAR の「WebXR Hit-test・WebXR Anchors」のサンプルを試してみた。

床の平面にそって画像が動いたり、画面をタップしたところに 3Dオブジェクトが出現して、そのオブジェクトが床に固定されたように見えたり。#WebXR pic.twitter.com/HqJ858aaOQ

— you (@youtoy) January 14, 2023

こちらの、別の　WebAR のサンプルも試しました。

## 自分が試した 2つのデモの URL
上記の動画・画像で示していた、WebAR のサンプルを試すことができる URL を、まずは以下に掲載します。

●Hit Test with Anchors
　https://immersive-web.github.io/webxr-samples/hit-test-anchors.html

●Immersive AR Session
　ht

【Netlify】デーサイがNetlifyを試してみる

# はじめに
普段はデータサイエンティスにしか興味のない私ですが、仕事でアプリ開発プロジェクトのリーダーに任命され、その引き合いで友人のアプリ開発を手伝うチャンスを頂いたので、デモアプリを作ってみようと思いました。頼りになるエンジニアの協力の元、NetlifyというWebアプリケーション開発プラットフォームを使用し、デモアプリを作る事にしました。開発ど素人なのでまずは自分のできる範囲から手を出していき、Qiitaにまとめながら、Webアプリ開発に慣れていこうと思っています。今回はその初回として、Netlifyの使いかをまとめたいと思います。

# Netlify
> Netlifyはサンフランシスコをベースとするクラウドコンピューティングの企業である。静的ウェブサイトのためのホスティングサービス（英語版）とサーバーレスのバックエンドサービスを提供している。
グローバルなアプリケーション配信ネットワーク（英語版）を介したGitからの継続的デプロイ、サーバーレスのフォームハンドリング、AWS Lambda functionsのサポートLet’s Encryptとの完全な統合を特徴としている

僕のHTML5 プロフェッショナル認定試験 レベル1合格記

HTML5プロフェッショナル認定試験 レベル1を受験してきました。
受験の経緯・対策・勉強の中で気づいたことなど書き留めます
# 筆者について
IT歴5年（社会人歴も5年）のフィジカル系エンジニア。
これまでバックエンドの開発（java、javascript、VBA、Python、Rust）を仕事やら趣味やらでしてきました。
その反面、フロントのデザイン周りから散々逃げ続けてきていて、Element UIを使って何とかデザインをしないようにと逃亡を続けてきました。

# 受験経緯
現在参画しているPJにてフロントエンド開発を初めて担当しました。
画面開発をする中で簡単ですがデザイン周りのコーディングをしましたが、当然HTMLとCSSということでプログラミング言語とはまるで毛色がことなるもので意外と苦戦してしまったのでせっかくなら資格取得を通して体系的に勉強しようということで資格の受験をしました。
ただし、現在すでにHTML5は廃止されております。とはいえHTML living standardはHTML5を基礎として派生したHTMLのバージョンなので勉強にはなるはず！

# 試験勉強

Video.js完全マニュアル part10 〜Playerのサイズ設定〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はPlayerの外観の変更方法を紹介しました。今回もPlayerの見た目に関する操作で、Playerのサイズ感を設定する方法について紹介します。

前回
[Video.js完全マニュアル part9 〜Playerの外観〜](https://qiita.com/manzoku_bukuro/items/2403f4d60a165ed2c270)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[Layout](https://vide

Socket.io学習①　簡単なチャットアプリの構築２

前回の続きを書いていく。

“`
const express = require(“express”);
const app = express();

const http = require(“http”);
const server = http.createServer(app);
const { Server } = require(“socket.io”);
const io = new Server(server);

const PORT = 5000;

server.listen(PORT, () => console.log(`server is running on ${PORT}`));
“`

この部分の解説をしていく。
const なになに　という部分ではインストールしたモジュールをインスタンス化している。

インスタンス化は分かったつもりにはなるが意外と説明するのは難しい概念である。
一応、インスタンス化は何なのか調べてみる。

調べてみると、オブジェクト指向で出てくる表現の1つでクラスから実体を作ることと書かれている。

自分なりの噛み砕き方で説

Python Bokehを使って、csvファイルのデータ可視化ツール(インタラクティブ・軽量・どこでも動く)を作成する

# はじめに
PythonのライブラリBokehを使って、ソフト開発の現場で役に立ちそうな時系列データ可視化ツールを作成したので記事にしました。

## こんな動作をします

ツールはHTMLで記述されています。このHTMLを生成するコードは下記です。

https://github.com/SKMAAX/BokehCsvGraphViewr

ツールを触ってみるには下記を活用ください。

https://skmaax.github.io/BokehCsvGraphViewer/CsvGraphViewer.html

読み込ませるファイルはgithub内のsample.csvを使ってください。

もしくは、↓のデータを4000行ぐらい(だいたいでOKです

AnimateCC シンボルにプログラムをリンケージ+データ渡し

https://qiita.com/aichime/items/577af749bfa342d6087f

の続きで、
シンボルにクラスを紐付けることはできたのですが、
生成したオブジェクトに引数も渡したいなって思って、
ここもちと考えてました

# データ引き渡し用のクラスを用意
データ引き渡し用のクラスを別途用意したいと思います
上記の記事のAbstractDispクラスを少し変更します
“`JavaScript
class AbstractDisp{
protected _myDisp:createjs.MovieClip = null;
protected _lib:any = null;

constructor(current:createjs.MovieClip, lib:any){
this._myDisp = current;
this._lib = lib;
this._myDisp.stop();
this._init();
}

protected _init():void{
}
}
“`
これを継承して、AbstractItem

three.js の公式サンプルを p5.js Web Editor上で扱うための下準備（独立したキャンバスでシンプルな描画から）

この記事は、p5.js Web　Editor上で、three.js による描画を行ってみる、というものです。
ちょっと前に、PixiJS　について以下のような記事を書いたのですが、それと同じようなことをやります。

●PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から） – Qiita
　https://qiita.com/youtoy/items/238a3a083eaf8cd4abf7

## 今回行うことの概要
### 参照する公式サンプル
それでは早速、本編へと入っていきます。
●The First Step | Babylon.js Playground
　https://playground.babylonjs.com/#2KRNG9
まず、three.js で実装する内容は、以下の公式サンプルです。

●Creating a scene – three.js docs
　https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

最終

【JavaScript】Shadow DOMを取得しGoogle Earthの地球儀を自動回転する方法

### 【概要】
Google Earthの地球儀表示部分はShadow DOMで生成されています。
Shadow DOMの要素はgetElementByIdなどを使用して取得することができませんが、開発者ツールから取得できます。
取得したShadow DOMに対して、キーボードの”→”キー押下のイベントを発火させることで地球儀を自動回転します。

### 【環境】
Google Chrome

### 【実行手順】
#### 1. Google Earthを起動する
下記リンク先へ遷移します。
[Google Earth](https://www.google.com/intl/ja/earth/)

`Earth を起動`ボタンをクリックします。


新しいタブが開き、地球儀が表示されます。

![Google Earth](https://use

Yolov7をtfjsでの実装方法の解説

Yolov7をtfjsで試したのでメモ
モデルのコンバートとJSでの処理について書きました。
Non-Maximum Suppression(NMS)は未実装です。

## PytorchからONNXへのConvert

PytorchのモデルからONNXに変換して動かすPythonコードは本家に置いてあります。
コンバートから試す方はこちらを参考ください。

https://github.com/WongKinYiu/yolov7/blob/main/tools/YOLOv7onnx.ipynb

tfjsにコンバート済みのモデルはこちらにあります。

https://github.com/otmb/wasm_hpe_decoder/tree/main/yolov7-tiny_tfjs_fp16

## ONNX以降のtfjsへのConvert手順

onnx-tfと、tensorflowを実行できる環境を用意します。
protobufのバージョンがコンフリクトするので環境は分けて作るのがオススメです。
なお、数少ないM1 Macユーザーはtfjsを入れるのは非常に手間です。こち

JavaScript 基礎　～関数編～

・関数の定義方法

・関数宣言による定義

　　関数宣言で関数を定義する場合は、functionの後に関数名を記述します。引数は ( )内記述します。

“`JavaScript:JavaScript
function exFunc ( exVal1, exVal2, …) {
//処理を書く

//戻り値がある場合
return 戻り値
}
“`

　

・関数宣言による関数の実行

“`JavaScript:JavaScript
//戻り値がある場合
let exValuable(戻り値を格納する変数) = exFunc ( exVal1, exVal2, exVal3…){
exVal1 + exVal2;
};

//戻り値がない場合
exFunc ( exVal1, exVal2, …);

//関数で定義した引数(仮引数)と、実行文で定義した引数(実引数)が一致しない場合は、実引

【React】useStateとuseReducerはどのように使い分ければいいのか

# この記事について
初学者がReactを学習し初めて気づいた点や、学んだ点を発信しています。

# useStateとuseReducerはどのように使い分ければいいのか
useReducerとuseStateの使い分けについて学習したため、記録に残します。

## useStateについて
状態の更新の仕方は利用側に託します。つまり使用する場合は、使用する側が更新の仕方を新たに定義してあげる必要があります。

## useReducerについて
状態の更新と、状態の仕方も含めて状態側で管理をします。つまり使用する場合は、更新の**方法**を指定するだけで、更新の**仕方**を指定する必要は無くなります。

:::note info
今回分かったこと！
**複雑なアプリケーションを複数人で開発する場合では、予期せぬエラーを防ぐためuseReducerを使用することが適している。**
:::

Socket.io学習①　簡単なチャットアプリの構築１

マルチプレイのオンラインゲーム開発に向けてsocket.ioの勉強をしている。
その中で見つけた良い参考動画がこちら

これを参考にして簡単なチャットアプリを構築しつつ、socket.ioとnode.jsの勉強をしていこうと思った。

まず、ネックになるのはそもそもnpmが何なのかである。
node.jsなどを始める際に必要になるパッケージ管理システムであるがそのインストール方法は複雑に見えた。
さらにMacについての説明は多く見られたがWindows用を探すのにも一苦労した。

結局こちらのサイト

https://zenn.dev/antez/articles/a9d9d12178b7b2

を参考にしてインストールした。割と簡単で

https://github.com/coreybutler/nvm-windows/releases

こちらのサイトからインストーラー(nvm-setup.zip)をダウンロードして実行すれば良い。

そうすれば最低限の動作はするようになった。

そして、

AnimateCC シンボルに外部のプログラムをリンケージしたい

# プログラムを紐付ける
AnimateCC（ターゲットcanvas）で、
ライブラリ内のシンボルに、旧Flashの様にプログラムをリンケージして使いたい
と思ってライブラリ内のシンボルの「シンボルプロパティ」を見ても、グレーアウトされてて使えないm(__)m
なので、強引?にプログラムを紐付けたいなと思って、試行錯誤

んで、これでいいのかな

各シンボルの先頭フレームのアクションに、
例えばルートの先頭フレームに、
“`Javascript
let myobj = new Main(this, lib);
“`

“`Main“`クラスは予め html でインポートしている jsファイルになります
（記述は TypeScript を使っています）
“`Javascript
class Main{
private _myDisp:createjs.MovieClip = null;
private _lib:any = null;

constructor(current:createjs.MovieClip, lib:any){
this._myDisp = c

【Laravel】BLOCSとSelect2でいい感じのプルダウンを作る

# 何を作るのか
BLOCSはLaravelで使えるテンプレートエンジンです。[こちら](https://qiita.com/hyada/items/11597f88102ed1c45407)で、BLOCSを使って簡単な本管理アプリを作ってみました。本の新規登録、編集、一覧表示はできましたが、それぞれの本にタグをつけたいので、今回はSelect2を使っていい感じのプルダウンを作ります。

Select2はプルダウンをちょっと便利にするJavaScriptのライブラリです。Select2を使えば、プルダウンの項目を検索や複数選択することができます。また、オプションを指定することで、自由入力で項目を追加することもできます。Select2を使って、本管理アプリに以下の2つの機能を追加します。

1. 過去に入力したタグを検索、複数選択する
1. 自由入力で新しいタグを追加する

https://select2.org/

開発は以下の3ステップですすめます。では、作っていきましょう。開発したLaravelアプリのソースは[GitHub](https://github.com/blocs/ex

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 連結の判定

連結の判定 (paizaランク A 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_boss

# 解答例(C++の場合参考)
幅優先探索をします。探索を終えて、全ての頂点に色が塗られていたら、連結しています。
色が塗られているか`color`で管理、隣接行列を使用、`Q`をキュー、`now`を現在地とします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, M] = lines[0].split(” “).map(Number);
let color = Array(N);//各頂点に色が塗れたか管理、0未、1済
for (let i = 0; i < N; i++) { color[i] = 0;//初期値は全て0未 } //隣接行列 cons

JavaScript / TypeScript の豆知識 10 選

# JavaScript / TypeScript の豆知識 10 選

## 初めに

JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。

コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。

少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。

それでは、以下が目次です。

– [JavaScript / TypeScript の豆知識 10 選](#javascript–typescript-の豆知識-10-選)
– [初めに](#初めに)
– [1.Nullish と Falsy](#1nullish-と-falsy)
– [関連参考資料\_1](#関連参考資料_1)
– [2. tsconfig の便利な設定](#2-tsconfig-の便利な設定)
– [関連参考資料\_2](#関連参考資料_2)
– [3. 依存関係の綺麗な図示の仕方](#3-依存関係の綺麗な図示の仕方)
– [関連参考資料\_3