index signature インデックス型： {[k : T] : S} の形で書ける型 いや違う、オブジェクト型やマップ型のインデックス集合の型を index signature と言っているのかな。 indexed access 型： T[K] という二項の型演算、または型演算で作られる型。特定の型や…

例によって用語がややこしい。 型述語は、value is string のような構文。タイピング述語、タイピング関係といったほうが良いが、「型述語」。これは、型ガード関数や型アサーション関数の戻り値位置に書く形式。 型ガードが実は述語〈ブール値をとる関数〉…

Constructor Assignment と呼ぶようだ。いつもの決まりきった書き方を短く書ける。 interface Container { context : Bunch; outcome : Wire | null; } class Stage implements Container { constructor(public context : Bunch, public outcome: Wire | nul…

Objectはオブジェクト型だけでなくて、ボクシングしてオブジェクトになるものも含まれる。null以外なんでもいい。{} が Object と同義なのは、どうかしている。object は {[key: (string|number)] : any} と同義かな？ たぶん。いずれにしても整合性がない。

TypeScriptの型定義がすごい進化しているな。 type Props = { name: string, [key: string]: any }; type Props2 = { name: string, } & { [key in string]: any }; JavaScriptのcomputed property names と Mapped types もある。使えるぞ。次の型表現は期…

デリゲーション・パターンにおいて、仕事の依頼主をクライアント（またはカスタマー）、依頼される先である代理業者をヘルパーと呼ぶことにする。掃除代行業者とかがヘルパーだと思えばよい。 ヘルパーの仕様記述 ヘルパーが何ができるかは、インターフェー…

mixinタグ @mixin [<MixinName>] A mixin provides functionality that is intended to be added to other objects. If desired, you can use the @mixin tag to indicate that an object is a mixin. You can then add the @mixes tag to objects that use the mixin.</mixinname>…

https://html.spec.whatwg.org/multipage/scripting.html からの図（asyncdefer.svg）：わかりやすいし示唆に富んでいる。 <script> は書いた順にロード（フェッチ＆パーズ＆実行）される。したがって、実行順は保証される。 <script> は、メインスレッド（HTMLパーズ＆描画…

次のコマンドを実行する： npm create vite@latest 。次のオプションを選ぶ。 Vanilla, JavaScript Vanilla, TypeScript PowerShellのデフォルトだと、画面の文字が一部読めない。wt とか cmd.exe がいいかも。JavaScript と TypeScript の場合で比較してみ…

本編の JavaScriptは2つの言語になったんだね - 檜山正幸のキマイラ飼育記 (はてなBlog), CommonJSは遠からず消滅するだろう - 檜山正幸のキマイラ飼育記 (はてなBlog) でも書いたが、現状のモジュールシステムは錯綜していて鬱陶しい。将来的にはESM方式に…

グローバルモジュールと内部モジュール〈名前空間〉は述べた。 TypeScriptグローバルモジュール - (新) 檜山正幸のキマイラ飼育記 メモ編 TypeScript内部モジュール - (新) 檜山正幸のキマイラ飼育記 メモ編 CJSモジュールも僕は使いたくはないが、実際はま…

コードが書いてあるファイルへの参照と、コードのインライン埋め込みが同じタグだったのは気にいらないが、それを言っても詮無いこと。 参照なら： src 属性を付けて要素内容は空。 埋め込みなら： src 属性を付けずに、要素内容に書く。 nomodule属性（存在…

今は「名前空間〈namespace〉」に変わり、これも推奨はされてないようだが、内部モジュールという仕掛けもある。グローバルモジュール（include方式）も内部モジュールも、ESM以前のナンチャッテモジュールのメカニズムを採用している。手動で書いていた var…

モジュールロード／非モジュールロード - (新) 檜山正幸のキマイラ飼育記 メモ編 の続き。今は非推奨の古い方式だが、TypeScriptのimport構文もどきがある。 /// <reference path="lib-foo.ts"> /* main.ts */ C言語の include に近い。コンパイル時に lib-foo.ts の内容が見える。一応、</reference>…

古い方式： <script src="lib-common.js"> <script src="lib-foo.js"> <script src="lib-bar.js"> <script src="main.js"> 直接的依存関係は（仮定）： main → lib-foo main → lib-bar lib-foo → lib-common lib-bar → lib-common scriptタグの並びを見ても依存方向／依存可能性は分かるが、ほんとの依存関係は分からない。次のようにすればハッキリする。 main で …

古いブラウザには読ませない、モジュールロード構文 ： <script type="module" src="パス"></script> 新しいブラウザには読ませない、非モジュールロード構文 ： <script nomodule src="パス"></script> 新旧共通の非モジュールロード構文： <script src="パス"></script> モジュールコードはモジュールオブジェクト＝関数フレーム（スタックではなくヒープだが）内で実行…

Quoraの「TypeScriptって気持ち悪くないですか？」なる質問に、以下のコードと共に： Aだと変数aに代入するときにエラーにならないのですが、Bだと変数aに代入するときに型のエラーになるんです。 え、なんで？同じ動きしているはずなのに。 const getA = ()…

declare は実はどこに書いてもいい。.d.tsファイルじゃなくてもいい。が、アンビエント宣言だけ切り離してまとめておいたほうがいいので、.d.tsファイルがある。.d.ts ファイルに関する特別な扱いの規約・メカニズムも整備されている。 declare var -- 変数…

(1) (2) なんか面白い、作者 Fuzzyma〈Ulrich-Matthias Schäfer〉の発想が面白い。 WantToDo指向 「何をするか／したいか」に注目する発想をWantToDo指向とでも呼べば、FuzzymaはWantToDo指向で、次のToDo〈Doing〉を設定している。 creating オブジェクトを…

https://svgjs.dev/docs/3.0/events/ を読んで。文書を読むと次のように読める。null = {null}。 signature Element { sort self operation click: (self, ClickHandler) → self operation click: (self, null) → self }同じような方式で、dblclick, mousedo…

まず重大な注意： npm i svg.js と npm i @svgdotjs/svg.js では違うものがインストールされる。 Plumb > npm list +-- @svgdotjs/svg.js@3.1.2 +-- @types/jest@28.1.4 +-- @types/node@18.0.3 `-- svg.js@2.7.1 svg.js は開発が止まっているかも知れない。…

NPMによるスキャフォールド - (新) 檜山正幸のキマイラ飼育記 メモ編 の続き。npx ≡ npm exec の一時インストール先だが、Linux で ~/.npm/_npx/ らしいがWindowsでは %USERPROFILE%/AppData/Local/npm-cache/_npx/ ここを見ると確かにパッケージがインスト…

最近は、NPMだけでプロジェクトのスキャフォールディングができるようだ。例えば、vite〈ヴィート〉のセットアップは： npm create vite@latestnpm create は npm init の別名〈エイリアス〉、i.e. npm create <initializer> ≡ npm init <initializer> 。npm init のマニュアルは： htt</initializer></initializer>…

<html> <head> <meta charset="UTF-8" /> <title>Import JSON</title> </head> <body> <script type="module"> import myJson from './external.json' assert {type: 'json'}; console.dir(myJson); </script> </body> </html> いくつか問題がある。 import/assert はまだ対応してないかも知れない。assertなしでも、拡張子で判断してJSONファイルをインポー…

全ての道はRomeへ続くのか - これからのJavascript開発を考える に、Rome の情報あり。そこにあったツールの分類： トランスパイラ（Babel,esbuild,SWC） バンドラ（webapck,Parcel,rollup） 型チェック（Typescript,flow） リンター（ESLint） フォーマッタ…

DOMツリーが完了しないと、DOM操作はうまくいかないが、この程度だとbodyの最後にscriptを書けば問題ないようだ。 <html> <head><title>SVG Test</title></head> <body> <h1>Hello SVG</h1> <script> const svgNS = "http://www.w3.org/2000/svg"; var body = (document.getElementsByTagName("body"))[0]; var svg = </body></html>…

ツールの分類が難しい。境界線がハッキリしないし、実際複数の役割を兼務しているソフトウェアが多そうだ。つまり、だいぶ機能重複があるってこと。 バンドラー： 複数のファイルをまとめて単一または少数のファイルにする。 互換性トランスパイラ： JavaScr…

比較的に概念的な話、雑多： HTML element と DOM node は同義語だと思ってよい。 connect elements とは、DOMノードを繋ぐ行為。 コネクションという名詞は、繋がれた要素／ノード達からなる構造物を指す名詞。 コネクションを作る行為を表す動詞が connect…

概念編： コネクションがjsPlumbの中心概念。コネクションは次の相互依存した5つの概念にブレークダウンされる。 アンカー エンドポイント コネクター オーバーレイ グループ 言葉の響きと違う意味もあるので注意（いつものことだが）。 Graphvizとの対比で…

コミュニティバージョンと有償バージョンあり。コミュニティバージョンのドキュメントは https://docs.jsplumbtoolkit.com/community 。サンプルの一枚HTMLは： https://gist.github.com/productivity-for-programmers/6ef09ef5ccd5ab62a2d259d4c7260376 パ…