Vue.jsでTodoアプリを作成してみました

こんばんわ！Keitaです♪

今回は、「Vue.js」というJavascriptのフレームワークを使用してTodoアプリを作成しましたのでまとめていきたいと思います。

フレームワークと聞くと、サーバーサイドの言語が主流かなと主観的に感じていて、最初Javascriptにもフレームワークがあることに少し驚きましたｗ

今回はそんな機能に触れてみたよ！という紹介をしていきたいです！！

※今回のアプリは書籍を参考にして作成しましたので、ソースコードは記載しません。
紹介のみとさせていただきます。。

では、まとめていきます！

Vue.jsとは

簡単に「Vue.js」とは何なのか記載させてください！

前記でも軽く書きましたが、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシック(ガチガチにまとめられた)フレームワークとは違い、少しずつ適用できるように設計されています。

既存の機能と統合することも容易で、洗練されたシングルページのアプリケーションの開発が可能になるよ！というものらしいです。

結構人気な機能らしいので、使いこなせると需要がありそうです！

公式サイトを参考にさせてもらいました。
(参考：https://jp.vuejs.org/v2/guide/)

作成したもの

では、作成したものを紹介していきたいと思います。
下記がメインの機能となるTodoのTOP画面です！
※事前に何件か登録してあります。

ではタスクを追加してみます。
下記が追加の工程です！しっかり追加したタスクが表示させています。

次は編集をしてみます。
先ほど追加したタスクを「テスト5」に編集します！

次は削除してみます。
使用していたタスクを削除しましょう！

はい！これらが基本機能です。

後、タスクが完了したときに☑を付けると【完了】の文字がつく、アクションボタンを非表示にする機能も付けました。

こんな機能を作成しました。
データはローカルストレージで管理をさせています！

入門書を読みながら作成したので、自作とは言えませんが、
デザインを我流にしたり、タスクの完了機能に処理を付け加えたりし、
又しっかり機能は理解したのでご勘弁いただければと・・

最後に「Vue.js」の書き方を記載しておきます。

「Vue.js」の書き方

npmからインストールする方法でプロジェクトを開始しました。

インストールしたプロジェクト内に「APP.vue」があり、それが基盤となるファイルです！このファイルを色々いじるだけで簡単なシングルページのアプリケーションを作ることもできるかと思います。
※色々なアプローチ方法があるので、興味があったら調べてみてください！

Vueファイルは下記のような構成になっており、
HTML、CSS、JSを一つにまとめることができます！

---------------------------
<script setup>

Javascript記載箇所

</script>

 

<template>

HTML記載箇所

</template>

 

<style scoped>

CSS記載箇所

</style>
---------------------------

 

 

書き方に少し癖がある箇所もあるので、調べながらやると幸せになれるかもしれません。。

結構色々なところで活躍しそうな機能なので、今後も注目していこうと思います♪
ここまで読んでいただきありがとうございました！