ビジネスとIT活用に役立つブログBlog


JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(前編)

この記事をシェアする:

今回は、JavaScriptフレームワークの「Vue.js」を用いて、簡単なToDoリストを2回に分けて実装していきます。
HTMLファイルにVue.jsを読み込ませるだけで導入が可能ですので、実際にコードを書いてみて感覚をつかんでいただけたらと思います。

前編では導入方法からリストの作成、追加までを解説していきます。

Vue.jsとは?

Vue.jsとは、簡単かつ感覚的に実装可能なJavascriptフレームワークのひとつです。

Vueはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。 Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。 そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。 また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 はじめに―Vue.js

Vue.jsのメリット

  • 双方向データバインディングに重点を置いているため、シンプルでわかりやすい
  • 学習コストが低い
  • 他のフレームワークと組み合わせて使いやすい

他のフレームワークとの比較

他の有名なJavascriptフレームワークとの比較について公式ドキュメントにて紹介されています。

では、基本構造から、実際にVue.jsを使ってみます。

【1】Vue.jsを導入する

index.htmlに以下のコードを記述することで導入完了です。

【2】データを表示してみる

index.htmlに{{ データの名前 }}と記述します。

contents.jsにVueのインスタンスを作成します。

以上でindex.htmlにアクセスすれば「vue.jsでtodoリストを実装してみよう」と表示されます。

実行結果(別サイトが開きます)

【3】入力内容を表示してみる

Vue.jsのフォーム入力バインディングを用いて、入力内容を表示してみます。

以上でフォームに入力された文字が表示されます。

実行結果(別サイトが開きます)

【4】配列をループで表示してみる

ulタグにv-forディレクティブを用いてlist配列の内容を表示してみます。

以上でlist配列のtextがすべて表示されます。

実行結果(別サイトが開きます)

【5】配列にデータを追加してみる

buttonにv-onディレクティブを用いてaddToDoメソッドを実行します。

実行結果(別サイトが開きます)

さらに、addTextが空欄の場合、追加を実行しないようにしたいと思います。

以上でフォームに入力した値が、ボタン押下でリストに追加されるようになりました。

実行結果(別サイトが開きます)

さいごに

いかがでしたでしょうか。
次回はタスクの更新削除やタスクの完了機能を追加し、ToDoリストをより便利にしていきたいと思います。

Vue.jsの詳しい使い方は、公式ドキュメントにて解説されています。

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!