JavaScript関連のことを調べてみた

wikidata からmermaid記法で家系図を作成（ブラウザ版）

# 概要
– wikidata の Q番号（P5(ヒト)だったら）から、子孫、先祖をたどって、jsonで抽出
– ネットワークの幅優先探索(BFS)と深さ優先探索(DFS) を使って範囲を絞る
– markdownのmermaid記法を使って、家系図のようなものを表示する
– ブラウザのみで動きます

# デモページ
次のページで試してみてください。
https://wonox.github.io/pedigree/bfs_test.html

# python版
以前書いた、
[wikidataからnetoworkxをかましてmermaid記法で紫式部の系図を作成](https://qiita.com/wonox/items/f310839480e8eb7a9e01)
をjavascriptで書き直しました。
基本的なロジックは、このputhon版と同じです。

# bfsとdfs
以下をほぼそのまま使わせていただきました。ありがとうございます。
[グラフとBFS(幅優先探索)・DFS(深さ優先探索)をJSで実装してみる](https://qiita.com/oimo23/items

JavaScript オブジェクトから特定のプロパティを変数へ取り出す方法

## JavaScript オブジェクトから特定のプロパティを変数へ取り出す方法

スプレッド構文と分割代入を応用すると、あるオブジェクトからほしい値だけを、変数代入することができる（学習メモ）

“`javascript
const profile = {
name: ‘taro’,
age: 27,
address: ‘tokyo’
};

const {address, …other} = profile;
console.log (address); // => tokyo
console.log (other); // => {name: ‘taro’, age: 27}

“`

Micrsodft Edgeで表示されているページをHTMLで保存するブックマークレット

# 目的
保存した日時をファイル名に入れる
改行コードをcrlfに変換する
# ブックマークレットと「名前をつけて保存」の違い

|項目|ブックマークレット| 名前をつけて保存(html/単一のページ)|
|:—-|:—-|:—-|
|文字コード|UTF-8|UTF-8|
|改行コード|LF|LF|
|ページの構成|不正確|正確|

例えば次のYahooのニュースページ
https://news.yahoo.co.jp/articles/dd13b8c3585149ceed02f56023b0aeb890deb726
を取得し、ブラウザで表示させると、次のように異なる。最も写真はブラウザが上記のURLから取ってきているので、写真自体は消える可能性がある。

### 名前をつけて保存


### ブックマークレット

![image.p

マイジオ（MyGeo）を作ってみた。（Youは、自分が作ったGeoデータをどうやって外出先のスマホ・タブレットで見る？）

【マイジオ】
https://office-shirado.com/mygeo/

「Youは、自分が作ったGeoデータをどうやって外出先のスマホ・タブレットで見る？」

そんな素朴な疑問を自分に投げかけ、「あっないかもｗ」ということで、新しいＷｅｂ地図を作成しています。

いつも通り、「自分が使うＷｅｂ地図」を目指しています。
Ｗｅｂ地図（ＷｅｂＧＩＳ）のベースは、MapLibreで、データはMySQLのテーブルに入れています。

技術的なことを簡単に言うと、ローカルファイル（SIMA・GeoJS

パイプライン演算子のない言語でパイプライン演算もどき(関数の連鎖)を実現する方法

# はじめに
カリー化を理解しようとサンプルを考えていたら、パイプライン演算子もどきの関数を思いついたので紹介します

# パイプライン演算子とは
最近お気に入りのjuliaという言語では関数を連鎖的に実行してくれるパイプライン演算子という構文があります

https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3%E6%BC%94%E7%AE%97%E5%AD%90

“`julia:juliaの例
const HALFWIDEDIFF = ‘ａ’ – ‘a’
function toWideChar(str::String)
return replace(str, r”[a-zA-Z0-9]” => x -> Char(codepoint(x[1]) + HALFWIDEDIFF))
end
function toHalfChar(str::String)
return replace(str, r”[Ａ-Ｚａ-ｚ０-９]” => x -> Char(codepo

JavaScriptのprintデバッグでは変数をオブジェクト初期化子でラップするとコスパがいい

## 本文

JavaScript や TypeScript では、キー名と同じ名称の変数を値とするオブジェクトを生成するときには[省略記法](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E5%AE%9A%E7%BE%A9)が使えます。これを利用すると、print デバッグを行う際に対象の変数をオブジェクト初期化子でラップするだけで、変数をそのまま出力するよりも見やすくなります。
なぜなら、確認目線だと変数名がラベルとして付与された形式でコンソールに出力されるためです。

“`javascript
const user = { name: “neko”, age: 25 };
console.log(user); // -> { name: ‘neko’, age: 25 }
console.log({ user }); //

オプショナルチェイニング演算子の理解とその効果

※自分の学習メモとしても残しております。

オブジェクトに属するメソッドにアクセスするには、ドット演算を利用するのが基本。

オプショナルチェイニング演算子（?.）がない場合にエラーとなる理由は、null や undefined に対してメソッドを呼び出そうとすると、JavaScriptはそのオブジェクトが存在しないため、エラーを投げるからです。

## オプショナルチェイニングがない場合の動作
次のコードを例に考えてみます。
“`
const str = null;
console.log(str.substring(3));
“`
この場合、str は null であり、substring(3) メソッドは null には存在しないため、以下のようなエラーが発生します。

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

### エラーが発生する理由

1. **null や undefined にはプロパティやメソッドがない**
null と undefined は特別な値であ

「hello」と言うと、カラフルなパーティクルが画面の中央から噴出するゲーム。

#### 論文風の解説: 音声コマンドに基づくカラフルなパーティクルシステムの実装
概要
本研究では、音声コマンドをトリガーとして、視覚的に魅力的なカラフルなパーティクルシステムを生成するウェブアプリケーションの設計および実装について述べる。音声認識技術とCSSアニメーションを用いて、音声コマンド「hello」に応答して、画面中央からランダムな方向に向かって噴出するパーティクルを表示するシステムを構築した。

1. 音声認識の設定
音声認識には、Web Speech APIを用いて、ブラウザ上で音声コマンドをリアルタイムで認識する。音声認識の初期設定において、以下のパラメータが設定されている：

recognition.lang : ‘en-US’（英語の音声コマンドを認識）
recognition.interimResults : false（最終的な認識結果のみを取得）
recognition.continuous : true（音声認識を継続的に行う）
2. パーティクル生成のプロセス
パーティクル生成は、以下の手順で実施される：

中央位置の特定: 画面サイズは、part

ヒューマノイドロボットをwebカメラの骨格推定で操作するゲーム。

### ヒューマノイドロボットをwebカメラの骨格推定で操作するゲーム。
webカメラの骨格推定で操作します。



“`

カッコイイ楕円球をながめるゲーム。

### カッコイイ楕円球をながめるゲーム。




“`html

【初心者向け】OpenCV.js導入→詰まったこと

## はじめに

こんばんわ！
まだまだ暑い日が続きますね。
未だに半袖と半ズボンスタイルを貫いています:sunglasses:
初心者プログラマーのジンです！

今日は作りたいプロダクトにOpenCV.jsを
使ってみて詰まったことなどを共有したいです。
よければ見ていただけると嬉しいです！

## OpenCVって？？

**OpenCV**（Open Source Computer Vision Library）は、画像処理やコンピュータビジョンに特化したライブラリです。PythonやC++、Javaなどで利用でき、主に**画像認識、物体検出、顔検出、画像変換、特徴量抽出、動画解析**などのさまざまなタスクに対応しています。特に、機械学習やAIアプリケーションで画像データを処理する際に非常に役立ちます。無料です！

## 導入まで（事前説明）
今回Reactプロダクトで、
写真に写っているあれは何㎝のものなのか。などをわかるようにするアプリを作っています。

基準となる千円札を目的物と一緒に写真を撮り
「千円札がこう歪んでるから同じ平行線上にある目的物はこれくらいの長さ。」
を計

mermaid.jsのArchitecture Diagramsでのアイコンの使い方

## はじめに

### mermaid.js v11.1.0+

mermaid.jsに「Architecture Diagrams」という機能が追加され、自サイトでさっそく活用してみました。ネットでも話題になっているように、AWSのアイコンを使ったアーキテクチャ図を簡単に描けるようになっています。

https://mermaid.js.org/syntax/architecture


### 私のサイト（tariki-code）

早速ではありますが、下記の通り使ってみました。

https://tariki-code.tokyo/blog/svelte

例えば、カオスマップ風にアイコンを活用したり：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

ネストの深いオブジェクトにはuse-immerを活用する

# はじめに
Reactでネストの深い構造化されたデータを扱う際に、useStateを使うとデータの更新にスプレッド構文を使用することになりコードが複雑になる場合があります。そのような場合には、useStateよりもuseImmerを使った方がデータの扱いがより簡単になる可能性があると思います。
本記事ではuseImmerを使用して、簡単なカウンターアプリを実装していきます。

# 環境
– React：18.3.1
– Vite：5.4.1
– immer：10.1.1
– useImmer：0.10.0

“`
npm install immer use-immer
“`

https://www.npmjs.com/package/use-immer

# ゴール
use-immerを使いながらを簡単なカウンターを実装してみる

# useState と useImmer
useStateとuseImmerを使用して下記のように構造されたデータを扱ってみます。

“`
{
categories: {
A: { name: “カテゴリA”, count: 0 }

プロフィール画像の編集を非同期処理で実装する方法

## はじめに
railsのCRUD操作には慣れてきましたが、JavaScriptを使った非同期処理にまだまだ手こずっているので、学習記録として実装した非同期処理を記載します。
特に今回の実装ではchatGPTにかなり助けられた面があるため、なぜそのコードにしているのか、という点も含めて言語化していこうと思います。

## やりたいこと

– JavaScriptから画像をPOSTする
– POST後非同期処理でprofile画像を表示する

### 具体的な方法
– axiosとrails-ujsを導入し、javascriptからpost/putする
– javascriptでプロフィール画像の設定状況を確認し、条件に応じて画像の出し分けをする

### 前提
– rails6を使用
– UserとProfileは1

「現代魔術JS×Web設計」のイメージと概念〜ビルド編〜

# はじめに
半年前ぐらい前にアニメ「葬送のフリーレン」を見て、この際にふとエンジニアとして見過ごせない概念がありました。
**「魔術はイメージの世界」**
私はジュニアプログラマーながら激しく同意したのを覚えてます。
Web設計はどんどん肥大化と複雑化していくもので、それに抗うための技術が発生するなどして…中々イメージが捉えづらいと思います。
本記事はそんな捉えづらい概念をご紹介していければと思います。

:::note info
初投稿のジュニアプログラマーです。
ご指摘がありましたら、ビシバシお願いします。
:::

# Node.js


Node.jsとは…単にGoogle Chromeをサーバーサイドで動かしてしまおうという技術です。
今までJavaScriptはブラウザサイドで動くものとして扱ってきました。
しか

useSWRについての学習 useEffectよりも優れたデータ取得法（useSWRInfinite、useSWRSubscription…）

# はじめに

Reactアプリケーションでデータ取得を効率的に行うことは、パフォーマンスとユーザー体験を向上させる上で非常に重要です。その中で、Vercel社が開発したuseSWRは、データフェッチングを簡単かつ強力に行えるReact Hooksライブラリとして注目を集めています。

### useSWRとは何か

useSWRは「stale-while-revalidate」というHTTPキャッシュ無効化戦略に基づいたデータフェッチングライブラリです。このライブラリを使用すると、コンポーネント内でデータの取得、キャッシング、そして自動的な再検証を簡単に実装できます。

主な特徴は以下の通りです:

– キャッシュからのデータ即時返却
– バックグラウンドでの自動再検証
– インターバルによる定期的なポーリング
– フォーカス時の再検証
– ネットワーク回復時の自動再試行

### なぜuseSWRを使うべきか

useSWRを使用する主な利点は以下のとおりです:

1. **高速で軽量**: キャッシュを活用することで、アプリケーションの応答性が向上します

2. **自動更新**

Reactのこれ、覚えてますか？

# 概要
– Reactを実務で使っている投稿者が
– 曖昧になっていた部分
– 印象に残った部分
– をピックアップします
– 気軽にコメントください

# JSXはあくまでも糖衣構文
– ReactはあくまでもJavascriptであり、
– 例えJSXを使用していても、その正体はJSに他ならない
– 一見、HTMLを記述しているように見えるが、JSを記述していることを忘れないように

# Babel
– Javascriptトランスコンパイラ
– 最新のイケてるJS構文や、JSXを現行のブラウザでも動くようにトランスパイルしてくれる

# Atomic Design
– react設計の考え方
– ページと部品（コンポーネント）で分けて考える
– 単位は以下の通り
– Atomics（原子）
– Molcules（分子）
– Organisms（有機物）
– Templates（テンプレート）
– Pages（ページ）

# webpack
– モジュールバンド

LeetCodeを試しに解いてみた

# LeetCodeを解いてみた

## LeetCodeに挑んだ理由
きっかけは**単純なJavaScriptの文法をド忘れ**してしまったことです。
Webアプリの開発を行っているとデータフローや処理ばかりであまり文法的なことを書くことが少なかったからかもしれません。
かなりの衝撃を受けてもう一度文法とかアルゴリズムを学習しようと思いました。。。

## 問題
**30 Days of JavaScript**という問題(集?)を進めていて、今回は「Debounce」と言う問題を紹介します。

### どんな問題か
ざっくりと要約すると、
– 関数を返却する関数を定義する
– 引数は(fn: 実行する関数, t: m秒)
– 返却された関数は以下の機能を持つ
– t秒後にfnを実行する
– もしfnの実行前に再度呼ばれた場合はカウントをリセットして再カウントする

という問題です。
詳しくはLeetCodeをご覧ください。
タイマーをした実行したい関数が呼ばれる前に実行をタイマーする関数を実行するとカウントをリセットするような処理です。
言葉で書いているとこん

モダンJavaScriptの基本

## React学習にあたって最低限抑えておきたい基本JS

#### 1\. 変数宣言
① `var` : 再代入○ 再宣言○
② `let` : 再代入○ 再宣言×
③ `const` : 再代入× 再宣言×

##### `const`の特性
・ほとんど`const`しか使わない
・オブジェクト型/配列型はプロパティの変更が可能
“`js
const val1 = {
name: “ナオキ”,
age: 22,
};
val1.name = “naoki”; //nameプロパティを変更
val1.address = “Sapporo”; //addressプロパティを追加
console.log(val1);

const val2 = [“cat”, “dog”];
val2[0] = “bird”; //0番目をbirdに変更
val2.push(“monkey”); //文字列を追加
console.log(val2);
“`

#### 2\.テンプレート文字列
文字列の中でJSの変数を展開したい時は`${}`に格納する
“`js
//従来の方法
cons

命令型プログラミングと宣言型プログラミングの違いをまとめてみた

Reactを学び始めたときに、「JSは命令型プログラミングなのに対し、Reactは宣言型プログラミングです。」という説明を受けてもピンとこなかったので、もう少し噛み砕いてみることにしました。

### 命令型と宣言型の違いをピザ:pizza:で例えると？
イメージがつきやすいように、料理に例えてみましょう。

**命令型プログラミングを例えると**
– シェフにピザの作り方を手順ごとに指示するようなものです。生地を作り、ソースを塗り、チーズを載せ、オーブンで焼くまで、**すべてのステップを詳細に伝えます**。

**宣言型プログラミングを例えると**
– **ピザを注文するようなもの**です。何を食べたいかだけを伝え、具体的な作り方はシェフに任せます。シェフはその指示に従って、最適な方法でピザを作ってくれます。
![declar