機能開発を止めずに、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 で終了してしまった
カスタムイベント — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
Vue.jsでグリッド(table)をクリックするとモーダルで編集させるtips - Qiita
まえがき まだ完全版には遠いですが、役に立ちそうなのでメモ。 ・・・作っては見たものの、結局モーダルの中に更にテーブルが必要になって、面倒になり、その画面は後に発見したjson-editorに変更しました。 まだまだVue.jsを完全に理解できた段階まではいかないため、おかしなことをしてる可能性があります。つまり、いっこーにっこー参考程度にしておいてくださいな。 前提 jQuery, Bootstrap3, Vue が読み込まれている。 もちろんほとんどの部分はBootstrapナシでもできますが、モーダルのコードはVue公式リファレンスのモーダルを元に、クラスはBootstrap3仕様に変更してあります。 新規行を作成する部分は未実装です。消すか作っちゃってください。 コンポーネント定義 使いたいページから見えるところにコードを入れてください。 まずはHTML内にテンプレート <scri
俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
VueComponent間で再利用可能な部品を実装するための機能がmixinです。mixinを使った共通化の例はよく見かけますし、私もしばしばやってきました。ただ、どうも自分の実装方法だと後々不便になったり見通しが悪かったりと、使い勝手の悪いものになってしまうことが多かったです。 そこで今回は自分の過去の実装例を見返しながら、なぜ失敗したのか、mixinをどうを使うべきかについて、現時点の考えをまとめてみます。 この記事で紹介する失敗例は、私が携わったプロダクト開発においてデメリットの方が大きかった実装例です。 便宜上「アンチパターン」「失敗例」といった表現をしていますが、あくまで個人的にやりたくないパターン程度の意味合いです。 失敗例1. Template Methodパターンを意識したmixin 暗黙的挙動の危うさ OverrideではなくMergeしているだけ Classの継承とmi
Vue.js2.x系で親から子コンポーネントにデータを渡す方法
Vue.jsの2.0がリリースされたということで、1年半ぶりに勉強している。 そんな中、なぜか親コンポーネントから子コンポーネントにデータを渡すことができずハマりかけたので共有する。 ちなみにvue-cliを使っているので、次のようなディレクトリ構成になっている。 . ├── src │ ├── App.vue │ ├── assets │ │ ├── icon.png │ ├── components │ │ ├── Card.vue │ │ └── TimeLine.vue │ └── main.js └── static └── data.json vue-cliの使い方は、次の記事を参考にしてほしい。 親コンポーネントから子コンポーネントにデータを渡す Compotentsの関係は、App.vue > TimeLine.vue > Card.
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
Vue.jsで色々書き方のルールがあるようで、備忘録として実際に使ったものをここにまとめていきます。 最初は少ないですが随時追加していく予定です。 1.propsで受け取った変数の中身を表示 {{ }}を使う <template lang="html"> <div> <p>{{ message.message }}</p> <small>{{ message.user.name }}</small> </div> </template> <script> export default { props:["message"] } </script> <template lang="html"> <div> <img v-bind:src="message.user.img_path"> <!--<img :src="message.user.img_path">--> </div> </te
Vue.js入門その８〜vue-draggableを使ってドラッグ機能の実装〜 | RE:ENGINES
はじめに 久しぶりにVue.jsの記事を書きます。 TrelloやGithubのカンバンのようなタスク管理を作りたいと考え、良い感じのライブラリないかな、と探していたところ、vue-draggableを見つけました。 https://github.com/SortableJS/Vue.Draggable Sortable.jsがベースのようで、かなり簡単にドラッグ機能が実装できます。 今回はこちらのライブラリを紹介したいと思います。 準備 今回もJSFiddleを使用します。 しばらく使ってませんでしたが、リニューアルしてましたね。 JSフレームワークをVueで選択しておけば、あとはそのままで良さそうです。 見た目を良くするために、Materializeを使用しています。 CDNのURLをResourcesに登録します。 また、今回の主役でもあるvue-draggableも登録します。 C
メソッドとイベントハンドリング - vue.js
インラインメソッドハンドラメソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます: <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) 結果: 時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます: <button v-on:click=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...