Image for post
Image for post
Photo by Nelly Antoniadou from unsplash.com

1–3 月

2019 年末から引き続き、1 月中はまだ無職状態(正確には稼働少なめでフリーランス)だったので、空いた時間で ts-graphql-plugin をガリガリ書いていた。新しい職場に join したのは 2 月からで、こっちでも GraphQL の使うことが見えてたってのもある。

ts-graphql-plugin については下記参照のこと。

TS Conf JP のセッションでも、この OSS をネタに話す予定で資料などを書いていた。

ただ、開催直前に新型コロナの影響で TS Conf JP が中止になってしまったため、資料は完全にお蔵入り状態になってしまった。供養の意味もこめて資料のリンクだけ貼っておく。

3 月中旬ころからフルリモート勤務に移行。

4–6 月

コロナでの古リモートで通勤時間が消滅したこともあ …


これは GraphQL Advent Calendar 2020 の 24 日目の記事です。

はじめに

前回の defer/stream の記事は途中で力尽きてしまったため、クライアント側の処理についてはあまり多くを書けなかったので、この投稿で続きを書いていこうと思う。 アドカレの担当を途中で 2 つに増やしたから記事を分けようとかそういうセコいあれではないよ!

クライアント側の処理、それも React 限定の話だ。 @defer / @stream の「サーバーからちょっとずつデータが届けられる」という特性と、React の Suspense for data fetch の関係を考えてみたい。

なお、 @defer@stream と毎回ディレクティブ名で言及するのが面倒なので、こちらについては I …


これは Recruit Engineers Advent Calendar 2020 の 23 日目の記事です。

アドカレの 1 日目も Puppeteer の話を書いてたのだけど、別にその続きとかではまったくなくて、少し前に Puppeteer のカバレッジ関連でドハマリしたのでそれを書こうと思う。

背景

他のところで散々書いてきているので、軽く触れる程度にしておくが、 https://github.com/reg-viz/storycap というツールの開発・メンテをしている。Puppeteer で Storybook をクローリングして各 Story を PNG 画像にする、ただそれだけの CLI だ。

このツールは画像ベースの回帰テストを自動化する目的で作られていて、日々の業務でも reg- …


これは GraphQL Advent Calendar 2020 16 日目の記事です(しかも 12 日目の記事と結構内容が被ってしまって切ない…)

このエントリでは、GraphQL の @defer@stream というディレクティブについて書いていく。色々書いていたら割と長くなってしまったが、内容は下記のとおり。

  • このディレクティブの登場背景
  • ディレクティブの Spec
  • graphql-js を用いた利用サンプル

@defer / @stream とは何か

@defer@stream は共にデータの取得方法を制御するためのディレクティブだ。名前が示すとおり、クエリ全体から特定の箇所の読み込みを遅延させたり、ストリーミングさせることができる。2020 年末現在、GraphQL spec としては Stage 2(草案段階)であ …


Image for post
Image for post
Photo by Antonio Batinic from Pexels.com

これは Angular Advent Calendar 2020 8 日目の記事です。

Angular と Linter

Angular: ESLint サポートの現状 2020 Autumn にあるように、Angular CLI v12 から TSLint が deprecated 扱いになる。

TSLint とともに使われてきた Codelyzer で提供されてきた Rule については、今後は angular-eslint が提供していくことになる。実際、多くの Codelyzer ルールが angular-eslint に移植済みだ。


Puppet
Puppet
Photo by Olia Gozha from unsplash

これは Recruit Engineers Advent Calendar 2020 の 1日目の記事です。

先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。

https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。

また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は …


はじめに

TypeScript 4.1 で新しく増えた --generateTrace という TypeScript Compiler の profile を取得するオプションについて。

TypeScript 4.1 beta でもすっ飛ばされていたネタなので、多分あまり注目されていないだろうし、 僕もたまたま PRs を眺めていたら見つけた程度だし、他の feature と比べるとかなりニッチなのだけど、個人的に面白かったのでエントリに残しておく。

なぜ僕が今回のオプションに惹かれたかとういうと、 3 ヶ月くらい前に、仕事でやっている TypeScript のプロジェクトについて「ローカルでの tsc が遅い!なんでだ!」って感じで憤ってた時期があって、 どこにボトルネックがあるか調べようと思ったことが …


TypeScript 4.1に Template String Typesという機能を追加するPRが上がっていて、新しいおもちゃを与えられた犬となって色々遊んでしまった。

Template String Types is 何

Template String Typesで何ができるか的な話については、まぁhttps://github.com/microsoft/TypeScript/pull/40336 を見るなりしてもらえばいいんだけど、端的にいうとJSのTemplate stringよろしくLiteral TypeをTemplateで合成した結果を型として扱えるようになる機能。

type GetterName<T extends string> = `get${capitalize T}`;
type T10 = GetterName<'foo'>; …


もうタイトルのまんまです。ただ触ってみる、というだけであれば https://www.typescriptlang.org/v2/play?install-plugin=ts-playground-plugin-vim からどうぞ。

TypeScriptを書いているとき、ちょっとしたスニペットだったりいわゆる型パズルのような「1ファイルで済み、コンパイラのエラー有無が確認できれば十分!」といったときはTypeScript Playground を使うことが多いです。

PlaygroundはTS本家のwebサイトの1コンテンツですが、2019年の末頃からwebサイトのリニューアル活動が活発に行われています。例えば翻訳コンテンツの充実だったりハンドブックの作り直しなどが進行中なのですが、この流れでPlaygroundも新しくなっています。新Playgroundにはplugin機構が搭載されました。どんなことができんの?っていうのについては、Lekoさんの登壇資料がわかりやすいです。

折角なので、僕も一個pluginを作ってみました。エディタ部分にVimキーバインドを当てる君です。https://www.typescriptlang.org/v2/play?install-plugin=ts-playground-plugin-vim を叩くと「pluginをインストールしても良い?」ってプロンプトが聞いてくるので、yesを選択して、「use vim mode」をクリックするだけです。

Playground Pluginについては、2ヶ月ほど前に素振りしたことがあったし、monaco editor(Playgroundのエディタとして使われてるアイツ)にVimキーバインドを当てる部分については既にブツが存在していたのでそのまま使わせてもらいました。実質1時間程度で作れました。もっと早く作っときゃよかった。

ちょっとビルドの都合上、NPMから持ってきたmonaco-vimだと厳しかったので、一旦ソースを拝借させてもらいましたが。

キーバインド部分のソース眺めた感じ、CodeMirrorのVimバインディングと同程度のことは実装されていそうです。

Playground Pluginとしてのソースはこちらからどうぞ。


Background

I needed a TypeScript custom transformer to rewrite webpack magic comment a few months ago, such as:

Input source:

const Hoge = import(/* webpackPrefetch: true, webPackChunkName: "XXXXX" */ "./hoge");

Expected output:

const Hoge = import(/* webpackPrefetch: true, webPackChunkName: "ZZZ" */ "./hoge");

There are no difference except a little comment change. However, manipulating comments was much harder than I imaged.

How to manipulate comments with TS API ?

Read comments

Basically, comment is not AST node nor token but trivia attached with node. Trivia is trivial text, e.g. whitespace, Git conflict merkers.

The following underlined text is leading trivia of a = 1; node:

/* hoge */ a = 1;
~~~~~~~~~~~

Yosuke Kurami

Front-end web developer. TypeScript, Angular and Vim, weapon of choice.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store