rollupを用いて、ユーザースクリプトをTypeScriptで書く環境を構築する手順を示します。 先日投稿した、ブックマークレットをTypeScriptで書く記事のユーザースクリプト版です。 ユーザースクリプトをTypeScriptで書きたい 私は、日々のウェブブラウジングを快適にするためのユーザースクリプトを自作しています。 ユーザースクリプトの魅力は、ブックマークレットよりは高度なことがやりやすく、拡張機能よりはお手軽というちょうどよさにあります。 しかしながら、ある程度の規模を超えたユーザースクリプトを素のJavaScriptで、それも1つのファイルの中に書いていくのは、なかなかつらいものです。 そこで、ユーザースクリプトをTypeScriptで書きたいと思いました。 ユーザースクリプトをTypeScriptで書くには ユーザースクリプトをTypeScriptで書くには、おおむね次

Renovateのようにnpmパッケージを更新するためのツールを開発して使っています。 ここでは、開発に至った経緯、開発したツール、利用に関する工夫、今後の展望について記します。 開発に至った経緯 まず、私がRenovateのようなツールを開発するに至った経緯について説明しましょう。 依存ライブラリの更新に関する課題 2021年4月にヤフーに入社して以来、依存ライブラリの更新について課題を感じていました。 特にフロントエンド界隈は潮流が速く、アクティブにメンテナンスされているライブラリは、日々新たなバージョンがリリースされ続けています。 ライブラリのバージョンが古いことに起因する問題に遭遇したときや脆弱性が検知されたときなど、必要に迫られてから更新するのでは遅れをとってしまいます。 いざ更新するとなったときにはバージョンがいくつも上がっていて、影響調査やコードの修正に多くの時間を要するよう

JavaScriptのコードを書く際、ESLintによって静的解析をするのはデファクトスタンダードであると言ってもいいでしょう。 eslint-config-standardやeslint-config-airbnbなどのShareable Configsを使うことが多いかと思いますが、それらにくわえてeslint-plugin-unicornも併用すると、コード品質のさらなる向上が期待できます。 導入方法 eslint-plugin-unicornをインストールします。

tsconfig.json（TSConfig）を書くときに使うと便利な、TSConfig Basesをご紹介します。 TSConfigのデフォルト値はゆるめ TSConfigで値を設定していないオプションにはデフォルト値が使われますが、それは必ずしも最適なDX（開発者体験）をもたらすとは限りません。 たとえば、より厳密な型チェックを行なうためのstrictオプションはデフォルトでは無効になっています。 他にも、今日TypeScriptを書く上では有効化すべき機能が無効になっていたり、ターゲットとなるESのバージョンが古かったりと、TSConfigのデフォルト値は全体的にゆるめの設定になっています。 tsc --initで生成されるTSConfigはあと一歩 TSConfigは自分で書くこともできますが、tsc --initによって生成することもできます。 # typescriptをグローバ