JavaScriptのカスタムエラーはこれでOK | Wantedly Engineer Blog
JavaScriptでは任意の値を例外としてthrowすることができますが、実際にはErrorのインスタンスをthrowするのが慣例です。 エラーの原因をより正確に説明したいときはErrorを継承するのが望ましいですが、単に継承するのではなく以下のように書くのがオススメです。 class MyError extends Error { static { this.prototype.name = "MyError"; } }その背景について以下で説明します。テーマは以下の3つです。 nameプロパティcaptureStackTracecauseプロパティnameを正しくセットするNode.jsでエラーを表示させると、クラス名が正しく表示されます。 > throw new (class C extends Error {})() Uncaught C [Error]ここで出力されている "C
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
Storyshotsを止めてスナップショットテストの仕組みを自作した話 | Wantedly Engineer Blog
Storybook はWebフロントエンド向けのUIモックアップのフレームワークです。 あらかじめUIコンポーネントをデータストア非依存で作っておけば、そのモックアップを作ることができます。(モックアップといっても、バックエンドに繋がっていないだけで、ユーザーの操作には反応するというものを考えています。) Storybookでは、このようなモックアップのことをStoryと呼んでいます。Storyがあらわすコンポーネントの粒度もまちまちで、汎用のボタン1つに対するStoryもあれば、ページ全体に対するStoryも考えられます。 モックアップを動かしながら作業することで、余計な手間をかけずにUIの動作確認をできるというのがStorybookの基本的な使い方です。 StoryshotsとはStoryshots はStorybookをユニットテストで利用する方法のひとつです。 Storyshots
ライブラリ作者におすすめしたいBabelの新機能 babel-plugin-polyfill-corejs3 | Wantedly Engineer Blog
Babelの新しいpolyfill用プラグインであるbabel-polyfillsが2022年4月に脱experimentalを果たしていました。そこで本稿では、Babelにおいてpolyfillがどのように扱われていたかを振り返りながら新しいpolyfill pluginを紹介します。 注意: Babel 7.4で非推奨化された@babel/polyfillとは別物です。 何が問題だったのか?babel-polyfillsのREADMEと元issueにも説明がありますが、本記事ではあらためて日本語で説明したいと思います。端的に言うと今までは以下の要件を両立できませんでした。 ソースコード中で使われている機能のpolyfillだけを注入する。ターゲットブラウザを指定して、必要なpolyfillだけを注入する。副作用のない形でpolyfillを注入する。babel-polyfillsはこれら
Babelプラグインの順序とallowDeclareFieldsの妙 | Wantedly Engineer Blog
Babelでdeclareクラスフィールドを使うためにallowDeclareFieldsというオプションがあります。一見すると単に設定でこれを有効化すればいいような気がしますが、実は正しくこの設定を有効化するには罠がありました。本記事ではBabelとTypeScriptのクラスフィールドサポートを紐解き、正しい理解にもとづいて適切な設定を紹介します。 クラスフィールドとはクラスフィールドはJavaScriptのStage 3提案で、クラスの直下に変数宣言のような記法でインスタンス変数やクラス変数に相当する宣言を行えるというものです。 class C { x; y = 42; static a; static b = 42; } console.log(new C().y); // => 42 console.log(C.b); // => 42TypeScriptでは型定義や修飾子ととも
location.assign(url) と location.href = url の違い | Wantedly Engineer Blog
結論普通は自ウインドウのlocationを操作するためhrefとassignは同じ挙動になりますが、自身とは異なるウインドウを操作する場合には挙動が異なります。具体的には実行中のコードと異なるオリジンを持つウインドウのlocationを操作しようとしたとき、 location.href = url; ではオリジンの検査は行われず、操作は成功します。location.assign(url); ではDOMException (SecurityError) が発生します。以下がそのデモです。iframe内に表示している https://example.com はこの文書自身とは異なるオリジンであるため、このようなiframeのlocationをassignで操作しようとするとエラーになります。 <!doctype html> <html> <head> <script> "use strict"
Apollo Client と SSR の罠 その1 - パフォーマンス改善編 | Wantedly Engineer Blog
Wantedly でバックエンドエンジニアをしている @izumin5210 です。 この記事は GraphQL Advent Calendar 2020 の11日目の記事として書かれました。が、7割くらいは SSR についての議論のこり3割くらいが Apollo Client の話です。 最近、Apollo Client と SSR(Server Side Rendering) を利用した Web アプリケーションのパフォーマンス改善に取り組みました。この記事では「パフォーマンスの問題にどう立ち向かったか」および「そもそも問題を起こさない構造にするために何ができるか・何をすべきでないか」の考察をしていきます。 TL;DRパフォーマンス改善は計測・可視化からライブラリが用意してくれているフック機構を上手に使って計測していこうrenderToStringWithData では、renderT
即席Babelプラグインでprocess.envをなかったことにする | Wantedly Engineer Blog
最近、WantedlyのとあるサービスをようやくWebpack 5にすることができました。その過程で発生した問題をBabelプラグインで迂回する機会があったので紹介します。 Webpackとprocess.env初期の代表的なモジュールバンドラーといえばBrowserifyですが、これはその名の示す通り「Node.js向けのコードをWebブラウザでも動かしたい」という動機があったと考えられます。これを実現するにはモジュールを1ファイルにまとめるだけでは済みません。つまり、場合によっては以下のような機能の互換実装をWebブラウザ向けに提供する必要があります。 Node.jsの提供する独自のグローバル変数 (process, Buffer, setImmediateなど)Node.jsの提供する独自のライブラリ (zlib, path, cryptoなど)これはBrowserifyだけでなく、
yarn v2にまつわる誤解 | Wantedly Engineer Blog
現在WantedlyではNode.jsのパッケージ管理にyarn v1を使っています。現在私は開発者体験の改善を目指してyarn v2への移行を検討しているのですが、その過程でyarn v2が誤解されがちだと感じるようになりました。そこで社内への情報提供も兼ねて、いくつか誤解されがちだと思われる点を紹介したいと思います。 (わかりやすさのためにyarn v2と呼んでいますが、 yarn v3以降も含みます。これらはメジャーバージョンアップではあるもののyarn v1→v2のようにアーキテクチャが刷新されるわけではないからです) ポイント1: yarnをv2にするのにPnPは必須ではないyarn PnPはyarn v2の目玉機能で、パッケージをnode_modules以下に展開せずに仮想化してロードできるようにするというものです。node_modulesの展開作業が不要になるほか、依存関係の
エンジニアイベントを初主催。そして事件は起こった | 株式会社スペースマーケット
４/18にスペースマーケット初主催となるエンジニア向けイベント「【増席】加速するシェアリングエコノミーの技術の裏側を公開！(React.js,RoR..)」 をジモティー鈴木さん、クラウドワークス大場さん、またパネルディカションの司会にTimeTicket/Instant Teamの山本大策さんをゲストに迎え開催しました！ 本編の詳細はブログの方に執筆したので割愛するとして、ここではその舞台裏を書いてみようかと思います。 開催したスペースは？まず今回会場となったのは中野Vスタジオさん。普段は主にお笑いライブ等のイベントが行われています。そこでエンジニア向け勉強会をやってしまおうというチャレンジングな試みです。本当に大丈夫なのか。。笑 地下１階に入り口があります。ライブハウスのような雰囲気。 スタッフ控室。やはりなかなかITの勉強会でこの雰囲気の会場にお目にかかることはないのでは笑 とりあえ
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
