機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
ViteとVue3にTailwind CSSを導入する | miyauci.me
ViteとVue3にTailwind CSSを導入するViteプロジェクトでCSSフレームワークのTailwind CSSを導入する方法を紹介します。ついでに、Tailwind CSS用のStylelintのルールやVSCodeの設定をします。 はじめにVite は No bundle 掲げており、開発時に高速な HMR を提供してくれます。 しかし、CLI を用いたデフォルトテンプレート自体はかなりシンプルになっているため、Vite プロジェクトを始める際、他のモジュールを使うには自分で環境を構築しなければなりません。 今回は Vite を使って、CSS フレームワークである Tailwind CSS の環境構築をします。 なお、こちらの環境をベースに説明するので、適宜参考にしてください。 以下では Vite プロジェクトがある前提で説明します。 環境構築まずは、Tailwind CSS
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Framework7 - Full Featured HTML Framework For Building iOS7 Apps
Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to. With such stunning set of UI components that Framework7 provides right from the box, it allows to create web apps, progressive web apps (PWA) and iOS and Android apps wi
NativeScript-Vue
Native API AccessThanks to NativeScript's superpower, you get access to ALL native apis right in your JavaScript. Learn more → Does it work with Vue 3 or the Composition API? Yes! Since 3.0, Vue 3 is supported. You can use both the Options and the Composition API per your preference. What is NativeScript-Vue? tl;dr it's a custom renderer for Vue that renders to NativeScript views. Does it run in
Gridsome - Build blazing fast websites with Vue.js and GraphQL
A Jamstack framework for Vue.js Gridsome makes it easy for developers to build static generated websites & apps that are fast by default 🚀 Get started Open-source MIT Licensed. GitHub (v0.7.23) CMSsAny Headless CMS, Contentful, WordPress, Drupal, Sanity.io, etc. DataAny APIs, Databases, AirTable, YAML, CSV, JSON, etc. MarkdownAny Git-based CMS, Forestry, Netlify CMS, Blogs, Documentation.
Vue.jsで汎用ウインドウコンポーネントをつくってみた - Qiita
GMOペパボ新卒エンジニアの@gatchanです。 @sunecosuriさんの「Nuxt.jsでlocalStorageを用いる際のTipsとハマったこと」につづき、Vue.jsな内容です。 最近作っている趣味プログラミングで必要だったので、Vue.jsで汎用的なウインドウコンポーネントをつくってみました。 （ここでいうウインドウとは、各種OSのGUIに採用されているウインドウシステムのようなものです） あくまでウインドウ画面実装の一例ですが、参考になればうれしいです。 （こういうものをつくりました） 詳細な実装は、githubに公開したソースコードを参照していただければと思います。 https://github.com/piyoppi/vue_window_sample ウインドウの要件 私が求めるウインドウの要件は、以下の通りでした。 ドラッグアンドドロップで移動できる テキストや画
Python Django チュートリアル SPA編(3) - Qiita
勉強会用の資料です． 今回の記事ではフロント側のデザインを整えていきます． また，最初のチュートリアルで作成したAPIを修正し，質問一覧を取得，表示させます． このチュートリアルから始めるかたは以下のリンクからソースコードをダウンロードするか， tutorial3-start のタグが付いているリビジョン(96ab6f4)をチェックアウトしてください． https://github.com/usa-mimi/tutorial-spa/tree/tutorial3-start コンポーネントの話 コードを書いていく前に，Vueの コンポーネント について説明していきます． コンポーネントについて ページを作っていく前に，コンポーネントについて公式のドキュメントを読んでおくことをおすすめします． コンポーネントについて公式の説明 Vueではページの部分部分をコンポーネントという単位で分割してお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pinia | The intuitive store for Vue.js
Storybook: Frontend workshop for UI development
Quasar Framework - Build high-performance VueJS user interfaces in record time
Element