タグ

ブックマーク / zenn.dev/qnighy (32)

  • JavaScriptのレガシー挙動を定めたAnnex Bをひたすら読む記事

    ECMAScript Annex Bおよび関連する仕様を読みます。 おことわり 言うまでもありませんが、ここで説明されている機能は使わないようにしましょう。 筆者がJavaScriptを書き始めたのは2005年頃で、その後2010年代は実質的な空白期間でした。そのため記事に含まれる歴史的背景の説明は、2005年頃の筆者が学んだ内容に加えて、当時の資料を遡って調査した結果に基づいて記載されています。できる限り信頼性の高い情報を見つけた上で記述するよう心がけましたが、当時常識だった知識の欠落等により不正確な記述になっている部分があるかもしれません。もし誤り等があったら指摘いただけると嬉しいです。 現在のzennでは <sub></sub> や <ins></ins> は描画されていませんが、心の目で下付き文字や下線装飾に読み替えてください。 ECMAScript Annex B とは ECM

    JavaScriptのレガシー挙動を定めたAnnex Bをひたすら読む記事
  • TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022

    おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (

    TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
  • JavaScriptの識別子

    JavaScriptの識別子として使えるもの・使えないものに関して整理しました。 識別子、予約語、キーワード ECMAScriptでは識別子、予約語、キーワードを以下のように使っています 識別子 (identifier) とは、ざっくり言うとローカル変数名に使える名前のことです。が、この定義は細かいことを言うと状況によってぶれがあり複雑です。これを細かく見ていくのが記事の主眼です。 例: foo 規格上は Identifier がこれに相当しますが、様々な例外を勘案するとこれをそのまま使うのが自然とは言えないため、以降では微妙に異なる定義を採用します。 予約語 (reserved word) とは、識別子と同じ形式であるにも関わらず識別子としては使えないもののことです。 例: if, public (strict modeの予約語だが、使い道はない) 非例: async (識別子として自

    JavaScriptの識別子
  • TypeScriptのJSDocサポートでできること、できないこと

    TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 稿ではタイトル通り、TypeScriptJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri

    TypeScriptのJSDocサポートでできること、できないこと
  • TypeScriptコンパイラの読み方

    TypeScriptコンパイラリーディングをする上で、目当てのコードに辿りつくまでの手間を短縮するためのメモ書きです。コードリーディングの一般論や、TypeScriptコンパイラから読み取れる個別事象については極力省略しています。 TypeScriptの主要な処理系 多くのJavaScriptパーサーが拡張としてTypeScriptを読めるようになっています。また抽象構文木のフォーマットに事実上の標準があり、各パーサーはそれに従っています。AST Explorerでこれらのパーサーの出力を調べることができます。特に重要なのが以下の2つの処理系です。 TypeScript TypeScriptの型推論・リント・トランスパイル・モジュールバンドリング等ができる。 Babel TypeScriptトランスパイルができる。 TypeScriptコンパイラの構成 libに標準ライブラリ (型定義フ

    TypeScriptコンパイラの読み方
  • JavaScriptの非同期処理をじっくり理解する (3) async/await

    対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先

    JavaScriptの非同期処理をじっくり理解する (3) async/await
  • JavaScriptの非同期処理をじっくり理解する (2) Promise

    対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順

    JavaScriptの非同期処理をじっくり理解する (2) Promise
  • JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー

    対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方

    JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
  • JavaScriptのIterator / Generatorの整理

    目的と対象読者 IteratorとIterableとGeneratorとGenerator Functionの区別が曖昧な人 (記事前半) Generatorの制御フローを完全理解したい人 (記事後半) の理解を深めるための記事です。 まとめ IteratorとIterableの関係 Iteratorは狭義には呼び出し元の next 呼び出しに応じて要素を出力するインターフェースである。 IterableはIteratorを生成するインターフェースである。 IterableだからといってIteratorとは限らず、IteratorだからといってIterableとは限らない。しかし実際には多くのIteratorはIterableのインターフェースも実装している。 Iterableとコレクションは相互変換可能である。 Iterableは for-of ループで処理できる。 IteratorとG

    JavaScriptのIterator / Generatorの整理
  • CORSの仕様はなぜ複雑なのか

    Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別

    CORSの仕様はなぜ複雑なのか
  • ジェネリクス引数の構文的曖昧性まとめ

    ジェネリクスを持つ多くの言語では括弧の種類が足りなかったり、既存の文法との互換性を保つために <> をジェネリクス引数に使っている。この文字は比較演算子やシフト演算子にも使われるため、多くの場合は構文的曖昧性の問題がある。 // ジェネリクス引数 (convert<int, string>(number)) // 比較演算子 (score < MAX_SCORE, score > (MIN_SCORE)) 各言語でこの問題をどのように解決しているか調べる。 関連する問題として < > を含むトークン (<<, >> など) をどう分割するかという問題があるが、こちらはスクラップでは扱わない。

    ジェネリクス引数の構文的曖昧性まとめ
  • TypeScriptにはanyが4種類、undefinedが3種類、……

    このツイートの解説をします。 TypeScriptにはanyは4種類、undefinedは3種類、nullは2種類、trueは2種類、falseは2種類、neverは5種類あるのか。普通に使ってる分にはわからないが…… TypeScriptでは表面上は同じ名前でも内部的に異なる型が割り振られている場合がいくつかあります。そのようなもののうち、プリミティブな型についてまとめました。 対象TypeScriptバージョンは4.1.3です。 2021-01-09 update: 数え方を見直しました。 any が4種類から6種類に増えました。 注意 ここに書かれていることを知らなくても、TypeScriptプログラミングにおいて全く困りません。あくまでコンパイラの機微を楽しむつもりでお読みください。 前提知識 any, undefined, null, true, false, never 型につ

    TypeScriptにはanyが4種類、undefinedが3種類、……