🪪

シェルで自己紹介！ npx で実行できる名刺を作ってみた

2023/12/05に公開

この記事は「めぐろLT Advent Calendar 2023」5日目の記事です。

シェルで表示できる名刺を作ってみたのでご紹介します。また、このライブラリを作るにあたって、実行可能なnpmライブラリの作り方についても触れていきます。

Bash 環境で実行した様子
Bash 環境にて実行した様子

対象読者

2023年には、COVID-19の落ち着きもあり、オフラインによるエンジニアイベントが再開されてきました。私も2023年だけで30回以上のオフラインイベントへ参加しました。

オフラインイベントの醍醐味の1つとして、登壇者や参加者などと「社外の横のつながりを作れる」ことが挙げられます。懇親会でSNS交換をされる方も多いのではないでしょうか。

以前はTwitterを使っている方が多く、Twitterのスクリーンネームを交換することで完結していました。しかし、近年はTwitter以外のSNSを使う方や、複数のSNSを使いこなす方が増えてきています。そのため、SNS交換において手間取る場面が増えてきました。

そんな中、We Are JavaScripters! @42nd で登壇されていた @kkeeth さんが登壇中の自己紹介としてnpxで実行できる電子名刺と、そのスクリーンショットを登壇資料に載せているのを拝見しました。 (スライド2枚目)

とても便利だと思ったので、私も作ってみました。

Node.js 16以上がインストールされた環境で、次のコマンドを実行してみてください。 (実行にあたりソースコード約40 kBがダウンロードされます)

npx bicstone

実行後、次のような電子名刺が表示されます。URLをクリックすることで、そのままSNSプロフィールページを開くことができます。

PowerShell 環境で実行した様子
PowerShell 環境にて実行した様子

WebエンジニアであればPCにNode.jsは大体ローカルにインストールされているので (要出典)、クロスプラットフォームで簡単に実行できるのが特徴です。

npx とは、Node.jsに付随するnpm 5.2.0以上が導入されていれば使えるコマンドです。指定されたnpmライブラリをダウンロードをして package.json の bin に指定されたJSを実行します。

今回、npmに bicstone というライブラリを公開しました。

npx bicstone を実行すると、npmのライブラリ bicstone をダウンロードしてきて、3行目の bin に指定した ./dist/cli.js を実行します。

./dist/cli.js は次のようなスクリプトになっており、シェルによってこのスクリプトが実行されることで電子名刺を表示しています。

cli.jsの概要

#!/usr/bin/env node
process.stdout.write("Hello, World!");
process.exitCode = 0;

一方、npxで実行する時には、依存関係のライブラリ (package.json で指定された dependencies) も一緒にダウンロードされます。そのため、依存関係が多いと実行に時間がかかってしまいます。

そこで、bicstone では事前にバンドルしておくことで、実行時間を短縮しています。具体的には esbuild というライブラリを使って、依存関係のライブラリを事前にバンドルしています。

ただ、バンドルによって依存関係のライセンス情報が削除されるため、ライセンス違反にならないように注意する必要があります。使用していたライブラリではMITライセンスが適用されているため、著作権とライセンスの表示をするためにライセンスファイルを生成する必要がありました。

そこで、esbuild-plugin-license というライブラリを使って、ライセンスファイルを生成して一緒に配信しています。

esbuildにおけるライセンスファイル生成については、別の記事で紹介する予定です。