WebDev

この記事を作った動機 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通信に必要なモジュールを読み込む。 ...