JavaScript
NPM License Checker というそのものずばりの名前のツールを使って，依存関係のライセンスを確認してみます． 例 package.json { "private": true, "dependencies": { "vue": "^3.3.4" }, "devDependencies": { "license-checker": "^25.0.1" } } license-ch…
ブラウザーで実行する JavaScript において，無限ループで処理が進まなくなってしまう不具合が発生した場合に，修正する方法を検討します． Python など実行を強制終了 (Control+C) できる言語ならば，終了時のスタックトレースを確認することで無限ループの…
Node.js はシングルスレッドで実行されるので，排他処理は原則不要ですが，非同期関数が含まれるとその限りではないと思ったので，排他処理ができるライブラリを探したのですが，自分で作った方が簡単だと思ったので，実験してみました． 以下のソースコード…
JavaScript で大きなサイズのデータを扱いたかったので， stream の使い方をまとめます． 以下のソースコードは全て TypeScript の Vitest 用単体テストです． ReadableStream まずは ReadableStream を扱ってみます． ReadableStream - Web API | MDN impor…
Cloudflare のビルドシステムに含まれるライブラリのバージョンは古い状態になっていました． Node.js 12.18.0 *1 これは3年前のバージョンです*2． しかし，V2 Build System が導入されたことにより，改善されました． Language support and tools · Cloudf…
JavaScript で isFinite(null) が true と評価されることに気づいて軽く絶望しました．以下のようにユニットテストを作成して確認しました． package.json { "name": "isfinite", "version": "1.0.0", "scripts": { "test": "vitest" }, "devDependencies": …
Docker 環境で GUI の開発ができないだろうか，と思ったので調べてみたところ， fluxbox というウインドウマネージャーを使用した，ブラウザーで接続可能なデスクトップ環境があるそうで，これは Dev Container Features の Light-weight Desktop を使用すれ…
Dev Container を利用して Docker 環境で開発をすると，それぞれのプロジェクトについて自由に依存関係を構成することが可能になり，大変便利です．しかし，開発に必要なライブラリを1個のコンテナに準備する必要があり，準備が大変でした．それでも一度全部…
動作しているように見えるウェブサイトを公開して，Google Search Console で確認したところ，コンテンツの読み込みが途中で止まってしまい，正常に取得できない問題が発生していました． どうやらページを読み込む最初の部分で，javascriptからxhrで読み込…
ページが1万個を超えるウェブサイトを静的サイトジェネレーター(SSG)である VitePress を用いて作成しようとして，根本的な問題が生じることが分かりました． VitePress で生成されたproduction用の全てのhtmlファイルには，hashmapが挿入される*1ため，以下…
キーボードには，DeleteキーとBackspaceキーが存在します． キートップの印字と機能の違い 日本語キーボードは以下のような配置になっています．これをWindows 10に接続して使用すると，Backspaceキーを押すとカーソルの前の文字が消され，Deleteキーを押す…
Vue.jsのプロジェクトを開発中にサーバーを立ち上げようとしたら，以下のエラーが発生しました． Error: ENOSPC: System limit for number of file watchers reached, watch ... Vue.jsはchokidarを使用してファイル変更を監視しているらしく，Ubuntuではino…
ユーザーが入力した文字列に，太字や斜体などの書式を見たまま編集できるエディタをWYSIWYGエディタ (ウィジウィグエディタ)と呼びます．広義にはMicrosoft WordやPages, LibreOffice Writerなどのワープロソフトウェアも含まれるかもしれませんが，この記事…
ユニットテストを高速で簡単に実行できる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.…
TestCafeを使っていたところ，"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出たので，原因と対応方法をまとめます． node.jsのinternal/http2で"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出るのは，headerに重複するキーが存在するためです． ERR_HT…
Google reCAPTCHAを使用することで，ボットがフォームに機械的なデータを送信するのを防ぐことができますが，フォームが正しく動作するかを確認するためにテストをすると，機械的なデータを送信することになり，フォームを通過できません．このどうしようも…
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…
Webアプリケーションのエラーを扱うためにSentryを利用しています． webpackを使ってSentry SDKを使うと，bundle.jsが正常にロードされれば問題なくSentryにエラーが送信されますが，もしもbundle.jsでSentryが読み込まれる前にエラーが発生すると，エラーが…
MPEG DASHを使ってアダプティブストリーミングで動画を配信しようと挑戦したところ，CORSで躓いたのでまとめます． 目標 shaka-playerを使ってDASHでアダプティブストリーミングする． 動画を配信するためにAmazon S3を使い，CloudFrontでキャッシュする． …
TestCafeは，JavaScriptでe2e testを作成すれば，たくさんの種類のブラウザーで実行できる便利なライブラリです． Apple Payなど通信がhttpsでなければ実行できない機能があるため，開発環境のTestCafeでもhttpsを使うことにしました．そのためにTestCafeの-…
hot reloadを使いながらシングルページアプリケーション(SPA)を開発していると，ブラウザーを再読み込みせずに開発が進められるのでとても便利なのですが，その代わりにconsoleにエラーが溜まっていきます． このような状況では，以前のバージョンのエラーが…
npmをつかってWebサービスのフロントエンドの開発をしていると，いろいろなパッケージをインストール・アンインストールすることがありますが，次第に順番がぐちゃぐちゃになって，だんだんカオスになっていきます．それを簡単になんとかするには， > npm re…
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-…
自分用メモも兼ねて，シングルページアプリケーション（SPA）基本となるプロジェクトの構成を紹介します． webpack 4ではconfig.jsを省略できるようになったようですが，少しは設定が必要なようです． ディレクトリ構成 index.html node_modules/ package.js…
Webpackを使ったウェブサイトの作成時にHot Module Replacementを使用するとnodeのCPU利用率が異常に高いので，原因を調べてみました． 環境 iMac late 2015 macOS High Sierra node v9.2.0 webpack 3.8.1 watchするファイルが多すぎるのが原因 webpackを起…
特許の分類検索を補助するサービスを作成してみました． Vue.js, Djangoの練習を兼ねています．3日間で完成に至ったのは，Vue.jsがよいライブラリであるおかげです． hxpat.herokuapp.com ICPやFIなど特許分類を用いた検索に有用なツールだと思います．使っ…
$.ajax()を使ってarrayに格納された複数のurlを順番に取得していく方法です． var urls = ["909253","909254","909255","909256"]; urls.reduce(function(previous,current) { return previous.then(function(response) { if (response) { console.log(respo…
