1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@zibasan

【個人開発】npm installはもう打たない。VS Code内でパッケージ管理が完結する拡張機能を作った【TypeScript/VS Code API】

1
Posted at

はじめに

はじめまして、現役高校生のじばです。
普段は趣味でTypeScriptを使ったフロントエンド開発や、discord.jsを使ったBot開発を行っています。

そうした開発ではnpmパッケージを頻繁に扱うのですが、

  • 今入っているパッケージを確認するためだけにpackage.jsonを見に行く
  • パッケージを追加・削除するたびにターミナルを開く
  • パッケージの情報(ライセンスやバージョン、README)を調べるためにわざわざブラウザを開く

という別コンテキストを介した作業の繰り返しによって、開発の手が止まることにじわじわと積み重なるストレスを感じていました。

「開発の手を止めずに、パッケージ管理や情報収集をすべて完結させたい！」

そんな思いから今回、npmパッケージ管理をVS Code内のGUIで完結できる拡張機能「modulist」を開発・リリースしました。

本記事では、この拡張機能によってどのようなストレスが解消されるのかと、開発にあたって直面した
「クレジットカードなしでVS Marketplaceに公開する」という壁をどう乗り越えたかについて共有します。

ソースコード

modulistのソースコードはこちらです。

スターなどをいただけると励みになります！

技術スタック

modulistは、以下の技術スタックで開発しています。

tech-stack.png

解決したかった課題

フロントエンド開発やBot開発を進める中で、パッケージ管理における以下のような画面の往復に不便さを感じていました。

  • ターミナル操作の煩わしさ
    • パッケージの追加・削除・更新のたびに、いちいち下のターミナルエリアへ視線を移してnpm installなどを打つのが面倒。
  • ブラウザへのコンテキストスイッチ
    • 「このライブラリのライセンスは何だっけ？」「この関数の型定義をサクッと確認したい」と思ったとき、わざわざブラウザを開いてnpmレジストリやGitHubを検索する必要がある
      ⇒集中力が途切れてしまう。
  • 情報の分散
    • package.jsonを開けば何がインストールされているかはわかる。しかし、それぞれのパッケージの詳細情報まではすぐに把握できない。

主な機能

大きく分けて以下の3つの機能があります。

  1. サイドバーへの一覧表示
  2. ツールチップによる詳細情報の表示
  3. GUIによるコマンド不要のパッケージ操作

1. サイドバーへの一覧表示

package一覧
パッケージ一覧を表示している様子。画像はQiita用リポジトリを開いている

dependencies(通常依存)とdevDependencies(開発依存)を、ディレクトリ構造のように分けてサイドバーに表示します。
毎回package.jsonを開いたり、npm listを実行したりしなくても、現在どんなパッケージがインストールされているかを現在編集しているファイルを離れることなくひと目で把握できます。

また、サブディレクトリにあるpackage.jsonも認識するので、Reactとバックエンドの処理の両方を必要とするWebアプリ開発には特に役立ちます。

2. ツールチップによる詳細情報の表示

ツールチップ
Qiita CLIにホバーしている様子

パッケージ名にマウスをホバーするだけで、npmレジストリやBundlephobia APIから取得した以下の情報をツールチップで表示します。

  • バージョン情報
  • パッケージのバンドルサイズ
  • ライセンス / 作者情報
  • パッケージの説明文 / READMEの一部
  • ホームページ / GitHubリポジトリのリンク

「このライブラリのライセンスは何だっけ？」「この関数の型定義をサクッと確認したい」と思ったときでも、エディタからブラウザへ移動したりnpm viewを打ったりする手間が省けます。
また、バンドルサイズがその場でわかるため、軽量なライブラリの選定にも役立ちます。

現在、その日初めてツールチップを表示させるときに読み込みがとても長いという問題を確認しています。
原因としては

  • バンドルサイズのキャッシュが空なので必ずネットワーク経由で取りに行く必要がある
  • Bundlephobia APIは「そのバージョンのパッケージサイズを実際にビルドして計算する」仕様である

の2つが考えられるので、今後のアップデートでタイムアウト処理を入れてみようと思います。

3. GUIによるコマンド不要のパッケージ操作

パッケージ横のボタン
パッケージ名の横にある操作ボタン。左から「npmで確認」、「リリースノート」、「削除」の操作を行える

コンテキストメニュー
パッケージを右クリックすると表示されるメニュー。バージョン関連の操作も行える

新規パッケージの検索とインストール
パッケージを検索してインストールしている様子。一度に複数のパッケージを選択してインストールできる

パッケージ横に表示されるボタンやコンテキストメニューから、以下の操作をコマンド入力なしで行うことができます。

  • npmレジストリ、リリースノートをブラウザで開く
  • パッケージの削除
  • 特定のバージョンのインストール、バージョンの固定/固定解除
  • 新規パッケージの検索とインストール

npm install <package> のようなコマンドを打ったり、package.jsonを直接触ったりしなくても、マウス操作だけで直感的かつ安全にパッケージの管理ができます。

その他の便利な機能

スクリプト
package.jsonに定義されたスクリプト一覧。ここからスクリプトを直接実行できる

  • スクリプトの直接実行: package.jsonに定義されたスクリプトを、サイドバーからワンクリックで実行できます。npm run devなどを毎回ターミナルで打ったり、VS Codeに搭載されている機能(実行とデバッグ)を使ったりする手間が省けます。
  • 多言語対応(i18n): 日本語と英語に完全対応。VS Codeの言語設定に合わせて自動で切り替わります。

現在のバージョン(v1.0.1)では、パッケージのインストールや削除などの内部操作を pnpm環境用に最適化しています。
npm / yarn / bunなどのパッケージマネージャーについては今後のアップデートで対応していく予定です。

modulistの導入方法

VS Code内の拡張機能タブ から簡単にインストールできます。

  1. VS Code内の拡張機能タブ(Ctrl + Shift + X)を開く
  2. 検索バーに「modulist」と入力
  3. modulist(Publisher: zibasan)のInstallボタンをクリック

拡張機能タブ
拡張機能タブ内での表示

  • パッケージの操作(追加や削除など)を行うには、お使いの環境に pnpm がグローバルインストールされている必要があります。pnpmのインストールは公式ドキュメントを参照してください。

動作環境とバージョンに関する注意

  • VS Codeの必須バージョン: modulist v1.0.1 時点で v1.118.0以上 が必要です。
  • VS Codeのフォークエディターをご利用の方: Open VSX Registryにも公開しており、Antigravity等のフォークエディターでも利用可能です。
    • ただし、エディターが内部で使用しているVS Codeのバージョンによってはインストールできない可能性があります。
    • 今後のアップデートで必須バージョンの見直し(引き下げ)を検討しているので、その場合は今しばらくお待ちいただけますと幸いです。

技術的な学び ― クレジットカードなしで拡張機能を公開する

今回、開発よりも苦戦したのが「拡張機能の公開作業」でした。
公式ドキュメントやQiitaに上がっている多くの記事では、@vscode/vsceを用いたコマンドラインからの公開方法が主流として紹介されています。

公式Docs / 参考記事↓↓

しかし、ここで学生特有の壁にぶつかりました。

Azure DevOps 組織の作成にはクレカが必須だった

vsceを使ってコマンドラインから公開するには、

  1. vsceをインストール(npmパッケージ)
  2. Microsoft AzureにGitHubアカウントでサインイン
  3. Azure DevOpsの組織を作成する
  4. Personal Access Token(PAT)を取得
  5. vsceで、PATを使ってログイン
  6. vsce publishで公開

という手順を踏む必要があります。

私もこの方法を使って公開しようとしましたが、一つ問題がありました。
Azure DevOps 組織の作成には請求情報の登録(つまりクレジットカードの登録)が求められるのです。

クレジットカードを持っていない高校生の私は、この時点で「コマンドラインからの公開」という手段を閉ざされてしまいました。

解決策：Marketplaceへ直接アップロードする

コマンドラインから公開できないとわかり諦めかけましたが、AIの力も借りながら粘り強く調べてみました。

その結果、クレジットカードを持っていなくても拡張機能を公開できる回避策を見つけました。
それが以下の方法です。

  1. @vscode/vsceをグローバル(-g)でインストール
    パッケージを汚したくない方は、手順3の実行時にnpx @vscode/vsceを使ってもOK

  2. 拡張機能に必要なファイル(README.md, LICENSE, package.jsonなど)を用意し、すべてのコードをビルドしておく

  3. vsce packageを実行し、.vsixファイルをローカルで生成する

  4. Visual Studio Marketplaceにアクセスし、MicrosoftアカウントかGitHubアカウントでサインイン

  5. 「Publisher」(パブリッシャー)を作成
    このとき、IDはpackage.jsonに記述したpublisherの文字列と一致させる必要がある

  6. 管理画面のNew Extensionから、手順2で生成した.vsixファイルをアップロードする

この方法であれば、クレジットカードを登録しなくてもMarketplaceへの公開や更新が可能になります。
同じようにカードを持っていない学生の方、個人情報をむやみに登録したくない方、あるいは操作が複雑で分かりづらいと感じる方には、この直接アップロード方式がおすすめです。

今後の展望

modulistはまだリリースされたばかりのツールです。より多くの方にとって使いやすいものにするため、以下のようなアップデートを計画しています。

  • 他のパッケージマネージャーへの対応: npm、yarn、bun への対応を予定しています。
  • パッケージ情報ツールチップ表示の高速化: Bundlephobia APIのタイムアウト処理を入れるなどして、ツールチップの表示が高速化するような調整を予定しています。
  • 通常依存と開発依存間の移動: 通常依存(dependencies)と開発依存(devDependencies)を、ワンクリックやD&Dで行き来できる機能。
  • その他、UI/UXの改善など

あわせて読みたい

今回の開発におけるCI/CDの設定やTypeScriptでの実装のこだわりなど、より技術的な話については Zenn にも記事を投稿しているので、興味のある方はぜひこちらも覗いてみてください。

おわりに

今回の「modulist」開発を通して、高校生という立場でも、日々の「小さな不便」をツールとして形にすることで、自分だけでなく誰かの役に立てる可能性があると強く実感しました。

もともとは趣味で行っているTypeScript製CLIの開発や、文化祭のサイト制作で感じたストレスがきっかけでした。
しかし、結果として自分自身の開発環境を大きく改善することができたのでとても満足しています。

もしこの記事を読んで少しでも「いいな」「使ってみたい」と思っていただけたら、ぜひお手元のVS Code内からインストールして使ってみてください！
また、この記事への「いいね」やストック、GitHubのStarやIssue/PR、Marketplaceでのレビューをいただけると、これからの開発の大きな励みになります。

最後までお読みいただき、ありがとうございました！！

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?