かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型…

ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったの…

ご存じの方もいるかもしれませんが、TypeScript 4.5 Beta で遂に Node.js ESM がサポートされました。まだ Stable に来ていない実験的な機能なのですが、どういうものなのか気になったので、先日趣味で作っているプロダクトに導入してみました。で、この記事…

この記事は JavaScript Advent Calendar 2021 の 12日目です。11日目は なかがわはじめ さんの 「Array.prototype.reduce()とかのprototypeってなに？」 でした。 Jest は JavaScript のテスティングフレームワークです。Node.js で動くアプリケーションのテ…

この記事は はてなエンジニア Advent Calendar 2021 の 5 日目の記事です。 4 日目は id:anatofuz さんの 「入社してから書いていた分報の行数を眺めてみる」 でした。日報に書き込んだ行数を可視化するというアイデアが面白い！ 僕も日報書いているので今度…

@sentry/browser を使うと、ブラウザでエラーが発生した時にそのエラーを Sentry の集計サーバに送信して記録してくれます。送信されたエラーはエラーの種類ごとに Issue という単位にグルーピングされ、Issue ごとに何件発生しているのか、何人のユーザで発…

背景 既存の巨大なコードベースに対して新しい ESLint rule を導入したいことがある ESLint を導入した段階では厳しすぎて OFF にしていたけど、やっぱり便利なので ON にしたい、みたいなケース 例えば @typescript-eslint/no-floating-promises とか しか…

数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slic…

main ブランチとこのPRでどれだけ bundle size が変化したか比較したり、増加量がある閾値を超えていたら CI を fail させる、みたいなソリューションは結構紹介されているけど、bundle size の変化を継続的に監視する方法はあまり紹介されていないようだっ…

大量のエラーに対して rule ごとに高速に eslint --fix できるツール 「eslint-interactive」 を作ったので、その紹介です。 動機 ESLint のデフォルトの出力はエラーの発生源や修正のためのヒントなど、開発者に役立つ多くの情報を含みます。これは多く場合…

超軽量で strictly-typed な (強く型付けされた) Event Emitter を作りました。 github.com 背景 従来 Event Emitter は ブラウザでは EventTarget として、Node.js では EventEmitter として、それぞれ独自に実装されていました。これらは機能的には変わり…

Scrapboxで会議の議事録を取っていると、誰の発言かを記録するために他人のアイコンを挿入したい、という場面が出てくる。Scrapboxでは ctrl+i と入力すれば簡単に自分のアイコンは挿入できるけど、他人のアイコンを簡単に挿入する方法は意外にない。一応以…

iOSのSafariにWeb Share APIが来るという話を聞いたので, 趣味で作っている「ゆかりスロット」で試してみることにした. 2月2日時点でまだiOS 12.2はリリースされていないので, Stableな環境で動かしたいならChrome 61+がインストールされたAndroid端末が必要…

tl;dr C++のツールをWebAssemblyを使ってWebに移植した WebAssemblyへコンパイルする言語としてRustを, JS-WebAssembly間のバインディングにwasm-bindgenを採用した 乱数計算処理をWebAssemblyで実装することで, C++実装と比べて0.2〜0.7倍, JS実装と比べて1…

Chrome拡張機能の非同期APIはコールバックにより実装されています. 例えば, 拡張機能ごとに用意されるストレージからデータを取得する場合, ストレージへのアクセス中にJavaScriptの処理が中断されるのを防ぐため, 非同期APIが用意されています. // backgrou…

はじめに 先日公開した Google Play Music 向けの #NowPlaying 拡張機能 がアップデートして v1.0.0 になりました Chrome Web Store からインストール addons.mozilla.org (AMO) からインストール 新機能 Firefox のサポート ユーザカスタム設定をサポート …

はじめに Google Play Music 向けの #NowPlaying 拡張機能, ありそうで無かったので作りました. chrome.google.com 上記の拡張機能をインストールすると, 右下に曲のシェアボタンが表示されるようになります. 右下の共有ボタンを押すと共有するSNSメッセージ…

はじめに Rust を用いて WebAssembly の開発環境を構築する手法を紹介する電子書籍を執筆・公開しました. WebAssembly へのコンパイルが可能な言語である Rust を用いて, WebAssembly の開発環境のテンプレートを作成する内容となっています. wasm-dev-book.…

Vue.js, 良いですよね. ドキュメントも充実しているし, 読みやすいし, 個人開発する分には素早く楽しく開発できてとっても良いライブラリだなと思っています. ただ, 開発をしているとやっぱり「型が欲しい!」という気持ちが生まれてしまうものです. そういう…

最近, 免許を取るために自動車学校に通っていたのですが, 技能講習の予約が一杯で中々教習が進まず困っていました. 通っていた教習所ではオンラインで技能講習の予約を取れるサービスが公開されていたので, また最近話題の Headless Chrome を触ってみたいと…

概要 お盆の間にDockerについて勉強した序にDockerをどう学んでいったか (どの記事を読んだか, どういう流れで学んだか) を軽く纏めておきます. 目標 以前作ったWebアプリケーション (タイマー) をDockerに載せる. Dockerize前のリビジョン 学習の流れ 開発…

忘れないように学習用に使った記事を貼り付けておく。 Node.jsとかES6, ES7関連も一緒にまとめておいた。 完全に自分用。 TypeScript 公式サイト Welcome to TypeScript ソース Microsoft/TypeScript · GitHub 仕様 TypeScript/spec.md at master · Microsof…