<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>昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/d79f7fa8bfe1-20240630.png" loading="lazy" class="md-img"></p>
<p>Viteの伸びがすごいですね...🔥</p>
<p>ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9a20a5e326488" src="https://embed.zenn.studio/card#zenn-embedded__9a20a5e326488" data-content="https%3A%2F%2Fwww.farmfe.org%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.farmfe.org/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.farmfe.org/</a></p>
<p>気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。</p>
<h2 id="%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8%E3%80%81%E3%82%84%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8%E3%80%81%E3%82%84%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> やること、やらないこと</h2>
<h3 id="%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> やること</h3>
<ul>
<li>Farmの紹介</li>
<li>Farmの特長とおすすめポイントの紹介</li>
</ul>
<h3 id="%E3%82%84%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> やらないこと</h3>
<ul>
<li>Farmの導入方法や詳細について<br>
（ドキュメントがわかりやすい）</li>
</ul>
<h2 id="farm%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#farm%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Farmとは？</h2>
<p>Farmは、webpackやViteと並列に位置するツールで、モダンなWeb開発環境に最適化された高速なWeb Bandlerです。Rustで書かれており、高パフォーマンスと低メモリ使用量が特長で、JavaScriptやTypeScriptなどの主要な言語に対応しており、Viteとの互換性も保たれているため導入のしやすいツールとなっています。</p>
<p>webpackではビルド時間に時間がかかることがストレスで、その後Viteなどのツールが出てきましたが、大規模プロジェクトになると読み込む必要のあるモジュールが数千個におよびブラウザが停止したりクラッシュする問題が生じていました。それらのストレスや問題を解決するためにFarmが作られたという背景があるようです。</p>
<h2 id="farm%E3%81%AE%E7%89%B9%E9%95%B7%E3%81%A8%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#farm%E3%81%AE%E7%89%B9%E9%95%B7%E3%81%A8%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> Farmの特長とおすすめポイント</h2>
<h3 id="1.-%E9%AB%98%E9%80%9F%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E9%80%9F%E5%BA%A6">
<a class="header-anchor-link" href="#1.-%E9%AB%98%E9%80%9F%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E9%80%9F%E5%BA%A6" aria-hidden="true"></a> 1. 高速なビルド速度</h3>
<h4 id="%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AE%E5%84%AA%E4%BD%8D%E6%80%A7">
<a class="header-anchor-link" href="#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AE%E5%84%AA%E4%BD%8D%E6%80%A7" aria-hidden="true"></a> パフォーマンスの優位性</h4>
<p>FarmはRustで実装されているため、他のJavaScriptベースのバンドラーに比べてビルド速度が非常に高速です。webpackやVite、Rspackなどと比べても、コールドスタート、ホットスタートなどあらゆるビルドモードと比較して高いパフォーマンスを記録しており、webpackより20倍、Viteより10倍高速だったというベンチマークテストの結果が出ています🚀</p>
<h3 id="2.-%E4%BD%8E%E3%83%A1%E3%83%A2%E3%83%AA%E6%B6%88%E8%B2%BB">
<a class="header-anchor-link" href="#2.-%E4%BD%8E%E3%83%A1%E3%83%A2%E3%83%AA%E6%B6%88%E8%B2%BB" aria-hidden="true"></a> 2. 低メモリ消費</h3>
<h4 id="%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E5%8A%B9%E7%8E%87">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E5%8A%B9%E7%8E%87" aria-hidden="true"></a> リソース効率</h4>
<p>こちらもRustで書かれているため、低メモリ消費を実現しており、大規模なプロジェクトでも効率的に動作するのが特長です。メモリ使用量が低いため、他のプロセスに影響を与えずにビルドを実行できるのは嬉しいポイントですね🙌🏻</p>
<h3 id="3.-%E3%83%A2%E3%83%80%E3%83%B3%E3%81%AA%E8%A8%80%E8%AA%9E%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88">
<a class="header-anchor-link" href="#3.-%E3%83%A2%E3%83%80%E3%83%B3%E3%81%AA%E8%A8%80%E8%AA%9E%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88" aria-hidden="true"></a> 3. モダンな言語サポート</h3>
<h4 id="%E5%B9%85%E5%BA%83%E3%81%84%E5%AF%BE%E5%BF%9C%E8%A8%80%E8%AA%9E">
<a class="header-anchor-link" href="#%E5%B9%85%E5%BA%83%E3%81%84%E5%AF%BE%E5%BF%9C%E8%A8%80%E8%AA%9E" aria-hidden="true"></a> 幅広い対応言語</h4>
<p>JavaScript、TypeScript、HTML、CSS、JSON、静的アセットなどのコンパイルをサポートしており、公式プラグインによってReact、Vue、Solid、Svelte、sass、less、postcssにも対応しています。そのため、現在プロジェクトで使用している技術スタックを気にせず導入できるのもメリットの一つになりそうです。</p>
<h3 id="4.-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A8%E3%82%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0">
<a class="header-anchor-link" href="#4.-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A8%E3%82%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" aria-hidden="true"></a> 4. プラグインエコシステム</h3>
<h4 id="%E6%9F%94%E8%BB%9F%E3%81%AA%E6%8B%A1%E5%BC%B5%E6%80%A7">
<a class="header-anchor-link" href="#%E6%9F%94%E8%BB%9F%E3%81%AA%E6%8B%A1%E5%BC%B5%E6%80%A7" aria-hidden="true"></a> 柔軟な拡張性</h4>
<p>豊富なプラグインエコシステムがあり、必要に応じてカスタムプラグインを作成することができます。そのため、プロジェクトのニーズに合わせた機能を簡単に追加することができるみたいです。</p>
<p>RustプラグインとJavaScriptプラグインの両方がサポートされているのでRustが書けなくても大丈夫そうです🔥<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7ea8fea23b144" src="https://embed.zenn.studio/card#zenn-embedded__7ea8fea23b144" data-content="https%3A%2F%2Fwww.farmfe.org%2Fdocs%2Fplugins%2Fwriting-plugins%2Foverview" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.farmfe.org/docs/plugins/writing-plugins/overview" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.farmfe.org/docs/plugins/writing-plugins/overview</a></p>
<p>また、コミュニティの活動も活発でたくさんの便利なプラグインが公開されています。</p>
<h3 id="5.-%E9%96%8B%E7%99%BA%E8%80%85%E4%BD%93%E9%A8%93%E3%81%AE%E5%90%91%E4%B8%8A">
<a class="header-anchor-link" href="#5.-%E9%96%8B%E7%99%BA%E8%80%85%E4%BD%93%E9%A8%93%E3%81%AE%E5%90%91%E4%B8%8A" aria-hidden="true"></a> 5. 開発者体験の向上</h3>
<h4 id="%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%95%E3%83%AC%E3%83%B3%E3%83%89%E3%83%AA%E3%83%BC%E3%81%AA%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%95%E3%83%AC%E3%83%B3%E3%83%89%E3%83%AA%E3%83%BC%E3%81%AA%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9" aria-hidden="true"></a> ユーザーフレンドリーなインターフェース</h4>
<p>Farmは使いやすさに重点を置いて設計されていて、設定がシンプルで直感的なインターフェースが提供されています。ドキュメントもしっかりまとめられており、読みやすいのもありがたい。また、サンプルコードも豊富に用意されているため、初めて使用する方でも比較的すぐに使用できるのではないかと思います🙌🏻</p>
<h3 id="6.-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%BA%92%E6%8F%9B%E6%80%A7%E3%81%AE%E7%A2%BA%E4%BF%9D">
<a class="header-anchor-link" href="#6.-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%BA%92%E6%8F%9B%E6%80%A7%E3%81%AE%E7%A2%BA%E4%BF%9D" aria-hidden="true"></a> 6. ブラウザ互換性の確保</h3>
<h4 id="%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> クロスブラウザ対応</h4>
<p>Farmではモダンブラウザもレガシーブラウザも両方をサポートしているため、ブラウザ間の互換性が保たれています。そのため、ブラウザ間の違い意識せずに実装が可能という点も嬉しいポイントですね！</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>上記のように、Farmは高速かつドキュメントやプラグインエコシステムも豊富なビルドツールになっています。</p>
<p>現時点ではとても魅力的に見えますが、Farmもまだ現時点（2024年6月）ではv1.2.4とまだまだ出たばかりのツールです。GitHub Starも3.9kと順調に伸びていますが、今後使用者が増えていくのか、Viteなど他のビルドツールに取って代わる存在となれそうかは追ってウォッチしていく必要がありそうです。</p>
<p>気になる存在、Farm<br>
引き続きチェックしていこうと思います✊🏻</p>


次世代Web BandlerのFarmが熱そう

Discussion