JavaScript

JavaScriptでUnique（Arrayの中の重複を削除する）を実装

やりたいことJavaScriptでUnique（Arrayの中の重複を削除する）を実装します。filterとSetを使用した2つの方法を紹介します。実装filterを使用した実装Filter関数で重複するelementを削除します。findIndex()でチェック対象のelementと同じエレメントを探し、対象よりもindexが小さいものが見つかれば削除対象としています。（arr.findIndex((ele) => element == ele) == index）（indexが大きいのは削除しないの？と思うかもしれませんが、indexが大きい方のエレメントのチェックの時に削除されるので問題...
2025.05.21
JavaScript
JavaScript

[JavaScript]Arrayから要素を削除（filter()が便利）

やりたいことJavaScriptでArrayの要素を削除するにはいくつかの方法がありますが、だいたい使いにくいです。（shift,popは使い時が限られるしslice,spliceは個人的に使いにくい。）ここでは汎用的に使用できるfilter()の使用方法を紹介します。使用方法filter関数の概要filter関数には関数を引数として渡します。渡した関数はArrayのエレメント毎に呼び出されます。関数がtrueを返すとelementは保持され、falseを返すとelementが削除されます。返り値はelementが条件により削除されたArrayです。元のArrayは変更されないことに注意してく...
2025.05.21
JavaScript
AI

CPUでstable-audio-open-smallで音声作成

やりたいこと下の記事ではStable Audio Open 1.0で音声作成を試しましたが、かなり動作がギリギリでした。新たに軽量になったstable-audio-open-smallがリリースされたので試してみます。いろいろ試したのですが、stable-audio-open-smallはDirectMLで動作させることができませんでした。（stable-audio-toolsで使用しているPytorchとtorch-directmlで使用しているPytorchのバージョンがコンフリクトするため）ライセンスに関してモデルのライセンスは以下のリンクを参照してください。非商用であれば、無料です。環...
2025.05.20
AI
HTML

HTMLで右→左のスライダ（input type=”range”）を作成

やりたいことHTMLでは以下のように記載することで簡単にスライダを作成できます。<input type="range">ただしこのスライダは左→右固定です。（左が小さい値で、右が大きい値。）しかしUXの関係でどうしても右→左にしたいことがあります。この記事では簡単に右→左にする方法を紹介します。実装実装は以下のようにscale:-1を設定するだけです。これにより右→左になります。見た目だけでなく右側が最小の値になり、左側が最大の値になります。<input type="range" style="scale:-1">実行例：結果右→左のスライダーを作成することができました。
2025.05.15
HTML
HTML

HTMLでいろいろ中央ぞろえ

やりたいことHTMLでよく使って簡単そうなのに何気に難しい中央ぞろえの方法をまとめます。前準備まずは中央ぞろえしたいタグが何者かを確認します。だいたい以下の２個のうちどちらかだと思います・どちらかのタグを中央ぞろえするかにより実装方法が異なります。コンテンツテキストや画像などブロック複数のコンテンツを含む領域例：divなどで宣言される例にタグを挙げていますが、displayスタイルで変更が可能です。そのためdivだったら必ずblockというわけではありません。実装コンテンツ横方向親のタグにtext-align:centerのスタイルを指定します。下の例のようにspanやimgに設定するのではな...
2025.05.15
HTML
Windows

[PowerShell]ファイルリストをJSONファイルで取得

やりたいことWindows上のサブフォルダ内を含めてファイルをJSON形式でファイルに保存します。実現方法PS1ファイルの作成file_list.ps1ファイルを作成し、以下の内容を貼り付け保存します。$targetPathと$outputPathの値は環境に合わせて変更してください。$targetPath = "ファイルリストを作成するフォルダ"$outputPath = "出力ファイル"Get-ChildItem -Path $targetPath -Recurse -File | Select-Object Name, FullName | ConvertTo-Json |Out-Fil...
2025.05.14
Windows
Vite

Viteでローカル以外からアクセスできるコマンドを作成

やりたいことViteで作成したプロジェクトで以下コマンドを実行して、Severを起動するとローカルPCからはブラウザなどからアクセスできます。npm run dev出力： ➜ Local: ➜ Network: use --host to expose ➜ press h + enter to show helpしかし他のPCからはアクセスすることはできません。この記事ではローカルでの試験向けのnpm run devコマンドを保持しつつ、他のPCからもアクセスできる方法を用意する手順を紹介します。解決策他PCからのアクセスを許可まずは他PCからのアクセスを許可を試します。Viteで作成したプロ...
2025.05.14
Vite
JavaScript

[JavaScript]フルパスから親フォルダの名前を取得する

やりたいことJavaScriptでフルパスから親フォルダの名前を取得します。URL、ファイルパス共に有効です。探したところ、rootから親フォルダまでのパスを返すものはあったのですが、親フォルダのみを返却するものはなかったので共有します。例C:¥¥a\b\c\file.txt -> c -> b実装実装は以下のようになります。/と￥で入力を分割し、最後から二つ目の文字列を返却します。function getParentFolderName(filePath) { const parts = filePath.split(/[\\/]/); if (parts.length > 1) { ret...
2025.05.14
JavaScript
JavaScript

[JavaScript][Unarchiver.js]サーバーからZip/RARの中身を取得する

やりたいことjavascriptでサーバー上のZip/RARファイルの中身のファイルををローカルに保存せずに取得します。大まからな流れは以下のようになります。（ローカルにファイルは保存しません）　使用するライブラリはzip/rar以外にもtar,gz,xz, bz2にも対応しているようですが動作未確認です。サーバーからZip/RARファイルを取得(fetch)zip/RARファイルから中のファイルを取得（画像ファイルを表示）NodeJSを使用しています。(試験環境のために使用しているので必須ではないです。)下の記事ではzip.jsを使用してzipファイルの中身を参照する方法を紹介しています。こ...
2025.05.13
JavaScript
JavaScript

[JavaScript][zip.js]サーバーからZipの中身を取得する

やりたいことjavascriptでサーバー上のZipファイルの中身のファイルををローカルに保存せずに取得します。大まからな流れは以下のようになります。（ローカルにファイルは保存しません）　サーバーからZipファイルを取得(fetch)zipファイルから中のファイルを取得（画像ファイルを表示）NodeJSを使用しています。(npmと試験環境のために使用しているので必須ではないです。)RAR/ZIPともに対応する方法を以下の記事で紹介しています。しかし下の記事の方法はnpmを使用しないため、パッケージ管理が明確でない可能性があります。zipのみの使用の場合、本記事の方法がおすすめです。環境構築以下...
2025.05.13
JavaScript
次のページ