ハウツー

【こいつ…動くぞ！】おじさんと一緒にToDoアプリチュートリアル(1)【Vue.js】

/ 最終更新日：2023.11.20
書いた人： 

ご覧いただきありがとうございます！UGと申します！

前回の「 おじさんと一緒に 」からかなり話がそれてしまいますが・・・

かのアムロ大佐が感動した時と同じような感動をVueで味わいました！ので！

いきなりですがVueで簡単なToDoアプリのチュートリアルを作成してみたので、皆さんと感動を共有したいと思います・・・

※ html・css・JavaScriptが何となく書ける方向けです
※今回、vue-cliは使用しません。基本的なVueの機能を体感したい、という人向けです。

目次

  1. 1.最終的なゴールと本記事でのゴール！
  2. 2.今回のファイル構成
  3. 3.htmlファイルを準備！Vueを適用する！
  4. 4.Vueクラスをインスタンス化し、id=appの部分に割り当てる
  5. ゴール！ v-text(Vueの構文)を使って、messageをsampleに置き換える

１.最終的なゴールと本記事でのゴール！

最終的なゴール


最終的なゴールは上記gif画像の通りです。

１．Vueを使って文字を表示する
２．inputタグに入力した文字をブラウザ上に反映させる
３．todoリストを表示させる
４．todoリストに表示させる部品を作成する
５．inputタグに入力した文字をtodoリストへ反映させる
６．削除ボタンを押す事でtodoリストからアイテムを削除させる

これらの動作を実装していきたいと思います！

本記事でのゴール！

本記事でのゴールは上記１

「 Vueを使って文字を表示する 」

を目標にしていきたいと思います！

２.今回のファイル構成

test
│  index.html
│
└─js
    index.js


単純なファイル構成です。

testディレクトリの中に
・index.html

・jsディレクトリを配置し、
　index.htmlに対するindex.js

を配置しております。

３.htmlファイルを準備！Vueを適用する！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>hello!!!</h1>
  <div id="app">
    <div id="message">
      <p>message</p>
    </div>
  </div>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

html自体はh1タグで「 hello!!! 」
と表示させ、

id=appで囲ったpタグに「message」と表示させているだけの単純な構成です

ポイントは以下の通りです。

Vueをscriptタグで適用！


https://jp.vuejs.org/v2/guide/

上記リンクはVue公式ガイドです。

このガイドに従い、

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/index.js"></script>


scriptタグでVueファイルを呼び出し、適用。

その次の行でindex.jsを適用させていきます。

これから先は、JavaScript構文及び、Vueのコードはindex.jsに記載していきます！

id=appとして、Vueを適用させる範囲を決める

  <div id="app">
    <div id="message">
      <p>message</p>
    </div>
  </div>

index.jsにVueのコードを記載していきますが、

「html構成の中のどの部分にVueを適用させるか」

を決める為、messageの部分をid=appで囲んでいます。

index.jsでは、「id=appの部分をVueとして適応させる」、と、明示的に宣言させ、コードを組み立てていきます。

４.Vueクラスをインスタンス化し、id=appの部分に割り当てる

new Vue({
  el: '#app',
  data: () => ({
    message: "sample"
  })
})

appへVueを適応させる
データオブジェクトにmessageを追加

index.jsに上コードを入力してください。

Vueクラスをインスタンス化し、その中で、

el: ‘#app’・・・・・・・idがappの部分に、Vueを適用させる
message: “sample”・・テンプレート(html)から参照出来るオブジェクトを利用し、messageと指定したhtmlを”sample”というデータを割り当てる

ということをやっています。

ややこしいので、ここでとまらず、次の章へ進んでください。

次の章を経由すると、上記説明で伝えたかったことがわかるかと思います！

ゴール！ v-text(Vueの構文)を使って、messageをsampleに置き換える

<div id="message">
  <p>message</p>
</div>

この部分を

<div id="message">
  <p v-text="message">message</p>
</div>

このようにコードを修正してください。

ブラウザをリロードさせると、messageと表示されていた部分が

「sample」と表示されます！！！

前章にてdataオブジェクトで指定したmessage: “sample”が適応される

前章で長々と説明した事はこの部分のことです。

v-text=”message”と指定したhtml部分へ、dataオブジェクトで「message」とした部分に”sample”を割り当てています。

v-textの部分をもっとシンプルに書く

<p>{{ message }}</p>

v-text構文を記載したpタグを上のように書き換えてみて下さい。

同じように、sampleが表示されます。

こちらの方がシンプルでわかりやすくなったかと思います！

以上の工程で、基本的なVueアプリ(Vueで文字を表示させる)の完成です！

本記事の最終的なコードとまとめ

本記事での最終的なコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>hello!!!</h1>

  <div id="app">
    <div id="message">
      <p>{{ message }}</p>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: () => ({
    message: "sample"
  })
})

まとめ

いかがだったでしょうか

本記事にて

・Vueの呼び出し・インスタンス化
・v-text 記載方法 と、よりシンプルにした記載方法

を紹介いたしました！

今回の記事では「動くぞ…！」は体験できませんでしたが、次回の記事で体験できる方と思います！

それでは、今回はここで失礼いたします！