@ledsun blog

無味の味は佳境に入らざればすなわち知れず

JavaScript

相対URLの解決

URL: URL() コンストラクター - Web API | MDN を使うと、基準になるURLからの相対パスを解決したURLが得られます。 例えば、次のように使います。 // ベース URL: let baseUrl = "https://developer.mozilla.org"; new URL("ja/docs", baseUrl); // => 'htt…

Playwrightでリダイレクト後のHTTPリクエストをMockできない

ruby.wasmのテストコードを書いていました。 PlaywrightでHTTPリクエストをMockしているスクリーンショット cdn.jsdriver.netへのリクエストをMockして、レスポンスの内容をローカルファイルに置き換えています。 リダイレクトしたあとはMockできていないス…

PlaywrightのNewwork mockingをつかってみる

Playwrightをつかってみる - @ledsun blog でPlaywrightが最低限動く環境ができました。 リダイレクトレスポンスを扱うテストを書こうと思います。 Playwrightには Netwrok mockingという機能があります。 実行するテストからのHTTPリクエストをモックして書…

Playwrightをつかってみる

Installation | Playwrightの手順に従って進めます。 npm init playwright@latest いまはnpm initにプロジェクトテンプレートをつくる機能が組み込まれているようです。 npm-init | npm Docsによると initializer in this case is an npm package named crea…

複数プログラミング言語をいっぺんに実行するスクリプトをMakefileで書く

C#とJavaScriptとRubyのプログラミングを比較するためにGitHub - ledsun/enumerable: C#とJavaScriptとRubyのコレクション操作を比較するためのリポジトリです。を作りました。 動作確認のために、全部のプログラムをバーンと実行するスクリプトが欲しいです…

C#とJavaScriptとRubyのコレクション操作

大抵のプログラミング言語でコレクション(列挙できる何か)をメソッドチェーンで操作できます。 プログラミング言語ごとに、ちょっとずつちがうので整理してみようと思います。 僕の馴染みのあるC#、JavaScript、Rubyでそれぞれ書いてみます。 お題 お題は…

あるリファクタリング

次のような関数がありました。 どうしたもんかなあ?と悩みました。 import validateAnnotation from './validateAnnotation' import convertBeginAndEndToInteger from './convertBeginAndEndToInteger' export default function ( spanContainer, entityCo…

Romeは本当に速かった

RomeプロジェクトのJavaScriptフォーマッターがリリースされました。 rome.tools ちょうどPrettier を使っているプロジェクトがあったので比較してみました。 本当にめちゃくちゃ速い。prettierで8秒掛かるのが0.5秒とかで終わる。— ぎゃばん@手洗い (@ledsu…

rails ujsを学ぶ

一昔前のRailsではJavaScriptを簡単に使う機能としてrails ujsがありました。 Rails ガイドにも説明があります。 railsguides.jp 「UJS: Unobtrusive(控えめな)JavaScript」 主な用途は www.inodev.jp JSの処理で確認ダイアログとして「マジでログアウトす…

$( document ).ready()

コールバック関数が実行されるタイミング $( document ).ready()はJavaScriptでDOMを操作するに当たって、DOMの読込完了を待つためのjQueryの便利関数です。 ブラウザにloadイベントしか実装されていなかった時代がありました。 loadイベントは次の2つを待ち…

marmaid.jsを使ってシーケンス図を書くためのHTMLファイルのテンプレート

SPAのような、あるページを表示するときにブラウザからサーバーへ複数回のリクエストを送るWebサイトがあります。 シーケンスそのものは複雑ではありませんが、複数種類のリクエストを送信していることを強調したいことがあります。 そんなときにサッとシー…

ブラウザからJavaScriptモジュールをjQueryとともに使う

ブラウザでJavaScriptモジュールが使えるようになりました。 <script type="module">って書くやつです。 これを使うとimport/exportを使ってモジュール感の依存関係が解決できます。 これまでは人間がscriptタグの順番を決めるか、Webpackのようなモジュールバンドラーで事前処理す…

マクロスのミサイルみたいな矢印

こんな感じでX座標が同じ目標にむかう矢印は狭い範囲に集中してごちゃごちゃします。 同じ座標に向かっている矢印 そこでマクロスのミサイルみたいに各矢印に個性を与えます。 マクロスのミサイルみたいな矢印 正確に言うと逆です。 マクロスのミサイルは目…

FormData

FormData 先週、Form要素のデータがそのまんま欲しくて、はじめて使いました。 そのときは次のようにJSON形式で送信しました。 const formData = new FormData(document.bookForm); const name = formData.get("name"); const age = formData.get("age"); co…

webpack-dev-serverでsource mapが見つからなくて警告がでる

github.com を使ったJavaScriptプログラムをWebpackでビルドしています。 開発環境では、Google Chromeの開発ツールで次のような警告が表示されます。 webpack-dev-serverでsource mapが見つからなくてでる警告 小さくて見にくいですね。 node_modules/deepc…

変数topをoffsetTopとclientTopにわけるまで

背景 offsetTopとclientTopの使い分けについてです。 両者の違いはoffsetTopがoffsetParentからの相対値で、clientTopはブラウザの左上からの相対位置です。 offsetParentと言われても意味不明ですが、ここではposition: absoluteなHTML要素の一番近い先祖の…

generate-google-calendar-linkのバージョンを上げました

github.com 特に機能は追加してません。 セキュリティアラートが来てたので、たまにはアップデートしようかな?と、そんな気分になりました。 7年ぶりに触るので、いろいろ環境が変わっていました。 CIがtravisCI。travisのドメインが変わったとかで動かなく…

AngularJSの$httpの置き換え

AngularJSには$httpと言う名前のHttpClientが入っています。 どうせjQuery.ajaxのラッパーだろうと思って、次の感じでjQuery.ajaxに置き換えました。 取ってきた値が上手く反映出来ませんでした。 jQuery.ajax({ type: "get", url: "/books/100", dataType: …

ラジオボタンのイベントリスナーを設定する方法

html - How to use on addEventListener on radio button in Plain Javascript? - Stack Overflow なるほど、同じラジオボタンのname属性は同じなので、name属性でまとめて取れます。 次のような感じです。 for (const elem of document.querySelectorAll('[…

console.time

パフォーマンス計測に使えるJavaScript組み込みの関数です。 ブラウザでもNode.jsでも使える便利な子です。 developer.mozilla.org 基本はconsole.timeとconsole.timeEndをセットで使います。 console.time('ほげほげ処理に掛かる時間を測るぞい!') // なん…

Node.js 17でRails 6.1 の bin/webpackを実行するとエラーが起きる

Node.js 17がインストールされた環境でbin/webpackコマンドを実行すると次のエラーが起きます。 ~ bin/webpack node:internal/crypto/hash:67 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupport…

監視型MVCの残骸を解体するリファクタリング

監視型MVCで書いていたブラウザアプリケーションがあります。 個々のレンダリングロジックが高速化されたので、非同期にレンダリングするのをやめ、MVVM風に書き直しています。 レンダリングロジックをモデルの中に移動し、モデルの変更に応じて同期的に呼び…

ブラウザでdivが表示されているか判定する

Firs Meaningful Paintの高速化 Webアプリケーションの初期描画をを早くしたいです。 今風に言うとFirst Meaningful Paintの高速化です。 大量のデータを読み込んだ際にすべての情報をレンダリングすると時間がかかります。 最初は、HTMLページの上の表の表…

Passive event listeners

iPadのSafariでタップした瞬間の選択文字列が取得したいです。 mousedownイベントは、文字列選択が解除されてから発火します。 そこでtouchstartイベントを監視することにしました。 するとChromeで見慣れない警告が出てきました。 touchstartイベントを監視…

input type="text"とtextareaをまとめて呼ぶ名前を知らないので、Text Fieldsと呼ぶことにした

こんな感じでアプリケーション独自のコピー処理を実装していました。 document.addEventListener('copy', (clipboardEvent) => { // アプリケーション独自の情報をクリップボードに書き込む clipboardEvent.clipboardData.setData('text/plain', 'こんにちわ…

iPad Safariのユーザーエージェント文字列はiPadではないし、なんならIntel入ってるまである

iwb.jp ↑の通りです。 /iPad/.test(navigator.userAgent) || /iPhone/.test(navigator.userAgent) 2週間程前に、こういう条件式を書いて、iPadのGoogle Chromeでちゃんと判別できることを確認して安心していました。 今日試しに、Safariで開いてみたら、iPad…

color.js の謎のissue

Javascriptingに見慣れないissue Project may have been compromised. Large amount of ASCII art instead of lesson · Issue #327 · workshopper/javascripting · GitHub が作られました。 参照されている issue Zalgo issue with `v1.4.44-liberty-2` rele…

カット対象要素をマーキングするタイプのカットアンドペーストで、続行不能になったときのマーキング解除タイミング

複数エディタ間でのコピーアンドペーストを実現するためにシステムクリップボードを使っています。 カットアンドペーストも出来るようにしたいです。 ただし、このカットはテキストエディタとはちがい、カット操作したときはカットは行わずにマーキングだけ…

ユーザーエージェント文字列の扱いやすいAPIはあるのか?

ledsun.hatenablog.com 先月ぐらいからユーザーエージェント文字列をみて、端末の判別をしはじめました。 AndroidとかiPadとかiPhoneとか特定の文字列が含まれるかだけチェックしています。 ユーザーエージェント文字列を扱うAPIは、汎用的な設計ができるも…

JSDocでVSCodeにヒントを与えてGo To Definition

JavaScriptでプログラミングをしていて、ある程度規模が大きくなると、扱っている変数にはいるオブジェクトがどんなメソッドやプロパティをもっているのかを、静的に(プログラムを動かさずに)知りたくなります。 すわTypeScriptとなるところですが すでに…