【Vue.jsのツボとコツがゼッタイにわかる本】Vue.jsの学習記録③

いよいよ書籍1冊目も終盤に差し掛かってきました。 2章の後半に大切なことが詰め込んであり、そこから先は消化試合になりつつあります。。。

ここから先は実際にVue.jsを開発で使い、 詰まったら読み返したりQiita漁って都度解決していくのが習得への早道かなと思います。

5・6章は実技に近い内容に見えます。章の見出しを見る限り。 こちらも目を通していきます。（一応レポートの代わりという体でブログに書き残していて。5・6章読まずしてレポートと呼べるかは怪しいかなと。）

Vue.jsで自動見積もりフォームを作ってみよう！

この章でも、今まで学んだ内容を活かして入力フォームを作っていきます。

作り方については以前触れている内容の復習になるので特に記載はしませんが、 コンポーネントを作る際に気をつけるコツが新しく述べられていたので、残しておきます。 「制御に必要だからという理由でdataオプションにプロパティをどんどん追加していくと、 　どのプロパティがどの場面で何のために必要なのかがわかりにくくなり、コンポーネントの保守性が低下します。 　dataオプションのプロパティには、コンポーネント内で保持しておきたいデータだけを定義するように考えます」

他のデータは算出プロパティとして定義するのがコツですね。 漏れなくダブりなくの最小構成で作るのが良いと解釈しました。

v-modelが頻繁に使用されているので、 きっと実戦でも多様するのでしょう。後でおさらいしておきます。

非常にあっさりですが、以上で5章はおしまいです。

Vue.jsのコンポーネントをモジュール化してみよう！

今まではコンポーネントをべた書きしており、使い回しが出来ませんでした。 モジュール化することで、コンポーネント単品として扱うことができ、使い回しが可能になります。

コンポーネント毎にファイルを分けた方が、コンポーネントの独立性は高まり、使い勝手が良くなる。 この辺りは設計で解決していくしかなさそう。

コンポーネント間は親子の関係を持たせることでデータを受け渡せる。 親→子はコンストラクタのようなものに値を流し込むことで受け渡し可能だが、子→親はemitという関数を使用して値を受け渡す。

Vue CLI

Vue CLIとは、Vue.jsのアプリケーション開発ツールで、 単一ファイルコンポーネントやルーティングの定義、アプリケーションのデータを集中管理することができる。

効率良い開発に欠かせないツール。

開発環境では.vueファイルで管理されるが、運用環境にはHTML・JS・CSSの形式に変換してアップロードしてくれる。 開発者はHTML・JS・CSSを直接編集する必要が無く、vueファイルの作成だけに注力可能。

6章後半は、Vue CLIを用いた開発・コマンドについて解説がありました。 ここに関しても実際開発をしつつのほうが頭に入ると思うので、一旦流し読みで済ませてあります。

次回からは2冊目の書籍『Vue.js&Nuxt.js超入門』を読み進めていきます。 Vue.jsについて基本的な部分は今回の書籍で押さえられたので、 その内容を復習しつつ、Nuxt.jsについて知識を得ていきます。

特にVue CLIは今後長くお世話になると思うので、もう一度くらいは目を通したいなと。。