1
/
5

JavaScript

CSS-in-JSライブラリ Linaria vs. Compiled 覚え書き

前提知識 CSS in JS: CSSをそれに対応するコンポーネントと同居させて(一般的にはJavaScriptファイル内に)書く技術の総称。コンポーネントからスタイル定義への依存関係が細かく管理でき、UIコードの凝集度も上がるメリットがある。 CSS Extraction: CSS in JSで記述されたCSS...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
5 months ago,

JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する

Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介し...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
10 months ago,

ECMAScript Record & Tuple polyfill はどのようにして実装されているのか

Record & Tuple とは Record & Tuple は ECMAScript (JavaScript) に対する提案段階の機能で、構造化データのためのプリミティブ型を提供するというものです。RecordはObjectのプリミティブ版、TupleはArrayのプリミティブ版にあたります。 プリミティブ...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
12 months ago,

HTML+CSSで作る汎用タッチエリア

タッチエリアとは タッチエリア (touch target) とは、UIコンポーネントがクリックやタップなどの座標指定の操作に反応する範囲のことです。操作性をよくするために、タッチエリアは意図的に見た目上の大きさよりも大きく確保されることがあります。 Touch targets are the parts of ...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

JavaScriptのカスタムエラーはこれでOK

JavaScriptでは任意の値を例外としてthrowすることができますが、実際にはError のインスタンスをthrowするのが慣例です。 エラーの原因をより正確に説明したいときはErrorを継承するのが望ましいですが、単に継承するのではなく以下のように書くのがオススメです。 class MyError ext...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

ES Modulesでオブジェクトをバラしてエクスポートするには「exportと分割代入の併用」が便利そう

例 こんな感じでエクスポートできます。 export const { foo, bar, baz, } = myObject; 単にexportと分割代入を併用できるというだけの話なので、すでに知っている人には何ということもない話かもしれませんが、筆者は今まで思い付かなかったのでこうして記事にしました...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

バックグラウンドタブ内のsetTimeout/setIntervalのスロットリング挙動

主要ブラウザは表示していないタブのsetTimeout/setInterval間隔を間引くことが知られています。 この挙動について調査してみました。 実験的に確認する まずは挙動を実験的に確認してみます。この方法はいつでも簡単に実施できるので、未知のブラウザや新しいバージョンに対しても容易に結果を得ることができま...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

JavaScriptでカバレッジ測定を入れたら $v is not defined が出た問題の顛末

何が起こったのか babel-plugin-istanbulでカバレッジを計測しようとしたらCI上でCypressのテストが落ちるようになった 原因はアプリケーションコードが Function.prototype.toString に依存していたことにあった コードの一部をWorkerに送って実行するために Fu...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例

Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要 Node.jsにはNative ESMというモードがある。 Native ESMはまだ普及していないが、ライブラリ側の更...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

Storyshotsを止めてスナップショットテストの仕組みを自作した話

Storybook はWebフロントエンド向けのUIモックアップのフレームワークです。 あらかじめUIコンポーネントをデータストア非依存で作っておけば、そのモックアップを作ることができます。(モックアップといっても、バックエンドに繋がっていないだけで、ユーザーの操作には反応するというものを考えています。) S...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

RPCから変数捕獲まで。SWCプラグインとBabelプラグインを徹底比較する

はじめに SWC はRust製の高速なJavaScriptトランスパイラです。 (minifierやbundlerなど他の機能の実装も進められていますが、現時点ではトランスパイラとしての役割が主です) この分野ではもともとJavaScript製のBabel というツールが広く使われています。そのBabelには強...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

RailsのブラウザテストでJavaScript側のエラーを出力する (RSpec + Selenium + ChromeDriver)

Railsのブラウザテストでブラウザ側のエラーを表示するようにしたため、その方法を残しておきます。 (内部向け: この変更は #65868 で適用されました。) はじめに ブラウザテストではユーザーからみた振舞いを調べるため、テストの成否はブラウザの外側 (RailsであればRuby側) からのクエリによって判...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

ライブラリ作者におすすめしたいBabelの新機能 babel-plugin-polyfill-corejs3

Babelの新しいpolyfill用プラグインであるbabel-polyfills が2022年4月に脱experimentalを果たしていました。そこで本稿では、Babelにおいてpolyfillがどのように扱われていたかを振り返りながら新しいpolyfill pluginを紹介します。 注意: Babel 7...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

hi18n (i18nライブラリ) の使い方: 翻訳IDを動的に決定する

hi18nとは hi18n は現在Wantedlyで開発中の、TypeScript/JavaScript向け翻訳テキスト管理ライブラリ (i18nライブラリの一種) です。 基本の使い方は以下の記事で説明しています。 本稿では発展的な使い方として、条件に応じて異なるメッセージを出し分ける方法について説明します。...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,

hi18n (i18nライブラリ) の使い方: メッセージフォーマット編

hi18nとは hi18n は現在Wantedlyで開発中の、TypeScript/JavaScript向け翻訳テキスト管理ライブラリ (i18nライブラリの一種) です。 基本の使い方は以下の記事で説明しています。 本稿では発展的な使い方として、メッセージフォーマットの構文を紹介します。 メッセージフォーマ...

Masaki Hara
Masaki Hara
DXエンジニア (Developer Experience)
,
space-avatar-image
Wantedly Engineer Blog
Wantedlyのエンジニアによる、テックブログです。開発者向け技術情報を中心に発信しています。「シゴトでココロオドル人をふやす」というミッションを掲げ、ビジネスSNS Wantedly （ウォンテッドリー）を展開しています。
Followers
422
Posts
8,837
Likes
space-external-link-icon
Wantedly, Inc.

タグや日付から探す

タグ
日付