1 - 40 件 / 47件
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS(コンパイルしてJavaScriptにする言語)であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて(バインディングして)表示したり、Webページ
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021(セッション動画)でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる? メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始花谷拓磨氏(以下、花谷):「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行っ
Do You Need to Migrate Your Project to Vue 3? Schedule a free call with our CTO to discuss your specific project needs. We'll assess your current setup and help you make the best decision for your business. Let's get your app ready for the future! Schedule a Call Vuestic UI is an OpenSource Vue 3 based UI framework. It is a MIT-licensed UI framework that provides ready-to-use frontend components t
vue3-migration-improve-frontend はじめまして! BALES CLOUDエンジニアのえーす(井上)です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> ElementPlus 巨大PRによるレビュー負荷 チーム体制 マイグレーションビルドと他ライブラリの相性 よかったこと 課題感 これから 2024年04月03日 編集部追記 やったこと Vue2を卒業し、Vue3を
こんにちは!リンクアンドモチベーションでフロントエンドの開発をしています。岡田(@okadaike)です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります!! 今回はプロダクトチームの中で色々と試行錯誤して進めました!ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました!。 最後に残りの2つの移行計画もまとめようと思います! Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います! ※(注記)余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
こんにちは、LAPRASの業務委託エンジニアのしんです。 先日弊社のプロダクト(LAPRAS と LAPRAS SCOUT)のVue3アップデートがついに完了しました🎉 中〜大規模プロダクトのVue3移行を(開発を止めずに)2回行ったことで様々な学びがありましたので、連載記事の形でVue3移行について解説していきたいと思います。 移行ビルドを用いたVue3移行は大まかに、 移行ビルドの導入前の準備 移行ビルドの導入 & 削除 のフェーズに分けることができます。 第1回目の本記事ではまず「移行ビルド導入前の準備」についてまとめていきます! 移行ビルド導入前にしたほうがいいこと 一度移行ビルドを入れてしまうと、完全に動く状態になるまでmain ブランチへマージできません。 移行ビルド導入のPRは非常に巨大になり工数もかかるため、導入前にできる作業は全て先にやっておくのが吉です(参考までに、3
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
2024年5月11日(土)に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとし...
Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう? 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
はじめに※(注記) Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
【脱仮想 DOM !?】Vue.js が控えている進化 "Vapor Mode" の詳細 (2023/12) ※(注記)本記事は Qiita / All I know about Vue 3's Vapor Mode Details (2023/12) のミラーです ⚡️ Vapor Mode ってご存知でしょうか? 🤔 少しでも聞いたことがあるようであれば,おそらくあなたは日常的に情報を収集している熱心な方でしょう. というのも,現在(2023/12),Vapor Mode について日本語での言及はほぼありません. かといって英語圏に情報が出回っているかというと,そうでもありません.(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について,前提知識も整理しつつ理解していければと思います. 😋 初めに 🎯 お品書き (何を理解するか) 改めて Vue.js とは これか
本連載では、Webページのユーザーインタフェース(UI)構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース(UI)を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補(RC)版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Provide / Inject このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。 props のバケツリレー(Prop Drilling) 通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、propsを使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。props だけを使う場合、親コンポーネントのチェーン全体に同じ props を渡さなければなりません: <Footer> コンポーネントはこれらの props を全く気にしないかもしれませんが、<DeepChild> がそれらにアクセスできるように宣言して渡す必要があることに注意してください。さらに長い親チェーン
はじめに VueはコンポーネントをSFC(シングルファイルコンポーネント)で書くことが推奨されているUIフレームワークである。VueにおけるSFCではHTML、CSS、JSを一つのファイルにまとめることで一つのコンポーネントを作ることができる また最近ではVue3が盛り上がってきている。2020年10月8日現在、Vue2のサポートは来年2023年で終了するという発表もあり長期的にメンテが必要なプロジェクトに関してはVue3への移行が慌ただしく行われていることだろう そんな中ある一つの疑問が浮かんだ。「人やプロジェクトによってSFCの書き方が異なる。templateタグ、scriptタグを書く順番が違う」と。 どういうことか具体的に見てみよう。以下はVue3公式から引用したコードだ <script setup> import { ref, onMounted } from 'vue' //
Vue 2 support will end on December 31st, 2023. Learn more about Extended LTS if upgrading to Vue 3 isn't feasible before the EOL date. This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. This is not something you have to read from top to bottom before trying out Vue 3. The recommended way to learn Vue 3 is by reading the new do
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※(注記)他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください! まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前:</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
どうも。フロントエンドのテックリードをやっています。みゅーとん(@_mew_ton)です。 Vue3 のリファレンスを読んでいたところ、「関数型コンポーネント」なるものが気になったので、軽く触ってみました。 はじめに リファレンス 対象読者 以下の読者を想定しています。 基本的な vue のコンポーネントを記述できる ちょっと動的なコンポーネント作りたくなって困った人 そのため、 vue の基礎について詳しく解説はしません。 また、本記事では関数型コンポーネントの vue2, vue3 での違いにも触れますが、vue2 側については掘り下げません。 TL;DR 3行でまとめ 名前のとおり、関数を定義するように実装できるコンポーネント 少ないコードでサッと動的なコンポーネントをかける vue3 ではこれを作るメリットが少ない。 おさらい 先におさらいしておくと、一般的なコンポーネントは2種類
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考:はじめに | Vue.js 導入Vue 3の導入(インストール)については公式ドキュメントを参考にしてください。 参考:インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
昨今のフロントエンドの技術の進歩スピードは目覚ましいですよね。 特に3大JavaScriptフレームワークと称される「React.js」「Vue.js」「Angular.js」は今やフロントエンドエンジニアであれば最低1つは扱えて当然の必須スキルと認識されてしまっていてキャッチアップが大変です。 (厳密に言うとReactはフレームワークではなくライブラリという扱いですが。。) エンジニア界隈でもこの3大フレームワークの中でどれが一番好みか論争は絶えないですが僕個人は今回紹介するVue.jsが好きでよく使っています。 Vueはエンジニアになって割と最初の方に業務で扱う機会があってそれ以来も別の業務で扱う機会が多く何か運命的なものを感じている今日この頃です。 そんな中つい最近ですが2020年9月にVueがメジャーアップデートされてバージョン3(Vue3)がリリースされました! それに伴ってVu
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
Framework7 - は、ネイティブなルック&フィールを持つモバイル、デスクトップ、またはウェブアプリケーションを開発するためのフリーでオープンソースのフレームワークです。また、必要に応じてアプリのプロトタイプをすぐに表示できる、不可欠なプロトタイピングツールでもあります。 Framework7が提供する魅力的なUIコンポーネントのセットを使えば、ウェブアプリ、プログレッシブウェブアプリ(PWA)、iOSおよびAndroidアプリをネイティブなルック&フィールで作成することができます。 また、ElectronやNW.jsなどの追加ツールと組み合わせることで、ネイティブなデスクトップアプリを構築することができます。 Framework7では、お好きなツールをお使いいただけます。HTML、CSS、JavaScript以外の使用を強制されることはありません。Framework7でアプリを作る
初めに タイトル通り。Vue3はIE11対応されたら起こして状態なまま触っていなかったが、急に作りたいものができてしまいVue3をしばらく使ってみたので使い心地や所感などの殴り書き。 ところどころ誇張気味なので注意。それVue3関係ないやんも自分で読み返してみると多々ある。 可能なら久しぶりにクソデカ羅生門でも読んで器を大きくしておいてほしい。 そしてVue3を高々1ヵ月使っただけの所感なので、参考にしてもらえたら嬉しいけども真に受けてはいけない。 筆者スペック Vue2実務経験20年のプロ Vue3歴1ヵ月の素人 immutable信者 作っているもの 紹介っぽい記事はこちら。 3行で紹介するならSVGアニメーションエディタ、60fpsでアニメーション、サーバーなしのスタンドアロン。 要するにSVG版のBlenderっぽいものが作りたかった。 Vue3の採用理由 今回は作りたいという気持
Vue.jsのComposition APIでemitを使う Vue.jsのComposition APIを使用して、emitを使っている例を書きます。 前回書いた記事と同じコンポーネントを作っていきます。 子コンポーネントの実装例 まずは子コンポーネントです。下記のように実装しました。 <template> <div class="m-5"> <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded" @click="$emit('eventTest1')" >testButton1</button> <button class="bg-blue-500 hover:bg-blue-
What is Pinia? By now, you’ve probably heard that Pinia is the officially recognized state management library for Vue.js. Evan You even referred to it as the de facto Vuex 5. But do you know why you should be using Pinia over Vuex and how to use Pinia? In this article, we’ll explain why, in the fight between Vuex vs Pinia, Pinia is the clear winner for your Vue app’s state management. But first, l
Vue 3ではコードを記述する方法として大きくわけて2つの方法があります。従来の方法であるOptions APIとVue 3から利用することができるComposiont APIです。本文書ではComposition APIの利点の一つであるコードの再利用をどのように行うかを確認していきます。再利用できそうな機能を取り出すことで同じコードを何度も記述する必要がなくなり効率的にコードを記述することができる上他のプロジェクトでも利用することができます。本文書を読み終えるとcdnのVue 3を使ったComposition APIの記述方法とComposition APIではどのようにコードの再利用を行うのかの基本を非常にシンプルな例から理解することができます。cdnを利用しているのでVue環境を構築することなく動作確認も簡単に行うことができます。Composition APIではVue 2の時より
vue-router のデフォルトは hash モード です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。 その hash を取り除くために、ページのリロード無しに URL 遷移を実現する history.pushState API を利用したルーターの history モード を使うことができます。 const router = new VueRouter({ mode: 'history', routes: [...] }) history モードを使用する時は、URL は "普通" に見えます e.g. http://oursite.com/user/id。美しいですね! しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直
「虎の穴ラボ株式会社」が主催するライトニングトーク会です。 概要 虎の穴ラボのエンジニアが業務で扱う最新技術などについて、ライトニングトークを行います! LT登壇枠、募集中! 一般から、ライトニングトークの登壇者を募集しています。 初心者の方や上級者の方も、ぜひ、お気軽にご参加ください。 初心者向けのライトニングトークをはじめるためのブログ記事を作成しました LT初めての方は、よろしければ参考にしてみてください! LTや最新技術が大好きな方、あつまれ! Slackワークスペースから、どなたもコミュニティにご参加いただくことが可能です。 LT登壇やLT内容に関するご質問、最新技術の共有などを「#雑談部屋」チャンネルで、随時、受付中です。 みなさま、お気軽にご投稿ください。 今回のLTテーマ!は「Vue3」です Vue3にかかわることなら、なんでも登壇OKです。 皆様のVue3を愛する気持ちで
Nuxt: The Intuitive Web Framework Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT li... 今回はタイトルの通り、以下の技術スタックで環境構築していきます。 Nuxt3 Vuetify3 Vitest Vue Testing Library インストール まずは Nuxt3 のインストールから始めます。 npx nuxi init nuxt3-app 続いて、Vuetify3 のインストールを行います。 npm i -D vuetify@next vite-plugin-vuetify sass その他、テストで利用する Vitest や Vue Testing Library 関連もインストールしてしまいま
概要 本記事は、Volar を使って型安全に Vue 3 + TypeScript を書いていたら急に以下の型エラーが発生した問題の調査記録になります。 Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Object literal may only specify known properties, and 'class' does not exist in type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. TL;DR 結論から言うと、以下ディスカッションの内容の通りです。 JSX issues in
Vue.js v2.x方式で書いたコードをVue.js v3.xで採用予定のComposition APIで書き換えてみました。
こんにちは、あっくんです。10月に入りましたが、日々30°C近くでなかなか気温が下がらないですね。僕は就活と勉強に挑戦中ですが、なかなかうまく行かないですね。自己管理がうまく行っていないです。特に睡眠がコントロールできないくらい眠っていますね。人は仕事や、職業訓練など人との約束は守りますが自分の約束は自分に甘えて守れないような気がします。だからこそ、自分を律してここから踏ん張ってやってみます。今回はaxiosで外部サイトにアクセスしていきましょう。 「データ」の扱いを考えよう 巨大データをどう扱う? 巨大データを利用する場合は外部のサイトにアクセスして必要なデータを取り出してくる、あるいはデータベースを利用してデータを処理をするといったやり方があります。Vue.jsの標準な機能ではできないことがあった場合はVue.jsにパッケージを追加して機能拡張することができます。 axiosって? ax
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く