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

タブの連携動作で、複数のグルーピングについて検討しています。

# 概要
拡張機能を作成していて、タブの連携動作を行っていますが、中々、処理がややこしくなっています。それは、ひとつの親タブから二つのタブを開いて処理を実行されるものです。しかし、そこで、この3つのタブを一つのグループとして考えたとき、使い方によっては、複数のグループが並行的に実行することも可能です。そうすると、その場合のプラグインの作り方は極端に難しくなります。このケースが発生するのは、小生が作成している「yyプラグインプラス」という拡張機能です。
今回は、この問題について検討してみたいと思います。
# 一つの事例で
「yyプラグインプラス」については、他の投稿記事で説明していますので、ご参照ください。ここでは、具体的な例でご説明いたします。
### 手順
まず、chromeブラウザーを開きます。この時、「yyプラグインプラス」はインストールしておきます。ブラウザーを開いたときにプラグインはブラウザーの管理メモリーにロードされます。この時、ロードされる主なファイルはcontent.jsとbackground.jsです。
次に、たとえば、「yahoo!Japan」サイトのページを開くと

Reactjs-Interview-Questions（翻訳）1〜111

# はじめに
本記事は、`reactjs-interview-questions`を日本語に翻訳することを目的とします。そのため、筆者自身の意見や知見は扱いません。

# `reactjs-interview-questions`とは
技術面接などでReactに関して聞かれるであろう質問とその回答がまとめられています。「Reactとは？」というざっくりした質問だけでなく「Reactのデータフローについて」などコアな質問が用意されているため、転職活動をしていない方でも学びになる点が多くあります。

全部で333問の質問とその回答が用意されています。この記事では1〜111の問題を翻訳します。翻訳が不慣れな点がありましても暖かい目で見ていただけると幸いです<_>

https://github.com/sudheerj/reactjs-interview-questions

## 1. What is React?
> React is an open-source front-end JavaScript library that is used for building user in

ダイエットに欠かせないチェーン店のPFCバランスを検索できるサイトを作った

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev)です。

皆さんは **PFCバランス** という言葉を聞いたことありますか？
トレーニングやダイエットをしている方はこのPFCバランスを意識して食事を摂っている人も多いかと思います。

PFCは三大栄養素の **P**rotein(たんぱく質)、 **F**at(脂質)、 **C**arbohydrate(炭水化物）の略です。
この **PFC をバランスよく摂ることで健康を維持するのはもちろん、筋肉をつけたり体重を減らしたり、理想の身体を作っていく** わけです。


外食でPFCバランスを管理するのはなかなか難しいものです。
現在地近くに、例えば吉野家やCoCo壱などいくつか飲食チェーン店があっても、「どの飲食店のどのメニューが自分が管理し

画像をクリックしたら複数画像が新たな要素に複製（コピー）される仕組み

本稿では、複数のグループからなる画像一覧のうち、１つの画像をクリックすると同じグループに属しているすべての画像が新たな要素に複製される仕組みを作成する。見たほうが分かりやすいのでこちらの[サンプル](https://shineyamamoto.github.io/multipleImageModal/)を参照してください。
　これは画像に限らずどの要素でも通用するので、意外と汎用性はあるかもしれない…

## コード
HTMLおよびCSS
“`html:index.html

Vueのライフサイクルフックを3分間でおさらい

Vue.jsを開発で使い始めた人が最初の方で詰まるのが`ライフサイクルフック`だと思います。
どのタイミングで取得したデータを表示するかといったことはライフサイクルメソッドを理解していないと上手く実装できません。
フロントエンドのライフサイクルフックは`４つのタイミング`を押さえておくことで使いこなせるようになります。
ここでは、ライフサイクルメソッドに登場する４つのタイミングを紹介します。
この４つのタイミングを覚えておくことでVueのインスタンスとデータの扱いがより柔軟になります。

## ライフサイクルフックとは？
Vueインスタンスが作られてから消えるまでの一連のサイクルにある節目のタイミングで呼ばれる処理を事前に登録して、そのタイムングで自動に呼ばれることです。
生き物の一生と同じです。
例えばカエルが`産まれる`・`あるタイミングになったら脱皮をする`・`死ぬ`というように生き物にはあるタイミングがあります。

ちなみにchatGPTの回答↓
’’’
Vue.jsはJavaScriptのフレームワークで、コンポーネントベースのアプリケーションを構築するために使用されます。V

Javascript 配列とオブジェクト　備忘録

### 概要
1. オブジェクトとは
1. オブジェクトの操作
1. 配列とは
1. 配列の操作
***

#### オブジェクトとは
– プロパティの集合
※プロパティとはキーとバリューが対になっているもの

“`sh
# プロパティを持たない空のオブジェクト
const obj = {}
“`

“`sh
# プロパティを持つオブジェクト
const obj = {
name: ‘yamada’, # key:name, value:yamada
age: 20, # key:age, value:20
gender: ‘man’ # key:gender, value:man
}
console.log(obj)
# => { name: ‘yamada’, age: 20, gender: ‘man’ }
“`
***

#### オブジェクトの操作
“`sh
# キーへのアクセス
console.log(Object.keys(obj))
# => [ ‘name’, ‘age’, ‘gender’ ]

# バリューへのアクセス
co

WebGLを使って正多面体ビューアーを作る

WebGL の作法を学ぶため作ってみました。

「[正多面体のデータを作る[改] (HTML+JavaScript版)](https://qiita.com/ikiuo/items/d7486f40f2378af15288)」の大幅改造版です。

select, input 等で設定を変更したり、正多面体の向き等をマウスイベントを使って操作可能にしています。


単体の HTML ファイルで動作します。他のファイルに依存していません。

動作確認は Google Chrome バージョン: 108.0.5359.124 (macOS版) で行っています。

RegularPolyhedronViewer.html（長いので折りたたみ）

“`html:Re

p5.js と ml5.js の組み合わせでブラウザ上でのリアルタイム物体検出を試す（COCO-SSD を利用）

この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。

#p5js ・ #ml5js の組み合わせで、ブラウザ上で動く物体検出。

カメラ映像に対するリアルタイムな処理で、人物・スマホ（iPhone 8 Plus・Pixel 6a）を検出できた！

ml5.objectDetector() で cocossd を指定して試しました（yolo も試したけど、そちらは座標情報のまわりでうまくいってない感じが）。 pic.twitter.com/PxUt6mPK3S

— you (@youtoy) January 15, 2023

ブラウザ上で動く物体検出で、複数の物体の同時検出。

「人・時計・ペットボトル・スマホ」の 4つ同時というのを、試して成功！#p5js #ml5js pic.twitter.com/LK3lJgSz6T

— you (@youtoy) January 15, 2023

上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。

●ml5.js で物体検出（COCO-SSD を利用） – OpenProcessing
　https://openprocessing.org/sketch/1795350

## 実装した内容の話
今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。

### 実装の際に参照した情報
実装時には、以下の ml5.js公式のドキュメントを見て実装しました。

●ObjectDetector
　https://learn.ml5js.org/#/reference/o

初心者質問ですみませんをやめてみよう！

プログラミングを始めて、はや３か月。
毎週課題提出をしてはいるものの、改めてコードについて聞かれると分からないな、、、。っていうことありませんか？
だけど周りはどんどん学習が進んでいって、今更こんなこと聞きづらいよな。などど二の足を踏んでしまう気持ち、分かります。痛いほど分かります。わかりみです。

今日ちょうどAnime.JSに挑戦している時に、疑問点があり、思い切ってまえたつ大先生に質問したところ、JS学んだはずなのに理解できてなかったぞ！という気付きがいくつかあったので共有させていただきますね。

▼コードの参考にしたページはこちらです▼

– ## 「:」の後にfunctionが来てる意味は？
“`JavaScript:
targets:”.block”,
translateX:function(){
return anime.random(-800,700);
},
“`
初めの頃の学習では「〇〇〇:△△△」のようにva

文字列の類似度を計算するアルゴリズムを実装した

# レーベンシュタイン距離ではだめなのか
文字列の類似度を計算するアルゴリズムの一つとして、レーベンシュタイン距離がありますが、計算量が *O(mn)* であるため、文字数が増えると計算量が加速度的に増えてしまいます。
ですので、計算量が少ないものを求めたところ、以下のサイトにあるものが参考になりましたので、Javascript(Typescript)で実装してみることにしました。

https://www.k-intl.co.jp/blog/B_200729A

# N-gramを求める
1-gramから3-gram(unigramとかtrigramとかいうらしい)を求めて、
“`js
{[n-gram]:[そのn-gramが出た回数]}
“`
を返す関数が都合がよさそうです。
以下のように実装しました。
“`ts
const getToNgram = (text: string, n: number = 3) => {
let ret: { [key: string]: number } = {};
for (var m = 0; m < n; m++) {

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

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

次にチャット機能を作成するためにクライアント側に簡単なUIを作成した。

“`

チャットアプリ

チャット送信

“`

そして、チャット機能を作成するためにまずメッセージを送信するために入力されたメッセージを格納する変数を作成する。

今回使用したのはHooksのUseStateというものである。

“`
const [message, setMessage] = useState(“”);
“`

参考にしている動画ではここの記述部分しか見せていなかったが、これだけの記述ではuseStateというものは動作しない。

![Untitled

個人開発ではグローバルステート管理はReact Contextを使うのが良さそう

## 引用元
※引用元がすごくわかりやすかったので、そこから改変せず抜粋して記事を作成しています
https://weseek.co.jp/tech/2565/

## Global stateの管理が必要な理由

React において、例えばコンポーネントの構成が5階層になっていた場合に、一番上の階層のコンポーネントで定義している state を一番下の階層のコンポーネントに渡したい場合はどうすれば良いでしょうか。
上から下までのそれぞれのコンポーネントで state を props として渡してあげることで、一番下の階層のコンポーネントまで渡すことができます。

しかし、この方法では state をバケツリレーのように複数のコンポーネントにまたがって渡しているため、**コードが複雑化**してしまいます。また、中間のコンポーネントにとっては本来必要のない props を受け取っているため、**再利用の難しいコンポーネントになってしまう**可能性があります。

その他にも、中間に位置するコンポーネント達は state が更新されるたびに、**再レンダリングの必要がないにもかかわらず

Next.jsでMissing “key” prop for element in iteratorのエラー

# Missing “key” prop for element in iteratorのエラー
“`
export default function App()) {
const blogs = [
{ id: 1, title: “タイトル1” },
{ id: 2, title: “タイトル1” }
];

return (
{blogs.map((blog) => (

{blog.title}

))}
);
}
“`
上記コードで問題なく画面表示されますが、タイトル通りのエラーで怒られます。
keyに関する説明は、公式ドキュメントに記載がありました。

[React 公式ドキュメント](https://reactjs.org/docs/lists-and-keys.html#keys)
> キーは、どの項目が変更、追加、または削除されたかを React が識別するのに役立ちます。要素に安定したアイデンティティを与えるために、配列内の要素にキーを与える必要があります。

# 解消方法
keyにblog.

Classic ASP と JavaScript のJSON通信

# はじめに
今更Classic ASPで開発を進めるようなことはないとは思うが、
今回そういう環境にぶち当たってしまったので、仕方なくClassic ASPについて学ぶことにした

**※なお、この記事に記載のソースを流用し、万が一不利益が生じた場合、当方は一切責任を持ちませんのであしからず**

# 経緯
開発環境がインターネット接続不可で、インストールされているアプリもほぼない
Visual Studio も当然なく、新規でインストールすることもできないときた
リリース先にはOfficeもないし、しょうがないので、
完全ローカルなWebアプリケーションを作成することにした

リリースするときはサーバー側とクライアント側両方リリースする想定だ

# 環境
**OS: Windows 7以降
Webサーバー: IIS
ブラウザ: IE10以上、Edge
クライアント側言語: HTML、JavaScript、CSS
サーバー側言語: JScript、VBScript (ASP)**

完全ローカルなので、フレームワークは一切使わない (JQueryもなし)

# 環境構築
IISとA

【JavaScript】正規表現 RegExp

# 正規表現オブジェクトは何に使われるか
ある文字列が、指定したパターンと部分的もしくは全体的にマッチしているかどうか判定するのに使います。
正規表現オブジェクトは、
“`javascript
regexp = new RegExp(調べたいパターン, フラグ);
“`
のように記述します。

# 使用例
“調べたいパターン“の詳しい記述方法は[Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)を参照してください。以下の例では、「Kの後に数字が3つ続くもの(大文字と小文字は区別しない)」の部分マッチングを行っています。
“`javascript
var names=[
“K545”,
“King”,
“K626”,
“K545Mozart”,
“5K545”,
“k545”
]

const regexp = new RegExp(“K\d{3}”,’i’);

names.forEach(str => {
if

【備忘録】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との完全な統合を特徴としている