4/24(金)〜26(日) の学習ログです（主にvue.js）
こんにちは、安藤です。
あ、私、安藤と申します。
改めてまして、宜しくお願い申し上げます。
山里さん×田中さん×弘中さんの「あざとくて何が悪いの？」が好きです。
男女の心模様にフォーカスされていて面白いです。
さて、ということで、今日も僕の学習ログです。
4/24(金)
この日はブログの執筆と
「ソフトウェア・ファースト」を読み進めた
以上でした。
勉強時間を作れないことってあるよね！って日でした。
こんな日も仲間は変わらずにめちゃ努力していて、「明日こそはなんとか時間を捻出したい！勉強したい！」とパワーをもらってます。
そうそう、プログラミング関連のタスクをチームでトレロを使って管理しているのですが、これが良いんです！ チームのどなたかに動きがあると自分も頑張らなくちゃ！と素直に思えてやる気が増し増しになるのです！
仲間のパワーで本当にすごい。
4/25(土)
フロントエンドオンラインイベントに参加
声が聞きにくくて短い時間しか視聴できなかった。
でも、いい経験になりました。これも経験しないと分からないことだからね。
vue.js
これまでの復習をしました。
やっぱいこのフレームワークは本当に使いやすそう。
jsFiddleを使わず、テキストエディタを使った開発について
jsFiddleは本格的な開発には向かない
Vue.jsは、「vue.js cdn」で公式サイトへ遷移して、cdn のセクションで読み込みのコードがあるのでコピーする。
それをbody終了タグの直前に貼り付ける。
JavaScriptの読み込みコードは、vue.jsコード(cdnの)の直後に記述する。
HTMLがファイルを読み込む順番として、vue.jsを読み込んでから、javascriptを読み込む。
※CDNとは「Content Delivery Network」の略で、同一のコンテンツを、 多くの配布先、多くのユーザーの端末に効率的に配布するために使われる仕組みのこと。
ソフトウェア・ファーストを読み進めた。コツコツ少しずつ読んでます。
今日は頭がスッキリしなかったので、仲間からランニングが良いとお聴きしたので僕も走ってきました。ついでに筋トレも。スッキリしました！
運動はいいですね！全然汗が出ない体になってて危機感を覚えましたが（汗）
違う意味で汗をかきました（笑）
4/26(日)
この日は、vue.js の学習頑張ったと思う。
Udemyの講座に沿って、todo管理アプリの開発をしました。
●Viewインスタンスとルートテンプレートの作成
テンプレートにvue.jsを読み込ませる。cdnからコードをコピーしてくる。
Viewインスタンスは変数に入れておく（変数は使わなくても良い）
テンプレートにルートテンプレートを作成する
Vueインスタンス側でルートテンプレートをマウントする。
el: オプションに要素を指定する。値は、idセレクタで指定するので「#」をつける。
●追加ボタンのイベントハンドリングについて
●inputのvalueを双方向データバインディング
●タスクの追加
追加された分を配列に格納する挙動が思うようにいかず苦戦。。
メンター欲しいと思ったけど、自分で調べて、、、
もしやこれは勝手にリロードされてるんじゃないか！
と当たりをつけて調べたらヒット！
buttonタグは属性を持たせないと自動でリロードしちゃうのね。
自力で解決できて嬉しい。
●インプットタグ内が未入力ならタスクを追加しない
If文でメソッド内で条件分岐させる。未入力なら、return;で返してその後の処理に進まないようにする。
プログラミングって実はすげーシンプルかも。
●タスクのリスト表示
配列のデータをリスト表示させる。
●タスクの完了、未完了の管理
各タスクへのチェックボックスを作る
変数todoに、isDone: falseを書いたらエラーとなった。
v-model=“todo.isDone”とテンプレートに記述するだけで良かった。自動でやってくれてるんか。。
●スタイルの設定
cssでリストマークを非表示にする
cssで完了したタスクにチェックしたら横線で消える処理
●タスクの削除
buttonタグでdeleteボタンを作り、v-on:clickでイベントハンドリングする
ハンドリングするのは楽しい。
●動作確認
デバッグ用のコードはコメントアウト
ということで、完成だー！！
vue.jsでtodoアプリを作ることができました。
面白かった。
分かりやすいし、書きやすいし、これならフロントもいけそうで嬉しいです！
◎ソフトウェア・ファーストを読み進めた。これは変わらず。
1日1ページでも1節でも1行でも取り組むようにしています。
この日は久々のコーディングをしました。
自分の書いたコードでプログラムが動いた時ってなんでこんなに嬉しいんだろう。
そう思って考えたところ、困難なこと越えているから。 という答えが出た。
簡単なことは面白くないし、できるようになったら興味はその次に移ってしまうから、
この1回1回の「やったー！！」という喜びを噛みしめたい。
ということで、引き続き、vue.jsを中心に学習を進めていきたいと思います。
頑張ります。
学習教材
Udemy
Vue JS入門決定版！jQueryを使わないWeb開発
中村祐太さん
