Allied ArchitectsAllied ArchitectsEngineer Blog

VueJS と「Drag/Drop」を触ってみて、小さいサンプルを作ります。

2018/01/16 Vue.js

おひさしぶりです。

技術支援チームのトゥオンと申します。

近年にWeb Applicationが発展して、DeveloperがFrontEndのフレームワークを気にしています。そして、大きなIT企業はJS フレームワークを発表しました。例えば、React JS (Facebook), Angular JS(Google), Vue JS(Google)です。
最近、仕事でFrontEndのタスクが増えてきていて、一つのJSフレームワークを勉強したいと思いますので、 VueJSを選びました(選んだ理由が特にないです、検索した時にVueJSがすぐに出ましたので、選びました)。

勉強するときに実際に体験しないと、忘れしやすいと思いますので、前回に紹介したこと(「ウェブ開発におけるDrag/Dropについて」)と含めて、小さいタスク管理ツールを開発します。皆さんと一緒にやりましょうか。

やりましょう

勉強すること

例え小さなツールでも、正しく理解してからでないと開発できませんので、以下のリファレンスをちょっと見てみましょう

【Drop/Drag】

http://tech.aainc.co.jp/archives/11337

【VueJS】

今回の目的は VueJSを触ることです、全部のリファレンスを勉強しなくて、 Introductionのところだけを勉強しましょう。
こちらのリンクには詳しく書かれています。(英語のリファレンス)
https://vuejs.org/v2/guide/index.html

サンプルを開発しましょう。

[Drop/Drag]と[VueJS]を試してみたいので、今回のサンプル小さいタスク管理ツールを作っていきます。
ツールの目的は

  • タスクを作る
  • タスクの状態を変更出来る
  •  タスクが削除できる

Layoutを作りましょう

あまり奇麗じゃないLayoutですが、以下のLayoutのコード書きました。

こんなイメージになります。

vue js を挿入しましょう

VueJSのインストール

Vueを使って、Layoutに入れる

上記のコードを書きましたら、実装をすると、「Add」ボタンを押す時に、タスクが作成だれます。

Drag/Dropを購入しましょう

Script

Layout

これまでに大体終わりましたが、問題はタブまたはブラウザを閉じる時に、タスクのデータが消えます。

ですので、localStorageを使って、コードをちょっとだけアップデートしました。
参考したい場合、以下のリンクを参考してください。

https://jsfiddle.net/xmrw50ka/

最後の結果はこんな感じです。

 

 

さいごに

VueJSとDrop/Dragを実際に体験して、HTMLとVue.JSの内訳も書きました。皆さんはVueJSとDrop/Dragの使い方がなんとなく分かりましたね。これから、色々なことをVueJSで展開出来ると思います。

以上です。ありがとうございました。

pham.thanh.thuong
  • pham.thanh.thuong

RELATION ENTRY

ウェブ開発におけるDrag/Dropについて

ウェブ開発におけるDrag/Dropにつ...

2017/11/8 JavaScriptフレームワーク

はじめに はじめまして!ADUシステムのトゥオンと申します。 現在沢山のウェブサイトがDrag/Dropを使っています。Drag/Dropを使う時、対象の変更を見やすいし、理解しやすいです。例えば、 タスク管理のウェブサイトやスケジュール管理のウェブサイトなどです。 最近、要件定義のため、いく...

続きを読む

pham.thanh.thuongの記事一覧へ

ページTOPへ