<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>個人的に使ってみた所感です。<br>
記載してある情報には誤りがある場合があります。ご了承ください 🙇‍♂️</p>
<h2 id="%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%EF%BC%9F" aria-hidden="true"></a> ツールチェーンってなに？</h2>
<p>自分も初めて聞いたので ChatGPT に聞いてみました。</p>
<blockquote>
<p>ツールチェインとは、ソフトウェア開発において、プログラムを作成するために必要な一連のツールの集合のことです。</p>
</blockquote>
<p>なるほど。<br>
JavaScript を例にすると、Node.js や Deno, npm や yarn などのツール群を総じてツールチェーンと表現するみたい。勉強になります。</p>
<p>最近、分からない単語が登場した時は Google さんよりも ChatGPT さんに聞きがちです。web の知識をまとめた上で噛み砕いて教えてくれるので理解が捗ります。もちろん情報の精査はしますが。</p>
<h2 id="javascript-%E3%81%AE%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB%E3%80%8Cproto%E3%80%8D">
<a class="header-anchor-link" href="#javascript-%E3%81%AE%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB%E3%80%8Cproto%E3%80%8D" aria-hidden="true"></a> JavaScript のツールチェーン管理ツール「proto」</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__faf14ede57511" src="https://embed.zenn.studio/card#zenn-embedded__faf14ede57511" data-content="https%3A%2F%2Fmoonrepo.dev%2Fdocs%2Fproto" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://moonrepo.dev/docs/proto" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://moonrepo.dev/docs/proto</a></p>
<p>今回自分が見つけたのが<a href="https://moonrepo.dev/docs/proto" target="_blank" rel="nofollow noopener noreferrer">proto</a>という Rust 製の JavaScript のツールチェーン管理ツールです。</p>
<p>このツールを使用することで Node.js や npm, pnpm などのツールを一元管理することができます。</p>
<p>JavaScript 以外にも Python や Go なども対応しており、<a href="https://moonrepo.dev/docs/proto/tools#third-party" target="_blank" rel="nofollow noopener noreferrer">サードパーティー製のプラグイン</a>を使用することで、Biome や Terraform、.NET 等も管理できるらしいです。</p>
<h2 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 使ってみる</h2>
<h3 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h3>
<p>では実際に使っていきたいと思います。<br>
まずはインストールから。</p>
<p>自分は Mac に入れるアプリケーションや CLI はすべて<a href="https://brew.sh/ja/" target="_blank" rel="nofollow noopener noreferrer">Homebrew</a>で管理したい人間です。<br>
ですが<a href="https://moonrepo.dev/docs/proto/install" target="_blank" rel="nofollow noopener noreferrer">Install Proto</a>を見てみても brew でのインストール方法が記述されていません。<br>
なので今回は<code>brew tap</code>コマンドを使用して、brew で管理できるように頑張ってみたいと思います。</p>
<blockquote>
<p>brew tap とは公式以外のリポジトリをフォーミュラとして Homebrew に追加するもので、brew のもとで install,uninstall,update などが行えます。もちろん自分が公開しているものも簡単に追加できます。</p>
</blockquote>
<p><a href="https://qiita.com/sammrai/items/85ed5e914d424fbf9fd6" target="_blank" rel="nofollow noopener noreferrer">brew tap とは - Qiita</a>より引用<br>
（とても分かりやすかったです。ありがとうございました mm）</p>
<p>まずは、<code>brew tap</code>を使い、proto のリポジトリを Homebrew に追加していきます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell">brew tap moonrepo/proto https://github.com/moonrepo/proto
</code></pre>
</div><p>そうすると<code>brew install</code>で proto がインストールできるようになっています。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell">brew <span class="token function">install</span> proto
</code></pre>
</div><p>自分の環境では<code>proto setup</code>を実行しないと動かなかったので実行します。<br>
（公式のインストール方法に従って導入すれば問題ないのかな？）</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">zsh</span></div>
<pre class="language-shell"><code class="language-shell">proto setup
</code></pre>
</div><p>導入できました！！</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">zsh</span></div>
<pre class="language-shell"><code class="language-shell">proto <span class="token parameter variable">--version</span>
<span class="token comment"># proto 0.31.5</span>
</code></pre>
</div><p><img src="https://res.cloudinary.com/zenn/image/fetch/s--iAMqems7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3bdc061de13a72bb67d15c3f.png%3Fsha%3Ddda09f59b891fdd11b9b1e5563167d5528b783b5" alt="alt text" loading="lazy" class="md-img"></p>
<h3 id="node.js-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#node.js-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> Node.js をインストールしてみる</h3>
<p>proto がインストールできたので実際に Node.js を入れてみます。<br>
インストールするには<code>install</code>コマンドを使います。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell"><span class="token comment"># iはinstallのエイリアス</span>
proto i <span class="token function">node</span> <span class="token comment">#  version指定したい場合はnode 20のように指定する</span>
<span class="token comment"># [ INFO 2024-03-10 04:21:49.703] proto::commands::install:install  Node.js has been installed to ~/.proto/tools/node/21.7.1!</span>
</code></pre>
</div><p>実際にインストールされたか確認してみます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell"><span class="token function">node</span> <span class="token parameter variable">--version</span>
<span class="token comment"># v21.7.1</span>
</code></pre>
</div><p>これで proto 経由で Node.js をインストールすることができました。</p>
<h3 id="%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%9B%BA%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%9B%BA%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> バージョン固定してみる</h3>
<p><code>pin</code>コマンドを使用します。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell">proto pin <span class="token function">node</span> <span class="token number">21</span> <span class="token parameter variable">--global</span>
<span class="token comment"># [ INFO 2024-03-10 04:38:23.501] proto::commands::pin:pin  Set the Node.js version to ~21</span>
</code></pre>
</div><p>ディレクトリ毎に使用するバージョンを変えたい時は<code>--global</code>オプションを削除し使用したいディレクトリで<code>pin</code>コマンドを実行します。<br>
<code>--global</code>オプションを外すとコマンドを実行したディレクトリに<code>.prototools</code>が生成され、そこに固定したツールとバージョンが記載されます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> ~/hoge</span></div>
<pre class="language-shell"><code class="language-shell">proto pin <span class="token function">node</span> <span class="token number">21</span>
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> ~/hoge</span></div>
<pre class="language-shell"><code class="language-shell"><span class="token function">cat</span> .ptorotools
───────┬─────────────────────────────────────────────────────────────────────────
       │ File: .prototools
───────┼─────────────────────────────────────────────────────────────────────────
   <span class="token number">1</span>   │ <span class="token function">node</span> <span class="token operator">=</span> <span class="token string">"~21"</span>
───────┴─────────────────────────────────────────────────────────────────────────
</code></pre>
</div><h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p>これでディレクトリ、プロジェクト毎に使用するツールのバージョンを自由に固定できるようになりました。</p>
<p>今回は実際の使用頻度が高いであろう最低限の機能の紹介に留めておきます。（というか自分がまだ触れていないだけです。。。）</p>
<p>他の管理ツール(<a href="https://asdf-vm.com/" target="_blank" rel="nofollow noopener noreferrer">asdf</a>とか)でも似たようなことはできそうなのであえて周りと違ったものを使いたい！なんて方は試してみるといいかもしれません。</p>
<p>「protoは〇〇ができてasdfだと△△ができない！」だとか、「そもそもprotoと他のツールでは役割が全然違う！」みたいな知見をお持ちの方がいらっしゃったら是非コメントにて教えていただきたいですmm</p>
<p>拙い記事ですがご覧いただきありがとうございました！！</p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91(%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91(%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)" aria-hidden="true"></a> おまけ(エイリアス機能について)</h2>
<p>想定した使い方ができなかったのでおまけとして残しておきます。</p>
<blockquote>
<p>The proto alias &lt;tool&gt; &lt;label&gt; &lt;version&gt; (or proto a) command will define a custom alias that maps to a specific version for the provided tool. Aliases can be used anywhere a version is accepted.</p>
</blockquote>
<p>fmfm<br>
ひょっとして<code>node --version</code>を<code>test-node --version</code>みたいに実行できちゃうのかな？なんて思ったのでやってみました。</p>
<p><code>pin</code>コマンドと同様に<code>--global</code>をつけずに実行すると実行したディレクトリのみで設定したエイリアスが使えるらしいです。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell">proto <span class="token builtin class-name">alias</span> <span class="token function">node</span> test-node <span class="token number">21</span> <span class="token parameter variable">--global</span>
<span class="token comment"># [ INFO 2024-03-10 04:44:00.409] proto::commands::alias:alias  Added alias test-node (~21) for Node.js</span>
</code></pre>
</div><p>これでエイリアスが設定できたはず。。。！！<br>
あれ。。。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> zsh</span></div>
<pre class="language-shell"><code class="language-shell">test-node <span class="token parameter variable">--version</span>
<span class="token comment"># zsh: command not found: test-node</span>
</code></pre>
</div><p>おかしいですね。。。もしかしたらこのエイリアスは<code>node</code>コマンドのエイリアスって訳ではないのかもしれません🤔</p>
<p>ひょっとしたらprotoを開発している<a href="https://moonrepo.dev/" target="_blank" rel="nofollow noopener noreferrer">moonrepo</a>の別プロダクトである<a href="https://moonrepo.dev/moon" target="_blank" rel="nofollow noopener noreferrer">moon</a>で使えたりするのかもしれません。（<strong>完全に憶測です</strong>)</p>


JSのツールチェーン管理ツール「proto」を使ってみる

JavaScript のツールチェーン管理ツール「proto」

Node.js をインストールしてみる

おまけ(エイリアス機能について)

Discussion