みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

JavaScript

2024年現在の TypeScript の設定

ESM な TypeScript を node.js で実行するときの設定を検討します.なお,ESM とは以下のように import を使う方式のことです. import { valueOfPi } from "./constants"; export const twoPi = valueOfPi * 2; https://www.typescriptlang.org/ja/tsconfig…

JavaScriptでJSON SchemaとMeta-schemaを使ってみる

JSON Schema を使えば,自分が欲しい構造の JSON データであるかを簡単に判定できるので,とても便利です. まずは JavaScript で JSON Schema を使ってみます. ajv を使う JSON schema バリデータの実装はたくさんありますが,今回は,Ajv JSON schema val…

ループの速度を Python, Rust, Node.js で比較する

ループ(繰り返し処理)の書き方はプログラミング言語により様々です.使いやすい書き方を選択すればよいとは思いますが,気になったので処理速度を比較してみました. みーがよく使っている,Python, Rust, Node.js について,1千万個の要素を含む配列を用意…

npm で依存関係のライセンスを確認する

NPM License Checker というそのものずばりの名前のツールを使って,依存関係のライセンスを確認してみます. 例 package.json { "private": true, "dependencies": { "vue": "^3.3.4" }, "devDependencies": { "license-checker": "^25.0.1" } } license-ch…

JavaScriptで無限ループの原因を見つける

ブラウザーで実行する JavaScript において,無限ループで処理が進まなくなってしまう不具合が発生した場合に,修正する方法を検討します. Python など実行を強制終了 (Control+C) できる言語ならば,終了時のスタックトレースを確認することで無限ループの…

JavaScript で排他処理

Node.js はシングルスレッドで実行されるので,排他処理は原則不要ですが,非同期関数が含まれるとその限りではないと思ったので,排他処理ができるライブラリを探したのですが,自分で作った方が簡単だと思ったので,実験してみました. 以下のソースコード…

JavaScript で stream を扱う

JavaScript で大きなサイズのデータを扱いたかったので, stream の使い方をまとめます. 以下のソースコードは全て TypeScript の Vitest 用単体テストです. ReadableStream まずは ReadableStream を扱ってみます. ReadableStream - Web API | MDN impor…

Cloudflare Page の Node.js バージョンを指定

Cloudflare のビルドシステムに含まれるライブラリのバージョンは古い状態になっていました. Node.js 12.18.0 *1 これは3年前のバージョンです*2. しかし,V2 Build System が導入されたことにより,改善されました. Language support and tools · Cloudf…

JavaScript の Number.isFinite() と isFinite() の違い

JavaScript で isFinite(null) が true と評価されることに気づいて軽く絶望しました.以下のようにユニットテストを作成して確認しました. package.json { "name": "isfinite", "version": "1.0.0", "scripts": { "test": "vitest" }, "devDependencies": …

Dev Container で Tauri を用いた GUI 開発

Docker 環境で GUI の開発ができないだろうか,と思ったので調べてみたところ, fluxbox というウインドウマネージャーを使用した,ブラウザーで接続可能なデスクトップ環境があるそうで,これは Dev Container Features の Light-weight Desktop を使用すれ…

Dev Container Features で全部入り開発環境を作成する

Dev Container を利用して Docker 環境で開発をすると,それぞれのプロジェクトについて自由に依存関係を構成することが可能になり,大変便利です.しかし,開発に必要なライブラリを1個のコンテナに準備する必要があり,準備が大変でした.それでも一度全部…

一見動作しているウェブサイトがGoogle Search Consoleで取得できない

動作しているように見えるウェブサイトを公開して,Google Search Console で確認したところ,コンテンツの読み込みが途中で止まってしまい,正常に取得できない問題が発生していました. どうやらページを読み込む最初の部分で,javascriptからxhrで読み込…

多数のページのウェブサイトはSSGで作りにくい

ページが1万個を超えるウェブサイトを静的サイトジェネレーター(SSG)である VitePress を用いて作成しようとして,根本的な問題が生じることが分かりました. VitePress で生成されたproduction用の全てのhtmlファイルには,hashmapが挿入される*1ため,以下…

DeleteキーとBackspaceキー

キーボードには,DeleteキーとBackspaceキーが存在します. キートップの印字と機能の違い 日本語キーボードは以下のような配置になっています.これをWindows 10に接続して使用すると,Backspaceキーを押すとカーソルの前の文字が消され,Deleteキーを押す…

System limit for number of file watchers reached.

Vue.jsのプロジェクトを開発中にサーバーを立ち上げようとしたら,以下のエラーが発生しました. Error: ENOSPC: System limit for number of file watchers reached, watch ... Vue.jsはchokidarを使用してファイル変更を監視しているらしく,Ubuntuではino…

WYSIWYGエディタの分類とまとめ

ユーザーが入力した文字列に,太字や斜体などの書式を見たまま編集できるエディタをWYSIWYGエディタ (ウィジウィグエディタ)と呼びます.広義にはMicrosoft WordやPages, LibreOffice Writerなどのワープロソフトウェアも含まれるかもしれませんが,この記事…

Vitestの並列実行が快適だった

ユニットテストを高速で簡単に実行できるVitestを触ってみました. Vitest v0.5.8 2022/02/28現在は鋭意製作中のライブラリみたいですが,問題なく使えました. package.json { "name": "vt", "version": "1.0.0", "description": "", "main": "index.js", "…

ブラウザーで大量の硬貨を表示する

ドイツのベルリン美術館には,500,000個の硬貨が所蔵されており,紀元前7世紀に小アジアで硬貨が鋳造され始めてから21世紀の現在に至るまでの幅広い種類の硬貨があることで有名です*1. この膨大な所蔵品で戯れることが可能なWebサイトを紹介します. uclab.…

node.jsでERR_HTTP2_HEADER_SINGLE_VALUE

TestCafeを使っていたところ,"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出たので,原因と対応方法をまとめます. node.jsのinternal/http2で"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出るのは,headerに重複するキーが存在するためです. ERR_HT…

reCAPTCHAを使用するフォームを自動でテストする

Google reCAPTCHAを使用することで,ボットがフォームに機械的なデータを送信するのを防ぐことができますが,フォームが正しく動作するかを確認するためにテストをすると,機械的なデータを送信することになり,フォームを通過できません.このどうしようも…

Vue.jsのv-bindにObjectを使うときはXSSに気をつける

Vue.jsを使うときはDOM-based XSSに注意しなければなりません.例えば,v-htmlがXSSの原因となる可能性があることは有名です. Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. On…

Sentry Loaderが簡単すぎた

Webアプリケーションのエラーを扱うためにSentryを利用しています. webpackを使ってSentry SDKを使うと,bundle.jsが正常にロードされれば問題なくSentryにエラーが送信されますが,もしもbundle.jsでSentryが読み込まれる前にエラーが発生すると,エラーが…

MPEG DASHで動画を配信する時のCloudFrontのCORS設定

MPEG DASHを使ってアダプティブストリーミングで動画を配信しようと挑戦したところ,CORSで躓いたのでまとめます. 目標 shaka-playerを使ってDASHでアダプティブストリーミングする. 動画を配信するためにAmazon S3を使い,CloudFrontでキャッシュする. …

開発環境のTestCafeでSSLを利用する

TestCafeは,JavaScriptでe2e testを作成すれば,たくさんの種類のブラウザーで実行できる便利なライブラリです. Apple Payなど通信がhttpsでなければ実行できない機能があるため,開発環境のTestCafeでもhttpsを使うことにしました.そのためにTestCafeの-…

SPA開発でhot reloadしたら自動でconsoleを削除する

hot reloadを使いながらシングルページアプリケーション(SPA)を開発していると,ブラウザーを再読み込みせずに開発が進められるのでとても便利なのですが,その代わりにconsoleにエラーが溜まっていきます. このような状況では,以前のバージョンのエラーが…

npmのpackage.jsonでソートする

npmをつかってWebサービスのフロントエンドの開発をしていると,いろいろなパッケージをインストール・アンインストールすることがありますが,次第に順番がぐちゃぐちゃになって,だんだんカオスになっていきます.それを簡単になんとかするには, > npm re…

npmでnode-sassがpermission deniedとなる問題

npmでnode-sassをインストールしようとしたら,permission deniedとエラーになりました. 環境 macOS 10.14.3 node-sass@4.11.0 詳細 > node-sass@4.11.0 install /Users/xxx/node_modules/node-sass > Unable to save binary /Users/xxx/node_modules/node-…

webpack 4, vue.js, vue-routerを用いたSPAの開発環境

自分用メモも兼ねて,シングルページアプリケーション(SPA)基本となるプロジェクトの構成を紹介します. webpack 4ではconfig.jsを省略できるようになったようですが,少しは設定が必要なようです. ディレクトリ構成 index.html node_modules/ package.js…

WebpackでHot Module Replacementを使用する時のCPU使用率を改善する

Webpackを使ったウェブサイトの作成時にHot Module Replacementを使用するとnodeのCPU利用率が異常に高いので,原因を調べてみました. 環境 iMac late 2015 macOS High Sierra node v9.2.0 webpack 3.8.1 watchするファイルが多すぎるのが原因 webpackを起…

HxPat公開

特許の分類検索を補助するサービスを作成してみました. Vue.js, Djangoの練習を兼ねています.3日間で完成に至ったのは,Vue.jsがよいライブラリであるおかげです. hxpat.herokuapp.com ICPやFIなど特許分類を用いた検索に有用なツールだと思います.使っ…