WebDev

この記事を作った動機 単に自分用に、zustand の使い方を今 (2025/9/9) わかっている範囲で、書き出してみるだけ。 環境 Vite React TypeScript Tailwind CSS zustand 概要 まだ全然わかっていないが、私の今 (2025/9/9) イメージとしては、「zustand とは、react で言う状態変数の管理に関するライブラリの一つで、親 -> 子 コンポーネントという流れで状態変数を渡していく以外で、コンポーネント間の状態変数を共有、管理することができるもの。」という感じである。　TODO 参照が変わらないと、再描画が起こらないことを書く。例えば、setter 内で、get()したものを直接変更し、set()のところに使うと、参照が同じのため、問題が起こる。 使い方 import import { create } from "zustand"; 宣言例 type DatabaseState = { websocket: WebSocket | null; serverIP: string | null; changeServer: (ip: string) => void; closeConnection: () => void; getWebsocket: () => WebSocket | null; }; export const useDatabaseStore = create<DatabaseState>((set, get) => ({ // 変数の初期化 websocket: null, serverIP: "ws://localhost:50097", // 変数を操作する関数群 changeServer: (ip: string) => { set({ serverIP: ip }); }, closeConnection: () => { const ws = get().websocket; ws?.close(); set({ websocket: null }); }, getWebsocket: () => get().websocket, })); データを呼び出し、利用する export function Acompornent(){ // 他の hooks と同様にコンポーネントのコードの先頭あたりに書く必要がある。 const websocket = useDatabaseStore((s) => s.websocket); console.log(websocket) // 何かしらのコード } 関数を呼び出す export function Acompornent(){ // 他の hooks と同様にコンポーネントのコードの先頭あたりに書く必要がある。 const changeServer = useDatabaseStore((s) => s.changeServer) changeServer("ws://localhost:88091") // 何かしらのコード } 躓いたこと イミュータブルの原則 zustand を使っているときに、どうやっても値を更新しているにも関わらず、再描画が正しくかからないという問題が起こった。これは、同じ参照を持つ変数を変更するという、“ミュータブル"な扱いをしたときに起こるようである。一度宣言された、作られた変数は原則変更しない(できない)というのが、React や zustand といった状態変数の概念の前提にはあるっぽいと私は最終的に考えた。 ...

この記事を作った動機 全然まだ私は使い方とか概念をわかってないと思うが、とにかくよく使う hooks について記録を取りたいので、記事を書くだけ。思考の整理とかって感じで書いていて、普通に間違い混ざってると思うし、他の人に参考になるかは怪しい。 react とデータの関係性 React では、データが変更されると UI が連動して更新されたりするという仕組みになっているので、普通の変数ではなく、データのありように合わせて、状態変数と呼ばれるものを使い分ける必要がある。 環境 Vite React TypeScript Tailwind CSS zustand 普通の変数 概要 普通に TypeScript や JavaScript で宣言するような let や var などと書いて宣言する変数たちのことである。これら変数の内容は基本的に React が再描画をかけると内容が初期化されて元の再描画前のデータは消えてしまう。 これを防ぎ、UI 再描画をまたいで変数の値を保持するためには、状態変数を useState なり、 useRef なり宣言して利用する必要があると思われる。 export default function Acompornent(){ // 再描画時には、x:100 y:100 にいちいち初期化されて変更内容が失われる let windowPos = { x: 100, y: 100 } // こちらは再描画時には内容は失われない const [style,setStyle] = useState({ top:0, left:0 }) // このようなコードを書くと windowPos は setStyle されたあと再描画で内容が初期値に戻ってしまう addEventListener("mousemove",(event:MouseEvent) => { // 何かしらのコード windowPos.x = event.screenX windowPos.y = event.screenY // 何かしらのコード setStyle({ top: windowPos.x, left: windowPos.y }) }) return　<div style={style} className="fixed">This is styled text.</div> } useState 概要 オーソドックスな状態変数で、データが更新されたとき、UI を再描画させたいという場合に使う。 ...

この記事を作った動機 Vite + React + TypeScript の環境でコンポーネント"内部"になにか要素をネストする方法がわかんなかったので記録するだけ。ただ厳密のこのやり方で正しいかはわかっていないが、ChatGPT-5 が出したやり方がとりあえず動いたので記録することにした。今のところ公式ドキュメントとかで今回出すようなやりかたをしているのはまだ見つけられていない。 環境 Vite React TypeScript Tailwind CSS zustand ネストの仕方 ネストできる関数コンポーネントを単体で定義 import {type ReactNode} from "react" export default function Outside1({ children }:{ children:ReactNode }){ return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-[5rem] left-0 fixed"> {children} </div> } ネストできる関数コンポーネントをコンポーネント内に定義 import {type ReactNode} from "react" export default function Acompornent(){ // ネストができる関数コンポーネントは必ずしも、このようにコンポーネント内に書いている必要はないと思う。 function Outside({ children }:{ children:ReactNode }){ return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-0 left-0 fixed"> {children} </div> } return <div> <Outside> <p>This</p> <p>is</p> <p>children.</p> </Outside> <Outside1> <p>This</p> <p>is</p> <p>children.</p> </Outside1> </div> } 参考にしたサイトとか ChatGPT https://chatgpt.com/ (2025年9月8日) Quick Start – React https://react.dev/learn (2025年9月9日)

この記事を作った動機 MMD Viewer を作っているときに、地味にあとから効いてきそうなミスをすることを発見したのでそれを記録するだけ。 問題点 if 文の条件判定の書き方を間違えると、条件判定をする代わりに、判定に使った変数にブール型の結果を代入してしまう。 間違っている例 問題の部分だけ if(zipName =! null){ // <---- 問題の箇所 // これでは、zipName の中身が true になってしまう。 全体像 // try to find zip file let zipName = null zipName = findZipFile(modelFile) // try to find pmx or pmd file let modelName = null modelName = findPmxAndPmdFileName(modelFile) let fileMap = new Map() if(zipName =! null){ // <---- 問題の箇所 // set modelName is required readZipForModelFile(modelFile,zipName,fileMap) alert("zip read function on development.") return } 間違っていない例 問題を修正した部分だけ if(zipName != null){ // <---- 問題の箇所 // この場合は、通常どうり zipName の中身が null でないか判定しているということになり、zipName 自体の中身は判定前と同様に保持される。 全体像 // try to find zip file let zipName = null zipName = findZipFile(modelFile) // try to find pmx or pmd file let modelName = null modelName = findPmxAndPmdFileName(modelFile) let fileMap = new Map() if(zipName != null){ // <---- 問題の箇所 // set modelName is required readZipForModelFile(modelFile,zipName,fileMap) alert("zip read function on development.") return } 関連の記事 MMD Viewer 参考にしたサイトとか 気づいたことを書いただけなので特になし。

この記事を作った動機 単にいちいちどうやって開発用に、http-server(npm経由) 上で SSL(HTTPS) を利用できるのかとか、とにかくCORSをどうにかしたいとき、忘れたときにいちいち調べるのはめんどいので、記録するだけ。 必要なもの http-server (via npm) mkcert まとめ http-server --cors --ssl --key ~/path/to/key/key.pem --cert ~/path/to/cert/cert.pem 個別のメモ書き CORSを何とかする http-server --cors SSL を何とかする mkcert -install # mkcertを初めて使うときのみ mkcert [開発用サーバのIP or localhost とか] http-server --ssl --key ~/path/to/key/key.pem --cert ~/path/to/cert/cert.pem 参考にしたサイトとか macos - enable CORS for local http server - Stack Overflow https://stackoverflow.com/questions/63297822/enable-cors-for-local-http-server (2025年6月13日) http-serverによるローカル HTTPS server 構築 (5分でできる) #Node.js - Qiita https://qiita.com/hbjpn/items/925c8012cd93d9165be6 (2025年6月13日)

この記事を書いた動機 httpd で公開している Web サイトのドキュメントルートに、icons というフォルダーを配置し、画像を扱おうとするとうまくいかないことがある。httpd デフォルトでは、事前に設定され用意された icons の方を参照してしまい、タブのアイコンや、画像とかが正しく表示されない。それで、二回も同じことにぶつかったというのもあり、メモを取ろうと思った次第。 イメージ 設定前の様子 設定後の様子 httpd の設定 iconsのaliasは以下のようになっている。 /etc/httpd/conf/extra/httpd-autoindex.conf ... Alias /icons/ "/usr/share/httpd/icons/" <Directory "/usr/share/httpd/icons"> Options Indexes MultiViews AllowOverride None Require all granted </Directory> ... この alias を無効化するには、以下のように設定をコメントアウトして、httpd-autoindex.conf を読み込まないようにするだけで良い。 /etc/httpd/conf/httpd.conf ... # 変更前 # Fancy directory listings Include conf/extra/httpd-autoindex.conf ... # 変更後 # Fancy directory listings # Include conf/extra/httpd-autoindex.conf ... 参考にしたサイト How to disable the indexing of the ‘icons’ directory in your Apache HTTP Server | Our Code World https://ourcodeworld.com/articles/read/1437/how-to-disable-the-indexing-of-the-icons-directory-in-your-apache-http-server （2025年1月29日） linux - How do I remove the Apache “/icons/” and “/icons/small/” folder alias? - Super User https://superuser.com/questions/1713548/how-do-i-remove-the-apache-icons-and-icons-small-folder-alias （2025年1月29日）

この記事を作った動機 私はプライベートネットワークにおいて、自分のためだけのサービスをhttpプロトコル経由で利用できるようにしているが、拡張機能とかの作成にあたり、httpsじゃないと不都合が生じるようになったことがきっかけで、https化に苦労することになり、もう嫌だということでこの記事を書くことになった。 例えばyoutube上で動作する拡張機能が、自分だけのためのサービスが動いているhttpサーバをバックエンドとして使うことを考えると、http通信とhttps通信が一つのWebページを表示するために混在してしまうために、ブラウザ側で通信がブロックされたリ、騒がしいエラーが出てきてしまい、非常に不快な思いをすることになる。 前提としていること 参考程度に前提条件とかも書いておく。 httpdを使っている。 opensslパッケージがインストール済み すでにhttpdを使っていて、ブラウザでなんか表示できる状態にある。 あくまで個人用など、閉じられた環境において、https通信を実現したいと考えている。 このブログの様な、大っぴらに公開されているWebサイトには使えない手法であることを理解している。 https通信の実現方法 証明書を作る HTTPsを実現するために、mkcertコマンドを使って証明書を作成するが、どんな証明書が必要が一応自分の理解の範囲であり、間違っているかもしれないが、簡易的に書いておく。必要そうな証明書は以下のとおりである。 サーバ自体を証明する証明書 各httpサーバとかのためにサービスごとに個別に用意される証明書 この中で、サーバと通信するパソコンがインストールしているべき証明書は、「サーバ自体を証明する証明書」の証明書の公開鍵であり、「各httpサーバとかのためにサービスごとに個別に用意される証明書」の公開鍵ではない。 mkcert コマンドのインストールを行う 私は arch linux を使っているので、以下のようにパッケージマネージャを利用した。 yay -S mkcert # たぶんリポジトリの分類がExtraにあるので、pacmanでもインストールできる # pacman -S mkcert mkcertの初期化を行う サーバ自体を証明する証明書の作成を行う。 mkcert -install # 証明書が保存された場所を調べるためには以下のコマンドでできる。基本的にmkcert -installを実行したユーザのホームディレクトリのどこかにある。 # mkcert -CAROOT # /home/username/.local/username/mkcert # 自分の環境だとこのような出力が得られる。 httpサーバ用の証明書を作る 次に以下のようにして、httpサーバが動いているドメイン名やIPアドレスを引数として、サービス用に証明書を作成する。この証明書は今回の場合であれば、httpdサーバの443番ポートを経由して、通信しているブラウザ等に送られることになる。 # コマンドを実行したファイル内で証明書の公開鍵と秘密鍵ができてしまうため、一応作業用のフォルダを作っている。 mkdir ./sslLocal/ cd ./sslLocal # 各httpサーバとかのためにサービスごとに個別に用意される証明書を作成 mkcert mydomain.name ipAddr # ドメイン名やIPアドレスなど複数指定できるらしいが、自分はとりあえずドメイン名だけにしてた。 # あっ、mydomain.nameやipAddrとかは適宜読み替えてください httpdが使う証明書を配置 私は以下の様にして、httpサーバ用の証明書を配置した。 # 証明書を作成したディレクトリへ移動 cd ~/sslLocal/* # ファイル内容を確認し、証明書の公開鍵と秘密鍵があることを確認する。 ls -rw-------⠀username⠀1708⠀Nov 4 02:06:02⠀⠀mydomain.name-key.pem -rw-r--r--⠀username⠀1452⠀Nov 4 02:06:02⠀⠀mydomain.name.pem # httpdのconfigがあるところに、証明書を置いておく場所も作る。 sudo mkdir /etc/httpd/conf/ssl # 署名書を作成したフォルダまで移動する。 cp ~/sslLocal/* /etc/httpd/conf/ssl/ httpdの設定 ssl通信に必要なモジュールを読み込む。 ...