Vue Fes Japan 2024

Keynote by Enan You

Vue

Vite

Void0

Rolldown

Rust

Viteからこっちに移していくらしい

スポンサー　弁護士ドットコム

社内でUIコンポーネントライブラリ

Cloudsign

zeroheight

設計

つくりかた

エントリーポイント

vite.config.js

package.json

制度

Focusc Day

月2日

Future

新人研修

フューチャーグループ

東京カレンダー

codecamp

リンクアンドモチベーション

中上

印刷会社でスタート

昼休憩

TheAlexLichterに会った

シール

ローソンまで行った

運営でハサミ借りれた

女性二人、男性二人（英語話者）と絡んだ

都市のキャンバス

田中陽

ライゾマティクス

インスタレーションと建築の中間

FlashのActionScriptから

Shibuya Sakura Stage

裏がNuxt

Intersquare

ブログに書いてある

dialog()

メリット

手間がかからない

C++だとOSアップデートが大変

連携

ElectronやTauriマルチプラットフォーム開発

Max/MSP

SakuragaokaApps

入稿フォーマット

シミュレーター

CSSを調整できる

スタイルシートを書かずにコンポーネントでいじれる

UnJS

Pooya Parsa

pi0

Nuxt

から始まった

Vue + ❤

zero config

filesystem, multilayer

ssr

server and devtools

extendable

Serverless era

ssr needs alo deps

nuxt-start

nuxt-vercel-builder

Edge and workers era

cloudflare

node.js polyfills and NPM compatibility (unjs / unenv)

server API vs Web Fetch API (unjs/h3)

crossws

WebSocket

https://tiptap.dev/

Nitro

using

Nuxt3

Analog.js

Solid Start

Tanstack Start

Features

Flexible server

Depl provider

API routes and WebSocket handler

Caching

Server Storage: Key-Value and SQL

Soon, Vite intgr for full stack servers

UnJS

do one job

unjs/consola

console.log

unjs/ufo

url

unjs/jiti

ts and module es

Gems od Nuxt

Alexander Lichter

@TheAlexLichterの人

Consultant

8 Features every shoulf know

him

lichter.io

Nuxt 4

config

future:

version: 4

npx -v

New folder structure

/appの下に入る

いろいろ

Nuxt scripts

https://scripts.nuxt.com/

third-party scripts

getCachedData

useFetchの中

ローレベル

Caching + BFF with Nitro

defineEventHandler

defineCachedHandler

第二引数にオプション

maxAge

swr

OpenAPI Spec of API routes

nuxt config

nitro

experimental

.openAPI: true

Route Rules

change rendering modes per route

/admin

ploxyとか外部のURLを内部のURLのようにして書ける

$test

OG Image Generation

nuxtseo.com

コンポーネントとして

DevTools

screenshotも

nuxt dev

--tunnel

途中で抜けた

クロストーク

最後少しだけ聞いた

もっと早くからいたらよかったかも

Demistifying Vite

NozomuIkuta

newmo

devserver bootstrap

init

config resol

esbuild

dynamic importしてすぐ削除

connect sv setup

middleware

transformMiddleware

indexHtml

dep pre-bundl

.vite

server starts to listen

no app build

requesting files

indexHtmlMiddleware

native ESM module resol

script srcが.ts

ブラウザとディスクシステム

transformMiddleware

tsをjsに直してから送信

GET /src/a.ts

ファイルシステムから取ってくる

円安？の影響で海外からの参加者が多い

config

http requests

plugins

メイン

Vite vs Rollul

ここで出た

資料はいいけど喋り方があんま上手じゃなかった

Vue Vapor

Kevin Deng

三咲智子

sanxiaozhizi sxzz

再発明

https://gyazo.com/811180495c5a5f87c5ba79fe2218d299

https://vvv.sxzz.moe/

what is Vue vapor

new rendering mechanism

性能

performance

par to svelte 90%

subsets

composition api only

build tools needed

script setup

compat

VueUse

...

roadmap

sfc compilation

basic component capab

vite ssg (fundIn..g)

DevTools

Supports JSX

Mechanism

vue/reactivity

https://gyazo.com/51a5daac41d5be7643acf3471b2673cc

https://gyazo.com/5082b25f53c912d2f310c23d4d137d2c

UI = fn(state)

https://gyazo.com/5da6588f1531a7f7be3a2c849f240b42

Vapor SFC compilation

https://gyazo.com/6d19be38221a2ecebae064d688ede8ff

Svelteもある

Fusion

Vapor conponents will support vDOM mode

vice versa

supports pure vapor mode

Recap

new bgnning of Vue

subset of vDOM

https://gyazo.com/83efd45b12609790804ef015624dcf9c

読む

https://gyazo.com/83efd45b12609790804ef015624dcf9c

read-vapor-vue

https://ubugeeei.github.io/reading-vuejs-core-vapor/ja/

Anthony Fu

日本語を本気で学び始めた

yak shaving

https://gyazo.com/71cbecd2cc52571caaa2aa41267d6190

https://gyazo.com/23393c6809481558727fd11314af1d8f

最終的に目標から逸れること

脱線

down ro the rabbit hole

utilizing Yak shaving

Examples in Business

.Shopify

sell snowboard

made an online store to scale

e-com plat

epicgames

trying to make a 3D game

amazkn

aws

slack

game

Gener and Impl process

understand the problem

search libraries in the narmrt

contrb and provide suggestions

Imll MVP locally

validate solu

Extract inen into a libr

Avoid deep duve trap

promkte appropriately

comnunity validation

Anthony's

Yak Map

BreakSplit

i18n Ally

VueUse

vue/composition-api

VueDemi

Vite

Icones

vite-pwa

unplugin-icons

Vitesse

antfu.me

Slidev

UnoCSS

Nuxt

unplugin

vite bjfr

learb.nuxt.co Vitest

https://gyazo.com/d5c0a4a7f59a8fb5b1234991b9e88b37

Open source

is about giving

Expectations on ...

is a gift

reciprocoty is not the goal

enjoy sharing and collaboration

... is more than code

community is a core

https://gyazo.com/c617d3d3c9c2891caa6987a9a8d972bc

概感

女性比率が比較的高い

他のテック系イベントより参加者が多い

運営にも多かったし、参加者にもそこそこいた

JSConfやRubyKaigiで女性いたら大体スポンサーみたいな感じだが、Vue Confではそうではなかった

海外からの参加者が多い

タイからグループで来ている参加者たちもいた

他のテック系イベントだといても白人男性という感じだと思うけど、わりと散らばっていた

円安の影響と言っている発表者もいたけど、それだけではないと思う

主要な開発者に中国系エンジニアが多い

Vue開発者のEvan You氏を筆頭として、コアチームは実力のある中国系の開発者たちを擁する

コミュニティがもつ性質がこうした開発者を引きつけ、かつ育て上げる場を提供している

Reactをはじめ他のフレームワークではあんまりこうはならないと思う。それゆえに受け皿になっている側面もありそう

日本に対するリスペクトが感じられる

上記に通じることだが、日本に（多分にサブカルチャーを経由して）好意的な印象を持っている開発者が多い

これはバージョンのサブタイトルに日本の漫画作品を冠したり、ロゴに日本語をつけたりするのを見ていてもわかる

実際に話してみても「アニメや漫画が好き」とか「日本に移住したいと思っている」という声を耳にした

まとめると、かなり多様な集団になっているように感じた

フロントエンド開発の多様性という面で、大きな重要性があるコミュニティだと思う