Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装する
- Vue.js
Vue.jsを用いてアプリケーションを構築するというのは、サスティナブルかつ拡張性に優れたコードを実現しながらも、ユーザーに快適な動作や体験を提供するという目的もあると思います。そんな優良なユーザー体験を提供する為のフロントエンド実装において、ドラッグアンドドロップ(以下、dnd)を用いた要素移動インタラクションは有効なアプローチの1つです。
Vue.jsを用いてアプリケーションを構築するというのは、サスティナブルかつ拡張性に優れたコードを実現しながらも、ユーザーに快適な動作や体験を提供するという目的もあると思います。そんな優良なユーザー体験を提供する為のフロントエンド実装において、ドラッグアンドドロップ(以下、dnd)を用いた要素移動インタラクションは有効なアプローチの1つです。
無印(ムジ)ちゃんは語りたいのです。FWを使わない、無印のPHPでオブジェクト指向プログラミングをする時に少しだけ幸せになれるいくつかの手段を。
Vue CLIを使ってVue.jsの開発環境を構築していきます。Vue CLIを用いると、簡単に開発環境を整える事ができるので便利です。
Laravelではフロントエンドを記述するJavaScriptFWとしてかなり早くからVue.jsをサポートしています。今回は、LaravelでVue.jsを用いた開発を始める際のファーストステップとして、Vue.jsを使った画面出力を行います。
Vue.jsに入門しようと思ったらとりあえず簡単にHelloWorldやってみたいですよね。やりましょう。超絶簡単に。
LaravelとPHPUnitを用いて、アプリケーションの中でデータベース操作が絡む部分のユニットテストを作成します。