VueFes Japan 2023イベントレポート | gihyo.jp
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
バクラクの Vue3 移行戦略と詰まったポイント #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。LayerX バクラク事業部 バクラク申請・経費精算チーム エンジニアの @tatane です。 最近10万円超えのヘッドホンを買ってしまい、しばらく離れていたオーディオ沼にまた片足を突っ込んでしまいました。 この記事は LayerXテックアドカレ2023 21日目の記事です。前回は @serima が「LayerXの発信の"のびしろ"とCasual Nightのウラガワの話」を書いてくれました。次回は同じチームの @upamune が「エラーログ祭り改善の話」を書いてくれる予定なのでご期待ください！ 今回はバクラク事業部で進めている Vue3 移行の話をご紹介します。 バクラクの Web フロントエンドの技術スタックについて LayerX が提供している SaaS であるバクラクシリーズでは複数プロダクトを提供しており、それらの Web フロントエンドの技術スタックにはバリエ
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
Introducing Nuxt DevTools · Nuxt Blog
Unleash the Developer Experience with Nuxt and understand your app better than ever. We announced the preview of Nuxt DevTools on Vue Amsterdam 2023, a new tool to help you understand your Nuxt app and improve the developer experience even further. Today we released a new minor version v0.3.0 with a bunch of updates and improvements. In this post, we will explore the reasons behind the creation of
Migrating from Vue 2 to Svelte
Svelte offers a better typing experience with easier components' designing processes and built-in typed events, making it very user-friendly for us. Restricted global access. With Svelte, it is possible to import enums from other files and use them in the template, which is not the case for Vue 3. Escape Benchmark about frontend stackSyntax. Personally, I find Svelte syntax more elegant and user-f
Volar 1.0 "Nika" Released! | The Vue Point
We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉 This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic. 注：結尾附有中文版本 (There is Chinese version of this post at the end)。 Earlier this
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
Vue2のプロジェクトをVue3へマイグレーションする
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
Vueの再描画されたコンポーネントをハイライトするChrome拡張を作った
作ったもの 記事タイトルの通り、Vue.jsで再描画が走ったコンポーネントの輪郭をフラッシュしてハイライトしてくれるChrome拡張 + npmパッケージを作りました。 GitHub: yuichkun/vue-devtool-flash-updates 背景 Vueの開発をする上で、Vue.js devtools を使っている人は多いと思います。 React Developer Tools では以前から再描画されたコンポーネントを光らせてくれる機能があり、パフォーマンス問題の解消などに役立っていたのですが、どうやらVue devtoolsにはそれがないらしいことをissueなどから察しました。 今回作ったプラグインの導入方法のイメージはRedux Devtoolsと似たような感じで、 専用Chrome拡張のインストール 有効にしたいプロジェクトでnpmパッケージの追加・プラグインの導入設
Journey with Icons Continues
[[toc]] About one year ago, I wrote a blog post Journey with Icons, sharing the tools I have made for solving my needs on using icons in frontend projects. During this period, the Vite along its community has evolved quite a lot. The mindsets of Vite have inspired many projects to come up with efficient and innovative solutions. In this post, I will share the continuation of my journey with icons
<Lazy> rendering in Vue to improve performance
Last year, a lot has been in happening on the web in terms of performance. Unsurprisingly, everyone agrees the web should be fast. Google introduced its Web Vitals metrics to stress that the web applications should load fast even on slower devices and slow networks. Svelte showed that web apps can be significantly smaller in their bundle size. React introduced the Fiber algorithm that allows pausi
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1) | Vue Mastery
Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1) The Vue team has recently released the highly anticipated migration build for Vue 3. If you’ve been thinking about upgrading your Vue 2 app to Vue 3, this is what you need. The process of upgrading an app to the latest version of the framework can be a daunting task. This article series is created to make that process easier. The Vue
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
Advanced TypeScript: A Type Safe Store for Vue 3
Like my content? Sign up to get occasional emails about new blog posts and other content. EmailSubmit Unsubscribe anytime here.Writing A Type Safe Store In this article we explore some advanced TypeScript while building a type safe store with a similar API to Pinia or Vuex 5 (which is still in the RFC stage). I learned a lot of what was needed to write this article by reading the Pinia source code
Lazy Load Routes in Vue with webpack Dynamic Comments | CSS-Tricks
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip all the time in my own work. A repo that includes everything covered in this post
Reflections for 2020-2021 | The Vue Point
With a new year upon us, we also have a new blog! In this post, we would like to take a look back at some of the highlights from 2020, as well as some ideas we have for 2021. Looking Back at 2020 2020 has been a challenging year, to say the least. Nonetheless, the team has made the best of a difficult situation. Despite an already massive user base, Vue's NPM downloads and Devtools weekly active
Top problems I got switching to Vue 3 – Ghiura Alexandru
I am @ghalex, a frontend geek, entrepreneur and father of two sons. Today I want to share the problems 🤯 I got when I converted my project from Vue 2 to Vue 3. My top 3 problems switching to Vue 3: using v-model on custom componentsusing filters in my templateusing external components Using v-model on custom components In Vue 2 if you wanted to have support for v-model in your custom component al
eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ
フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く頭を悩まされている方もいるのではないでしょうか、BASE もそうです。 この記事では ESLint とその Vue.js 向けプラグインの eslint-plugin-vue を利用した、deprecated となる機能へのアプローチを紹介します。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグインとして eslint-plugin-vue が開発されていて、BASE でもこれを利用しています。 このプラグインには vue/no-deprecated- で始まるルールがい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
