はてなブックマーク

WebAssembly Type Reflection JavaScript APIの一部をWebKitに実装したので紹介します。 WebAssembly Type Reflection JavaScript API とは WebAssembly Type Reflection JavaScript APIは、Memory・Table・Global・関数の型に関する情報をJavaScriptから取得するAPIを追加する提案です。https://github.com/WebAssembly/js-types で管理されています。 たとえば、MemoryやTableであればサイズの制限、Globalであれば値の型とミュータビリティ、FunctionであればそのシグネチャをJavaScriptから取得できます。 この提案は、既存のAPIに対して３つの変更を加えます。 1. Memory、Glob

最近、自分のプライベートの開発環境を大きく変えたので紹介する。 先にまとめ プライベートではMacを使わなくなった 家にUbuntuが入ったミニPCを置いた 外からはThinkPad X1 CarbonからTailscale経由のSSHで家のミニPCに接続 購入まで まず、自分にとって最も大きな変化はプライベートでMacを使わなくなったことだ。2013年くらいにプログラミングを始めてからずっとメインのOSはMacだったので、約10年ぶり、ほぼ初めての非Mac環境である。 自分の普段の開発のユースケースは、Webアプリケーション開発とNode.js上で動くソフトウェアの開発、WebKitへのコントリビューション、たまにRustやGoやC/C++で自分専用ツールの開発、くらいなので別にMacで困っているわけではなかった。Web開発やNode.js上のソフトウェアの開発はまあ普通にMacで困らな

2023 年を振り返ります。 仕事 移転したユビーのオフィスにあるかっこいい壁 相変わらずユビーでプロダクト開発エンジニアをしていました。症状検索エンジン ユビーを開発するチームでフロントエンドとバックエンドを書いています。このプロダクト上で、製薬企業向けのソリューションを実現するための開発をしています。複雑なドメイン知識が求められる上に、会社の成長に伴って求められるデータやサービスの信頼性が上がってきていてチャレンジングな仕事だなと思っていますが、頼れる仲間と共に頑張っています。 また、仕事に関する記事をいくつか書きました。 テーブル駆動テストを使った QA エンジニアとソフトウェアエンジニアの連携 開発スピードを維持しながらモブプログラミングを実施した話 そういえば、たまに「どのくらい働いているんですが？」と聞かれることがあるんですが、普通にフルタイムで働いています。大学が忙しいときに

この記事はAlex Rattrayさんの A curious case of the ternaries を、本人の許可を得て翻訳したものです(タイトルは大幅に変えてしまっていますが)。 記事の最後にあるように Google Forms から新しい機能についてのフィードバックを求めています。私以外のメンテナーも読めるようにできるだけ英語で書いてほしいですが、「日本語でなら書いてもいいよ」という人がいたら日本語で書いてもらっても大丈夫です。 三項演算子のフォーマットは長年の課題でした。Prettier の v3.1.0 では新しいフォーマットのスタイルを導入することで、ついにこれを解決しました(訳注: 後述の通り、まだ experimental なので、--experimental-ternaries をつけたときのみ有効になります)。 このブログ記事では、これまでの経緯と背景、実際に触って

2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから

最近、Kohta Ito さんのブログ記事 0 から始める Node.js パフォーマンスチューニング を読みました。Kohta Ito さんは、実践 Node.js 入門 という書籍を執筆されたことでも知られています。 このブログ記事の「framegraph 編」という節では、 Node.js でのフレームグラフの生成方法や見方が説明されています。私はフレームグラフというものを知ってはいましたが、それを見てパフォーマンスの改善に活かしたことはありませんでした。 ということで、Prettier のフレームグラフを眺めてみて、実際にちょっとだけパフォーマンスを改善してみました。この記事では、そのパフォーマンス改善について説明します。 フレームグラフを生成するツール 0x 0 から始める Node.js パフォーマンスチューニング では、フレームグラフを生成するためのツールとして 0x が紹介

先日、TypeScript-ESLintという OSS プロジェクトから $500 いただきました。ちなみに筆者は TypeScript-ESLint のチームに所属しているわけではありません。 この記事では、改めて TypeScript-ESLint というプロジェクトの概要を説明すると共に、筆者が $500 いただいた経緯や、TypeScript-ESLint の運営状況について説明します。 TL;DR 資金に余裕があり、TypeScript-ESLint を使っている個人や企業は TypeScript-ESLint プロジェクトに寄付することを検討してください。 TypeScript-ESLint への寄付は https://opencollective.com/typescript-eslint から行うことができます。 一応明記しておきますが、筆者は今回 $500 いただきました

Node.js の import specifier と ECMAScript の ImportSpecifier 先日 Firefox の JavaScript エンジンである SpiderMonkey の公式ブログに Import Maps についての記事が投稿された。 https://spidermonkey.dev/blog/2023/02/23/javascript-import-maps-part-1-introduction.html この記事は、そもそも ECMAScript Modules とは何かというところから入り、Node.js のモジュールシステムの歴史やブラウザの ECMAScript Modules との関係などを説明した後、本題である Import Maps について解説している。短い時間で読める面白い記事なので、まだ読んでいない人はぜひ読んでほしい。 この

つい先程、https://github.com/prettier/prettier/pull/14212 という Pull Request を next ブランチにマージした。 これは DefinitelyTyped で管理されていた Prettier の TypeScript 用の型定義を Prettier 本体のリポジトリへと移す Pull Request だ。この Pull Request によって、v3 からは @types/prettier をインストールする必要がなくなる。 JavaScript で書かれたライブラリをメンテナンスしている他の人の意思決定の参考になるように、この記事ではこの変更を行ったモチベーションや手法について説明する。 Prettier の JavaScript API の型定義の現状 Prettier は JavaScript から使える API を提供し

この記事には誰かを攻撃したり差別したりする意図はありません。もし不適切な表現を見つけた場合は修正しますのでご連絡ください。 「インデントにタブとスペースのどちらを使うのか」というのは昔から何度も議論されてきた問題です。 最初に明確にしておきますが、私個人としてはタブを使おうがスペースを使おうが、プロジェクト内で統一されていれば構いません。 しかしタブには、スペースにはないアクセシビリティ上の利点が存在します。 タブの最大の特徴は、表示幅を自由に設定できることです。 ご存知のとおり、一つのタブに対して実際の見た目としてどのくらいの幅が確保されるかは、テキストエディタなどのコードを閲覧する環境の設定次第です。 たとえば、GitHub は一つのタブをデフォルトではスペース 8 個分の幅で表示しますが、 https://github.com/settings/appearance から自由に変更で

Prettier がデフォルトでインデントのためにタブを使うべきかどうか、現時点での私の考えです。 useTabs のデフォルト値を true にするという提案 Prettier には useTabs というオプションがあり、インデントのためにタブを使うかどうかを boolean で指定できます。デフォルトでは false が設定されています。 2 年ほど前に Prettier v2 の準備をしているときに Change useTabs to true by default という、useTabs のデフォルト値を true に設定することを提案する issue が作成されました。 この issue での議論は活発に行われ、建設的なコメントや逆に全く建設的でない人格を批判するようなコメントなど、実に多くの意見が寄せられました。 この issue が作成れたのは v2 をリリースする直前だっ

期末テストやらなんやらで忙しく、一週間くらいアドベントカレンダーをさぼってしまいました。この記事も電車の中で書いています。 さて、今日は Node.js ライブラリにおける Pure ESM 対応の話です。 前提 Prettier で採用していた方法を紹介する目的でこの記事を書いています。 Prettier は npm にパブリッシュするときには esbuild でバンドルしていますが、ソースコードは CommonJS Modules で記述されていて Node.js からそのまま実行できます。これは GitHub から直接 Prettier をインストールした場合でも Node.js で動作するようにするためです。 こういったケースはほとんどないと思いますので、ここで紹介する手法で有効である場合は少ないでしょうし、後述しますがデメリットが多いので普通にやらないほうがよいと思います。 世は

この記事を書いているのは 12 月 17 日なのでもう 3 日分書いていないことになりますが、頑張って追いつきたいと思います。 筆者が 2022 年に OSS 活動によって得た報酬を公開します。 前提 筆者はUbie 株式会社のフルタイムのソフトウェアエンジニア兼大学生であり、余暇時間にいくつかの OSS に関わっています。 主に Prettier というコードフォーマッターのメンテナンスをしています。 目的 この記事の目的は、読者の誰かがお世話になっている OSS プロジェクトに対して寄付や貢献をするきっかけになることです。ぜひお願いします。 筆者が受け取っている OSS 活動による報酬には大きく分けて二種類あります。 一つ目は OSS プロジェクトの OpenCollective から分配された報酬です。Prettier の OpenCollective に集まった資金を毎月 $150

Records & Tuples というそこそこ有名(?)なプロポーザルがありますが、そのプロポーザルから派生した JSON.parseImmutable という新しいプロポーザルが良さそうなので紹介します。 Records & Tuples Records & Tuples はレコードとタプルという新しいデータ構造を導入する現在 Stage 2 のプロポーザルです。 レコードとタプルは、それぞれイミュータブルなオブジェクトと配列のようなものです。現在提案されている構文では通常のオブジェクトリテラルや配列リテラルの頭に # をつけると、レコードとタプルになります。 const record = #{ x: 1, y: 2, }; const tuple = #[1, 2, 3]; レコードやタプルやイミュータブルなデータ構造なので後から内容を更新することはできません。 レコードとタプルの大

大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。

学校の課題や仕事をどうしてもやりたくないけど、数時間だけ余裕があって、プログラムは書きたい！というとき、みなさんはどうしていますか？ 最近の自分は ESLint をやっています。ということで自分が実装した変更を紹介していきます。 基本的に、ESLint の Rules ドキュメントを眺めてみて「バグがありそうだな〜」とか、「このルール足りてなさそう！」とか思ったときに Issue を作成して修正する方針でやりました。 ESLint の Contributor Pool プログラム ESLint には Contributor Pool プログラムというものがあります。OSS プロジェクトとしてとても良い取り組みだと思うのでここで紹介します。 Contributor Pool プログラム は、ESLint チームが外部の貢献者に対してその貢献に応じて報奨金を支払うという取り組みです。 私は E

何日まで続くかなぁ。 初日は Array Grouping の名前を巡る問題についてです。 Array Grouping とは Array Grouping は現在 Stage 3 のプロポーザルで、Lodash の groupBy に相当するものを ECMAScript に導入するプロポーザルです。 プロポーザルのリポジトリは https://github.com/tc39/proposal-array-grouping にあります。 このプロポーザルは Array.prototype.group と Array.prototype.groupToMap というプロトタイプメソッドを追加します。これらのメソッドは具体的には次のように使われます。 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const fn = (number) =>

今日は軽めの話題で。 先日 Prettier 2.8 をリリースしました。 We just released Prettier 2.8. This release includes support for TypeScript 4.9 satisfies operator and improvements to the --cache CLI option!https://t.co/Yfs7Pd5MsD — Prettier (@PrettierCode) November 23, 2022 TypeScript 4.9 で追加された satisfies 演算子 のサポートや --cache オプションの改善が含まれていて、人によっては嬉しいんじゃないかと思います。 この Prettier 2.8 ですが、実はリリースするつもりはありませんでした。 というのも、本当は Prettier 2

先日 Babel のメンテナーとして知られる Nicolò Ribaudo 氏が次のツイートを投稿した。 We finally finished migrating the Babel monorepo from Flow to TypeScript! It has been a very long process started by @z_bodya, and after migrating package-by-package @JLHwung just opened this PR 😄 pic.twitter.com/WKXxV8x2MY — Nicolò Ribaudo 🏳️‍🌈 • 💙💛 (@NicoloRibaudo) July 23, 2022 そう、JavaScript のトランスコンパイラである Babel のソースコードが Flow から TypeScrip

医療 AI スタートアップ Ubie(ユビー) に 3 月に入社していました。この 7 月で入社してから 4 ヶ月になります。本当はもっと早く入社エントリを書きたかったのですが、だらけていたらなんと 4 ヶ月経ってしまいました。 入社ツイート 誰？ JavaScript やフロントエンドを触っているエンジニアです これまでは筑波大学の情報学群情報科学類(学部)に通いつつ業務委託として働いたり、Prettier や Babel などのオープンソースプロジェクトのメンテナーやコミッターをやったりしていました。 より興味がある人は2021 年の振り返りブログや、私の Twitter を見ていただけると良いと思います(Twitter には日常的なことを書き込まないようにしているのでどういうエンジニアなのかはわかりやすいと思います)。 Ubie って？ Ubie は 2017 年にエンジニアの久保と

@azu さんのブログ記事 Maintainer Month: オープンソースをメンテナンスするコツ を読んで GitHub が Maintainer Month というイベントを主催していることを知りました。 自分は Maintainer Month の Sponsoring の対象でありませんが、自分がオープンソースのプロジェクトをメンテするときに考えていることを書き残しておこうと思います。 オープンソースガイド などにはすごいためになることが書かれていますが、積極的な内容で自分にとっては読むだけで疲れてしまうような内容でもあります。なのでこの記事ではあえて自分が普段考えていることの中でも消極的なことについて書いてみます。 オープンソースのメンテナンスに疲弊している人や、オープンソースに貢献している人、もしくは貢献しようと思っている人に「こんなゆるい気持ちでやってる人もいるんだ」と思っ

この記事では Type Annotations プロポーザルの概要とモチベーションについて説明する。 概要 Type Annotations プロポーザルは 2022 年の 3 月 9 日に Microsoft の TypeScript チームの Program Manager である Daniel Rosenwasser 氏のブログ記事 A Proposal For Type Syntax in JavaScript で発表され、2022 年 3 月の TC39 ミーティングで Stage 1 になった。 Type Annotations プロポーザルは JavaScript に TypeScript のような型注釈の構文を導入する。 たとえば、次のような型注釈を持つ関数宣言などが可能になる。 function hello(name: string): void { console.lo

実は先日リリースした Prettier 2.6 では前のバージョンである 2.5.1 と比べてバンドルサイズが 3MB ほど減っています。 Prettier 2.5.1 のサイズ(20.0MB) Prettier 2.6.0 のサイズ(16.9MB) リリースブログで言及したとおり Prettier 2.6 ではモジュールバンドラーを Rollup から esbuild に移行したので、その影響かと思われるかもしれませんが実はそれだけではありません。esbuild への移行によって減ったバンドルサイズはそれほど大きくはありませんでした。 バンドルサイズが 3 MB 減ったのは泥臭いチューニングをいくつか行った結果なのです。 この記事では Prettier 2.6 で実施したバンドルサイズを減らすテクニックを紹介します。 きっかけ ライブラリのサイズは大きいより小さい方が当然良いですが、その

先日次のツイートを見かけた。 I have been writing Javascript since roughly 1997 but it still manages to occasionally do something that absolutely shocks me pic.twitter.com/JyYOo4wGOu — mcc (@mcclure111) January 11, 2022 JavaScript では [1, 2, 3] + [4, 5, 6] の結果が "1,2,34,5,6" であり、この挙動が直感に反しているというツイートである。 実際のところ筆者も直感に反していると思う。しかしこの挙動は至って ECMAScript の仕様通りである。 この記事では、なぜこの挙動が ECMAScript の仕様に従っていると言えるのか仕様を引用して説明する。 大雑把な

この記事は Prettier 公式ブログに掲載されている Christopher Chedeau (@vjeux) 氏による記事 Prettier begins paying maintainers を、許可を得て翻訳したものです。 JavaScript を始めとしたいくつかの Web 開発のための言語のコードフォーマッターである Prettier は、2019 年から OpenCollective で寄付を募り始めすでに $50,000 が集まっています。私達はこの資金から二人のメンテナーに毎月$1500を支払うことにしました。この資金により、彼らは将来に渡って Prettier のメンテナンスを継続できます。 オープンソースとお金の問題は往々にして厄介です。私たちはこの問題に対して様々なことを試してきました。Prettierがオープンソース化された直後に Facebook は Jame

はじめに Import Assertions は現在 Stage 3 の ECMAScript のプロポーザルである。2020 年 9 月に行われた TC39 のミーティングで Stage 3 になった(ミーティングノートは https://github.com/tc39/notes/blob/master/meetings/2020-09/sept-22.md#import-assertions-for-stage-3 にて公開されている)。 Babel では 先日リリースされた 7.12 から Import Assertions を使えるようになった。 この記事では現時点での Import Assertions について解説する。 概要 このプロポーザルは従来の import 文 にインラインの構文を追加し、モジュール指定子とは別に詳細情報の指定を可能にする。主に想定される用途は Ja

2021 の出来事を振り返ります。 学校 2021 年 4 月で B3 になるはずだったんですが、留年しました。 留年していたらしいということを夏頃に知りました。後輩が教えてくれました。僕が留年したことを教えてくれた後輩たちの顔はすごく楽しそうでした。 いつか留年するつもりではいたので特に悲しい気持ちはなかったんですが、留年したことに気づくことすらできてなかったのはちょっとおもしろいなと思いました。両親も「そりゃそうだよね」みたいな反応をしていました。 筑波大学の留年の仕組みをよく知らないので自分が B3 と名乗るべきなのか B2 と名乗るべきなのかよくわからないんですが、少なくとも卒業までの年数が1年伸びたのは確かなようです。 留年はしたものの、線形代数 A という科目を再々履修で修得することができました。すごく嬉しかったです。色々と教えてくれた同級生、後輩、知りあいのエンジニアの方々、

GitHub Sponsors をはじめました。 I've just started GitHub Sponsors. If you like my Open Source work, you can sponsor me on GitHub.https://t.co/1xiCsXDpzC — sosuke (@__sosukesuzuki) September 9, 2021 すでに4人の方に支援していただいています。ありがとうございます。 他の方にも支援していただけると嬉しいです。 Sponsor どのような OSS 活動をしているのか 主に JavaScript や TypeScript などのためのコードフォーマッター Prettier のメンテナーをやっています。 バグの修正、新しい機能の実装、リファクタリング、Issue のトリアージ、Pull Request のレビュー、リリ