Shift-from-React-to-Vue
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
約10万行の規模のフロントエンド環境にTypeScriptをマイグレーションした話 - MicroAd Developers Blog
お久しぶりです。フロントエンドエンジニアの川上です。 業務では、UNIVERSE Ads のフロントエンド開発、フロントエンドの開発環境改善などを担当しています。 はじめに TypeScriptの導入について 導入にメリットがあると結論を出した理由 ① フロントエンドでテスト駆動様開発が可能になる ② Vueコンポーネント に対して TypeScript の恩恵を与えられる 具体的に解説 1つ目のメリットについて 2つ目のメリットについて おわりに はじめに マイクロアドには様々なプロダクトがありますが、私の担当している UNIVERSE Ads について、 フロントエンドフレームワークにVue.js を利用しています。 jp.vuejs.org 開発構成としては、MVVMでバックエンドとフロントエンドはそれぞれ、Spring Boot（Kotlin, Java）, Vue.js（Type
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
Atlas Icons
Open source free icons library, available in variable stroke SVG format, web font, Figma, React, Vue and Flutter ready to use packages
Atomic ReDesign とは 「Atomic ReDesign」 は、かの有名な「Atomic Design」の拡張概念です。React や Vue.js を用いたコンポーネント設計において、私たちはしばしば頭を抱えることがありました。UI 粒度の分類制約は、コンポーネント設計最適化を阻むことがあるからです。 「この粒度のコンポーネントはどこに属するものなのか？」という疑問に対し統一された解はなく、プロダクト毎の性質によって定める必要がありました。また、文脈が散在することにより、コードに対する集中力低下を招きました。 Atomic ReDesign は顕在化した 「Atomic Design とアプリケーション設計の乖離」 をとらえ、現実的な設計指針となることを目指します。 Atomic Design とアプリケーション設計の乖離 本家 Atomic Design はデザインシステ
前回の見取り図記事でスコープ外にした用語について、です。 書かなくてもいいかとも思ったんですが、思ったより前回記事が読まれたので、補足的に書こうと思います。 具体的に何を扱うかは、目次を見てください。 ビルドとデプロイ ビルドとデプロイの違いはなんでしょう？ 開発環境によって微妙に差異があって、業界標準でこう、と決まってるわけではないんでしょうけど、一般的には下記を指すと僕は認識しています。 ビルド: ソースコードのコンパイル、関連ファイルの紐付けを行い、実行可能な状態にする デプロイ: ビルドして、ユーザーから実行可能な状態にする デプロイは自分以外のユーザーが実行できる環境でのビルド、と言ってもいいかもですね。 デプロイ環境（Vercel, Netlify, Heroku） で、Webサイトのデプロイ環境について。 かつては自分でサーバーサイドのミドルウェアをセットアップする必要があり
2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。 後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。 ここ何年かのVueを使った個人開発をおさらい まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。 なんか思ったほど作ってないけどそれは仕方ない。 2019.2 初代メザシアタック（ゲーム） リポジトリ： https://github.com/yuneco/mezashi 解説： VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 開発環境: Vue CLI 言語: JS Vueのバージョン vue: 2.5.22
Fower
Atomic PropsWrite styles with Atomic Props, rapid to develop complicated UI by composing Atomic Props. Scoped styleBorned with scoped styles, So don't worry any conflicts due to the globalnamespace. Type SafePerfect support for TypeScript, which bring Type definition,IntelliSense,Self documentation.
Vue.js ロゴ画像提供 : https://github.com/vuejs/art はじめに こんにちは、クラウドワークス ジャンヌチームの@bugfire、@okuto_oyama、@yizknnです。 ジャンヌチームはクラウドワークスの負債を管理下に置くことがミッションのチームです。 問題の大きさに合わせて、直接解決する場合や、他チームと連動したりこちらから依頼することもあります。 弊社のアドベントカレンダー「crowdworks.jp のフロントエンド活動を振り返る 2021」の記事で触れていた Vue 3 移行が完了したので、その報告になります。 Save the date: Vue 3 is becoming the new default version on Monday Feb 7, 2022.https://t.co/ub8L4KhPsJ— Vue.js (@vue
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。
なぜ分割代入をすると Vue は reactive ではなくなるのか - Stockmark Tech Blog
こんにちは。 Anews の開発に携わっている Engineer の 羽柴 と申します。 Anews はフロントエンドを Vue で開発しています。 自分自身の背景として、Stockmarkに入社するまでは React を使って開発していたので Vue の経験は殆どない状態でした。 そこで理解を深めるために chibivue を使った勉強会を社内で進めています。 その時に気づいたことを share したいなと思い、この記事を書きました。 ja.vuejs.org chibivueとは Vue を書き始めた感想 chibivue の勉強会を進めて Proxyについて でもなんで まとめ 余談 最後に chibivueとは ubugeeei.github.io Vue を最少単位で作ってみようという project です。 浅い理解でよければ公式 docs をさらっと読んで実装するのが早いので
Vue.js v-tokyo Meetup #21 のLT資料です。 https://vuejs-meetup.connpass.com/event/321431/
はじめに Vue.js はバージョン 3 がリリースされたこともあり、バージョン 2.x 系を使っていてもプラグインを利用して composition-api を使った開発をしている人が多いと思います。 私も composition-api が公開されて比較的早い段階から利用してきました。結果、使い方が私の中で固まったので共有したいと思います。 なお、比較的大規模かつ、長期的にメンテナンスしたいようなプロダクトを想定しています (大体そうだと思いますが)。 プロトタイピングや寿命の短いソフトウェアなら、ここで説明することはあまり合わないかもしれません。 また、Typescript の利用を前提としています。 composition-api と Options API について composition-api 自体についてを知りたい場合は以下を御覧ください。 私が composition-a
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Product Blog
業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
Vue.jsのコンポーネント間でデータを渡す方法はたくさんありますが、Propsを使うかSlotsを使うかはニーズによります。Slotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて紹介します。 The Difference Between Props, Slots and Scoped Slots in Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Vue.jsのProps Vue.jsのSlots 名前付きSlotsとの違い スコープ付きSlotsとの違い 終わりに はじめに 私はVue.jsを使い始めた時は、コンポーネント間のデータをPropsを介して渡していましたが、使い続けていくと、Slotsでも同じ結果を得られ
GitHub - vuejs/petite-vue: 6kb subset of Vue optimized for progressive enhancement
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Proposal for dropping ie11 support in Vue 3 · vuejs/rfcs · Discussion #296
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
3行で 絶賛スケール中の Backbone.js 製 SPA を Vue.js に置き換えたい！ でも一度に全ては置き換えできない...。試行錯誤な工程とサンプルコードをご紹介！ 一緒に働くメンバーを大募集中！ はじめに こんにちは。株式会社ペライチ開発チームの関（@nekoneko_wan2）と申します。新潟からフルリモートで働いております🍙 。 今回はペライチのコア機能、フロントエンドの一大リファクタプロジェクトを開始したお話をご紹介いたします。実際に手を動かすフロントエンドエンジニアの自分自身が参考になる、と思えるような記事を目指して書いてみました。 同じ様な課題に直面している方、これから立ち向かおうとしている方、この記事が何かしらの役に立てば幸いです。 古く複雑化したコア機能 ペライチはサービス開始より ホームページを誰でもかんたんに作成できる機能 をコア機能として備えています（
We are excited to announce the release of Vue.js 3.2 "Quintessential Quintuplets"! This release includes many significant new features and performance improvements, and contains no breaking changes. New SFC Features #Two new features for Single File Components (SFCs, aka .vue files) have graduated from experimental status and are now considered stable: <script setup> is a compile-time syntactic su
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
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 で削除で非推奨になった機能は実行時に警告が出力されるようになります
Vue2 Vue3 マイグレーション 令和最新 最強
Vue2 Vue3 マイグレーション 令和最新 最強
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
GitHub - antfu-collective/vitesse-webext: ⚡️ WebExtension Vite Starter Template
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vue & Vite Rustify
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
はじめに はじめまして。 2019年3月に入社した正岡です。 平均週に4回、大分県中津のから揚げ弁当を食べている大の鶏好きです。からあげクンと呼んでください。 主に Rails × Typescript のプロジェクトにフロント／バックエンドエンジニアとして参加しています。今後ともよろしくおねがいします。 本記事の内容 およそ１年前、弊社ではDocBaseのユーザーの皆様により良いユーザー体験をしていただくために何ができるかを検討しました。結果、フロントエンドを改修して SPA（Single Page Application） に移行することで、従来よりも速く、快適にご利用いただけるのではないかという結論に至り、ご存知の通り先日リリースいたしました。 フレームワークどれを使うか問題 既存サービスのSPA化などのフロントエンド改修を検討する際、「フレームワークどれ使う？」問題にぶち当たります
Today we are happy to announce that Vue 2.7 "Naruto" has been released! Despite Vue 3 now being the default version, we understand that there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, we have backported some of the most important features from Vue 3 so that Vue 2 users can ben
AnimXYZ
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life. Composable Making an animation is as simple as describing it in
Astrategyを支える技術: gRPC, Elasticsearch, Cloud TPU, Fargate... SaaS型AIサービスの内側の世界
dummy GA 新しいURLに転送しています… https://stockmark-tech.hatenablog.com/entry/2021/05/10/000000...
TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した - BASEプロダクトチームブログ
BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では社内用コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されていましたが、TypeScript Compiler API と社内のフロントエンドエンジニアの有志たちのおかげで Storybook のバージョンを最新の v6.3 にする対応が完了しました。 以前執筆した「Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える」 という記事で、Storybook v5 から v6 の書き方である Component Story Format(CSF) への変更手順を確認しました。 この記事では、TypeScript Compiler API を
Nuxt.js の既存プロジェクトの型チェックを厳格化した話 ～vue-tsc と tsconfig/strictest 導入までの道のり～ - ANDPAD Tech Blog
ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなものも少しずつ増えてきました。 そういった状況を改善するアプローチの1つとして、Nuxt.js の既存リポジトリにおける型チェックのルールをより厳しい設定に変更する、という取り組みを2ヶ月ほどかけて行いました。 今回はその取り組みにおける道のりを振り返って、苦労したことや良かったことなどを書いてみたいと思います。 導入を決めるまでの流れ きっかけは noUncheckedIndexedAccess を知ったことから 弊社のSlackにはtimes文化
Vue with Vite
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Cypressのカスタムコマンドを用いたVue.jsの効率的なE2Eテスト実装 - ZOZO TECH BLOG
はじめに こんにちは、EC基盤本部・MA部・MA基盤チームでマーケティングオートメーションのシステムを開発している長澤（@snagasawa_）です。この記事では、CypressによるE2EテストをVue.jsプロジェクトへ導入した取り組みについて、実際の画面を交えてご紹介します。このE2Eテストによって、複雑な入力フォームを自動でテストできるようになり、修正後のバグを検知しやすくなりました。E2Eテストの導入を検討されている方の参考になれば幸いです。 Vue.jsプロジェクトの技術スタック 今回Cypressを導入したプロジェクトの主な技術スタックは以下の通りです。 Vue.js TypeScript Vuetify Open API 導入背景 E2Eテスト導入の理由は、複雑な入力フォームを動作保証するためです。 我々のチームでは、Line Friendship Manager（以下、L
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
Lazy Load Routes in Vue with webpack Dynamic Comments | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 u
Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest と同様ですね Story をフレームワークそのままの書き方で作成できる Storybook の場合 Vue で SFC ファイル形式のコンポーネントを作成していたとしても、Story を作成する場合には .stories.ts のような拡張子でファイルを作成して Storybook 向けのコンポーネントの記述をする必要があります。一方 Histoire は Story を作成する際にも .vue や .svelte
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React HooksとVue Composition APIの比較
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
原子の再定義 - Atomic ReDesign -
Webフロントエンドの見取り図で書ききれなかった用語について書きます
ここ3年くらいの個人制作を振り返って2022年のVueを考える（超私見）
Vue 2 からVue 3 に移行完了しました！ - クラウドワークス エンジニアブログ
商用利用無料！UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic
VueUse: 5分で分かる Vue.js 開発の効率化術
Vue.js composition-api を使った開発でおすすめしたいこと
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説
巨大化したSPAのフレームワークを少しづつVueに移行しはじめたお話
Vue 3.2 Released! | The Vue Point
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
Vue2のプロジェクトをVue3へマイグレーションする
ReactとVue、どっちが書いていて楽しいか検証してみた
Vue 2.7 "Naruto" Released | The Vue Point
Vuex から Pinia への移行を行いました - every Tech Blog
Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire
mainichi.jp
news.yahoo.co.jp
posfie.com
www.as-web.jp
tabelog.com
posfie.com