タグ

ブックマーク / zenn.dev/cybozu_frontend (4)

  • TypeScript 5.5 で追加された正規表現構文チェックを理解する

    TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー

    TypeScript 5.5 で追加された正規表現構文チェックを理解する
  • 拡張性に優れた React Aria のコンポーネント設計

    React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos

    拡張性に優れた React Aria のコンポーネント設計
  • 明示的な型注釈によって推論コストを下げるというアプローチ

    近年、TypeScript を取り巻くエコシステムでは、ユーザーに明示的な型注釈を求めることで、推論や型生成のコストを下げるというアプローチが注目されています。TypeScript 5.5 beta で 発表された --isolatedDeclarations オプションはその代表的な機能ですし、Deno の提供する新しいパッケージレジストリ JSR が提唱している slow types という考え方も同様のアプローチを求めるものです。 この記事では、上記のようなアプローチが提案された経緯や解決したい課題について、TypeScript を利用するエコシステムの状況も踏まえて整理します。 TypeScript を取り巻くツールチェインと型情報を利用する上でのパフォーマンス 皆さんがご存知の通り、TypeScript の型推論は非常に賢く、その機能は日々アップデートされています。特に以下のよう

    明示的な型注釈によって推論コストを下げるというアプローチ
  • !importantで上書きできないブラウザのスタイルとは

    !important はすべてを上書きできるのか? CSS において話題に出すといろいろな意味で盛り上がるキーワードが!importantです。 CSS でのスタイル宣言時に!importantを付与すると、細かな詳細度の差異などを無視して強制的にスタイルを適用できます。濫用するとあっという間に無秩序になるため、一般的には慎重な利用が推奨されることが多いです。 さて、ではこの!importantですが、何もかもを上書きできるのでしょうか? 実際のところそうではありません。今回は、CSS 仕様をいろいろと調べているうちに、!important で上書きできないスタイルの存在を知ったため、その情報をまとめてみました。 CSS における Cascade Sorting Order CSS は Cascading Style Sheets という名前の通り、カスケードと呼ばれる仕組みでスタイルの適

    !importantで上書きできないブラウザのスタイルとは
  • 1