VueでTodoリストを作ろう #4 解決~躍進

Webサイト制作記の第四回です。
来週はシルバーウィークでお休みなので週に二回書いています。

前回はHTML-js間の連携がなんとなく出来たようなところまででした。
現状のコードを一通りまとめておきます。

前回までの進捗

index.html

main.js

App.js

実行結果

ご覧の通りindex.htmlからApp.jsのmessageを取得することが出来ています。
今日はApp.jsのtemplateに記載したHTMLをindex.htmlに反映させるよう実装していきたいと思います。

週一投稿で四回目なので、もう一か月はこのWebサイト制作を行っているはずですが、まだ実装の準備段階から抜け出せていません。
Todoリストを作ろうと銘打っているのにTodoのTにすらたどり着けていないので、少しペースアップしたいところ。

template属性をHTMLに反映する

とにかくどう実装するかちんぷんかんぷんなので、「template vue」とかで調べてみましょう。

検索していろいろ見てみましたがいまいち的を射なかったので、まずコンポーネントについて理解するところから始めましょう。こういう基礎理解をさぼりがちにしてしまうのでついていけなくなる。

調べてもよくわからない。とりあえずApp.js内でVueインスタンスを生成しているのがなんか変な気がします。皆componentメソッドでtemplateとかを記載しているので、そっちに合わせた方がきっと今後調べるうえでもやりやすいでしょう。

変更しました。

ありゃりゃ、動かなくなってしまいました。またnameオプションがないと言われています。
このエラー、前回はApp.jsの話だと思っていましたがもしかしてmain.jsの方の話でしょうか。とりあえずつけてみましょう。

App.jsにnameオプションを付けたら前々回くらいの進捗に戻ってしまいました。
よく見るとシンタックスエラーが出ているので、そこを直します。

エラーを直したらまた同じエラーが出てきました。堂々巡りだ。

よく見るとcomponentメソッドにコンポーネント名を渡し忘れていたので追加しました。
componentメソッドはVue.component(コンポーネント名, {コンポーネント内容})という形で書くようです。

どうやら子コンポーネントのdataオプションは関数の形で渡す必要があるそうです。

これで良し。

しかし、[Vue warn]: Failed to mount component: template or render function not defined.というエラーが消えません。テンプレートかレンダ関数が定義されていないというエラー。

Vueのdevtoolで確認したところ、Appコンポーネントにはdataしか入っていませんね。どうにかしてtemplateもここに含める必要がありそうです。
力技のようですが、dataにtemplateを含めてみましょう。

確かにtemplatesは含まれましたが、こういうことではなさそうです。
というかtemplatesではなくてtemplateです。嫌な予感がしてきました。
templateに直して元の位置に戻してみましょう。

ア”

input出た！！！！！！！！！！！

なんと今回一時間半かけて悩んだtemplateが表示されない問題の原因は誤字でした。templateがtemplatesになっているだけという。そんなことがあっていいのか…
何はともあれtemplateが表示されるようになったので本実装に移りましょう。この時点で一時間半ほど経過しており、もう定時なのですが流石に「誤字を修正したら動作しましたｖ」では自分が自分に許されないのでもうすこしだけやります。

入力した内容を保存する

いよいよTodoリストの作成に入ることが出来ます。
まずはタスクを保存するところからやりましょう。

本来Webサイトでデータ管理をするのであればデータベース等と連携するのが常道だと思いますが、一旦はコンポーネント内変数に保存するようにしましょう。小規模サイトだしそういうのもありでしょう。

先にやることを説明しておくと、template内のinputに入力した文字列をdata内のtask配列に保存するように実装します。
そのために、配列への追加ボタンや追加メソッドを作成する必要があります。
第四回にしてWeb制作っぽくなってきました。

細かい点ですが、Vue.jsでフォーム内にラベルを表示する属性はlabelではなくplaceholderらしいので変更しておきます。

“タスクを入力“と表示されるようになりました。
それではボタンの作成からやっていきましょう。

インプット内容を取得するボタン

task配列への追加は置いておいて、クリックするとフォームに入力されている文字列をコンソールに出力するボタンを作ります。今日はここまで終わったら終わりましょう。
ボタンを作るの自体は簡単です。<button>タグを追加するだけ。

はい。簡単ですね。
次はクリックイベントを作成しましょう。クリックイベントなどで呼び出されるメソッドはmethodsに追加されていきます。
templateの例があるので、methodではないのかと怯えましたがこっちは複数形で正しいようです。良かった。

とりあえず呼び出されたらコンソールにAと出力するメソッドを作成します。

出来ました。次はボタンをクリックしたときに今作ったhandleClickを呼び出すようイベントを追加します。

静止画ではイベントが走っているのかわかりにくいですが完成しました。
ちなみにVue.jsでconsole.logを使用する場合はpackage.jsonに以下を追記する必要があるそうです。

理由はよくわかりませんでしたが。

次はインプットした内容を取得する部分を書きます。
一旦data内にmessage変数を作成し、フォームへの入力をmessageで保存するようにします。
変数と入力のバインドはv-modelで実装できます。

出来ました。v-model=”message”とmessage: ‘‘を追加しただけです。簡単。
templatesとtemplateの方がはるかに難しい。

出来ました。ちゃんとフォーム入力とmessageが同期しているのがわかります。後はhandleClick内でmessageを出力するよう変更するだけなので楽です。本実装に入ってからサクサク進むので気分がいい。

出来ました。このようにdataのデータ(わかりにくい)にアクセスする際以下のようにしてしまうとエラーが発生するので注意しましょう(一敗)。
this.をつけなくてはならない。

終わりに

時間も大きくオーバーしているしボタンとイベントの実装が終わってキリがいいので今日はここまでにします。
まさかの誤字で時間を取られるという問題はありましたが、そこが解決して以降は手早く進められているので良しとしましょう。

次回は実際にtaskにデータを追加していくところから始めます。
あわよくば追加したタスクのテーブル表示まで進めたいところ。そこまで進めたらTodoリストとしては完成と言ってもいいので。

前回から宣言している通り来週は休みなので次の更新は再来週の火曜日になると思います。それでは。