vuejs

Vue (@vuejs): 2m 13s on one Blacksmith job, 25s on boxd. Tests split on both: 80s vs 25s. 3,765 tests. vuejs/core t.co

React vs Vue en 2026 : versions, code comparé, performances et grille de choix L'essentiel en une minute React vs Vue : les deux outils construisent les mêmes interfaces, mais ils ne partent pas du même principe. React se présente comme une bibliothèque et laisse l'écosystème fournir le routage, l'état global et le rendu serveur. Vue se présente comme un framework progressif et fournit des pièces officielles pour chacun de ces besoins. Ce comparatif s'appuie sur la documentation officielle, les registres npm, un benchmark public reproductible et l'enquête Stack Overflow 2026, consultés le 2 novembre 2026. Nous avons aussi compilé et exécuté un petit composant écrit dans les deux, et nous détaillons exactement ce qui a été fait. > Points clés > > - Le 2 novembre 2026, la version stable de React est la 19.3.1 et celle de Vue la 3.5.44. Vue 3.6, qui apporte le Vapor Mode, est encore en version candidate (3.6.0-rc.14). > - Le même compteur s'écrit en une vingtaine de lignes dans les deux. Dans notre build minimal avec Vite 8.3.5, le fichier JavaScript produit pèse 68,75 ko en gzip pour React et 24,77 ko pour Vue, une mesure sur un compteur isolé, non transposable à une vraie application. > - Sur le js-framework-benchmark (édition Chrome 156), Vue 3.5 obtient un facteur de 1,30 et React 19.2 de 1,56, sur un test de tableaux qui ne représente pas une application réelle. > - Dans l'enquête Stack Overflow 2026, 41,5 % des répondants à la question ont beaucoup utilisé React dans l'année, contre 17,2 % pour Vue.js. Les deux ont un taux d'adhésion proche : 46,7 % et 47,2 %. > - Aucun des deux n'est meilleur dans l'absolu : la grille en fin d'article part de votre équipe, de votre projet et de votre marché. --- React vs Vue : où en sont les deux projets Les deux projets publient des versions chaque mois. Versions « latest » et dates lues le 2 novembre 2026 dans le registre npm (react, vue, next, nuxt, react-router, vue-router, pinia, vite). | Élément | Côté React | Côté Vue | |---|---|---| | Version stable | react 19.3.1 (14 octobre 2026) | vue 3.5.44 (13 octobre 2026) | | Prochaine version | Canal Canary (préversions de la prochaine version) publié en continu | 3.6.0-rc.14 (30 octobre 2026) | | Méta-framework principal | Next.js 16.4.3 (23 octobre 2026) | Nuxt 4.6.3 (27 octobre 2026) | | Routage | React Router 8.5.1 (27 octobre 2026) | Vue Router 5.4.0 (7 octobre 2026) | | État global officiel | Aucun : Context, ou bibliothèque externe | Pinia 4.1.0 (14 octobre 2026) | | Outil de build | Vite 8.3.5 pour les deux (21 octobre 2026) | Vite 8.3.5 | | Gouvernance | React Foundation, hébergée par la Linux Foundation | Équipe cœur de Vue | React 19.3, sortie le 9 septembre 2026, rend stables les View Transitions et les Fragment Refs selon le blog de React. Le React Compiler 1.0, publié le 7 octobre 2025, mémoïse automatiquement les composants au moment du build. Côté Vue, la 3.6 est en version candidate depuis le 18 juillet 2026 (registre npm). Ses notes de la bêta 1 annoncent un Vapor Mode, compilation sans DOM virtuel « encore considérée comme instable » (notre traduction), et une réactivité réécrite sur alien-signals. Depuis le 24 février 2026, React, React Native et JSX n'appartiennent plus à Meta mais à la React Foundation, hébergée par la Linux Foundation (blog de React). --- Bibliothèque ou framework progressif La différence de philosophie explique presque toutes les autres. Le site officiel de React le décrit comme « la bibliothèque pour les interfaces web et natives » (notre traduction, react.dev). React fournit les composants, l'état local et le rendu. Pour une application complète, sa documentation recommande de partir d'un framework : Next.js, React Router ou Expo pour le mobile (react.dev, créer une application). Vue se définit comme « le framework progressif » : un framework « qui peut grandir avec vous et s'adapter à vos besoins » (notre traduction, introduction de Vue). On peut l'ajouter par une simple balise script sur une page rendue par un backend, sans étape de build, ou bâtir une application complète avec des composants monofichiers (SFC). Conséquence pratique : avec React, vous assemblez une pile ; avec Vue, le routeur, le gestionnaire d'état recommandé et l'outil de création de projet sont officiels, ce qui favorise des projets plus homogènes. React décrit l'interface en JSX ; Vue utilise par défaut des templates HTML enrichis de directives (v-if, v-for, @click). La documentation de Vue conseille la Composition API avec les SFC pour une application complète. --- Le même composant en React et en Vue Voici le même compteur : un pas et un maximum en propriétés, une valeur en état, une valeur dérivée (ce qui reste avant le maximum) et un bouton désactivé une fois le maximum atteint. En React, avec un composant fonction et le hook useState : import { useState } from "react"; type CounterProps = { step?: number; max: number }; export function Counter({ step = 1, max }: CounterProps) { const [count, setCount] = useState(0); const remaining = max - count; // valeur dérivée, recalculée à chaque rendu return ( <div> <p>Valeur : {count} (reste {remaining})</p> <button onClick={() => setCount((c) => Math.min(c + step, max))} disabled={remaining === 0} > +{step} </button> <button onClick={() => setCount(0)}>Remettre à zéro</button> </div> ); } En Vue, avec un composant monofichier et la Composition API (<script setup>) : <script setup lang="ts"> import { ref, computed } from "vue"; const props = withDefaults(defineProps<{ step?: number; max: number }>(), { step: 1 }); const count = ref(0); const remaining = computed(() => props.max - count.value); // recalculée seulement si count ou max change function increment() { count.value = Math.min(count.value + props.step, props.max); } </script> <template> <div> <p>Valeur : {{ count }} (reste {{ remaining }})</p> <button @click="increment" :disabled="remaining === 0">+{{ step }}</button> <button @click="count = 0">Remettre à zéro</button> </div> </template> Trois différences ressortent. En React, la fonction du composant est réexécutée à chaque changement d'état, valeur dérivée comprise. En Vue, le code de <script setup> s'exécute une fois par instance (documentation de Vue), et une propriété computed n'est réévaluée que si ses dépendances réactives changent (computed). Enfin, l'état Vue se modifie directement, React passe par une fonction de mise à jour. Ce que nous avons exécuté. Le 1er novembre 2026, sous Node.js 22.15.0, nous avons monté ce composant (pas de 2, maximum de 5) dans deux projets Vite 8.3.5, avec react 19.3.1 et vue 3.5.44, puis lancé un build de production. Les vérifications de types passent (tsc pour React, vue-tsc 3.3.14 pour Vue). Un script Playwright a ensuite cliqué trois fois sur « +2 » puis sur « Remettre à zéro » dans chaque build servi par vite preview. Les deux affichent la même suite : 0, 2, 4, puis 5 avec le bouton désactivé, puis retour à 0. C'est la seule manipulation faite pour cet article : aucun test de performance ni d'application réelle. Le build a donné un fichier JavaScript de 219,79 ko (68,75 ko en gzip) pour React et de 62,75 ko (24,77 ko en gzip) pour Vue. C'est surtout le poids du moteur dans une application minuscule : dans un vrai projet, vos dépendances pèseront vite davantage que cet écart. --- TypeScript : deux supports solides, deux outillages Les deux se prêtent bien à TypeScript, avec des outils différents. Côté React, TypeScript gère le JSX nativement : on ajoute @types/react et @types/react-dom, on utilise l'extension .tsx et on type les propriétés (react.dev, TypeScript). Vue est lui-même écrit en TypeScript, et lang="ts" dans un SFC active aussi la vérification des expressions du template. La vérification en ligne de commande passe par vue-tsc, car le serveur de développement de Vite ne vérifie pas les types (vuejs.org, TypeScript). Dans notre essai, les deux chaînes ont repéré la même erreur volontaire, une chaîne passée à step au lieu d'un nombre : tsc dans le JSX, vue-tsc dans le template, avec le même code TS2322. Pour les bases, voyez notre guide pour apprendre TypeScript et notre sélection d'extensions VS Code. --- Gestion d'état : Context ou Pinia React ne fournit pas de gestionnaire d'état global officiel. Sa documentation montre comment combiner useReducer et le Context pour partager un état sans passer les propriétés à la main à chaque niveau (react.dev, reducer et context). Au-delà, des bibliothèques comme Redux Toolkit ou Zustand prennent le relais, sans que la documentation de React les départage. Vue a une recommandation claire. Sa documentation écrit : « Il est recommandé d'utiliser Pinia pour les nouvelles applications » (notre traduction). Pinia est maintenu par l'équipe cœur, et Vuex, l'ancienne solution, est en maintenance : il fonctionne mais ne recevra plus de nouvelles fonctions (vuejs.org, gestion d'état). Pour un état partagé simple, la même page montre qu'un objet reactive() exporté d'un module suffit. Verdict : en Vue, la question de l'état global est tranchée dès le départ. En React, elle fait partie des choix d'architecture à faire et à documenter en équipe. --- Routage et méta-frameworks : Next.js, React Router, Nuxt Pour plusieurs pages, du rendu serveur ou de la génération statique, les deux écosystèmes renvoient vers un méta-framework. React recommande Next.js (App Router), React Router associé à Vite, ou Expo pour les applications natives (react.dev). Cette page parle encore de React Router v7, alors que la version « latest » sur npm est la 8.5.1. Vue recommande son routeur officiel, Vue Router (vuejs.org, routage), et cite Nuxt, Vike, Astro et Quasar en conseillant de n'utiliser un framework que si l'on a besoin du rendu serveur (vuejs.org, démarrage). Nuxt offre routage par fichiers, rendu serveur par défaut, génération statique et rendu hybride par route (documentation de Nuxt). Les deux partagent Vite, créé par Evan You, l'auteur de Vue, qui propose des modèles react-ts et vue-ts (guide de Vite). Vite 8, sorti le 12 mars 2026, utilise un seul bundler écrit en Rust, Rolldown (annonce de Vite 8). Côté serveur, notre tutoriel pour créer une API REST avec Node.js se branche sur l'un ou l'autre. --- React vs Vue en performance : ce que mesure un benchmark Sur un benchmark public reproductible, Vue est devant, mais l'écart ne dit rien de votre application. Le js-framework-benchmark de Stefan Krause mesure des opérations sur les lignes d'un tableau, avec un résultat normalisé : 1,00 correspond à l'implémentation la plus rapide. !Graphique en barres React vs Vue : facteur de ralentissement CPU du js-framework-benchmark, Chrome 156, de 1,02 pour JavaScript pur à 1,56 pour React 19.2, Vue 3.5 à 1,30 Dans l'édition officielle Chrome 156 (Chrome 156.0.8078.48 sur un MacBook Pro 14 M4, 201 implémentations « keyed »), la moyenne géométrique pondérée des facteurs CPU est de 1,30 pour Vue 3.5.39 et de 1,56 pour React 19.2.0 avec hooks. Vue en Vapor Mode (3.6.0-rc.5) descend à 1,12. Sur la mémoire, la moyenne géométrique est de 1,92 pour Vue et de 2,62 pour React. Chiffres relevés le 2 novembre 2026. Les limites sont aussi importantes que les chiffres : - Des versions en retard. Le benchmark teste React 19.2.0 et Vue 3.5.39, pas les versions actuelles. - Un seul scénario. Des opérations sur un tableau de 1 000 à 10 000 lignes, rien sur le réseau, le rendu serveur ou l'hydratation. - Une seule machine. Un Mac récent, avec un ralentissement CPU simulé selon les tests ; le site rappelle de ne comparer que les résultats d'une même édition. - Pas d'avantage visible du compilateur React sur ce test. La variante « react-compiler-hooks », testée sur React 19.0.0 et non 19.2.0, obtient 1,61 : la différence de version empêche d'isoler l'effet du compilateur. Meta annonce de son côté des gains du React Compiler sur le Meta Quest Store, jusqu'à 12 % sur les chargements : une mesure de l'éditeur, que le blog de React assortit de la mention « vos résultats peuvent varier » (notre traduction). Verdict : si votre application affiche de très longues listes mises à jour en continu, le benchmark est un indice en faveur de Vue, et du Vapor Mode quand il sera stable. Pour la plupart des applications, la qualité du code et le poids des dépendances pèseront davantage. --- Écosystème et emploi : ce que disent les données React domine nettement l'usage, Vue tient une place stable. L'enquête Stack Overflow 2026 a recueilli 30 903 réponses valides dans 169 pays, du 23 juin au 5 août 2026 (méthodologie). Parmi les 10 281 personnes ayant répondu à la question sur les frameworks web, 41,5 % ont beaucoup travaillé avec React dans l'année, 17,2 % avec Vue.js, 20,6 % avec Next.js et 4,4 % avec Nuxt.js (données technologiques 2026). !Graphique en lignes : usage de React, Angular, Vue.js et Svelte dans l'enquête Stack Overflow de 2020 à 2026, React à 41,5 % et Vue.js à 17,2 % en 2026 L'adhésion est plus équilibrée : parmi ceux qui ont utilisé l'outil, 46,7 % veulent continuer avec React et 47,2 % avec Vue.js (technologies « admirées »). Mais 24,2 % des répondants veulent travailler avec React l'an prochain, contre 13,4 % pour Vue.js. Ce public n'est pas représentatif des développeurs français. L'édition 2025 de l'enquête State of JavaScript va dans le même sens : ses auteurs notent que les classements d'usage sont restés « remarquablement stables » sur un an, et que React, framework dominant, arrive aussi en tête des difficultés citées par les développeurs front-end (notre traduction, State of JS 2025). Les téléchargements npm confirment l'écart : du 23 au 29 octobre 2026, react a été téléchargé 244 728 980 fois et vue 24 168 162 fois, selon l'API de statistiques de npm (react, vue). Ces chiffres incluent l'intégration continue et les dépendances indirectes : ils mesurent une présence, pas un nombre de développeurs. Pour le marché français, nous n'avons pas trouvé de comptage d'offres d'emploi reproductible et daté. Notre article sur les langages de programmation les mieux payés rassemble les données de salaires disponibles, et notre guide du portfolio développeur montre comment valoriser l'un ou l'autre auprès d'un recruteur. --- Courbe d'apprentissage Vue a la réputation d'être plus simple au départ, sans mesure publique à l'appui : ses templates restent proches du HTML. Sa documentation suppose toutefois une familiarité avec HTML, CSS et JavaScript, et déconseille de commencer par un framework si l'on débute complètement (introduction de Vue). React demande de maîtriser JavaScript plus tôt : JSX, immutabilité de l'état, règles des hooks. La difficulté vient ensuite des choix d'écosystème (routage, état, données, rendu serveur), mais ces notions restent du JavaScript réutilisable ailleurs. Le conseil commun aux deux : apprenez d'abord le langage. Notre guide pour apprendre JavaScript propose un plan de 10 semaines, et le comparatif des meilleurs IDE et éditeurs de code vous aide à choisir votre outil de travail. --- Et les autres : Angular et Svelte Angular revient souvent dans ce comparatif. Angular est un framework complet ; sa version 22 est sortie le 3 juin 2026, et sa page des versions annonce désormais une version majeure tous les 12 mois, contre 6 auparavant (angular.dev). Svelte utilise un compilateur pour transformer des composants HTML, CSS et JavaScript en code optimisé, avec SvelteKit comme framework d'application (svelte.dev). Utilisé par 7,8 % des répondants de Stack Overflow 2026, il obtient la meilleure adhésion des quatre : 59,4 %. | Outil | Nature | Version stable (npm, 2 nov. 2026) | Usage SO 2026 | Adhésion SO 2026 | |---|---|---|---|---| | React | Bibliothèque | 19.3.1 | 41,5 % | 46,7 % | | Vue.js | Framework progressif | 3.5.44 | 17,2 % | 47,2 % | | Angular | Framework complet | 22.2.4 | 16,0 % | 42,1 % | | Svelte | Framework compilé | 5.57.3 | 7,8 % | 59,4 % | --- La grille de décision React vs Vue Le bon choix dépend de votre situation, pas d'un score universel. Cette grille ne fixe aucun seuil chiffré : les données publiques ne permettent pas d'en justifier. | Votre situation | Penche vers | Pourquoi | |---|---|---| | Une application mobile native est prévue | React | React recommande Expo pour le natif ; Vue renvoie vers Ionic Vue, Quasar ou Tauri | | Vous ajoutez de l'interactivité à des pages rendues par un backend (Laravel, Django, Rails) | Vue | Utilisable sans build, et Laravel fournit un plugin Vite officiel | | L'équipe veut des choix officiels pour le routage et l'état | Vue | Vue Router officiel, Pinia recommandé | | L'équipe veut choisir chaque brique elle-même | React | Aucune pile imposée pour le routage, l'état ou les données | | Vous visez le plus grand nombre d'offres d'emploi | React | Indicateur indirect : usage plus de deux fois supérieur dans l'enquête Stack Overflow 2026 (pas un comptage d'offres) | | Très longues listes mises à jour en continu | Vue, à mesurer | Avantage sur le js-framework-benchmark, à vérifier sur votre cas | | L'équipe connaît déjà l'un des deux | Celui-là | Notre avis : les écarts mesurés ici ne justifient pas à eux seuls une migration | La ligne sur le mobile repose sur les pages react.dev et vuejs.org, façons d'utiliser Vue. Celle sur Laravel repose sur la page outillage de Vue. Notre lecture : pour un premier poste, React ouvre plus de portes d'après les données d'usage ; pour une petite équipe qui livre un produit web sans application native, Vue offre un cadre plus homogène. Prototypez un écran réel dans chacun avant de trancher : ce prototype servira aussi en entretien technique. --- Ce que nous n'avons pas pu vérifier Plusieurs points restent ouverts au 2 novembre 2026 : - La date de sortie de Vue 3.6 stable. La branche est en version candidate, et aucune date n'est annoncée dans les sources consultées. Le blog officiel de Vue n'a rien publié depuis l'annonce de Vue 3.5. - Le nombre d'offres d'emploi React et Vue en France. Nous n'avons trouvé aucune source reproductible et datée. - Les performances des versions actuelles. Le benchmark teste React 19.2.0 et Vue 3.5.39 ; nous n'avons pas mesuré React 19.3 ni Vue 3.5.44 nous-mêmes. - Les chiffres d'usage de State of JS 2025. Les graphiques interactifs ne nous ont pas permis de relever les pourcentages exacts ; nous citons seulement les constats écrits des auteurs. - Les tailles de bundle d'une vraie application. Notre mesure porte sur un compteur isolé et ne s'extrapole pas. --- Questions fréquentes React ou Vue, lequel est le plus facile à apprendre ? Vue, selon sa réputation plus que selon une mesure publique : ses templates restent proches du HTML et ses outils officiels évitent des choix d'architecture. Les deux supposent de connaître HTML, CSS et JavaScript, comme le rappelle la documentation de Vue. Vue est-il plus rapide que React ? Sur le js-framework-benchmark, édition Chrome 156, oui : facteur de 1,30 pour Vue 3.5 contre 1,56 pour React 19.2, et 1,12 pour Vue en Vapor Mode. Ce test porte sur des tableaux de lignes, avec des versions qui ne sont pas les dernières, et ne prédit pas les performances d'une application réelle. Quelle est la dernière version de React et de Vue ? Le 2 novembre 2026, le registre npm indique react 19.3.1 (14 octobre 2026) et vue 3.5.44 (13 octobre 2026). Vue 3.6 est en version candidate, la 3.6.0-rc.14 datant du 30 octobre 2026. Faut-il apprendre React ou Vue pour trouver un emploi ? Les données d'usage favorisent React : 41,5 % des répondants concernés de l'enquête Stack Overflow 2026, contre 17,2 % pour Vue.js, sans être un comptage d'offres en France. Regardez les offres de votre région : composants et état se transfèrent de l'un à l'autre. --- À propos de l'auteur Abdelilah Ourti est ingénieur IA et architecte logiciel. Il conçoit et déploie des applications web et des systèmes d'IA, et publie sur NeurauTech des guides et des comparatifs destinés aux développeurs francophones. Ses autres articles sont réunis sur sa page auteur. Méthode. Synthèse fondée sur des sources publiques consultées les 1er et 2 novembre 2026 : documentation officielle de React, Vue, Nuxt, Vite, Angular et Svelte, registre et statistiques de npm, js-framework-benchmark, enquêtes Stack Overflow 2026 et State of JS 2025. La seule manipulation faite est celle décrite dans la section sur le code : compilation, vérification de types et exécution d'un compteur dans un navigateur automatisé. Les chiffres annoncés par un éditeur sont signalés comme tels. Les citations issues de sources en anglais sont traduites par nos soins. Aucun lien n'est affilié et aucune relation commerciale ne lie l'auteur aux projets mentionnés. Une erreur ou une version périmée ? Écrivez à contact@neurautech.com : l'article sera corrigé et la date de mise à jour modifiée. Dernière mise à jour : 2 novembre 2026. Image : Juanjo Jaramillo (Unsplash License).

Mutli-lint change policies in the repo for lints, themselves, all the time bc of Deuteronomy 20:16–17 never being allowed in my repo. God thanks on timestamps, where'd they go so fast with you? vuejs/awesome-vue

We fresh-cloned the top 100 npm packages. The biggest problem we found was in our own tool. TL;DR We ran CloneProof, a static "will a fresh clone of this repository install and run?" checker, on the GitHub repositories of the 100 npm packages with the most dependents. We wrote down the method and the judging rules publicly before running a single check. - 9 of the 10 build-failing findings in the pre-registered run were false, all from one check: CloneProof mistook README usage examples ("add this script to your package.json, then run it") for instructions about the repository itself. Only 1 of the 6 repositories it would have failed in CI deserved it. - After fixing what this study exposed, every build-failing finding is real. On the same 100 repositories, CloneProof v0.2.4 fails 3, and all 3 deserve it. 60 of its 63 warnings are correct, up from 56 of 73. - 12 of 100 repositories have at least one real setup finding. Six run a real browser as part of npm test. Five have tests that the root npm test cannot run: three workspace roots, husky's shell suite, and dart-sass's Dart suite. One commits a stale npm lockfile next to the pnpm lockfile it actually uses. - 7 of 100 repositories could not be checked at all because they exceed CloneProof's clone safety limits: TypeScript, DefinitelyTyped, webpack, Babel, Rollup, and jsdom hit the 10,000-file or 25 MiB per-file limits, and Inquirer.js has 4.6 GiB of history. The short version: these projects are in very good shape, and the most useful thing this study found was a set of bugs in CloneProof, now fixed. Why fresh clones matter CI runs on a warm, configured machine; a new contributor, reviewer, or agent starts from git clone and the README. The gaps between the two are small and annoying: a lockfile npm ci rejects, a test command that quietly needs a browser, an undocumented environment variable. CloneProof looks for them without running any of the repository's code. Method Population. We walked the npm packages with the most dependent packages, from the ecosyste.ms registry API (fetched 2026-10-30), and mapped each to its GitHub repository. Archived repositories (17 packages, including node-sass, tslint, and cross-env) were skipped. Packages that share a repository, such as 15 Babel packages and 7 @types/* packages, count once. Reaching 100 unique repositories took the top 153 packages. Scope. CloneProof checks the repository root, the way a contributor sees it after git clone. For monorepos, the published package lives in a sub-folder, so results describe "setting up this repository", not "installing this package". The check is static: one isolated shallow clone, no install, no repository code executed. Pre-registration. The selection procedure, the sample with expected findings, the procedure, and the judging rules were committed and pushed before any check ran. The judging rules are unchanged from an earlier random-sample run. Judging. Every warning and failure was judged by reading the repository at the checked commit: - real: true, and it matters to someone setting up this repository root; - policy: true, but a choice a reasonable maintainer makes on purpose (for example, a library that does not commit a lockfile); - false: wrong. Disclosure. All judgments were made by an AI assistant (Claude), which also helped build and fix CloneProof, and were not blind to the tool's output. Each has a one-line reason with file and line references, so anyone can re-judge. Ambiguous rules were interpreted once, in writing, and applied everywhere. Results The pre-registered run used CloneProof v0.2.0. We then fixed the bugs it exposed (see [What CloneProof got wrong](#what-cloneproof-got-wrong)) and re-ran the same 100 repositories with the same judging rules (four had new commits by then; their findings did not change). Both runs are in the table: | | v0.2.0 (pre-registered) | v0.2.4 (after fixes) | |---|---:|---:| | Passed | 31 | 37 | | Passed with warnings | 56 | 53 | | Failed (exit 1, would fail a CI gate) | 6 | 3 | | Blocked by safety limits (exit 2) | 7 | 7 | | Blocking findings: real / policy / false | 1 / 0 / 9 | 3 / 0 / 0 | | Warnings: real / policy / false | 10 / 46 / 17 | 10 / 50 / 3 | !Stacked bars of every finding judged real, policy, or false. Blocking findings: v0.2.0 had 1 real and 9 false; v0.2.4 has 3 real. Warnings: v0.2.0 had 10 real, 46 policy, 17 false; v0.2.4 has 10 real, 50 policy, 3 false. What was real !Repositories with each kind of real setup finding: npm test starts a real browser, 6; tests the root npm test cannot run, 5; stale npm lockfile next to the pnpm one, 1. Tests that need a browser (6 repositories). In chai, axios, vuejs/core, karma, debug, and karma-chrome-launcher, npm test starts a real browser through Playwright, Karma, or web-test-runner. That is a good, deliberate choice, but a fresh machine or minimal container needs a browser installed first. For example: - axios: npm test runs vitest run (package.json:122-123), and the Vitest config includes browser projects with browser.enabled: true (vitest.config.js:16-41). - vuejs/core: npm test runs vitest (package.json:19), which includes an e2e-browser project using Playwright Chromium (vitest.config.ts:104-116). - chai: npm test ends with test-chrome, which runs web-test-runner --playwright (package.json:39-41). Workspace roots without a root test script (3 repositories). tslib, rollup/plugins, and rxjs have test suites, but npm test at the root does not run them. For example, tslib keeps its tests in test/ with a runTests.js driver, and the root package.json defines no scripts. Test suites npm test cannot run (2 repositories, found after a fix). husky tests itself with shell scripts and dart-sass with Dart, and neither root package.json has a test script. v0.2.0 looked only for JavaScript tests and wrongly said both had none. For dart-sass, a Dart project whose package.json serves only its JavaScript tooling, the failure is correct by our rules but may feel like noise to its maintainers. A stale lockfile (1 repository). less/less.js uses pnpm (packageManager, postinstall: npx only-allow pnpm, pnpm-lock.yaml), but it also still commits a package-lock.json that lacks three root devDependencies declared at package.json:33-36, so npm ci refuses to install. pnpm users never notice; anyone whose tooling sees package-lock.json and reaches for npm does. What was policy, not breakage The most common finding by far was no committed lockfile: 29 repositories, all of them libraries published to npm under the same name (eslint, express, chalk, debug, semver, and others). Many library maintainers deliberately leave lockfiles out so their tests run against the dependency ranges users actually get. It is a reproducibility trade-off, not a mistake, and we count it as policy. So are optional switches such as PRETTIER_DEBUG or HUSKY=0 that environment warnings point at: true, but nobody needs to set them. Of the 6 repositories that v0.2.0 would have failed in CI, 5 failed only because of false findings, so "six top packages fail a fresh-clone check" would have been a misleading headline. With v0.2.4, three fail, and each points at something a new contributor would actually hit. The landscape !Root lockfiles in the top 100: npm only 42, pnpm 14, Yarn 13, npm and pnpm 1, none 30. - Lockfiles at the root: 42 npm only, 14 pnpm, 13 Yarn, 1 npm and pnpm together, 0 Bun, 30 none. - packageManager: declared by 29 repositories (14 Yarn, 12 pnpm, 3 npm). - Node.js version: 68 declare engines.node, 8 commit .nvmrc, 5 .node-version; none really disagree. What CloneProof got wrong This is the part we learned the most from. In the pre-registered run, 26 of 83 findings were false. All but three are fixed in v0.2.4. 1. README examples for users (9 blocking findings, 5 repositories). webpack-dev-server, lint-staged, nyc, coveralls, and gh-pages all document how to add a script to your project and run it. For example, gh-pages shows a "deploy": "gh-pages -d dist" script and then npm run deploy (readme.md:373-384), and nyc shows a whole example scripts block (README.md:337-345). CloneProof read those as instructions for the repository itself and failed the build. Fixed in v0.2.1: scripts defined in a README example now belong to the reader's project. 2. Environment variables the user never sets (14 warnings). CloneProof reported GIT_DIR (set by Git during hooks), HOMEPATH and PROGRAMFILES (set by Windows), COMP_CWORD (set by the shell), CI-service variables, and keys a tool sets for itself, such as WEBPACK_SERVE and ROLLUP_WATCH, as undocumented configuration. Two were plain bugs: process.env.Wimp$ScrapDir in shelljs (src/tempdir.js:48) was parsed as a key named Wimp, and PostCSS was flagged for a variable mentioned only in a doc comment (lib/css-syntax-error.d.ts:226). Fixed in v0.2.4, except three that static reading cannot see: Vue's build-time feature flags, CI variables that coveralls detects, and AVA's child-process marker. 3. "No tests" when the tests are not JavaScript (2 warnings). The shell and Dart suites above. Fixed in v0.2.4. Only test files count; a husky or sass dependency, Git hooks, and fixture folders never do. None of the 10 repositories without tests in our earlier random sample started failing. 4. A Node version mismatch that is not one (1 warning). semantic-release declares engines.node as ^22.14.0 || >= 24.10.0. CloneProof could not parse >= 24.10.0 because of the space after the operator, so it compared .nvmrc's 24 with ^22.14.0 alone. Fixed in v0.2.4. After each fix we re-ran this sample and our earlier random sample of 50 repositories. The README fix (v0.2.1) removed exactly the 9 false blocking findings; the rest (v0.2.4) removed 14 of the 17 false warnings. On the random sample, every blocking finding is real and all 40 warnings are correct. Limitations - Static only. Nothing was installed or run, so this says nothing about whether tests pass. CloneProof's optional Docker verify mode checks that; it was not used here. - Not a typical sample. These are the most-depended-on, most-maintained repositories in the ecosystem. - Repositories move. Results are pinned to commits from 2026-10-30; four repositories moved before the final rerun, with unchanged findings. - One AI judge, not blind, who also wrote the fixes. The rules did not change and every reason is public, so treat the "after" numbers with the same skepticism as the "before" ones, and re-judge anything you disagree with. - 7 repositories were not checked because of CloneProof's clone safety limits. Try it Check any public repository without installing anything: npx cloneproof-check check https://github.com/OWNER/REPO The npm package is cloneproof-check, published from CI with provenance; the command it installs is cloneproof. Or add it to CI with the GitHub Action (CloneProof Check on the Marketplace): - uses: psuvraneel-cyber/Clone-Proof@v0.2.4 How to reproduce Everything is in the repository: - docs/field-test/run6-ranking.json: the ranking snapshot; - docs/field-test/run6-sample.json: the 100 repositories, their commits, and the expected findings; - docs/field-test/run6-results.json: every finding; - docs/field-test/run6-judgments.json: every judgment, its reason, and the interpretations used; - docs/field-test/run6-fix-results.json, run6-fixes-results.json, and run6-fixes-judgments.json: the reruns after the fixes, and the re-judged findings. The full write-up, with intervals and per-code tables, is in docs/FIELD_TEST.md. To rebuild the sample and rerun the checks: node scripts/fieldtest.js ranking --pages 5 --out ranking.json node scripts/fieldtest.js sample-list --ranking ranking.json --count 100 --out sample.json node scripts/fieldtest.js run --sample docs/field-test/run6-sample.json --out results.json node scripts/fieldtest.js summary --results docs/field-test/run6-results.json --judgments docs/field-test/run6-judgments.json --sample docs/field-test/run6-sample.json A fresh ranking run gives a slightly different sample; the committed files reproduce the published tables exactly. Thanks to the maintainers of all 100 projects. Nothing here is a criticism of their work. If CloneProof flagged your project and you think it is wrong, you are probably right; please open an issue.

Possessed: your link checker is green, and eight of those links now open a casino This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine. What I Built design-resources-for-developers is a list of links with 67,000 stars. It has a link checker, and the checker passes. Open the React UI Libraries section, click Chakra Templates, and you get a page in Indonesian about which slot games pay out. The domain expired, someone bought it, and the server answers 200, which is the only question a link checker asks. Eight entries on that list open gambling sites today. Another 22 open a domain-for-sale page, an essay mill, a car detailing shop, or some other company that has nothing to do with the words next to the link. None of them fail the checker. Possessed is a GitHub Action that runs after your link checker. For every link the checker passed, Gemma 4 opens what the link shows today and the Internet Archive's capture from the day the link was added (git log -S finds that commit), reads both next to the sentence that cites the link, and gives one of four verdicts: fine, moved, possessed, dead. A possessed or dead link is replaced with the archived original. A moved link gets its new address. Then it opens one pull request with the fixes and a table that says, for each row, what the page was and what it is now. Nothing in that pull request is a guess. A verdict that proposes a replacement is refused by code unless the replacement is a page Gemma opened in that session: an archive snapshot it read, or a live URL a link checker would pass. The refusal goes back to the model as a tool error that says what to do instead. Across 597 judgments on five lists, the gate fired 18 times, and all 18 were my bugs rather than Gemma's: seven were a trailing slash I had stored differently from how the model wrote the URL back, eleven were JavaScript-rendered snapshots my rule mistook for empty pages. Not once did Gemma propose a URL it had not opened. I fixed both bugs, kept the gate and the traces, and re-judged the big list under the fixed gate: zero refusals. Demo {% youtube vsyXsWOe3Tw %} Two pull requests you can open: - The one the Action wrote on its own, on a fork of design-resources-for-developers, from a hosted GitHub runner with no GPU: design-resources-for-developers#1. Seven links, six of them gambling sites, each pointed at the archive capture from the month it was added. - The one a maintainer actually received, on vuejs/awesome-vue: #4593. Six entries. One of them was listed in 2018 as a PWA for swapping used video games and today opens a Korean guide to baccarat sites. All six survived the list's dead-link cleanup in January, because they still return 200. Code JonathanSolvesProblems/possessed, MIT. # .github/workflows/possessed.yml on: schedule: [{ cron: "0 6 * * 1" }] workflow_dispatch: permissions: contents: write pull-requests: write jobs: possessed: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: { fetch-depth: 0 } - uses: JonathanSolvesProblems/possessed@main That is the whole setup. The runner installs Ollama, pulls gemma4:e4b and embeddinggemma, reads the links, and opens the PR. Locally, python -m possessed.repo path/to/clone does the same thing to a checkout. How I Built It Three open-weight models, all through Ollama, no API key anywhere: - gemma4:e4b judges each link. It calls tools natively, and the loop ends when Ollama reports done_reason: stop. A run that stops on length is logged as an error, never as a verdict. - embeddinggemma does triage. It embeds the sentence that cites each link and the live page, and the lowest 15 percent of similarities go to Gemma, along with any link that redirected to another domain, landed on a homepage from a deep path, or shows parking or gambling words. On design-resources that turned 1,114 passing links into 200 reads. - qwen3.5:4b is a second judge from a different model family. It gets the same evidence fetched fresh, never sees Gemma's answer, and replies in a fixed JSON shape. Where the two disagree, a hand label decides, checked against the live page and the archive. Gemma chooses its own evidence. It has fetch_live, find_snapshot, list_snapshots and read_snapshot, and four verdict tools. A possessed link usually takes it three or four steps: open the live page, find the capture nearest the day the link was added, read it, decide. When the nearest capture is already the parked page, it lists captures and goes back further. Here is one judgment as logged, the Chakra Templates link, added to the list on 2022-07-17. Four tool calls, 9.5 seconds on my laptop's GPU: fetch_live(url="https://chakra-templates.dev/") -> 200, final_url "https://mainslotresmi.org/", title "AGEN338 : Tips Bermain Slot88 & Kumpulan Slot Gacor" find_snapshot(near_date="2022-07-17") -> captured 2022-06-03, https://web.archive.org/web/20220603052424/https://chakra-templates.dev/ read_snapshot(timestamp="20220603052424") -> 200, title "Chakra Templates", text "Templates Page Sections Large Page Sections like Hero, Features ..." possessed(now_shows="A gambling/betting site (AGEN338)", originally="A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project.", replacement="https://web.archive.org/web/20220603052424/https://chakra-templates.dev/") -> ok. Done with this link. The gate let that replacement through because the third call opened it. Had Gemma written any other URL there, the fourth call would have come back as an error. The hard part was the rubric. A product that was acquired and now redirects to the buyer is moved if the thing itself still exists there, and possessed if only the brand does: InVision links land on Miro's homepage, and nothing of InVision is there, so they are possessed. A login wall is fine, with "cannot verify" in the reason. Twitter links that land on x.com are fine. The prompt holds those as named examples, because a model this size follows an example better than a definition. What the models contributed, measured. Four detectors asked the same question about the same 188 links from design-resources: does this link need a fix? | Detector | Flagged | Right | Precision | |---|---|---|---| | Status-code link checker | 0 | 0 | passes everything, by construction | | URL heuristics (other domain, homepage, parking words) | 61 | 29 | 0.47 | | EmbeddingGemma similarity alone | 30 | 22 | 0.73 | | Gemma 4 reading the page | 67 | 49 | 0.73 | On the possessed verdict alone, Gemma 4 was right on 30 of 37. The heuristics were right on 19 of 61. Those are precision numbers on purpose. The labels come from where Gemma and Qwen agree, plus hand checks where they do not, so a link both models missed is not in the set and recall cannot be measured this way. I am not claiming it. What it gets wrong: a GitHub profile listed as a project's author ("Vue 2048 by @pengfu") reads to Gemma as possessed, because the profile is not the project. A promo banner for a new product on Inspira UI read as a takeover. The second judge caught most of these, which is why the confirmed mode I used for the awesome-vue PR only applies fixes both models agree on. The Action by itself applies Gemma's verdicts, and that is why every row in its PR carries the evidence. Pages behind a bot wall, and empty JavaScript shells, cannot be read without a browser. On design-resources that was 42 of the 1,114 passing links. Possessed counts them and says so in the log, instead of judging a "Just a moment..." page. On a hosted GitHub runner Gemma reads on the CPU, two to three minutes a link, so the Action has a limit input and takes the strongest signals first. The run that opened the PR above took 30 minutes end to end on a 1,245-link list, with the models cached from the run before: fetching every link, EmbeddingGemma embedding a thousand pages, then 18 minutes of Gemma 4 reading eight links. Seven of the eight were gambling or for-sale pages and all seven got the archived original; the eighth, a sound-effects library, was fine and it said so. Its possessed.json, with every tool call, is in the repo under results/design-resources-action/. On my laptop's GPU the same 200 links took 24 minutes. The DEV study Then I pointed it at DEV itself. I took the 1,000 most-loved posts on DEV, pulled their 13,788 unique links, and a status-code checker passes 11,119 of them as readable pages. Triage picked 2,951 candidates, plus 150 random controls from the links it did not flag, and Gemma 4 judged all 3,101 of them overnight on my laptop. 145 of the 150 controls were fine, so triage is not hiding much. Qwen re-judged every flagged link, blind. Where both models independently agree and the hand checks confirm it: 183 links in 96 posts, carrying 95,627 reactions between them, now open something other than what the author cited. A React resource collection with 3,438 reactions links js.coach, which today is a Swedish casino directory. A 3,135-reaction list of must-read programming books now serves an Indonesian lottery page. A Google search course cited by a 2,072-reaction post is now a nine-million-dollar domain-for-sale page. Agreement is not truth either. Spot-checking the top rows by reach with fresh fetches turned up both models wrong together on seven links from one blog, whose articles still load behind an asset redirect, so those rows are corrected by hand labels that say who made them, and the 399 links Gemma flagged but Qwen did not confirm are not in the count at all. Why Does Open Innovation Matter? A weekly run over a 1,000-link list is about 200 model reads. On a metered API that is a bill, and awesome lists do not have a card on file. On open weights it is runner minutes, which public repositories get for free, and the same workflow file runs on a self-hosted box in a closet. The other reason is that a maintainer can read the judge. The rubric Gemma follows is forty lines in agent.py. The gate is twenty lines in tools.py. If a list wants "a login wall counts as dead", that is a sentence change, and the next weekly run uses it. The evidence is open too: the Internet Archive capture in each row is a public record anyone can click. My Agent Session I built this with Claude Code over four days. It wrote most of the code, and it wrote the first pass of the hand labels: for each link where Gemma and Qwen disagreed, it opened the live page and the archive capture and wrote the verdict and the reason into results/labels_*.json. The file says so in its first lines, because a label that does not say who made it is not a label. The calls were mine. What counts as moved and what counts as possessed, after watching it get InVision wrong. Which lists to send fixes to, and which to leave alone: design-resources-for-developers has outside contributions paused, so nothing went there, and its findings are in this post instead. The one piece of the build I would point at: the gate started as a prompt instruction, "never invent a URL". The rules file I keep for agent work says a rule with an objective test goes in code, not in the prompt, so it became twenty lines in tools.py. Those twenty lines are what turned up my own two bugs. The Spirit of It A possessed link is a page that died and something else moved into the body. The address is still on the list, people still click it, and what answers is a slot machine wearing the old name. The week's theme is ghosts, and honoring those who are gone. The fix here is not to forget the page. The entry stays, and the link points at what the page was on the day someone thought it worth sharing, kept by the Internet Archive. For Día de los Muertos you keep a place at the table. The pull request keeps a place on the list. Prize Categories Best Use of Gemma. Gemma 4 is the judge, EmbeddingGemma is the triage, and the ablation table above is what each of them added over a link checker and over plain heuristics.

Vue Fes Japan 2026参加記 こんにちは！わかと（X @0ts_st）です！ 2026年10月24日に、大手町プレイス ホール＆カンファレンスで開催されたVue Fes Japan 2026に参加してきました！ 今回は学生支援制度を利用して参加させていただきました。こうした機会を提供してくださった運営の皆さま、学生支援スポンサーの皆さま、本当にありがとうございます！ 普段はバックエンドやアーキテクチャ、Three.js / WebGLに興味があり、実はVue自体はほとんど触ったことがありません。 しかも、Vue Fesまでには一度触っておくつもりだったのに、結局触らずに当日を迎えましたw それでも参加したのは、VueやNuxtはもちろん、Vite、VoidZero、Nitro、Hono、Elysia、WebXR、WebGLなど興味のある技術が多かったからです。実際、UI/UXから3D・空間コンピューティング、サーバーサイドやAI時代の開発環境まで幅広く、Vue未経験でもこれまでの知識とつながる話がたくさんありました。 最近は技術の使い方だけではなく、「なぜ作られたのか」「何を解決しようとしているのか」という設計思想にも関心があります。 英語の講演では日本語訳を追うのが精一杯だった場面もありますw。今回は現地で印象に残ったこと、後から調べて理解できたこと、自分なりの考察を分けながらまとめていきます。 オープニングがマジでかっこいい 最初にこれだけは書いておきたい。 オープニングがマジでかっこいい。 映像の演出がかなり良かったです！ x.com 公式のオープニング映像とカウントダウン動画はYouTubeにも公開されています。 Vue Fes Japan 2026 Opening（YouTube） Vue Fes Japan 2026 Countdown（YouTube） 技術カンファレンスってセッションで知識を得る場所ではありますが、現地ならではの映像や音、会場の雰囲気も含めて、一つの体験なんだなと思います。 自分もWebGLなどで視覚的な表現を作ることがあるので、こういう演出を見ると普通にテンションが上がります。何が始まるんだろう、という期待感を最初の数分で作れるのがいいですね。 キーノート 公式タイムテーブル 今回のキーノートでは、Vue.jsの成長、AIエージェントが扱いやすいコード、Vapor Mode、TypeScript 7.1、Vite・VoidZero、そしてtsrsなど、かなり広い内容が扱われていました。 ちなみに正直に言うと、あんまり理解できていませんでしたw 英語のセッションだったので、会場スクリーンに表示される日本語訳をずっと追いながら聞いていました。やっぱり英語の技術セッションは難しいですね。 ただ、Voidとtsrsは熱いんだな！ というのはかなり印象に残りました。 Vueはまだまだ成長している 講演では、Vueが週に約2,000万回ダウンロードされているという数字が紹介されていました。昨年と比べても大きく成長しているとのこと。 すでに長い歴史があるフレームワークなのに、それでもこれだけ利用が広がっているのは面白いです。 一方で、巨大なエコシステムでは、単に新しい機能を増やすだけではなく、既存のアプリケーションやライブラリとの互換性をどう守るかも重要になります。 AIエージェントにとって使いやすいコードとは？ 講演で興味深かったのは、人間が読みやすいコードと、AIエージェントが扱いやすいコードは必ずしも同じではないという話。 LLMは直近に変更されたフレームワークのAPIを知らなかったり、似たことを実現する複数の書き方から適切なものを選べなかったりする場合があります。 また、AIエージェントは作業に必要な情報が近い場所に集まっている方が理解しやすい、というコードの局所性についても触れられていました。 VueのSFC（Single File Component）では、ロジック・テンプレート・スタイルを一つのファイルにまとめられます。 <script setup lang="ts"> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count: {{ count }}</button> </template> <style scoped> button { color: green; } </style> 関連する情報が同じ場所にまとまっているので、AIが一部分を変更するときに参照する情報が少なくて済む可能性があります。 ただし、これは全部を巨大な単一ファイルへ詰め込めばいいという意味ではありません。ファイルが巨大になれば、逆に理解や修正が難しくなることもあります。 自分はこの話から、コードの短さと、コンテキストの少なさは同じではないと思いました。短くても暗黙的な規約が多ければ、その分だけ知識が必要になります。 Vue 3.6、Vapor Mode、Vue 4 Vapor Modeは、Virtual DOMの差分処理を経由せず、コンパイラが生成した処理によってDOMを効率よく更新しようとする仕組みです。 単純化すると次の違いです。 従来：State変更 → Virtual DOM → 差分処理 → DOM更新 Vapor：State変更 → 対応する更新処理 → DOM更新 Vue 3.6では、<script setup vapor>でオプトインする仕組みの導入が進められています。イベント開催時点ではVue 3.6は正式版ではなく、リリース候補段階でした。既存のVue APIをすべて同じように使えるわけではなく、VNodeに依存する処理などには制限があります。 自分が面白いと思ったのは、新しい方式を導入する際にも、既存のコードを一気に壊さないことを大事にしている点。フレームワークが成熟してくると、性能改善そのものより、互換性を維持しながら改善する方が大変なこともありそうです。 Vue 4についても触れられていましたが、アルファ版の公開状況など、聞き取りが不明瞭な点は正式な発表として断定しないようにしておきます。 Vue Coreのリリース情報 TypeScript 7.1のContent Mappers Vueの.vueファイルにはTypeScriptのコードだけでなく、テンプレートやスタイルも含まれます。 TypeScriptコンパイラは、そのままではVue SFC全体を理解できません。そのためVolarやVue Language Toolsが、変換や位置情報の対応付けなどを担ってきました。 TypeScript 7.1 BetaのContent Mappersは、このような独自ファイル形式をTypeScriptへ統合するための新しい拡張ポイントです。 .vueファイル ↓ Content Mapper ↓ TypeScriptが扱える仮想コード ↓ 型チェック・補完・診断 ↓ 元の.vueファイルへ結果を対応付ける 自分が面白かったのは、Vue独自で工夫していた問題を、より下位の共通基盤としてTypeScriptが扱えるようになること。 しかも、似た問題を抱えているのはVueだけではありません。SvelteやAstroなど、独自のファイル形式を持つエコシステムにも関係します。 ただし、Content Mapperを登録する設定や、外部コードを実行するための権限については考慮が必要です。「自動的に何も設定せず型チェックできる」という話ではありません。 Microsoft：TypeScript 7.1 Beta VoidZero、Vite+、Void、tsrsって何が違う？ ここは名前が似ていてかなり混乱しましたw VoidZero：JavaScript開発ツールチェーンを開発する組織 Vite：開発サーバー・ビルドツール Oxc：Rust製のJavaScript解析・変換基盤 Rolldown：Rust製バンドラー Vite+：Lint、テスト、ビルドなどの開発ワークフローを統合するツール Void：Viteベースの開発・デプロイプラットフォーム tsrs：TypeScriptをRustへ移植する取り組み これらを整理すると、キーノートの話が少しわかりやすくなりました。 特にVoidZeroがやろうとしているのは、単純に一つのビルドツールを速くするだけではなく、コードの解析、Lint、テスト、ビルドなど、開発ツールチェーン全体の効率を改善することです。 ツールチェーンの速度はAIエージェントにも効く AIエージェントが開発するときは、単にコードを生成して終わりではありません。 コード生成 → 型チェック → Lint・テスト → エラー確認 → 修正 → 再検証 このループを何度も実行します。 人間が待つ時間を削減するのはもちろん、AIが何十回も検証を繰り返すなら、ツールチェーンの速度そのものがエージェントの生産性に影響するんですよね。 今まで高速なツールといえば、人間の待ち時間を減らすという認識が強かったので、ここは少し考え方が変わりました。 CloudflareによるVoidZero買収 2026年6月にCloudflareがVoidZeroを買収した話にも触れられました。Viteなどのツール群は、引き続きOSSかつベンダー中立で開発する方針とのこと。Vue以外でも使われる開発基盤だからこそ、運営方針も気になります。 Cloudflare：VoidZero joins Cloudflare tsrs ── TypeScriptコンパイラをRustへ移植する挑戦 tsrsは特に熱いと思った話です。以前TSKaigiでtsgo（GoによるTypeScriptのネイティブ実装）を聞いたことがあったので、今度はRustか！と思いました。 初期ベンチマークでは高速化やメモリ使用量の削減が報告されていますが、結果は比較条件によって変わります。WebAssemblyのような環境での活用可能性も面白いです。 開発にはAIエージェントも活用されている一方、TypeScriptとの互換性がなければ現場では使いにくい。実装が速くなるほど、正しさを確かめるテストが重要になると感じました。 Cloudflare：Introducing tsrs Vercelスポンサーセッション 公式スポンサー情報 Vercelのセッションでは、AIエージェント向けの実行環境や開発基盤が紹介されました。 VercelというとNext.jsやデプロイの印象が強かったですが、今回の話ではAI SDK、AI Gateway、Sandbox、イベント処理、外部サービス連携などの話がかなり多かったです。 AI SDKはLLMをアプリケーションから利用しやすくする仕組み。AI Gatewayは複数のモデルへの入口を統一する仕組み。Sandboxは、生成されたコードなどを隔離して実行するための環境です。 また、AIエージェントが外部サービスへアクセスする場合には、認証や権限の管理も必要になります。単にモデルへリクエストを送るだけでは、実際の業務アプリケーションとして成り立たないんですよね。 ドメインに特化したフレームワークが増えている？ AIエージェント向けには、隔離実行や非同期処理、外部サービス連携など独特の要件があります。今回の紹介を聞いて、こうした問題領域に特化した基盤が増えていくのかも、と感じました。 もう一つ面白かったのが「越境」です。Vercelはデプロイの印象が強かったのに、今はAIや認証、実行環境まで扱っている。越境しているのは個人だけじゃなく、企業も同じなのかもなーと思いました。 参考：Vercel クラウドサインを止めずに Nuxt へ、次の10年のために先に決めたこと セッション詳細 ／ 登壇資料 このセッションは、かなり考えさせられました。 クラウドサインは2015年から動いているサービスです。登壇資料では、Vueコンポーネントが800超、旧Revelのテンプレートが400超ある複数スタックの構成を、サービスを止めずにNuxtへ段階移行する話が紹介されていました。 そもそもゴールを決めるのが難しい 特に印象に残ったのが、移行のゴールを最初に決めていたこと。 「古い技術だから新しくしたい」ではなく、機能開発のリードタイムを改善することを成功指標としていました。 リードタイムは、開発を始めてから完了するまでにかかる時間のことです。 正直、このゴールを決めること自体が難しいと思いました。 何が問題で、どうなったら解決したと言えるのか。その状態をどうやって測るのか。ここが曖昧だと、新しい技術へ置き換えたところで本当に改善したか判断できないですよね。 それを一つの目的として成立させて、実際の移行方法にまで落とし込んでいるのがうまいなと思いました。 URL単位で新旧の画面を切り替える 方法も面白かったです。全画面を一括で書き直すのではなく、URL単位で古い実装と新しい実装を振り分ける仕組みを採用していました。 ユーザーのリクエスト ↓ URL判定 ↙ ↘ 旧画面 新画面 Revel Nuxt これなら移行できた画面から切り替えられるし、問題があった場合にも影響範囲を限定しやすい。 自分のメモにも「確かにこれいいな」と残っていましたw 人間が毎回意識するより、仕組みで守る さらに良かったのが、移行のルールをCIやコードベースで検証できるようにしていたことです。 どのディレクトリに何を置くか、どんなルールで書くか、何を満たせば移行が完了したと判断できるか。 発表では移行状態を台帳で管理し、実際のコードとの一致や台帳の更新漏れをCIで検査していました。移行の完了条件も4つの性質と8つの約束に整理されていました。 これらを「チームの全員が常に気をつけましょう」にするのではなく、機械的に検査できるようにする。 これ、最近自分もかなり大事だと思っている考え方です。 人間が毎回意識してルールを守る仕組みは、忘れる可能性がありますし、新しい人が入るたびに説明が必要になります。 でも型やCI、ディレクトリ構造などで守れるようにしておけば、気をつけなければならないことを減らせます。 もちろん全部を自動化できるわけではありません。それでも、機械が保証できるものは機械に任せた方が便利だし、安心できると思います。 このセッションは、自分が最近考えていた「人間の注意に頼らず、仕組みで守る」という考え方とかなりつながりました。 コンポーネントのライフサイクルとグローバル状態の扱い方 セッション詳細 ／ 登壇資料 最初は比較的基礎的な状態管理の話なのかなと思っていましたが、途中からかなり面白くなりました。 値は残っているのに、中身だけ壊れる VueUseには、Local Storageと連携できるuseLocalStorageがあります。 import { useLocalStorage } from '@vueuse/core' const theme = useLocalStorage('theme', 'light') これを複数のコンポーネントで使い回そうとして、単純にシングルトン化した場合、意図しない問題が起きることがあります。 Composableの内部で作成された監視処理が、最初のコンポーネントのスコープに紐づいていると、そのコンポーネントがアンマウントされたときに監視処理だけ停止する可能性があるんです。 値はまだ存在しているのに、Local Storageとの同期が止まってしまう。 こういうバグは厄介ですね。エラーが必ず表示されるわけではないので、表面上は普通に動いているように見える場合があります。 そのため、状態を共有できるかだけでなく、状態に付随する副作用の寿命を誰が管理するのかを考える必要があります。VueUseのcreateGlobalStateやEffect Scopeの話は、その問題を扱っていました。 裏側を理解することとテストの重要性 自分もWebSocketやMediaPipeなど、ライフサイクルを意識する必要のある仕組みを使ってきました。 例えば画面遷移でコンポーネントが破棄されたとき、イベントリスナーや接続、監視処理はどうなるのか。 便利なライブラリを使っていると、裏で行われている処理を意識しなくても書けます。しかし、問題が起きたときにはその内部の仕組みを知らないと原因を追えません。 また、こういうバグは単にコンポーネントを一度表示しただけのテストでは見つけられない可能性があります。 マウントして、アンマウントして、別のコンポーネントから状態を更新する。そういった実際の利用経路までテストすることが重要なんですよね。 エラーが出ないから正常、とは限らない。 改めてテストコードや内部構造を理解する重要性を感じました。 新卒の疑問と、未経験からの挑戦 新卒のキャッチアップコストから決めたNuxt 3移行 セッション詳細 会社の管理画面ではNuxt 2を使っていましたが、Webで見つかる情報やAIが生成するコードにはNuxt 3前提のものが多く、新しく入った人には「自分の理解が違うのか、バージョンが違うのか」が判断しづらいという課題があったそうです。 発表資料ではNuxt Bridgeを使い、CIを通しながら移行して、ベースブランチをgreenに保つ進め方が示されていました。 面白かったのは、新卒エンジニアの「わからない」が移行のきっかけになっていたことです。現地メモにも「これこそ新卒を採用している理由かもね」と残していました。 すでに慣れている人には当たり前でも、新しく入った人にはそうではない。新しい視点だからこそ見つかる問題もあるんだと思いました。 Slidevで踏み出すVueとLTの第一歩 セッション詳細 今回、サポーターズさんも学生支援スポンサーとして協賛されていました。学生のカンファレンス参加を支援していただけるのは本当にありがたいです！ セッション中には技育CAMPの紹介もあり、「ここでも技育CAMPの話を聞くんだ！w」と思いました。しかもちょうど自分も技育CAMPのハッカソンに参加している最中だったので、なんだか面白かったです。 登壇では、Vueの経験がほとんどない状態でLTに挑戦し、Vue製のスライドツールSlidevを使って、発表資料を作りながら学び始めたという話がありました。MarkdownやVueコンポーネントからスライドを作れるので、発表の準備そのものがVueに触れるきっかけになるんですね。 やったことがないけど、やります 特に心に残ったのが、未経験でもまず手を挙げてみるという考え方です。 自分もVueをほとんど触っていない状態でVue Fesに参加しました。分野を完全に理解してから挑戦するのではなく、興味があるから参加してみる。実際に触れたことで、また次の学びにつながる。 今回の発表を聞いて、自分が普段大事にしている「興味があるなら、まず挑戦してみる」という姿勢を肯定してもらえたように感じて、素直にうれしかったです。 もちろん、挑戦しただけで理解できるわけではありません。でも、今持っている知識を足場にして新しい領域へ進んでいくという考え方にはかなり共感しました。 AIが書いたコードは、本当にVueらしいのか？ 技術面では、AIが生成したコードがそのフレームワークで一般的な書き方なのか、という話も印象に残りました。 例えばReactのuseMemoとVueのcomputedは似た役割があっても、使い方や前提は同じではありません。動くコードだからといって、Vueの慣習や設計思想に沿った実装とは限らない。 自分もAIを使って開発することが多いので、なぜそのコードになるのかを自分でも理解しようとする姿勢は大切にしたいと思いました。 なぜその UI アニメーションは気持ちいいのか？ セッション詳細 ／ 登壇資料 このセッションは、途中のデモがかなりおしゃれでした！ 実装の話は難しい部分もありましたが、普段自分が作っているWebGLの表現ともつながる話です。 気持ちよさを作る要素 講演では「すぐ反応する」「動きがつながっている」「意図に応える」、そこに遊び心を加えるという要素が紹介されていました。 例えば、画像をタップして拡大するときに元の画像が移動・拡大していくと、突然別の画面に切り替わるよりも、同じものを触っていると感じられます。昔のTwitterの画像操作やInboxのスワイプなども紹介されていて、言葉で説明されるよりデモで見ると納得感がありました。 速度や位置がつながると気持ちよさが変わる 特に面白かったのが、ドラッグ中だけでなく指を離した瞬間の速度まで次のアニメーションにつなげるという話です。 勢いよくスワイプしたのに、離した瞬間に動きが急停止すると違和感があります。EasingやSpring Animationだけでなく、ドラッグの速度やProjection（移動先の予測）まで考えることで、自然な慣性を作れる。 講演資料には、速度500px/sを0.15秒先まで予測し、75px先の位置を基準にする計算例がありました。 ドラッグ中に指へ追従するUIの実装例も紹介されました。 自分はUIアニメーションというとDurationやEasingの値を調整する印象が強かったので、ユーザーの入力速度をそのまま表現の一部として扱うという視点が面白かったです。 ただ派手ならいいわけじゃない 遊び心の話も好きでした。完了時にパーティクルが出たり、オブジェクトが少し弾んだりすると、同じ操作でも印象が変わります。 ただし、アニメーションが終わるまで入力できないようでは操作を邪魔してしまいます。すぐ使えることと、触っていて楽しいことを両立する必要があるんですね。 ここで自分はBumpのようなインタラクションを連想しました。GitHub PlanetやLiving Planetでも、単にオブジェクトを動かすだけでなく、触った瞬間の反応や動きの連続性をもっと意識していきたいです。 Vue で書く 空間コンピューティング、TresJS と WebXR を使ったXR デバイスのフロントエンド開発 セッション詳細 ヘッドセット越しに現実の空間へ3Dオブジェクトを表示したり、手の動きに合わせて操作したりするデモが紹介されていました。 個人的には、パススルー映像の中へ3Dオブジェクトが自然に置かれ、手で操作できるという実演が特に面白かったです。Webで3Dの世界を作る話が、現実空間の操作につながっていくのが印象的でした。 まず、VR・AR・MRなどを含むXRの基礎、6DoF、座標系、MeshやUVといった3Dの基本的な概念から説明がありました。 6DoFは、位置の3軸と回転の3軸を合わせた6つの自由度のことです。頭を動かしても現実の机の上に仮想オブジェクトが置かれているように見せるには、こうした位置と回転を追跡する必要があります。 なぜWebXRなのか XRのネイティブアプリでは、デバイスやOSによってSDKが異なります。 一方、WebXRではWeb標準のAPIと既存のWeb技術を使い、複数のデバイス向けに実装を再利用しやすくなります。URLで共有しやすいのも利点です。 ただし、すべての端末で同じ機能が使えるわけではありません。手のトラッキング、平面検出、パススルーなどの対応は端末によって違います。ここにもトレードオフがあります。 TresJSはReact Three Fiberと近い Three.jsはWebGLなどを扱いやすくするための3Dライブラリです。 TresJSは、それをVueのコンポーネントやテンプレートとして扱えるようにする仕組みで、ReactでいうReact Three Fiberに近い印象です。 自分はGitHub PlanetでReact Three Fiberを使っているので、こうした説明は比較的理解しやすかったです。 どこまで抽象化するべきなのか ここで考えたのが、WebGLを直接触るべきか、Three.jsやR3F、TresJSのような抽象化を使うべきかという話。 WebGLを直接使えば、描画パイプラインやバッファ、シェーダーなどを細かく制御できますが、コードはかなり増えます。 一方、高水準のライブラリなら、短いコードでシーンを構築できて読みやすい。 ただし、高水準のライブラリを使っても低レイヤーの処理ができないわけではありません。自分も釣りゲームでは魚の頂点・三角形・法線を計算して自前で3Dモデルを作りました。 どこまでをライブラリに任せて、どこを自分で制御するのか。 その選択が大事なんだろうなと思いました。 Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge セッション詳細 ／ 登壇資料 ここは正直難しかったです。ただ、調べ直してみると、バックエンドのアーキテクチャにも通じる話でした。 CapacitorでWebとネイティブをつなぐ Capacitorは、Vueなどで実装したWebアプリをWebView上で動かしつつ、ネイティブ機能をプラグイン経由で呼び出すための仕組みです。 Vue / JavaScript ↓ Capacitor Plugin ↓ Swift / Kotlin ↓ ネイティブAPI（LiDAR・ARなど） 今回のアプリでは、ARKitやLiDARなどを利用した空間解析・3Dスキャンの話が紹介されました。 大きなデータをむやみに転送しない LiDARで取得した点群データは、かなり大きくなることがあります。 それを何度もJavaScript側に渡すと、シリアライズやデータ転送がボトルネックになる可能性があります。 そこで、重いデータ処理はネイティブ側でなるべく完結させ、JavaScript側は開始・停止・進捗取得などの制御を担当する設計が紹介されていました。 ここからは自分の理解のための言い換えですが、これはControl PlaneとData Planeを分ける考え方に近いと思います。講演でこの用語が使われた、という意味ではありません。 Control Plane：Vue / JS → 処理を指示・進捗表示 Data Plane：Native → 点群の取得・大規模データ処理 どの処理をどこに置くかを決めて、巨大なデータを境界をまたいで何度も動かさないという設計の話。 Webでネイティブアプリを作れること自体より、その境界をどう扱うかという点が面白いと思いました。 サーバーサイドフレームワークの未来を語る── Nitro / Hono / Elysia と辿る「過去・現在・未来」 セッション詳細 ここはかなり楽しみにしていたセッションの一つです。 ただ、英語での議論ということもあって、正直、かなり難しかったですw 後半はAIエージェントやフレームワークの未来など抽象的な話も多く、全部理解できたわけではありません。 とはいえ、同じサーバーサイドフレームワークでも、作者によって解決したい問題が違うことが面白かったです。 3つのフレームワークは何を重視しているのか Nitro：実行環境の違いを吸収する NitroはNode.jsだけでなく、Cloudflare Workers、Deno、Bunなど、複数の実行環境を扱いやすくするサーバーフレームワークです。 HTTPリクエストの処理だけでなく、ビルドやデプロイ、キャッシュ、ストレージなども扱います。 つまり、アプリケーションをどの実行環境へ持っていくかという問題にも取り組んでいるわけです。 Hono：軽量なコアとWeb標準 HonoはCloudflare Workersで使うフレームワークが欲しいという背景から開発が始まりました。 Web標準のRequestやResponseを活用し、軽量なコアとミドルウェアによる拡張を重視しています。 import { Hono } from 'hono' const app = new Hono() app.get('/', c => c.text('Hello Hono!')) export default app コアを小さくしながら、必要に応じて機能を追加できるようになっています。 Elysia：型安全性と開発体験 ElysiaはTypeScriptの型推論やスキーマを活用した開発体験を重視しています。 APIの入力と出力を型として扱うことで、フロントエンドとバックエンド間の不整合を減らしやすくなります。 Eden Treatyなど、型安全なクライアント連携も特徴です。 競合していても解いている問題が違う こうして比較すると、同じサーバーサイドの領域でも、Nitroは実行環境、HonoはWeb標準と軽量性、Elysiaは型安全性や開発体験を特に重視しています。 もちろん機能が重なっている部分もあります。でも、解決したい問題や優先順位は違う。 ここで、技術を選ぶときにはベンチマークだけでなく、その技術がどんな問題を解決しようとしているのかを理解したいと思いました。 AIエージェントにフレームワークの規約は伝わるのか AIはコードを書けても、プロジェクトが重視する設計思想や暗黙の規約まで自動で理解できるとは限りません。古いAPIや複数の書き方で迷わないよう、制約や仕様をどう伝えるかが重要になります。 ただ、AIのためだけに選択肢を減らせば柔軟性も失います。ここにもトレードオフがあるんですね。 MCP、Skills、WebMCPの話 AIへ情報や機能を公開する手段として、MCP、Skills、llms.txt、WebMCPなども議論されました。 MCP：エージェントへツールやリソースを公開するためのプロトコル Skills：特定タスクに必要な手順や知識を提供する仕組み llms.txt：AIが参照する情報の案内を想定したテキスト形式 WebMCP：Webページの機能をブラウザ上のエージェントへ公開する実験的な仕組み ただし「AI向けだからMCP」とは限らず、既存のHTTP APIやOpenAPIで十分な場合もあります。何を解決したいかによって選ぶのが大事なんですよね。 軽量なフレームワークと全部入りのフレームワーク フレームワークのコアは小さくあるべきか、認証・RPC・バリデーションなどまで統合するべきか、という話もありました。 軽量なら自由に組み合わせやすい一方、必要なライブラリを選ぶ負担があります。 全部入りなら統一された開発体験を得やすい一方、フレームワークへの依存が強くなる可能性があります。 レベルの高い人たちでもこういう設計で悩んでいるのを見ると、やっぱり銀の弾丸はないんだなと思いました。 AI時代のフレームワークについて、自分なりに考えたこと ここからは、登壇者が具体的に新製品を発表したという話ではなく、今回の議論を聞いて自分が考えたことです。 AIが実装を助けてくれても、プロジェクトの仕様、守るべき制約、テストの方法、実行環境などを理解する必要があります。これらをエージェントに伝えやすい開発基盤は、今後さらに重要になるのではないでしょうか。 その一方で、どこまでを言語やフレームワークが担うのか、何を利用者へ任せるのかは難しい問題です。 今回自分が最も面白かったのは、Nitro、Hono、Elysiaのように同じサーバーサイドの領域でも、重視する問題が違うから設計思想も違うということでした。 AIがコードを書けても、「誰の課題を解決するのか」「何を正解とするのか」は考え続ける必要がある。その判断のために、ドメインを理解し、アーキテクチャの裏側まで学ぶことを大切にしたいと思いました。 WebGLで見る、有限な計算と滑らかな世界 セッション詳細 ここは、自分の中でのWebGLの理解が少し広がったセッションでした。 普段WebGLやGLSLを触っているので知っている部分もありましたが、波や流体のような表現を数値計算で作る話は面白かったです。 Vertex Shaderは座標だけを扱うわけじゃない？ 基本的なグラフィックスパイプラインは、単純化すると次の流れです。 頂点データ ↓ Vertex Shader ↓ Rasterization ↓ Fragment Shader ↓ 描画 今までの自分の認識は「Vertex Shaderは座標」「Fragment Shaderは色」というものでした。 基本的な理解としては間違っていないけど、それだけに限定されるわけではないんですよね。 Vertex Shaderは頂点ごとに実行されます。最終的にはgl_Positionで位置を出力する必要がありますが、途中の計算ではUV、法線、時間、速度なども使えます。 Fragment Shaderも、ただ画面上の色を決めるだけでなく、計算結果をテクスチャへ書き込んで次の処理へ利用する、といった使い方ができます。 最近学んだ自分としては、Vertexは座標だと思って覚えていたので、へー、難しいこと言うねーwという感じでした。 なぜ波や流体とGPUは相性がいいのか 単純な波なら、例えばy = A sin(kx - ωt)のように、位置と時間を使って高さを計算できます。 GPUは、たくさんの頂点やピクセルに対して似た計算を並列に実行するのが得意です。 だから粒子だけでなく、波、ノイズ、画像加工、流体の表現などにも応用できるんですね。 自分はWebGLといえばパーティクルや3Dの粒子が得意だと思っていましたが、今回の話を聞いて、もう少し広く捉えられそうです。 粒子に特化しているというより、大量の並列計算が得意だから、粒子にも波にも応用できるということ。 Stable FluidsとFlow Field セッションではStable FluidsやFlow Fieldの話もありました。 Stable Fluidsは、流体の振る舞いを安定して計算するための手法です。 流体では、ある場所の動きが周辺の速度や圧力と関係します。単純に各ピクセルを独立に更新するだけでなく、移流や圧力の計算などが必要になります。 Flow Fieldは、空間の各位置へ方向や速度の情報を持たせる仕組み。 講演資料にあった別の例では、ピクセルシェーダーのgl_FragCoordから得た座標にFlow Fieldのアルゴリズムを適用し、色を分布させていました。これは画面上の色を扱う例で、3Dメッシュの変形や法線計算を示すものではありません。 一方、自分は釣りゲームで魚の頂点・三角形・法線を計算していたので、そこは自分の経験とつながって面白かったです。講演資料のピクセル上の色分布と、自分が扱った3Dメッシュの法線計算は別の処理ですが、どちらも座標ごとに計算を重ねて表現を作る点で連想が広がりました。 WebGPUで大量の粒子を扱う WebGPUによる大量の粒子処理も紹介されていました。WebGPUではCompute Shaderを使い、描画以外の汎用的なGPU計算も行えます。 ただし、GPUなら何でも高速になるわけではありません。処理の依存関係やCPU・GPU間のデータ転送がボトルネックになることもあります。 有限な計算から滑らかな表現を作る 今回の講演で改めて意識したのは、コンピューターが扱える数値精度や計算量は有限だということです。 8bitと32bitでは表現できる数値の精度が違い、流体のような滑らかな動きも、実際には限られた解像度や精度で計算されています。それでも周辺の値を参照したり計算を繰り返したりすることで、自然な流れやうねりを作れる。 有限な計算の積み重ねから、滑らかで美しい表現が生まれる。 公式タイトルの「有限な計算と滑らかな世界」が、今回の話をよく表していると思いました。 今回、自分の中でWebGLの面白さがもう少し広がりました。 これまでは3Dを描く、頂点を動かす、パーティクルを作るという認識が強かったですが、GPUで数値計算をして、その結果をさまざまな表現へ変換するという視点もあるんですよね。 特に波やうねりのような表現は、数学的な関数や物理モデルと組み合わせることで自然な動きを作れます。 もちろん、数学を使えば自動できれいになるわけではありません。 どういう動きや世界観を作りたいのかを考えて、そのためにどの計算を使うのかを選ぶ必要があります。 数式による計算が、そのまま視覚的な美しさにつながるところが、個人的にWebGLの好きな部分なんだと思いました。 GitHub PlanetやLiving Planetでも、こうしたFlow Fieldや流体表現を試してみたいです。 アフターパーティーは次こそ参加したい！ イベント終了後にはアフターパーティーもありましたが、今回はチケットを購入するときに間違えてしまい、参加できませんでしたw x.com 自分はセッションを聞くだけでなく、登壇者や参加者と技術の話をする時間も大好きです。だからこそ、今回はそこに参加できなかったのが心残りでした。 来年はチケットを間違えずに買って、アフターパーティーにも参加したいです！ おわりに ── Vueを触っていなくても、来てよかった！ 今回のVue Fesでは、VueやNuxtそのものだけでなく、UI/UX、WebGL・3D、WebXR、サーバーサイドフレームワーク、AI時代の開発環境まで、本当に幅広い話を聞くことができました。 Vue独自の仕組みにはわからないところもありましたが、R3Fの経験があるからTresJSを理解しやすかったり、バックエンドへの関心があるからNitro・Hono・Elysiaの話が面白かったり、魚の3Dモデルを自分で生成した経験がWebGLの法線計算とつながったりしました。 普段使っていない技術のカンファレンスでも、今までの知識を足場に十分学べる。 それを実感できた一日だったと思います。 そして、参加までにVueを触るつもりだったのに結局触らなかったというオチもありますw。次は実際にVueを使って何か作ってみたいです。 改めて、今回学生支援制度を通じて参加の機会をくださった運営の皆さま、学生支援スポンサーの皆さま、登壇者・参加者の皆さま、本当にありがとうございました！ Vue Fes Japan 2026 公式サイト ／ 公式タイムテーブル

Vue v-for: The Directive Unmounted Hook Bug, Fixed in 3.5.41 You write a custom directive once — v-tooltip, v-click-outside, v-ripple — attach something in mounted(), tear it down in unmounted(), and trust the pair like you'd trust addEventListener/removeEventListener. Then you drop it onto a row inside a filterable v-for list. Filter an item out. No error. No warning. The row disappears from the screen — and on some Vue 3 versions, unmounted() never ran. The listener it attached is still live, attached to a DOM node nothing references anymore. This was a real bug in Vue's own compiler, open for years, fixed only in Vue 3.5.41 — and understanding why it happened teaches you more about how v-for actually works than the fix note ever will. What You'll Learn By the end of this article you'll be able to: - Explain why a custom directive's lifecycle hooks can be skipped for an element inside v-for, even though the same directive works fine outside a loop - Reproduce the symptom, confirm whether your installed Vue version is affected, and verify the fix - Describe what a compiler patch flag is and why NEED_PATCH specifically matters for refs, vnode hooks, and custom directives - Write directive-based cleanup you can trust inside a list, instead of discovering the gap in production - Tell this bug apart from unrelated v-for gotchas (duplicate keys, index-as-key) that look similar but have different causes Who this is for: you've written a custom directive with app.directive() or a local directives option, and you've used v-for with :key. If directives themselves are new to you, the Vue Guide to Custom Directives is worth reading first — this article assumes you know what mounted/unmounted hooks are, not how to write your first one. Table of Contents - [The Problem: A Cleanup Hook That Sometimes Doesn't Run](#the-problem-a-cleanup-hook-that-sometimes-doesnt-run) - [The Mental Model: Patch Flags Decide What the Runtime Bothers to Visit](#the-mental-model-patch-flags-decide-what-the-runtime-bothers-to-visit) - [The Bug, the Issue, and the Fix](#the-bug-the-issue-and-the-fix) - [Edge Cases and Gotchas](#edge-cases-and-gotchas) - [Best Practices](#best-practices) - [FAQ](#faq) - [Cheat Sheet](#cheat-sheet) - [Key Takeaways](#key-takeaways) This is written against Vue 3.5.x (verified 3.5.43, current on npm's latest tag as of this writing). Vue 3.6 is still a release candidate (3.6.0-rc.10 on the rc tag) and isn't stable yet, so nothing here depends on it. The fix this article covers shipped in Vue 3.5.41, released August 5, 2026 — if your package.json pins anything older, you are likely affected (one of the two issues the fix closed was filed against 3.2.47, so this isn't a 3.5-only gap). The Problem: A Cleanup Hook That Sometimes Doesn't Run Say you've written a small directive that logs its own lifecycle — a stand-in for anything real a directive might do (attach a listener, instantiate a third-party widget, start an observer): <!-- the directive — nothing unusual about it --> <script setup> const vLog = { mounted(el, binding) { console.log(`mounted: row ${binding.value}`) }, unmounted(el, binding) { console.log(`unmounted: row ${binding.value}`) // in real code: removeEventListener, destroy a tooltip instance, // disconnect an observer — whatever mounted() set up }, } </script> Used on a single element, it behaves exactly as documented: one mounted log when it appears, one unmounted log when it's removed. Now put the same directive on an element inside a keyed v-for, and remove an item from the middle of the list by filtering the underlying array: <template> <div v-for="row in visibleRows" :key="row.id" v-log="row.id"> {{ row.label }} </div> </template> // remove row 2 from the data the list is built from visibleRows.value = visibleRows.value.filter(r => r.id !== 2) On an affected Vue version, row 2's <div> disappears from the DOM exactly as expected — but the console only ever shows the mounted log for it, never unmounted. Nothing throws. Nothing warns. The directive's cleanup code simply never executes for that element, while the identical directive on a non-looped element works every time. That asymmetry — directive hooks are reliable alone, unreliable in a v-for — is the entire bug, and it's what makes it so easy to ship without noticing: your manual test on one element passes, and the loop case only misbehaves once a list gets edited in production. The Mental Model: Patch Flags Decide What the Runtime Bothers to Visit The mental model: at compile time, Vue's template compiler inspects every element and decides which ones are worth revisiting when the component re-renders. An element with no dynamic text, no bound class, no bound prop — nothing that could ever change — gets compiled as fully static, and the runtime skips it entirely on every future patch. That skip is most of why Vue is fast: it never diffs what it already knows can't change. To make that work, the compiler attaches a patch flag to every dynamic element — a small integer bitmask recording which kind of dynamic content it has: TEXT for interpolated text, CLASS/STYLE/PROPS for bound attributes, and so on. The runtime reads the flag instead of diffing blindly, so it only compares the parts of the vnode the flag says can change. Now consider an element that has no dynamic text or props at all — only a ref, a v-bind to a vnode hook, or (as in the example above) a custom directive. Nothing about its rendered output ever changes, but Vue still needs to visit it on every patch, because a ref needs updating, a vnode hook needs calling, or a directive's updated/unmounted hook needs invoking at the right moment. That's exactly what the NEED_PATCH flag exists for: it tells the runtime "nothing here looks different, but visit it anyway — something non-visual depends on it." The bug was that NEED_PATCH could get dropped specifically when that same element was also inside a v-for. The compiler's own v-for-specific optimizations and its patch-flag analysis for refs/hooks/directives didn't compose correctly, so an element that would have correctly carried NEED_PATCH on its own lost that flag once it was also a loop child. Without the flag, the runtime had no signal telling it to visit the element during a patch — so the directive's lifecycle hook for that specific element silently went uninvoked. The Bug, the Issue, and the Fix This wasn't a hunch — it's two tracked issues and a merged fix in Vue's own repository. Issue #12569, titled "Custom directive's unmounted event is not triggered on v-for element," reported exactly the symptom above. Issue #9239 reported the same underlying gap for ref callbacks on v-for children — the flag loss wasn't directive-specific, it affected every NEED_PATCH-only case: refs, vnode hooks, and custom directives alike. The maintainer who fixed it, in PR #11682 ("preserve vnode lifecycle in stable v-for"), described the bug precisely: "When an element uses ref, vnodeHook, or custom directives, the patchFlag should be NEED_PATCH. However, when they are used together with v-for, the patchFlag gets lost." The fix tracks whether an element needs patching separately from whether it needs to stay a full "block" in the compiler's internal tree, and the v-for transform now adds NEED_PATCH back wherever one of these lifecycle-sensitive features is present. It shipped in Vue 3.5.41 (2026-08-05). What that means for you in practice: if your package.json resolves vue to 3.5.41 or later — or anything on the current 3.5.43 — this is already fixed, and the example above behaves correctly: both mounted and unmounted fire for every row, every time. If you're pinned to an older 3.5.x release, or anywhere earlier in the Vue 3 line (one of the two issues this fix closed, #9239, was reported against 3.2.47), the gap is real and silent. The straightforward fix is upgrading to 3.5.41 or later; this article doesn't catalog a non-upgrade workaround, since the bug lives in the compiler's static analysis rather than in anything your component code controls — check the linked GitHub issues directly if you need to stay pinned for now. <!-- playground:start --> 🎮 Try it yourself ▶️ Open the interactive playground → _Runs right in your browser — poke at it and watch the concept react live._ <!-- playground:end --> Edge Cases and Gotchas This is not the index-as-key bug. A separate, much more famous v-for mistake — using the array index as :key — causes Vue to reuse the wrong DOM node and misattribute state across reorders. That's a key-strategy problem you control by choosing a stable :key. The bug in this article happens even with a perfectly correct, stable :key — it's a compiler flag that was lost, not a key you chose wrong. v-if and v-for on different elements of the same loop are unaffected. This specifically concerned "stable" v-for — a keyed loop with no structural directive (v-if/v-for) on the same element changing the number of children per iteration independent of the list itself. Combining v-for with v-if on the same tag is already discouraged by Vue's own style guide, and can throw a runtime reference error if the v-if expression depends on the v-for's loop variable — a separate, unrelated problem, not this bug. Built-in reactive bindings were never affected. v-model, v-show, bound :class/:style/props, and interpolated text all carry their own patch flags (PROPS, STYLE, CLASS, TEXT) regardless of v-for. The gap was specific to elements whose only dynamic feature was a ref, a vnode hook, or a custom directive, with nothing else forcing a patch flag already. ref callbacks silently missing inside v-for was the same bug. If you've ever seen a ref array (:ref="(el) => refs.push(el)") inside a loop skip an entry or hold a stale element after a list changed, issue #9239 describes the identical mechanism — not a separate problem to debug. Custom directives using only created/beforeMount/beforeUpdate hooks were affected identically to mounted/unmounted. The bug was about the patch flag being present at all, not about which specific directive hook fires — every hook on the affected element went uninvoked on the patches where the flag was missing. Best Practices Reach for this knowledge when you maintain any directive that does real cleanup — removing listeners, destroying a third-party widget instance, disconnecting a ResizeObserver or MutationObserver — and that directive is ever used inside a list. Confirm your installed Vue is 3.5.41 or later before trusting that cleanup unconditionally. Avoid relying on directive lifecycle hooks for anything correctness-critical even after upgrading. Directives are the right tool for DOM-only side effects (focus management, third-party widget wiring, scroll/intersection observers) — not for application state that must be perfectly consistent, where a watch or computed-driven reactive update gives you a mechanism entirely outside the compiler's patch-flag analysis. Write a real regression test for list-cleanup directives, not just a manual click-through: mount a list with the directive, remove an item, and assert the directive's unmounted hook actually ran for it. This bug shipped silently for years precisely because it only reproduces once an item leaves a loop — a test that only ever mounts, never removes, would never have caught it. Pin and read your Vue version deliberately, especially on a long-lived app. npm ls vue (or checking the lockfile) tells you exactly what you're running; npm view vue dist-tags tells you what's current. A multi-year-old pin anywhere before 3.5.41 is exactly the situation this bug could still be lurking in. FAQ Why didn't Vue throw an error or a dev-mode warning for this? Because nothing about the element's own rendering was wrong — the DOM node itself unmounted correctly along with its parent list item. The only thing missing was Vue's internal signal to also invoke the directive's hook on that specific vnode. There was no incorrect state for Vue to detect and warn about; the gap was an omission in the compiler's static analysis, not a runtime contradiction it could catch. Does this affect v-model or other built-in directives? No. v-model compiles to a bound prop plus an event listener, both of which already carry their own patch flags (PROPS) independent of this bug. The gap only touched elements whose sole dynamic feature was a ref, a vnode hook, or a custom directive with nothing else forcing a patch flag. Is Nuxt affected the same way? Yes, to the extent any given Nuxt app's resolved vue dependency was on an affected version — Nuxt renders on top of Vue's own core, so this is a Vue-core fix, not something Nuxt layers on. Check vue's resolved version in your Nuxt project's lockfile the same way you would in a plain Vue app. Is this fixed in Vue 2? Not applicable — Vue 2's compiler doesn't use this patch-flag/block system at all (it was introduced with Vue 3's rewritten renderer), so the bug and its fix are both Vue-3-specific. How do I confirm my own app isn't exposed? Check your resolved vue version (npm ls vue), and if it's below 3.5.41, reproduce the repro in this article in a scratch component before deciding whether to upgrade immediately or schedule it — a directive that only logs, with no real side effect, costs nothing to leave broken; one that owns a listener or a third-party instance is worth fixing promptly. <!-- quiz:start --> 🧠 Test yourself Think it clicked? Take the 9-question quiz → _Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._ <!-- quiz:end --> Cheat Sheet | Task | What to check | Notes | | --- | --- | --- | | Confirm you're affected | npm ls vue | Affected: any Vue 3 release before 3.5.41 (reported as far back as 3.2.47) | | Confirm you're fixed | Vue ≥ 3.5.41 (current: 3.5.43) | No flag, no config — the fix is purely internal | | Reproduce the symptom | Custom directive + keyed v-for + remove an item | Log mounted/unmounted; on affected versions only mounted appears | | Tell it apart from index-as-key bugs | Does it happen with a correct, stable :key? | This bug happens even with a correct key; index-as-key is a separate mistake | | Root cause, one line | NEED_PATCH patch flag dropped for ref/vnode-hook/directive-only elements inside v-for | vuejs/core#11682 | | What's NOT affected | v-model, bound :class/:style/props, interpolated text | These already carry their own patch flags regardless of v-for | // A directive you can trust inside v-for, once Vue is ≥ 3.5.41: const vCleanupCheck = { mounted(el, binding) { el.__cleanup = () => console.log(`cleaned up row ${binding.value}`) }, unmounted(el, binding) { el.__cleanup?.() }, } // Regression-test it: mount a list, remove an item, assert unmounted ran. Key Takeaways - A custom directive's mounted/unmounted hooks could silently fail to fire for an element inside a keyed v-for, with no error or warning — fixed in Vue 3.5.41. - The cause was a compiler detail: elements whose only dynamic feature is a ref, a vnode hook, or a custom directive need the NEED_PATCH flag to be visited during a patch, and that flag could get lost specifically when combined with v-for. - This is unrelated to the index-as-key mistake — it happened even with a correct, stable :key. - If you maintain a directive that does real cleanup, confirm your Vue version is 3.5.41 or later, and write a test that actually removes a list item rather than only mounting one. The listener nobody was tracking is the quiet failure mode that makes this bug worth knowing even now that it's fixed: it never crashed, never logged a warning, and would have kept accumulating in a long-running single-page app for as long as the affected Vue version stayed pinned. Compiler-level bugs like this are rare, but they're exactly why "it works when I click it once" isn't the same as "it works" — the loop is where cleanup earns its keep. Have you run into a directive that seemed to stop working only inside a list, or found another case where NEED_PATCH mattered? Drop it in the comments. <!-- related:start --> 📚 Read next - Vue Composables: The Shared State Trap (+ Cheat Sheet) - Vue Computed: What It Caches and When It Reruns - Vue defineModel: The v-model Contract, Explained <!-- related:end --> --- 🚀 Want more like this? Every guide, playground, and quiz lives on bestpractic.org — open it and sign up free so the next one finds you. Thanks for reading! Let's stay connected: - ⭐ GitHub — follow me and star the projects: github.com/parsajiravand - 💬 Discord — join the frontend best-practices community: discord.gg - 📸 Instagram — frontend best practices, daily: @bestpractice___

Vue Fes Japan 2026に参加してきました！ 初めてVue Fesに参加してきました。 存在は認識していたのですが、オンラインの配信とかやっていなくて今年はようやく現場参戦しました。 エンジニアをよりハイパフォーマーにする Vue のアップデートの話 Vue Fes Japan 2026の雰囲気 自分の手段の視野を広げてくれたお話 をまとめていきます。 EvanYouさんのキーノート Vueによる開発体験のあらゆる工程を早くしていくっていうことをワクワクさせてくれるお話でした。Alien Signalでパフォーマンスが上がる話は楽しみ。Vue Language Tools v4 がリリースされたらしいです。 Vue4が開発中の話があって楽しみでした。 海外からお話に来てくれてる猛者な人たちが多かったですが、セッション全体で画面に自動翻訳出ていてありがたい。 ここからは各セッションのお話 デザインを開発する リンクアンドモチベーションのエンジニアからデザインになったひとのお話。AIによるデザインの試作を本番とおなじvue componet使うようにしたって話が普通にパクれそうな話だと思った。ピン打ちしてコメントできるようにしていて、いいアイデアだと思った。 コンポーネントのライフサイクルとグローバル状態の扱い方 vueはcomponentの内部でeffectscopeをもっていてメモリ管理してくれてる話 ランチセッション おにぎり食べながら見るセッション。おにぎり二つだと私は物足りなかったので、 もう一品おかずか何かがほしいところではあった。 JSがこんなに減る！ HTML・CSS最新技術2026 最新のHTML・CSSでコード一杯書かなくてもアニメーションとか見せ方をリッチにできる話。 体系的にこういうの色々知れる機会は中々ないので、これも技術イベントの良さだとは思った。 一定時間のホバーでツールチップが表示される interestforが便利そうだった。 Nuxt ContentからOxContentへ、1000ページ超のブログ基盤刷新への挑戦 OxContent（オックスコンテント）と読むらしい。コンテンツ基盤という概念をはじめてきいた。markdownをhtmlで変換できる最速のライブラリらしい。 この記事自体にも使っているが、OxContentでzennのエディターを作ってみた。右側のpreviewがいい感じなっていそう。 Vite+への貢献と、Team Memberになって見えてきた風景 Vite+ という統合開発ツールチェーンのお話。 vpコマンドで実行する、こういうプロジェクトがあることを初めてしった。 build~lint~testをいい感じにしたいやつであることまでは分かった。 OSSに対して、AIで信頼度や可読性が低いissueを切られて少し困っているらしい。 いいissue切ることもOSS貢献なので皆でもりあげたいとおっしゃってた。 The Vue Toolchain, Reimagined bunもreact compiler もどんどん Rust製になっているねと。 現在のVite+がVueファイルの構文解析が弱いからそれをカバーするツールなのかな？Vize使ってみよう。講演中、スライド右下に話す時間出てるのおもろかった。 サーバーサイドフレームワークの未来を語る── Nitro / Hono / Elysia と辿る「過去・現在・未来」 Hono作者とNitroやH3の作者の方のパネルディスカッション。 自分が普段つかっているライブラリ・フレームワークの作者がいて、vuefes結構すごいなとなった。 Hono RPC機能は人間にとって便利でもともと改善要望でissueが一杯たっていたけど、AI開発が普及してきて、型はAIがいい感じにしてくれるからあんまりissueが最近はたたなくなった話が面白かった。 WebGLで見る、有限な計算と滑らかな世界 たくさんのピクセルがあつまって滑らかな世界を作っているんだよってお話。 Vertex shader⇒ラスタライズ⇒pixelシェイダーというレンダリングパイプライン デジタル上で行われる複雑な流体の動きの仕組みを分かりやすく紐ほどいてくれて、この分野をもっと勉強したいとおもった。 おわり 自分が普段興味もたない領域のお話も聞けて視野が広がった。来年も参加しよう。 tシャツが割とよかったけど、こういうの買いだしたらきりが無いと思ってやめた、来年参戦したら買おう。 vuefes.jp

VueFes Japan 2026に参加してきた VueFes Japan 2026に参加してきました はじめに はじめましての方ははじめまして。 福岡県を拠点に活動している「くらず / Kurazu」と申します。 この度、VueFes Japan 2026学生支援制度にて交通費等のご支援をいただき、東京で開催されたVueFes Japan 2026に参加することができました！ありがとうございます！ このレポートはそんな僕が参加して感じたこととか、思ったことをつらつらと書いた記事になっております。 フロントエンドにそこまで精通しているわけではないかもしれませんが、僕なりに感じたことを書いています！ 画像沢山貼りたいところですが、僕がそこまで撮っていなかったので少なめです... 当日レポート 会場IN〜 今回のVueFes Japan 2026の会場は「大手町プレイス ホール＆カンファレンス」でした。 去年の開催場所も同じだったので、慣れてる人はきっとすんなり行けたでしょう。 東京メトロ丸の内線で向かい、大手町駅で降りてそのまま、A5出口から直通で会場に行けました (これマジで神だった...) 当日微妙に天気悪かったり寒かったりだったので、屋内経由で迎えるのは凄く体験が良かった。これもUXかもしれない() 会場は全体的にとにかくおしゃれ！！ フロントエンドカンファレンスだな〜って感じがすごいするし、ワクワクしました。 なんとVueFes Japan、事前登録時にネームカードの申し込みをしておけばこんなに可愛いタグを貰えちゃいます。まじでいいこれ。 紙とかでもなく、ちゃんとプラでしっかりしてる感じ。 やはり参加した記念を物として手元に残るのは良い〜 カンファレンス参加経験、これで2回目とまだまだ浅いんですが、このワクワクは恐らくずっと変わらず楽しめるでしょう...！ オープニング〜 09:00 ~ 10:00の受付が終わり、10:00 ~ 10:10のオープニング...！ ついにVueFes Japan 2026がスタート！！ め〜っちゃおしゃれなアニメーションと、豪華なゲスト紹介も合わせた簡単なオープニングムービーが流れ、テンションが凄い上がりました。 これ、Youtubeにも公式から公開されているようなので、是非見てみてください！ 公式X： x.com x.com URL： Vue Fes Japan 2026 Countdown youtu.be Vue Fes Japan 2026 Opening youtu.be 1. キーノート 最初は最近アツいアツいVoidZeroのCEO、Evan You氏のキーノートからスタートしました。 Vue 4の話、TypeScriptの最新の話、そして恐らくVoidZeroにとっても我々開発者にとってもの最近のビッグニュース、Cloudflare買収の話、VueFesの最初として素晴らしいキーノートでした。 後半でお話されていたAIエージェントを活用した、エージェントループ開発における「ツールの大切さ」はまさにって感じの内容であり、これも最近出たばかりのcf (Cloudflare CLI)が少し特殊なCLIツールになっている理由が理解出来ました。 JSON出力なの確かにわかりやすいけど珍しいな〜って思ってましたが、AIエージェント”も”使うことを前提としていたよう...自律して動くエージェントにとって、ツールの扱いやすさは一番重要と言っても過言ではないのかも。 2. セッション：デザインを開発する ~ Vueで実現するデザインプロセス改善 ~ Info: vuefes.jp Speaker Deck: speakerdeck.com AIエージェントを活用した開発フローにおいて、正直な話「量」は確保できるようになったけど、そこで「質」をどれくらい担保出来るかは怪しい...だから「品質を担保されたものが大量に出力できる状態」を目指したいよね、というお話でした。 プロトタイプ自体はもう簡単に出来ちゃうので、それを人間がユーザー目線の意見をバンバン出し合って、それをエージェントが改善を回し続けるというループを生み出すツール開発されていたようです。(以前出たClaude Designの操作感に近いとのこと) 最近僕はデザインに結構興味が出てきて、ハッカソン等でもかなり重視しているポイントでした。ただ、頭の中にはイメージとして存在するものの、それを形にするのがなかなか難しい...Figma等のツールはあるものの、あれを使いこなせるかと言われたら微妙。まだイラレの方がいいかなぁ...?ってくらいのレベル感です。 実際のコード実装はAIに任せ、人間はそのループの中でレビューと提案を繰り返す。 イテレーションを確保しつつ、質も上げられる。僕個人的にも未だにLLMにはないセンスが人間側には沢山あるように思っているので、現状一番好きなデザインプロセスだと思っています。 Claude Designとかと違い、コンポーネント単位で色々見れたり、その監査ログ的なのまで取っているようでそこ凄い好きなポイントでした。(Claude Design既存機能でしたらすみません) 3. セッション：契約で守るコンパウンドプロダクトのデザインシステム Info: vuefes.jp Speaker Deck: speakerdeck.com Schema Driven UI... 契約からフロントエンドデザインを作る・守る、というお話。 契約で決めて、またまた決まった構造でUIが出来上がるから理論上、「誰が作っても同じ画面になる」らしい... この考え方、今までしたことがなかったので正直そこまでイメージできませんでした... ただ、仰られていたことはごもっともだと感じましたし、触る人によっては雑になりがちなUI実装を契約で担保できる構造は綺麗だと思いました。 また、構造上CIでUIを検証できるので、そもそも人間がレビューする前にある程度綺麗にまとまるのが良いな〜って思いました。 4. 学生支援セッション：新卒のキャッチアップコストから決めたNuxt 3移行 Info: vuefes.jp ここからは暫く、学生支援特典のイベントでした。 そのためお弁当いただきながらセッションを見る贅沢な時間... (僕はNuxt全然わかりません) Nuxtのバージョン違いによる新卒入社のエンジニアがキャッチアップが大変だったため、思い切ってNuxt 3へ移行し、その道中の話なども含めた内容でした。 確かに、今僕もですが、既存のコードベースをキャッチアップするとなると、実際にコードを辿って、わからないメソッドは調べる。みたいなことやってはいますが、規模が大きいとそれなりに負荷は当然大きくなります。で、それの対応としてAIエージェントと協力しながらキャッチアップしたとしても、新旧スタックが混じった環境だと、真を見失う可能性は全然あると思います。 また、その思い切った判断のお陰で実はあとからこの機能使えるようになっててコード綺麗になりました、みたいな棚ぼた状態全然あり得ると思うので、僕は好きだな〜って思いました。(これは実務ってより別の方向性の話に近い気がしたので、あくまで棚ぼたは一例としてです。) 5. 学生支援セッション：Slidevで踏み出すVueとLTの第一歩 Info: vuefes.jp Vue書いたことないけどVueFesで登壇する面白いサポーターズエンジニアの方の登壇でした。 「やったことないことに手を挙げる」、このマインド大好き♡ 僕は以前は全然こういうこと出来なかったタイプですが、やっぱり勇気出してやってみるとなんだかんだ楽しいってこと沢山あって最近はちょこちょこしています。 このセッションではSlidevとVueの組み合わせで、結構最近アツいスライドの作り方ですごいおもしろかったです。実際のVueのコードが使われていたり、その中で実施されたちょっとしたアンケートがすごい新しく、アンケート結果がその後のスライドで動的なコンポーネントが実際の結果データを取ってきて表示する構造になっていて、登壇中にアンケートとりつつ、それを表示する機能ってめっちゃおしゃれな表現で良いなと感じました。これはマジで参考にしてみたい。 僕は普段はGoogleスライドしか使って無いので、そろそろSlidev手を出しても良いのかな〜って興味が20%くらい増えました。(Googleスライドの愛用テーマから手が話せない...) Powerpointみたいな従来のプレゼンツールではない、新しめで面白いツールといえばもう1つの例として、presentermというのがあります。こっちの方がSlidevよりかは比較的変態度合いが大きくて、「ターミナルでプレゼンしようや」ってツールです。 ただ、そのままコード実行できたり、結構見た目ちゃんと良かったりするので、PCのリソースが140%くらいまで埋まってる人は検討してみても良いかもしれません() X. 学生支援限定ランチ会 一旦休憩、学生支援を受けている学生＋OSS開発者やVueFes運営側の人とそれぞれのテーブルで話しながらご飯食べる時間がありました。 ただ、これすごいレアケースだとは思うのですが、僕が居た卓が「「みんなVue.jsメインじゃない」」状態になってしまってました... インフラ・インフラ・デザイン・Reactみたいな... でも、それはそれで就活だったり普段学校とかイベントで何してるの〜的な話ができたので楽しかったです。Xアカウントの交換も出来たので今後またどこかで会えることを期待... 6. セッション：JSがこんなに減る！HTML・CSS最新技術 2026 Info: vuefes.jp Slide: ics-ikeda.github.io 使う人の視点：直感的で気持ち良いUI 作る人の視点：実装をもっと楽に これらを新しいHTML・CSSで実現出来ちゃうんだよ！というお話でした。 まず結論から、今後はちゃんとChromeのリリースノートを見るべきだな...と痛感しました。 マジで知らないアップデート多すぎる... 結構普段アプリ開発していて求めているUIアニメーションやアクションをライブラリ(GSAPとか)を使って実装していることが多かったのですが、それを実はネイティブのHTML・CSSで実現できるそうです... 正直言うとこの記事で解説するの不可能なくらい情報量が多く、というよりちゃんと本家を見てください！！って感じなので先に誘導させてください。 x.com x.com 登壇者様のポストからスライドだとかICS MEDIAの記事が見れるので、ぜひ、ぜひ！！！見てください。僕は後でしっかり読みます。 一番良いな〜って思ったのは、登壇資料の途中のトランジションとか、実際に動いているアニメーションの映像がめっちゃ可愛くておしゃれだったこと。最後には作例の動画が添付されていたのですが、ま〜じおしゃれ。 素のHTML・CSSでここまでのクオリティを出せるんだったらかなり夢が広がるなというのが全体を通して感じました！！ ちゃんとVue.jsの話もあって、その状態でいい感じにVueを組み込むことで更に便利になる感じでした。この辺りも実際にスライド見た方がわかりやすいと思います！ ...で、実際に気になったのでポートフォリオサイトをその直後にClaude Codeで添削させてみたところ、Chrome / Safariに対応、Firefoxは一旦捨てるという判断の元パッチ当ててもらったらdiffが-600ほど...かなり減りました(これは他の差分もちょっと入ってるのでガチ値ではないので参考程度に)。ポートフォリオサイトでかつそこまで機能がない状態でこれだったので、もっとちゃんとアプリケーションしてるサイトであればかなり膨大な行数がコンパクトになる可能性あるんじゃないでしょうか。 7. セッション：Vueで書く空間コンピューティング、TresJSとWebXRを使ったXRデバイスのフロントエンド開発 Info: vuefes.jp Three.jsではなく、TresJS 家電量販店でも販売されているMeta Quest 3をはじめとした、Apple Vision ProやGalaxy XR等のVR / XRデバイスに、共通化したWebXRで実際に空間コンピューティングを行うお話でした。 (厳密にはApple Vision ProはWebXRでパススルーが使えないため、MR/AR/XRではないかも) 直近のハッカソンでThree.js + React + React Three Fiberで3Dアプリケーション開発を行いましたが、それに近しいようで全然違うやり方の3D開発で見ていて・聴いていて面白かったです。 セッションの途中で「XRの時代がまだ来ない」的なことを仰られていましたが、僕個人的には今かなりアツい分野で、市場が急拡大している現状、来年以降爆発的にシェアが増加する可能性も全然あると思います。というよりそう思いたい。 Android, iOS, Windows Phoneのような、少し昔の端末だと各OS・デバイスでそれぞれコンテンツ開発を別の言語・フレームワークで行わなければ行けなかった状況に登場したHTML・CSSのように、WebXRはMeta, Apple, Xreal, Galaxyのような各プラットフォームで共通化されたXR版と言った立ち位置。少し前までは結構ベータ版だなぁってくらいの機能量でしたが、現行バージョンはかなり発展、ハードウェア・OS側の対応がかなり拡張されてきているので、Meta Quest 3等ではしっかりパススルーカメラ・ハンドトラッキング・アンカートラッキング等も同時に行い、イマーシブなXR体験がWeb言語・フレームワークで簡単(?)に実装できる時代になりました。 そういったXRデバイスのフロントエンド開発における、基礎的なグラフィック・操作の実装パターンをVue + TresJSで実現する話、良かったです。 8. セッション：The Vue Toolchain, Reimagined Info: vuefes.jp Vize: ubugeeei-prod/vize めっちゃすごいVueツールチェーンOSS開発の話でした... コンパイラだけじゃなくて、リンター、型チェッカ、フォーマッタ、LSPまで全部入り。しかも核になるパーサは1つ共通っていう設計で、今までツールごとにバラバラだったのを1つにまとめようとしてるのが面白かった。 まだ開発段階のようで、本番投入はまだとのこと。 これはたまたまそこだけ僕のTLや視界に飛び込んできているからの可能性はありますが、Vue関連のツールチェーンって統合されがちでかつめっちゃ実用的なのが多いイメージ。 それこそVite+が発表された時(この間のリリースじゃなくて3月の初見の時)に、その直ぐ3日後くらいのハッカソンで僕は採用した経歴があるのですが、そこで初期の環境構築から開発フローがかなり綺麗に進められたので助かった記憶があります。 Vize、せっかくなのでポートフォリオサイト大改修計画に組み込んで使ってみようかな👀 最近はツール側の工夫がすごい進んでいて、まだまだ世界が変わっていくと考えるとワクワクします。 ここからは全部LTです！！ 少しコンパクトにまとめて書かせていただきます！！ 9. LT：Vapor Modeでアクセシビリティは壊れないのか検証した話 Info: vuefes.jp Speaker Deck: speakerdeck.com Vapor Mode is a new compilation mode for Vue Single-File Components (SFC) with the goal of reducing baseline bundle size and improved performance. It is 100% opt-in, and supports a subset of existing Vue APIs with mostly identical behavior. Google翻訳： Vapor Modeは、Vueの単一ファイルコンポーネント（SFC）向けの新しいコンパイルモードであり、バンドルサイズのベースラインを削減し、パフォーマンスを向上させることを目的としています。完全にオプトイン（任意選択）の仕組みであり、既存のVue APIのサブセットをサポートしています。その動作は、大部分において従来のVue APIと同一です。 引用：vuejs CHANGELOG.md 仮想DOMを介さず、DOMを直接組み立てる新しい方式だそうです。 早い・軽いのが恐らくメリットだとは思われるが、組み立てた方が変わるならアクセシビリティ(VoiceOver等)は非破壊なの？という検証をしたお話。 自動テストと実際に聞き比べて検証したところ、ちゃ〜んとアクセシビリティも守られていた！という結論でした。 詳細はSpeaker Deckをぜひ！！ 10. LT： あなたのawait, OSまで届いてる？straceで除くJavaScriptの非同期 Info: vuefes.jp Speaker Deck: speakerdeck.com 非同期処理の内部的な動きをDocker環境上でトレースしてみたお話。 Linux上のシステムコールをトレースできるstraceツールを使用したみたいです。 僕はここまでのレベルで追ったことがないので、まず着眼点が凄いな〜と思いました。ただ、straceを使えば普段使ってる実装が実際どういう風にOSに対してお願いしてるのか〜みたいなのを可視化できるのは、結構1回くらい見てみたら良い体験稲荷そうなのでいつかしてみたいです。 こちらのLT、理解できる人ならもっと面白いと思うのでぜひSpeaker Deckから〜 11. LT：v-ifとフラグ地獄からの脱出 - Piniaで作る画面遷移ステートマシン Info: vuefes.jp 状態を管理する「ステートマシン」の話 状態を複数の変数で管理すると、どうしても重複してしまったりでバグの源になることが多い。だから、ステートマシンを簡単に実装してしまって、バグが起こり得ない状況にできるのがステートマシンなのかな...？直近のハッカソンでゲームのシーン遷移やステート管理をするモジュールを用意してましたが、恐らくそれでしょう。 確かに、手書きしてたら全然複数の変数をいい感じに毎回切り替えたり、ifで分岐させたりしてそうだけど、そもそも状態自体を管理してかつ良い感じに回してくれる機構が存在する方がシンプルだし堅牢な設計になるんだなとおもいました 。 基礎だけどすごい大切な項目だと思います。 AIとエンジニアが会話しながらバグを潰していくストーリー性を持ったスライドで、新しくて面白かったです。(スライドは探してみたけど見つかりませんでした...) 12. LT：Vite+を爆速で社内のデザインシステムに導入してみた Info: vuefes.jp Slide: slide.burio16.com Vite+！！！！！！！！！！！ 2026/03/13に公開されたツールを実際の社内環境で爆速導入してみたお話。 vp migrate便利 -> わかる vpの設定まとまってる便利 -> わかる vp pack -> なにそれ...知らない...でもめっちゃ便利そうだった これらは”メリット”の良い側面ですが、僕も実感しているものの、Vite+には若干微妙なポイントも多くあったように感じます。これもLTで語られていました。 ただ、ちょうどちょっと前くらいにVite+が正式にリリースされたので、ここからが本番でしょう！と。Vite+にフルベットしよう。 13. LT：Vite+のちょっとした改善から学ぶ、OSSコントリビューションの始め方 Info: vuefes.jp Docswell: docswell.com なかなか聞くことが出来ないOSSコントリビューションのお話。 さっきからずっと話題に上がっている「Vite+のPR」の実話だそうです。 実装の内部的な話がメイン、というより、そのPRを提出するまでのプロセスが語られていました。 僕自身も結構関わってみたい、調整したいな〜って思うOSS、複数あったりしました。 OSSのハードルが高いと思う要因、そしてそれは結構AIで解決できちゃうよ！！ってのが内容にありつつも、AIエージェントをただ使うだけ使ってAI SlopなPRが出ちゃうとかも一部で問題になったり、対策されるような今。でも、Issueを出すだけでも十分立派な貢献だし、その情報をメンテナーに伝えるだけでもハードルを超えて自分は成長できるのかな〜と思いました。 14. LT：外国人エンジニアがVueプロトタイプで仕様を合わせている話 Info: vuefes.jp 自分が伝えたいこと、わからないことを言葉にするのって実は難しい、それを頑張ってひねり出せて伝えられたらすごいし、それが難しいならAI使ってプロトタイプを作っちゃって、視覚的にそれを伝えちゃおう。 わかったつもりってかなり危険な状態で、その状態に陥ってしまうくらいならもう動きそうなもの作っちゃうのが効率良さそう。 他のセッションでも紹介があったような、チームで共通して触れるプロトタイプと、それを介して行うコミュニケーションは現代のAIエージェントと共に開発するスタイルにはすごく適合してるんだなと再確認しました。 15. LT. Web3Dライブラリを作ってVue Custom Rendererの仕組みを理解しよう Info: vuefes.jp Speaker Deck: speakerdeck.com Vue Custom Renderer、もしやなんでもできるのか？ Webの3Dライブラリは結構手続き的に書くのが多い、けどCustom Renderer組み合わせたら宣言的に書ける。 3Dシーンにおける、それぞれのライトとかオブジェクトの関係を宣言的にツリー構造の親子関係で表せるから、理論上3Dも扱えるんじゃね...？的なことだと認識しています(難しくてこれくらいの解像度でしかわかってないです) これもまた直近のハッカソンでThree.jsとReactを組み合わせてコンポーネント志向の開発をしたらいしたので、前よりはメリットとロマンを感じる内容でした。 16. LT：結局Nuxt Layersって何ができて何が嬉しいの？ Info: vuefes.jp レイヤーを合成する仕組み。 デザインシステムとかWebサイトのベース部分に必要な機能レイヤーを重ねると、本当に重なっていい感じに1つのアプリケーションに統合される的な話。 これ、初めて知ったもののすごい良いなと感じて、後述しますがポートフォリオサイト大改築計画でこれ使ってみようかなと思いました。 レイヤーの概念自体が結構Photoshopとかと似てる認識で良さそう？ 流用する部分は流用する、ほしい部分だけオーバライドして使う。 Dockerイメージのレイヤー構造もまた同じようなものかもしれませんね。 17. LT：SFCで実現する病院・医療システムの動的組み立て式UI Info: vuefes.jp Speaker Deck: speakerdeck.com まさかの医療！！ 普段なかなか聞くことのできない界隈のエンジニアの方のお話でした。 コンポーネント自体は統一して用意し、動的・非同期的に動くものもある。それをユースケースに応じて組み替えるUIを構築することで、医療現場のそれぞれの場面で必要な情報を大きく、多く、少なくコンパクトに表示することができてるように見えました。 これこそ綺麗にまとまった使い方の1例だと思うし、医療の現場でもこういった技術的に面白いWeb技術が使われている事実が面白かったです。 18. LT：便利で危険なDeep Reactivityとの付き合い方 Info: vuefes.jp めちゃくちゃ正直に話すと、僕には難しくて細かいところはほとんど理解出来ませんでした... ちょっと調べてみて多少解像度が上がったのでそれを書くと、データの流れが最終的に読みにくいのが危ないよね。的な話だと理解しました。 確かに、これってDBの監査ログ的な話で、データがどこでどう書き換わったのかが追跡できないから、もしかしたら何かありえるよね。ってことなんだと思います。 考えたことなかったけど...ありえるよね... 知らない言葉は調べた方がいいって再度痛感いたしました。 アフターパーティー 20歳未満はチケット取れなかったので行ってません！！！！！！！！！！！！！！！！！！！ 涙！！！！！！！！！！！！！！！！！！！！！！！！！！ 企業ブース セッション・LTに夢中かつ、知ったことを詰めて調べたり実践したりを休憩室で試してたら気がつけばイベントが終わってました。次参加する機会があれば...行きたい... おわりに Vue Fes Japan 2026お疲れ様でした！！ 運営の皆様、登壇されたゲストの皆様、全てに関わってくださった皆様、そして、一緒に楽しんで参加した皆様、ありがとうございました！！！ 初参加のVueFesでしたが、すっごい楽しかったです。 来年度も機会があれば参加したいと思います👀 普段フロントエンド分野にそこまで深くは関わってこれませんでしたが、今日でかなり認識が改められました。奥の深さをちゃんと知れて、かつ最新技術も沢山盛りだくさん。これはもう使うしかないし、ここでアウトプットしたい気持ちしかないです。 今回のVue Fesで学んだ・知った内容を活用して krz-tech.net の大幅なリファクタリングをしようかな〜と検討しています。 専門1年のときからのツギハギサイトなので、このタイミングで見直すのは凄く良いし、知ったことを吸収できると思う！！ 僕個人的には、フロントエンドエンジニアはバックエンドを、バックエンドエンジニアはフロントエンドを少しでも理解した方が、設計や実装の上での解像度や現実度合い、完成系のイメージのしやすさが段違いに良くなると思っています。 もし、この記事を最後まで読んでくださって、VueFesの学生支援気になるな〜とか少しでも思ってくれたらぜひチャレンジしてみては如何でしょうか！？ 本当に楽しかったです！また東京でお会いする日を楽しみにしております！ ありがとうございました！

Vue Language Tools v4 alpha is out. TypeScript 7's own tsc now type-checks .vue files via @vue/content-mapper, no more vue-tsc. * Editor support isn't ready yet. language-tools#6170