JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
JavaScript Primer 4.0.0: ECMAScript 2022に対応したJS本
JavaScript Primer(jsprimer.net)が、ECMAScript 2022(ES2022)に対応しました。 リリースノート: Release v4.0.0: ES2022 · asciidwango/js-primer これまでのjsprimer ECMAScriptの仕様書は毎年更新されるので、それに合わせてjsprimerも更新しています。 1.0.0(ES2019): JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ 2.0.0(ES2020): JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました 3.0.0(ES2021): ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門 今回のアップ
JavaScriptのTypedArrayについて - console.lealog();
調べたのでメモ。 TypedArray TypedArray - JavaScript | MDN いわゆる型付き配列。 通常の配列と違って型が固定できる分、内部的に最適化がしやすいとか諸々で住み分けられてる。 そういう意味で一般的なフロントエンドのJavaScriptコードで出てくることはそうそうない。 たとえばWebAudioとか、CanvasとかWebGLとか、いわゆるバイナリに近い処理をブラウザでやる場合に必要になるAPIたち。 Node.jsだと、`Buffer`っていうそれ用のクラスがあったりする。 種類 Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array BigInt64Array BigUint64Arra
JavaScriptのコードには、こんな書き方もある
この記事はコードの書き方について、書き方そのものを推奨するものではなく、このような書き方も出来るという紹介です。コメント欄まで一緒にみていただくと学びになります。 ※記事はいただいたコメントを反映しましたので、当時のコメントと記事の内容に差分があります 1.破壊的メソッドを避ける 破壊的メソッドとは、元の配列の要素を変えるメソッドです。以下の例ではconstで宣言した変数numbersが、pushメソッドにより更新されています。 対応前 const numbers = [1, 2, 3] numbers.push(4) console.log(numbers) // [1, 2, 3, 4] この場合、元の配列の要素を更新するのではなく、スプレッド構文を使って新しい変数に代入します。変数はなるべくイミュータブルにしておくと、意図しない不具合やプログラムの可読性や保守性が向上します。push
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
[React]ContextAPIのアンチパターン
ContextAPI と useState は本来組み合わせてはいけない ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。 アンチパターン Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。 i
![[React]ContextAPIのアンチパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/272a515da385a1f469e3be36a2c50fa6ade78082/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bZLUf-z---%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255DContextAPI%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%252591%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TinyBase
(Baffled by all these logos? Check out our architectural options guide to make sense of it all!) Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. import {create
Qwikというフレームワークについて - console.lealog();
GitHub - BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思ってたやつ。 昨今の覇権を握ってる系のJavaScript-firstなフレームワークたちとは違い、HTML-firstを謳うユニークなアプローチをしてるのが一番の特徴。 中の人による一連のシリーズもあって、そこも読んでまとめてみた記事です。 Qwik Series' Articles - DEV Community Qwikの特徴 遅いモバイル環境だとしても、
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
忘れやすい、複雑なJSONの要素をfor...in文で取り出す方法 - Feel Physics Backyard
配列、連想配列、単純なJSON、項目によってプロパティの中身が異なるような複雑なJSONの要素を、for...inループで取り出すことができます。しかし、やり方に統一感がなく、忘れやすいので、まとめておきます。 // 配列 var list = ['ハンバーグ', 'カレー', '親子丼']; // 連想配列 var hash = {名前: 'ハンバーグ', 分類: '洋食', 主成分: 'タンパク質'}; // 単純なJSON var json = { ハンバーグ: { 分類: '洋食', 主成分: 'タンパク質' }, カレー: { 分類: '洋食', 主成分: '炭水化物' }, 親子丼: { 分類: '和食', 主成分: 'タンパク質' } }; // 複雑なJSON var complexJson = { ハンバーグ: { 分類: '洋食', 主成分: 'タンパク質' }, カレ
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
先日、このようなツイートを書きました。 久しぶりの JavaScript クイズ。 JavaScript において NaN === NaN の結果は次のうちどれになるでしょうか？ — Takuo Kihira (@tkihira) September 7, 2021 答えは 4 の「状況によって上記以外もありうる」です。でも、2 や 3 を選んだ方も、もはや正解だといって差し支えないと思います。 解説が長くなったので、ブログ記事にまとめました。 そもそも NaN とは NaN は “Not a Number” を意味する数値です。数値なのに「Not a Number」というのは違和感があるかもしれませんが、数値表現することが出来ない状態を保持するために便宜的に用意された数値、というようなものです。 NaN は、浮動小数点演算において数値では表現出来ない計算をしようとすると登場します。例えば
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
JavaScriptに密かに存在する“無名関数宣言”
この記事では JavaScript エンジニアがしてしまいがちなある誤解を紹介し、それがなぜ誤解なのかを解説します。 その誤解とは、「関数宣言には必ず名前が必要である」ということです。これはexport defaultの場合に例外が存在しているため、誤解となります。 JavaScript の関数宣言 JavaScript で関数を作る方法は色々ありますが、その中でもfunctionキーワードを用いる方法は初期から存在しています。functionキーワードを用いて関数を作る場合は関数式と関数宣言の 2 つに大別されます。関数式はその名の通り式である一方で、関数宣言は文のように使用され、巻き上げ (hoisting) の挙動を持つことが特徴的です。 // 関数式 const func = function (num) { return num * 2; }; console.log(func(
アクセストークンをWebWorkerで扱う - console.lealog();
というアプローチを紹介してる記事があって、なるほど？と思ったのでまとめてみる。 元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。 元記事いわく WebWorkerであれば、メインスレッドで実行されるであろうXSSや3rdのコードから触れないので安全！ 設計としては、 メイン: まず`Worker`をロード メイン: 初期化のメッセージを`postMessage()` クレデンシャルがあるならそれを渡す ワーカー: アクセストークンの準備 受け取ったやつ or そこで`fetch()`して、オンメモリに保存 （これで準備OK） メイン: APIにリクエストしてほしいと`postMessage()` ワーカー: APIに向けてアクセストークン
An introduction to WebAssembly for JavaScript Developers
If you transmit a number whereas an integer encoded on 64 bits is expected you will get an exception: let run = async () => { try { let bytecode = await fetch("add/add.wasm"); let wasm = await WebAssembly.instantiateStreaming(bytecode); console.log(wasm.instance.exports.addInt64(1,2)); } catch(e) { console.error(e); } }; > run().then(); TypeError: wasm function signature contains illegal type Call
Web worker meets worker threads - threads.js
Transparent API Write code once, run it everywhere – in web workers and node worker threads. Call workers transparently, await results. It's never been easier. // master.js import { spawn, Thread, Worker } from "threads" const auth = await spawn(new Worker("./workers/auth")) const hashed = await auth.hashPassword("Super secret password", "1234") console.log("Hashed password:", hashed) await Thread
Google発のJavaScriptで書けるシェル 「zx」 | DevelopersIO
Introduction シェルを書きたいときにBashは手軽に使えるけど、 少し込み入ったスクリプトを書こうとするとちょっと面倒。 NodeいれてJavaScript書くのもいいけど、 いろいろセットアップが手間。 そんな人にピッタリはまるかもしれないのがzx。 Google発、JavaScriptで記述できるシェルです。 Top Level await使ってシェルコマンドがそのまま使用可能です。 また、Promise.allでコマンド並列実行ができたりするので便利です。 Environment OS : MacOS 10.15.7 Node : v14.16.1 Top Level awaitがサポートされたNode(v14.8)以降が必要ぽい？ Setup では早速セットアップしてみます。 npmでzxをグローバルインストール。 % npm i -g zx % zx usage: z
JavaScript にイミュータブルな配列操作メソッドを導入するプロポーザルについて
この記事では、現在 Stage 1 のプロポーザル Change Array by copy について解説する。 プロポーザルの詳細については、https://github.com/tc39/proposal-change-array-by-copy を参照してほしい。 また、ここで紹介した仕様に関しては今後更新されていく可能性がある。 概要 Change Array by copy は、簡単にいえばイミュータブルな配列操作メソッドを導入するプロポーザルである。 JavaScript の配列には多くのインスタンスメソッドがあり、それらを使って配列を操作できる。 配列のインスタンスメソッドには、ミュータブルなもの、つまりもとの配列を変更することによって配列を操作するタイプのものがいくつかある。 たとえば、Array.prototype.push や Array.prototype.pop、A
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
