LoginSignup
3
3
@hayaharu3220(はやはる)

[初学者向け] Vueを始めてみたらめちゃくちゃ楽しかった(簡単家計簿 ハンズオン)

Posted at

はじめに

前々から気になっていたVue.jsの勉強を始めてみたらめちゃくちゃ楽しい。
まだまだ初歩的なことをしか学んでないがVue.js初心者やこれから勉強を始める人のために簡単な家計簿アプリのコードを紹介しながら、Vue.jsの紹介をします。

また、私はUdemyの以下の講座でVue.jsの勉強をしています。

想定読者のレベル

  • Vue.js未経験~ほぼ初心者
  • HTML/CSS/JavaScriptの基礎はある程度分かる人

Vue.jsを熟知している人はこの記事から得られるものがないと思いますが、
もし記事を読んでいただき誤った記述や理解不足な点を見つけた場合は後学のためにコメントいただけると幸いです。

ハンズオンする簡単家計簿アプリ

以下のアプリを解説しながら基礎を学びます。
このアプリは私が理解度チェックのために自分で書いたものなので、冗長な部分などがあるかもしれません。

[出来ること]

  • 買ったもの、個数、値段を入力し、追加ボタンをクリックするとリストに表示される
  • 買ったものの合計金額が表示される
  • リストの右に削除ボタンが表示され、それをクリックするとリストから削除される

See the Pen 簡単家計簿アプリ by hayaharu3220 (@haruharu3220) on CodePen.

そもそもVue.jsとは

Vue.jsとはJavaScriptやTypeScriptのフレームワークです。

フレームワークとは字のごとくアプリケーションの枠組みのことであり、全体像は最初からなんとなく出来ていて、そこに開発者が自分が作りたいアプリの部品をはめていったらアプリが出来るよ！ってものです。

Vue.jsはフロントエンドのフレームワークでアプリの画面を作る際の枠組みがあり、
そこに開発者が作りたい画面の部品を書いていく形になります。

公式ホームページは以下になります。

フロントエンドのフレームワークは他にもReactやAngularがあり、
ReactはJavaScriptやTypeScriptのフレームワーク、

公式ホームページは以下

AngularはTypeScriptのフレームワークです。

公式ホームページは以下

私はReactほぼ初心者、Anglarは全く触ったことがないので詳しい説明は割愛します。

Vue.jsの特徴とVue.jsで開発されているサービスやサイト

Vue.jsは以下の特徴があると言われており、人気が高いです。

  • 学習コストが低い
  • 小さなプロダクトから大規模のプロダクトまで開発できるスケールの柔軟性を持っている
  • 日本語ドキュメントが充実している

また、

  • デジタル庁
  • ZOZO
  • LINE
  • DMM
  • note
  • Gunosy
    など様々な企業のサイトやサービスがVue.jsで開発されています。
    以上の理由より私はVue.jsを勉強することにしました。
    (Reactも興味ありましたが、断念中。Vueの勉強が終わったら再開します！)

家計簿アプリ　ハンズオン

やっと家計簿アプリのハンズオンに入ります。

Vue.jsの導入

まず、Vueが使用できるように以下をHTMLファイルに書いてください。
自分はheadタグの中に書きました。
(headタグの中で良いんだろうか?とりあえず動きはした。。)
Vueはバージョン2系と3系がありますが、3系の記事は少ないように感じ、今回はバージョン2のVue.jsを使用します。

kakeibo.html
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Vue.jsの格子を記述

次にHTMLファイルのbobyタグの中に以下のコードを書きます。

kakeibo.html
    <div id="app">
        <!--このid="app"の中でVueで定義したデータを記載できる-->
    </div>
    <script>
        //このscriptの中でVueのデータの種類や動き(methods)のルールを定義する
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    //ここに自分が使いたいデータを定義していくよ！
                }
            },
            methods: {
                    //ここに動き(methods)のルールを定義していくよ！
            },
        })
    </script>
}

最初はこの書き方はなんだ??と思うと思いますが、これがフレームワークなのでそういうもんなんだと思って慣れてください。

公式ホームページの該当箇所は以下になります。

見てほしいのはdataとmethodsです。

dataに自分が使いたいデータを定義していきます。
後で書きますが、家計簿アプリを作るので

  • 買ったもの
  • 値段
  • 個数
  • 買ったもの一覧リスト(を管理するための配列)
  • 合計金額
    などのデータを設定していきます。

methodsは

  • 買ったものを買ったもの一覧リストに追加する動き
  • リストからものを削除する動き
    を設定していきます。

この
"data"と"methods"があればなんとなく家計簿アプリが作れそうです。

アプリを作る時は、
①どんなデータがあれば良いか
②どんな動き(methods) を設定してあげれば良いか
この２点を先に考えておくと進みが早いと思います！

データを設定しよう

じゃあ、データを設定していきます。
先ほどのコードのdeta()部分に以下の記載をします。

vue.js
    data() {
        return {
            newItem: '',       //買ったものを入れる変数
            purchaseLists: [], //買ったもの一覧リストを管理する配列
            price: null,       //値段
            quantity: null,　　　　　　　　//個数
            sum: 0,　　　　　　　　　　　　　　　　　　　　　　　　//合計金額
        }
    },

上記でこれがあったら家計簿アプリが作れそうだ。といったデータが全て定義されていることがわかります。

動き(methods)を設定しよう

データの設定ができたので動き(methods)を設定していきます。

addItem メソッドの記載

買ったもの、値段、個数を入力し、追加ボタンをクリックした時に
その買ったものをリストに追加する動き(methods)を設定します。名前はaddItemとします。
上記のコードのmethodsの中に以下の記載をします。

vue.js
    //methodsの中に記載
    addItem() {
      //買ったものがなかったら(入力されてなかったら)処理を終了
      if (!this.newItem) return;
     
     //買ったものがあったら、買ったもの、値段、数量をまとめてpurchasedItemというオブジェクトに設定
     const purchasedItem = {
        item: this.newItem,
        price: this.price,
        quantity: this.quantity,
     }
    //purchasedItemを買ったもの一覧リストpurchaseListsに追加(push=追加)
    this.purchaseLists.push(purchasedItem);
    //買ったものの金額を計算し、合計金額に追加
    this.sum += this.price * this.quantity;
    
　　　　　　　　//ここまで終わったら一旦データをリセット(これをしないとずっと買ったものが残って多重に計算される)
　　　　　　　　this.newItem = '';
    this.price = '';
    this.quantity = '';
   },

deleteItem メソッドの記載

次にリストに表示されている買ったものの横にある削除ボタンをクリックすると
その買ったものを削除する動き(methods)を設定します。
間違って登録してしまった時などに使います。名前はdeleteItemとします。
上記のコードのmethodsの中のaddItemの下に記載をします。

vue.js
        //addItem()の下に書きます
        //indexは今から削除する買ったものが配列の何番目なのかを示しています。
        //追加するときはとりあえず一番後ろに追加すれば良いのですが、
        //削除する時は"何番目"のものを削除するのか意識する必要があるためです。
        deleteItem(index) {
            //買ったものを削除するので合計金額も減算します。
            this.sum -= this.purchaseLists[index].price * this.purchaseLists[index].quantity;
            //リストから項目を削除します。(splice=要素の取り除き)
            this.purchaseLists.splice(index, 1);

                },

データと動きの設定が終わったので画面に表示してあげよう

上記でVueのデータと動き(methods)の定義が完了したので、それを画面に表示してあげましょう。
先ほど枠を書いておいた

の中でVueで設定したデータと動きを使うことができます。

<div id="app"></div>の外側(上や下)ではVueで定義したデータや動き(methods)は反応しないので注意です！

kakeibo.html

    <div id="app">
        <-- 買ったものを入力するフォーム -->
        <input type="text" v-model="newItem" placeholder="買ったもの">

        <-- 値段と個数を入力するフォーム　数字しか入れられないようにtypeはnumber-->
        <input type="number" v-model="price" placeholder="値段">
        <input type="number" v-model="quantity" placeholder="個数">

        <-- 追加ボタン押した時にaddItemが動くように設定している -->
        <button @click.prevent="addItem">追加</button>

        <ul v-cloak>

            <-- 買ったもの一覧リストを表示するように繰り返し処理 -->
            <li v-for="(purchasedItem, index) in purchaseLists">
                {{purchasedItem.item}} {{purchasedItem.price}}円 {{purchasedItem.quantity}}個</span>
                <-- 削除ボタン　クリックしたときにdeleteItemが動くように設定している -->
                <button @click="deleteItem(index)">削除</button>
            </li>
        </ul>
        <--合計金額を表示　買ったもの一覧リストが何もない時は表示しない-->
        <div v-if="purchaseLists.length!=0">合計：{{sum}} 円</div>

    </div>

これで簡単な家計簿アプリは完成です。
コードの全体は冒頭のCodePenに記載しているのでそこから確認してください。

書いていて思ったのですが、もっと基礎から記事を書くべきだったと思うので
今後も記事を書きます。今回はこれ以上ボリュームが多くなると可読性が悪くなるのでここまでとします。

参考にさせていただいたサイト・記事

Vue.jsについて

Qiita記事執筆について

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3