diff --git "a/source/_posts/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" "b/source/_posts/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" index c98744af721..1ce0917b169 100644 --- "a/source/_posts/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" +++ "b/source/_posts/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" @@ -21,8 +21,8 @@ Vue.js連載企画を始めます。今年は勤労感謝の日が土曜日で | Date | Name | Title | |:-|:-|:-| | 11/25(月) | 渋川よしき | Nuxtの通信パターンも見てみる（この記事） | -| 11/26(火) | 大岩潤矢さん | Vue3・Nuxt3アプリをPWA化する方法 2024年版 | -| 11/27(水) | 村田靖拓さん | 2015年頃のフロントエンジニアだってvoid(0)のワクワクを理解したい | +| 11/26(火) | 村田靖拓さん | [2015年頃のフロントエンジニアだってvoid(0)のワクワクを理解したい](/articles/20241126a/) | +| 11/27(水) | 大岩潤矢さん | Vue3・Nuxt3アプリをPWA化する方法 2024年版 | | 11/28(木) | 永井優斗さん | Vue Fes Japan 2024報告 | | 11/29(金) | 山本竜玄さん | Deno × Vueを触ってみた(2024年冬) | diff --git "a/source/_posts/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" "b/source/_posts/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" new file mode 100644 index 00000000000..9d5f33f1db0 --- /dev/null +++ "b/source/_posts/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" @@ -0,0 +1,102 @@ +--- +title: "2015年頃のフロントエンジニアだってvoid(0)のワクワクを理解したい" +date: 2024/11/26 00:00:00 +postid: a +tag: + - JavaScript + - Vite + - gulp +category: + - Infrastructure +thumbnail: /images/20241126a/thumbnail.png +author: 村田靖拓 +lede: "「void(0)」がどんなものなのか、どんなうれしみや期待があるのかなど、これを期に自分なりに調査・整理しようというのが本記事のモチベーションです" +--- + + + +本記事は[Vue連載](/articles/20241125a/)2本目の記事です。 + +# はじめに + +こんにちは、FVGの村田です。FVGとは「Future Value Group」の略称で、フューチャーの人材や知財の価値向上を目的として様々な活動を行っていくグループです。 + +私はフューチャーに入社して10年ちょっと経つのですが、新人研修修了直後はとあるプロジェクトに参画し[Urushi](https://future-architect.github.io/urushi/ja-jp/)というWebUIコンポーネントの開発に携わっていました。当時[ハンバーガーメニュー](https://future-architect.github.io/urushi/ja-jp/demo/hamburger/)などのコンポーネント開発を担当していたのですが、CSS覚えたての私はアニメーションにて180°回転させれば良いところをノリと勢いで1080°回転させてしまい、先輩に「好き勝手回せばいいってもんじゃない。ユーザに何が起こってるか迷子にさせない意識を持て。」と呆れ顔で指摘された記憶があります。懐かしいです。そんな私ですが、ひょんなことから7年ぶりにフロントエンドの開発(Vue.jsを利用)に携わる機会があり、せっかくなので今回のVue連載に参加しようと思った次第です。 + +# void(0)に行き着いたワケ + +記事執筆にあたり、なにか面白いネタはないかとネットを徘徊していたのですが、如何せん7年ぶりなもので色々と知らない単語がたくさんありました。私がゴリゴリにJavaScriptを書いていたのは2014〜2016年頃で、UI的にはスキューモフィズムからフラットデザインへの転換期、ライブラリ的にはBackbone.jsなどを主軸に使っていた時代です。Vueは2014年2月に初版がリリースされていましたが、当時の私は把握していませんでした。 + +幸い2024年10月(記事執筆の1ヶ月前)にはVue Fes Japan 2024が開催されており、そのセッション情報などを調べることで最近話題になってる物事がなにかを知ることができました。Vite/Nuxt.js/pinia/Vapor/svelte5などピックしたキーワードはいくつかあったのですが、将来性など含め一番気になるなと思ったのが「void(0)」でした。どんなものなのか、どんなうれしみや期待があるのかなど、これを期に自分なりに調査・整理しようというのが本記事のモチベーションです。 + +なので本記事は、「void(0)がなんなのか知りたい」「しばらくフロントエンド畑から離れていていたけど最近どんな感じなのか気になる」といった方を想定読者として執筆します。 + +※ロゴ表記は「void(0)」ですが、各種記事では「VoidZero」と書かれているので、以降それに従います。 + +# VoidZeroとは + +VoidZeroは次世代のツールチェインを開発すべく設立された会社です。（次世代ツールチェインそのもの自体もVoidZeroと呼称するんでしょうか?...）背景を詳しく知るには2024年10月1日に公開されたEvan You(Vueを作った人)さんによる[Announcing VoidZero - Next Generation Toolchain for JavaScript](https://voidzero.dev/posts/announcing-voidzero-inc)を読むのが一番なのですが、VoidZeroは「次のVite」を考えた時に直面した課題を乗り越えるために着想されたアイデアです。 + +# ビルドツールの変遷 + +「次のVite」を語る前に、そもそもViteがなんなのかを理解しておきましょう。JavaScript界隈はエコシステムの変化が激しく、ちょっと目を離した隙に全く知らない世界に様変わりしてしまう印象がありますが、今の私がまさにそれ、浦島太郎状態です。 + +この記事を書きながらふと思い出したのですが、[2016年に開催した社内LT大会](/articles/20160218/)にて私はGulpの話をしていました。Webpack(2014年2月初版リリース)が"新しい"と言われていた時代に、Gulpを使って様々なジョブを組んでいた記憶が蘇ります。 + +さて、話を戻しますがViteはフロントエンドビルドツールです。[公式サイト](https://ja.vite.dev/)曰く「次世代のWebアプリケーションを支える超高速フロントエンドビルドツール」とのこと。"超高速"を謳うからには、比較対象となる既存のビルドツール群もいるはず。ということで更に調べてみます。 + +フロントエンド開発におけるビルドツールには様々なものがあります。漏れはあると思いますが、調べる中でヒットした代表的なものとその特徴を時系列順（あくまで発表年ベース）で以下に列挙します。 + +| ツール | 発表年 | 特徴 | +|:-----------|:------------|:------------| +| Grunt | 2012 | JavaScriptタスクランナー。コマンドを介して各種タスク（例えば、ファイルの縮小、結合、テストの実行など）を自動化する。 | +| Gulp | 2013 | ストリーミングビルドシステム。コードはNode.jsライブラリとして書かれ、シンプルなAPIでタスクを定義する。 | +| Webpack | 2014 | モジュールバンドラ。JavaScriptやその他のアセット（CSS、画像など）を1つのバンドルにまとめる。 | +| Rollup | 2015 | JavaScriptモジュールバンドラ。主にライブラリ作成に焦点を当てており、ツリーシェイキング（未使用コードの除去）に優れている。 | +| Parcel | 2017 | ゼロコンフィギュレーションのバンドラ。設定なしでも動作し、開発者が迅速にプロジェクトを開始できる。 | +| esbuild | 2020 | 非常に高速なJavaScriptバンドラとMinifier。Go言語で書かれており、他のバンドラに比べて圧倒的に高速。 | +| Vite | 2020 | モダンなフロントエンドビルドツール。HMR（Hot Module Replacement）をサポートし、開発者体験を向上させるために設計されている。初期のビルドはesbuildを使用し、最終的なバンドルにはRollupを採用。 | + +色々ありますね。私がバリバリフロントエンジニアをやっていた2014～2016年頃から見てもここ10年で5種類(and more)の新たなツールが登場し順次デファクトが移り変わっている事実を鑑みると、たしかに少し界隈から離れているだけで浦島太郎状態になってしまいそうだなと感じます。 + +今回はすべてのツールにじっくり触れることはしませんが、「次のVite」の解像度をあげるためにもう少しViteを深堀ってみます。 + +# Viteの存在感と直面している課題 + +[State of Frontend 2024](https://tsh.io/state-of-frontend/#building-tools)にて、フロントエンドエンジニアが利用しているビルドツールについての調査が行われています。 + +| ツール | A.使った(All) | B.使った(Like) | C.使った(Dislike) | D. その他 | +|:-----------|:------------|:------------|:------------|:------------| +| Grunt | 21.7% | 4.6% | 17.1% | 78.3% | +| Gulp | 32.4% | 12.9% | 19.5% | 67.6% | +| Webpack | 82.5% | 44% | 38.5% | 17.5% | +| Rollup | 40.3% | 33.9% | 6.4% | 59.7% | +| Parcel | 19.7% | 13.2% | 6.5% | 80.3% | +| esbuild | 54.4% | 50.2% | 4.2% | 45.6% | +| Vite | 84.1% | 82.4% | 1.7% | 15.9% | + +State of Frontendの調査結果を元に先ほどピックしたツール群のみについて一部抜粋および加筆したのが上の表です。各ツールごとに「使ったかどうか・興味があるか」など調査を行っており、Aの数値が高ければ界隈でより高頻度に使われていることを意味し、更にBの数値が高ければ使った人が好印象だったことを意味します。（各行にて、A=B+C、A+D=100%、となっています） + +A列の数値だけ見るとTopがViteで次点がWebpackですが、BC列の数値も踏まえるとWebpackの使い勝手に否定的な印象を持っている人も少なくないことが分かります。また、B列をベースに考えると、ツールの使用頻度および使い勝手に対する印象共に良い数値を叩き出してるのはTopがViteで次点がesbuildであることが分かります。 + +細かい機能面での優位性などについては正直まだ私の理解が追いついていないのですが、いずれにせよViteはフロントエンドのビルドツール界隈にて圧倒的な存在感を発揮しているツールであるということが調査からも見て取れます。 + +さて、デファクトに近い存在であると言ってよいであろうViteですが、ViteConf 2024にてEvan Youさんより語られた内容（[Vite and the Future of JavaScript Tooling](https://docs.google.com/presentation/d/1Kt020NyY0LE3G7NtqM67OHt-bAI1HKM4zKKd0vH9RHQ/edit?usp=sharing)）によると、Viteはまだいくつかの課題をはらんでいるようです。例えば、内部的に様々なツール群に依存しており依存関係が複雑であること、また、複数ツールを組み合わせるがゆえにほぼ同一内容のパース処理だったりシリアライズ処理がツール間で重複して実行され、処理パフォーマンスの観点で不利に働いています。 + +これらの課題を解消するためのアイデアとしてたどり着いたのがVoidZeroです。 + +# VoidZeroが目指す世界 + +Evanさんの言葉を借りれば、「Viteが直面している課題は、JavaScriptのエコシステムが直面している課題そのもの」です。私のようにフロントエンドから少し離れていた人であっても、エンジニアであれば「JavaScript周りはフレームワークだったりツールがたくさんあってキャッチアップ大変」という印象を持っているのではないでしょうか。それはもちろんこの領域が非常に活発な熱量を持っており様々なエコシステム活動が実を結んでいるからこそなのですが、一方で各種ツール群が独立して発展し、それぞれが互換性を持っていなかったりあるいは互換性があったとしても一連の流れで見ると非効率な処理を行っていたりするのもまた事実のようです。 + +この状況を打破するためにも「統合されたツールチェイン」が必要であるとEvanさんは提唱しています。Viteを次の段階に進めるだけでなく、JavaScriptエコシステム全体に大きな進展をもたらすことが期待されるこのアイデアですが、実現には専門チームが必要だと考えVoidZeroとしてチームを設立、資金調達も経て開発プロジェクトが立ち上がっているというのがいまの状況です。 + +ここまでの歴史経緯等踏まえると、VoidZero自体あるいはVoidZeroをきっかけとしてなにか大きな流れが生まれそうな予感がしておりワクワクしてきますね。 + +# 最後に + +"ビルドツール"という切り口で最近の動向をキャッチアップする良い機会となりました。個人的には昔私が携わったツール（Gulp!!!）と再会することができたのも胸熱でした。 + +Vue連載記事として書き始めた本記事ですが、結果的にVue本体の内容から逸れはしたものの、[FAQ](https://voidzero.dev/posts/announcing-voidzero-inc#faqs)を見ると「VueはVoidZeroで開発されたツールの1stクラスサポートを受ける」とのことで、全く関係ないわけでもないはず...!!! + +進化の早い領域ではありますが、浦島太郎になりすぎないように定期的な情報収集とキャッチアップを大事にしたいなと改めて感じました。VoidZero、ならびにJavaScriptエコシステムの今後の動向にも益々期待が高まります。 diff --git a/source/images/20241126a/thumbnail.png b/source/images/20241126a/thumbnail.png new file mode 100644 index 00000000000..6c324507d3e Binary files /dev/null and b/source/images/20241126a/thumbnail.png differ diff --git "a/source/images/20241126a/voidzero - \343\202\263\343\203\224\343\203\274.png:Zone.Identifier" "b/source/images/20241126a/voidzero - \343\202\263\343\203\224\343\203\274.png:Zone.Identifier" new file mode 100644 index 00000000000..e69de29bb2d diff --git a/source/images/20241126a/voidzero.png b/source/images/20241126a/voidzero.png new file mode 100644 index 00000000000..763c7d8f1fd Binary files /dev/null and b/source/images/20241126a/voidzero.png differ