4/17(金)〜23(木) の学習ログです（主にvue.js）
こんにちは。
皆さま、いかがお過ごしでしょうか。
このような状況の中にもプログラミングの学習を進められていることが有り難いと思う日々です。
そして、土台となって一生懸命して下さっている方々に感謝です。
僕は、今だからできる取り組みを精一杯頑張りたいと思っています。
さて、表題の通り4/17〜23までの学習ログをここに残します。
先週まではC言語を学んでいました。それによりRubyの理解が進みました。
RubyやRailsはとても良い言語、フレームワークだと思えて良かったです。
僕がプログラミングを学んでいる目的は最新のテクノロジーに追いつきたいからです。
できようとできまいと、その目標に向かって努力を続けていきたいと思います。
ということで、C言語の次に学び始めたのは、vue.jsです。
フロントエンドのトレンドのフレームワークは、C言語から距離が遠いいから、というのが主な動機です。あとシンプルにワクワク感。
主にUdemyを中心に学んでいます。
4/17（金）
この日は、vue.jsの学習はできず。
安宅和人さん著「シン・ニホン」を読み進めました。
電子書籍最高！
4/18（土）
通っていたプログラミングスクール「TECH::EXPERT」の最終課題発表会でした。
チームメンバーの方とフリマアプリを作成し、発表しました。
とても貴重な経験ができ、素晴らしい仲間に出逢うことができました。
4/19（日）
この日からvue.jsの学習をスタート。
テンプレートについて
テンプレートとは、HTMLベースのテンプレート構文を使用した、描画部分に関する記述のこと。
MVCのView（ビュー）に相当する部分。
テンプレートはHTMLを記述する場所に記述する。
ルートのテンプレートとは、テンプレートの頂点に位置するもの。
bodyタグの中ならどこにでも設置できる。このルートテンプレートの中がvue.jsの世界として利用できる。
<div id =“app”>
</div>
マウントとは、既存のDOM要素をvue.jsが生成するDOM要素で置き換えること。
vue.jsを動作させるためのオプションの記述方法
オプション名：値(ハッシュ形式) el: ‘#app’
この値はHTMLのidの要素を指定するもの（マウントする要素を指定）
この日は想定外の収穫がありました。
登山家のが酸素消費量を抑えるために、脳の酸素消費量を軽減するために極意として行うのが“感謝“だと。山を登りながら「ありがとう、ありがとう」と感謝で進んでいくことがパフォーマンスを最大化することになると。ストレスを減らすことで本当に必要な所に酸素を使えるのね、と。
ほぇー。感謝はやっぱりすごい技術というかなんというかだ。
ネテロ会長もおそらくこれじゃんか、と。（HUNTER×HUNTER）
4/20（月）
vue.js
テキストのデータバインディングについて
バインディングは、関連付けるという意味。
DOMの更新を自動化するデータバインディングを行うには、テンプレートで使用する全てのデータをリアクティブデータとして定義する必要がある。
リアクティブデータとは、リアクティブな動きができるデータ。
リアクティブとは、各要素を繋げて反応的に変化させること。
アプリケーションで使用するデータを宣言するには、dataオプションを使用する。
vue.jsではアプリで使うデータをjsからテンプレートが参照する。
このデータ割り当ての仕組みをデータバインディングという。
テンプレート側はMustathe構文を用いて（プロパティを指定する）、データを参照する。
Mustathe（マスタッシュ）は、口髭の意味。ex) {{ message }}
データバインディングはルートテンプレートの外側では使用できない。vue.jsの世界から外れるから。
dataオプションにオブジェクトや配列要素を設定する方法について
オブジェクト、配列、整数も使える
jsFiddleの使い方について
エラーのデバッグはconsoleで行う
この日の想定外の収穫
本を黙読ではなくて音読したらなぜか読み続けられた。
文字にして書き出すと続けられるのと似てる。
これはきっと自分の処理系の要素が大きそうだ。
この日のちょこっとメモ。
開発、保守・運用はセットで考えること。これは合理的。
開発ばかり、保守ばかりと業務が偏るとかなり厳しくなっていく。
これってそもそもサービスを愛しにくいよね。
そして、この流れは、できればユーザーまで枠を広げていくことがより重要になってくると思う。
4/21（火）
vue.js
ディレクティブについて
v- で始める特別な属性のこと
directive （指令）とは文字通り、vue.js に何かしらの指示をする仕組み
代表的なものは、v-bind, v-if , v-show , v-for , v-on , v-model
属性のデータバインディングv-bind
属性へのデータバインディングにはMustathe構文ではなく、v-bindを使う。
条件分岐 v-if
※toggleとは、同じ操作をするたびに、二つの状態が交互に現れる機構。
要素はDOMレベルで削除される
要素の表示、非表示を切り替えることができる
条件分岐 v-show
要素の表示、非表示を切り替えることができる
DOMから要素を追加・削除するのではなく、cssのdisplayプロパティをon/offして表示を切り替える
描画コストを、v-ifより抑えることができる
オブジェクトの繰り返し v-for
※オブジェクトとは様々なプロパティ（特性）を持ったもの
配列、オブジェクトの中身を一つずつ取り出す
オブジェクトのバリューを取り出して、Mustathe構文で出力する
オブジェクトのキーも指定すれば表示できる。その場合、第一引数がvalue、第二引数がkey。
※ ＜hr＞は、横線を引くためのタグ。
4/22（水）
vue.js
イベントの基本 v-on
イベント処理の基本について
構文 v-on:イベント名＝“メソッド名”
双方向データバインディング v-model
これは、dataオブジェクトの変更によりテンプレートの値を変更することに加えて、
テンプレートの変更によりdataオブジェクトの値を変更することができる。
この機能はvue.jsの醍醐味。
コンポーネント
これは、ページを構成するUI部品のこと。
テンプレートとそのロジックから構成される。
よく使う機能をコンポーネント化することで、再利用性が高くなったり、コードの見通しが良くなる。
開発効率が良くなる。
Vue.componentメソッドの構文
Vue.component（コンポーネントの名前 , コンポーネントの定義情報）
4/23（木）
JavaScript DOM操作について
DOMとは、Document Object Modelの略称で、HTMLなどを扱うためのAPI。
APIだったのか！！
まず大事なのが、DOMツリー。
各HTML要素は入れ子（ネスト）でマークアップされている。その入れ子をツリーで表現しているもの。
DOMのルートは、Documentとなっていて、document以下にhmlが存在して、html以下にhead、bodyがある。
次に、Node(ノード)。日本語では「節」。
種類として、要素、属性、テキスト、コメント、文書の５種類ある。
DOMでは、HTMLのタグやテキストが全てこれらのどれかに当てはまる。
DOMの操作としては、DOMツリーのノードにアクセスして、DOMを書き換えたり、追加したりすることをいう。
documentは、DocumentオブジェクトといってHTMLドキュメント全体を表すオブジェクトで、これがDOMの最上位のノード。
DOM操作を行う上で重要なオブジェクト。
Documentオブジェクトを使えばDOMツリーのノードに様々な形でアクセスすることができる。
なるほど、ふむふむ。
ただ個人的には、「DOM操作」じゃなくて「Node操作」じゃね？？
とまだ納得できていないが。笑
引き続き、vue.jsの学習を進めていきたいと思います。
頑張ります。
学習教材
Udemy
Vue JS入門決定版！jQueryを使わないWeb開発
中村祐太さん
