JavaScript

JavaScript

[JavaScript]文字列(ファイル名)のソートをWindowsのようにする

やりたいこと文字列(主にファイル名)の配列をWindowsのファイル名ソートと同じようにソートします。背景単純に以下のようにソートをした場合の結果を見てみます。コード:filenames.sort();入力:filenames = ["10","1","2","a","A","b","B","い","ア","あ"]結果:['1', '10', '2', 'A', 'B', 'a', 'b', 'あ', 'い', 'ア']このソートだと文字コードの大小でソートが行われます。そのため数字は”1”,”2”,”10”と並んでほしいのですが、”1”,”10”,”2”とならびます。またひらがなカタカナ、ア...
JavaScript

[JavaScript]サーバ上のCSVをJsonにして使用

やりたいことサーバ上のCSVファイルをクライアントサイドでJsonにして使用します。使用するライブラリはnode-csvtojsonです。Nodejsがインストールされていること前提です。クライアントにすべてのデータをダウンロードするので、ユーザ情報などの機密データやデータが大きい場合は別の方法を検討してください。準備プロジェクトのルートで以下のコマンドを実行してcsvtojson をインストールします。npm i csvtojson 実装実装は以下の通りです。import csv from "csvtojson"const convertCsv2Json = (txt) => { csv()...
JavaScript

Gemini 2.5 Flash Image(nano-banana)をJSで使用してみようとした

やりたいことGemini 2.5 Flash Image(通称nano-banana)がリリースされたのでJavaScriptで使用することをためします。このモデルは特に画像の修正が得意だとされています。以下の記事でGemini 2.0で画像生成を行いましたので作成したコードを利用してGemini 2.5 Flash Imageをためしますが失敗しました。ここでは修正内容とダメだった理由を残します。注意この記事を書いた時点(2025/08/29)では無料(Googleが言うには請求先アカウントにリンクされていないプロジェクト)では使用できませんでした。ただしGemini 2.5 Flash I...
JavaScript

AudioContextで使用するAudioBufferをwavにして保存

やりたいことJavaScriptで音を使う場合よく出てくるAudioContextで使用するAudioBufferをwavにしてローカルにファイルとして保存します。環境以下の環境を使用しています。NodeJS + Viteaudiobuffer-to-wav環境構築NodeJSはインストールされている前提です。作成するプロジェクト名を聞かれるので入力します。(この記事ではwavとしました)使用するフレームワークを聞かれるのでVanillaを選択します。続いて言語はJavaScriptを選択します。上記でプロジェクトの作成は完了です。ライブラリのインストールプロジェクトの作成が完了したら必要なラ...
JavaScript

マウスで動作するJavaScriptのコードがペンタブレットで動作しない

やりたいことマウスで動作するJavaScriptのコードがペンタブレットで動作しませんでした。この記事では著者の修正した箇所をまとめておきます。修正したアプリはCanvasに絵を描くアプリです。アプリをペンタブレットに対応するにあたって修正した箇所のみの紹介です。(ペンタブレット/マウス両方で動作するように修正します。)スマホ/タブレット対応に関してスマホ/タブレット対応は基本的にペンタブレットの対応と同様のはずですが、動作確認を行っていません。問題点と修正マウス関係のイベントが来ないペンタブレットで操作した場合にmousedown、mousemove、mouseupのイベントが来ませんでした...
JavaScript

JavaScriptでUnique(Arrayの中の重複を削除する)を実装

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

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

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

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

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

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

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