JavaScript - AyaExpTech

#CSS #JavaScriptCSS NestingがCSS読みづらい問題の解決策だと思っている綾坂 vs なんらかの理由でCSS Nestingが禁止されている環境ふぁいっ！0. node.jsが使える環境を用意しますMacの人は[このへん https://zenn.dev/shichi18/articles/20230325-01-50eb75b9096004]読むといいと思います

#JavaScript[** 結論]`/**``* 2つの整数の最大公約数を求めます。``* @template {number | bigint} T - 引数と返り値の型。numberまたはbigint。`

#JavaScript #HTML`globalThis.encodeURIComponent()`でできるあれです

#JavaScript`String.prototype.reverse()`なんてものはないです[** まとめ]for文でそういう関数を書いてもいい[サロゲートペア]や[Emoji ZWJ Sequence]を含むと壊れる

#JavaScript #Answer_by_Gemini_2.5_ProめっちゃGeminiのDeep Researchを使いました、昔の情報はなるべく人力でも弾いたはずです全体的な参考資料[キャンバスの最適化(MDN Web Docs) https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas]

#JavaScript[小なり演算子 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Less_than]は文字列UTF-16辞書順比較もできます`"﨑" > "𩸽" // Expected Eval Value : <boolean> true`それがわかっていればあとはやるだけですね`["﨑", "𩸽"].sort((a, b) => { const [A, B] = [String(a), String(b)]; return (A < B) ? -1 : (A > B) ? 1 : 0 }) // Expected Eval Value : <string[]> ['𩸽', '﨑']`

#JavaScript #Path2D`CanvasRenderingContext2D.prototype.isPointInPath(path, x, y, fillRule)`[MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath]点(`x`, `y`)が`path`の内部に含まれるか。

#JavaScript #HTML`Array.from(document.querySelectorAll("*")).map(el => el.innerText)`とかでいいと思った？残念、それだと被りが出る`<p>``ここで、<b>割る数の逆数を考える</b>。`

#JavaScript #JSDoc本来は[TypeScript]の機能っぽそうですが、[JSDoc]×[ts-check]環境でも使えます。型定義部分を別ファイルに逃がして(まとめて)、他のファイルからそれを参照することができます。`/**``* @typedef {[bigint, bigint]} RelationalNumber - 有理数`

#JavaScript #JSDocちゃんとまとめたほうがいいかもしれない[JSDocリファレンス https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html]をガン見[** タグ]`@type` : 変数の型の説明

#Mermaid.js #JavaScript要素名に半角丸括弧(`(`・`)`)を使おうとするとエラーが出ますダブルクォーテーションで囲ってもだめです[** 解決策]HTMLエンティティにエスケープする

#JavaScriptABC391-Dで知らなくてACを逃し、あとから教えてもらったのでちゃんとメモ。とりあえず一覧table:orderメソッド時間計算量

#JavaScriptdownloads APIとかあるらしいですけど権限周りの扱いがだるそうなので昔ながらの方法で行きましょう`/** @type {(file: File) => void} - ファイルをダウンロードさせる(ブラウザ限定) */``const downloadFile = (file) => {``const url = URL.createObjectURL(file);`

#JavaScript #JSDoc出てきたら書く[* 配列の中身]`[0, "red"]`←こういうのを表すときに、`/** @type {[number, string]} */`って書いていいAuthor : [綾坂こと]

#JavaScript #AtCoderゆる〜く始めてみようかと思って。高速化とかの知見を得ることができたらいいね`function Main(inputText) {``/** @type {String[][]} - スペース区切りと改行区切りをそのまま2次元配列に変えた状態 */`

#JavaScript`[0, 1, 2, 3, 4]`みたいなやつ。[** 0始まりの場合][Array.prototype.keys() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/keys]と[スプレッド構文 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spre

#JavaScript解釈した結果なんらかの値になる部分は全部「式」ですが、この優先順位は決まっています。演算子の種類に応じて19〜1の数字が割り当てられていて、数字が大きいものから順番に処理される、と考えるのが良さそう。[MDN Web Docs https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#%E4%B8%80%E8%A6%A7%E8%A1%A8]に全部書いてありますが、「これ演算子だったの？！」が多すぎたので軽く解説書きます

#JavaScriptどれでもいいなら先頭を持ってくるのが楽で、イテレーターを1回だけ使って放置するのが一番楽じゃないかな〜と`set.values().next().value`

#JavaScript任意テキストデータをURLのクエリパラメータを使って投げてしまおうのコーナー[** やること]> TL;DR. 通常のBase64で使う`+`, `/`, `=`がURLだと使えないので、それを使わないように`-`と`_`に置き換えるとりあえずBase64とURIエンコードを併用する ([【B】Base64エンコードを扱う]を参照)

#JavaScript[配列操作の時間計算量.js]に関連して、Setも一応O(1) …… うれしいポイント`.add()``.has()`

#JavaScript`const Double = (a) => a * 2;``export { Double };`これをDynamic Importしたければこう`const Double = await import("https://scrapbox.io/api/code/AyaExpTech/ES_Module%E3%82%92Dynamic_Import%E3%81%99%E3%82%8B.js/sample_module.mjs").then(module => module.Double);`

#JavaScript[ABC400-C https://atcoder.jp/contests/abc400/tasks/abc400_c]を解く過程でほしくなったので作りました二分探索なので[$ \mathrm{\Omicron(\log n)}]`/** @type {(n: bigint) => bigint} √nの整数部分を求める返り値をrとすると、r <= √n <= r+1 */`

#JavaScript #AtCoderhttps://atcoder.jp/contests/abc302/editorial/6408> C++ だと next_permutation 関数のような機能があります。> vector をソートした状態で渡すと、その列を並び替えて作ることが出来る列を全て列挙してくれます。> それぞれの言語でこのような関数が用意されていることが多いため、それを用いて実装をすればよいです。

#JavaScript素数列挙をしたいですねこんくらいついてないんです？？？`const sieveOfEratosthenes = (max) => {``const sieve = new Array(max + 1).fill(true);`

#HTML / #JavaScript / #CSS私がとりあえず書くやつをおいておきます参考になるなら最初のテンプレとして使ってくださいcf.[Webページ作成用のファイルテンプレート(ニューモーフィズムの場合)]

#JavaScript > #Canvas_APIできたんだ[.setLineDash() https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/setLineDash]でパターンを指定してあげると破線になります実線に戻すときは`ctx.setLineDash([])`現在のパターンは[.getLineDash() https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash]

#JavaScript > #Canvas_APICanvas上の図形に対して「この図形の上にマウスが乗ってたら」みたいなこと、やりたいですよね！！Ans. `CanvasRenderingContext2D.isPointInPath()`([MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath])とかいう「答え」があります

#JavaScript > #Canvas_APIプロパティもメソッドも多すぎるしどれがどれに使われてるのかわからなくなるので、カテゴライズしてみようのコーナーだいたいの描画で共通するやつよく使う[.fillStyle https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/fillStyle] …… 図形の内側を塗るときに使う色

#JavaScript`Array.prototype.slice()`を使います先頭`arr.slice(0, n)`末尾

#JavaScriptMapにソートメソッドはないので一回ArrayにしてソートしてからMapに戻す、以上

#JavaScript[holorhysm]で触れることになりそうなので、ちゃんと[MDN Web Docs]を読もうと思いましたそれ関連の記事がいくつか生えるかも

#JavaScript[構造化複製アルゴリズム https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm]はFunctionに対応してないけど、どうしても渡したいってときの妥協案は一応ある`Function.prototype.toString()`した文字列はFunction()コンストラクタで戻せる

#JavaScript[$ a]と[$ b]の最小公倍数を[$ l]、最大公約数を[$ g]とすると、以下の式が成り立ちます。[$ l = \frac{ab}{g}]あとはやるだけです、[最大公約数を求める.js]により`gcd(a, b)`が存在することを仮定します。`const lcm = (a, b) => a * b / gcd(a, b);`

#JavaScript #JSDochttps://zenn.dev/s1r_j/articles/f2db9413fe6b03fc1089そんな事できたんだすぎる`/** @typedef {\`${number}:${number}\`} Time */``/** @type {Time} */`

#JavaScript #JSDoc「引数がnumber2つならstring、string1つならnumberを返す」みたいなケース(さすがにそこまではないと思うが、とくに引数が複数パターンあるケースはそこそこあると思う)JSDocには`@pverload`というタグがあり、これで直後の関数に対して「引数と返り値の特殊ケース」を明示できるっぽいなので、全パターンを満たす`@param`と`@returns`を書いたうえで、その直前に`@overload`を使って特殊ケースを書いていけばいいらしい

#JavaScript`Path2D()`はSVGパスで作れるけど、それを拡大縮小したり平行移動したり変形したりしたいときにどうしようかという話ポイントは2つ1. `Path2D.prototype.addPath()`は第2引数に`DOMMatrix`をとれる[MDN Web Docs https://developer.mozilla.org/ja/docs/Web/API/Path2D/addPath]

#HTML #JavaScriptcf. https://qiita.com/memolog/items/a8fb8b39b840adca4d89`<link rel="preload" as="style" href="async_load.css" onload="this.rel='stylesheet'">`非同期ロードならレンダリングをブロックすることはないらしいので、読み込み速度改善に有効

#JavaScriptcf. [IEEE754倍精度浮動小数点数のビット列を対応するJavaScriptのnumberに変換する.js][Zahlen.js]の都合で有理数の形にしたいんですよね`/** @type {(binary: string) => {n: bigint, d: bigint}} - binaryは0か1で構成された64文字の文字列。binaryで表されるビット列をIEEE754倍精度浮動小数点数として読んだときのnumberに等しい有理数n/dのnとdを返す */`

#JavaScripthttps://developer.mozilla.org/ja/docs/Web/API/Element/click_event> click は mousedown および mouseup イベントの後、順番通りに発生します。なのでmouseupイベントのあとに見はじめても捕まえることができます`document.body.addEventListener("mouseup", event => {`

#JavaScript2024-12-04追記 : numberが表している値をそのまま変換する方法を用意しました[JavaScriptのnumberを内部表現のビット列に変換する.js][IEEE754倍精度浮動小数点数のビット列を分数に変換する.js]分母1の場合からやってくしかなくない？

#JavaScript前n文字、後ろn文字って使うよね`const n = 4;``const string = "123456789";``string.slice(0, n) // Expected Eval Value : {String} "1234"`

#JavaScriptそういうことをやる`URL.parse()`というものがありますhttps://developer.mozilla.org/ja/docs/Web/API/URL/parse_static`String(URL.parse("./a.js", "https://example.com/b/c.js")) // Expected Eval Value : <string> "https://example.com/b/a.js"`

#JavaScript #jsDelivr`https://cdn.jsdelivr.net/gh/`から始まってるURLを`https://purge.jsdelivr.net/gh/`にして一度アクセスしてあげればいいらしいcf. https://hellolyh.xlog.app/jsDelivr-shua-xin-huan-cun

#JavaScript覚えろよこんくらい`array.reduce((a, v) => a + v, 0)`

#JavaScript複素数型がなくてもなんとかなるのよ方針実数解3つの場合は「ビエトの方法」3重解持ちの場合は微分した2次方程式を解く

#JavaScript実質ワンライナーでできるんですよこれ`/**``* 2次方程式の実数解を導出します。``* @param {Number} a - x²の係数(0を除く実数)`

#JavaScriptJavaScript民の変態極まれりって感じ[/icons/hr.icon][** 0. JSF**kとは？]わずか6種類の文字だけで任意のJavaScriptのコードを実行できる、っていう超変態縛りです

#JavaScriptあまりにも頻出すぎるのになぜかこのScrapboxにかかれていない、なぜ`Array.prototype.sort()`を使えばすぐできます。引数に関数を渡す必要があるので注意。`const array = [0, 3, 7, 2, 6, 9];`

#JavaScript逆 → [IEEE754倍精度浮動小数点数のビット列を対応するJavaScriptのnumberに変換する.js]Q. いつ使うんやA. [Zahlen.js]の都合でnumberを有理数近似したくて……`/** @type {(num: number) => string} - numberを「そのnumberがIEE 754倍精度浮動小数点数ではどのようなビット列で表現されるか」を表すstringに変換 */`

#JavaScript逆 → [JavaScriptのnumberを内部表現のビット列に変換する.js]`/** @type {(binary: string) => number} - binaryは0か1で構成された64文字の文字列。binaryで表されるビット列をIEEE754倍精度浮動小数点数として読んだときのnumberを返す */``const binaryStrToNumber = (binary) => {`

#JavaScriptfrom [JavaScriptで有理数を扱いたい.js]複素数まで扱いたいとなったのでそういうライブラリを作りますAuthor : [綾坂こと]