【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は今後長くお世話になると思うので、もう一度くらいは目を通したいなと。。

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

Vue.jsで商品一覧を描画してみよう！

3章に入っていきます。 実際に一覧画面を作っていき、Vueについての理解を深めようという章ですが、 次の書籍も控えているので何をやっているかだけ押さえて次に進もうと思います。 だいぶん駆け足。

やっていること、盛り込む機能は以下の様になっています。

• 商品画像・商品名・価格・送料を1商品の塊として扱う。
• 1商品の塊を、商品の数分ループして表示する。（v-for）
• セール対象・送料無料のチェックボックスを用意し、チェックONでそれぞれフィルタリングを行う。
  • セール対象属性や送料無料属性を見て、display:noneを付与する（v-if,v-else）
• 商品ソート機能。商品の並びを初期表示or価格が安い順でソートする。（算出プロパティをバインド）
  • ES5以降のsort関数使えば楽

読んだ感じ、2章の内容を実技で用いてみた、という章でした。

Ajaxで商品データを外部ファイルから読み込もう！

4章に入りました。 3章ではフロントのみで片を付けていましたが、4章ではバックへ片足を突っ込んでいます。 （それでも両足ではない。外部ファイルであってバックエンドのサーバーやDBから情報を抜いているわけではないので。）

最初はAjax（非同期通信）とは何かから始まり、非同期通信で得た情報の管理形式について触れています。 XML→JSONの順で解説。 XMLやJSONはバックエンドエンジニアでも業務で触れることが多いので、 ゼロベースでも無い限りは飛ばして大丈夫そうです。

クロスドメイン制約にも触れているので、詳しくない方は一読の価値アリ。

JSONのレスポンスを受け取り、forループで商品データを出力していくという内容。 やっている事的にはテンプレートエンジンのThymeLeaf（Spring Boot+Javaエンジニア御用達）でも可能なので、 上記スキルセットがあるとキャッチアップが早いかもしれません。

非同期通信にはjQueryを使用していました。 jQueryの代わりにVueを使うような認識だったので、併用していく点については意外でした。

この辺はVueでなくても扱っている領域なので、やはりキャッチアップについては容易です。 Vue独特の、ライフサイクルハックやバインドさえ押さえれば、すぐに使い出せそう。

学習コストはかなり低めだと改めて感じました。

以上、3・4章の学習内容でした。

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

お久しぶりです。

今期は考課課題でVue.jsを勉強することになったので、 書籍を2冊購入しました。

まずは1冊目から記録していこうと思います。

Vue.jsとフレームワークの基礎

この項では、主に「フレームワークとは・JSとは」や、 Vue.jsの基本的な説明がされていました。

Qiita等でも載っている話なので、説明はそちらに譲ります。 強いて言うならば「オブジェクト指向に触れた人間であれば、導入部分は簡単に消化できる」 でしょうか。

Vue.jsをはじめよう！

ライフサイクルハック

こちらも前半は似たような話が続いていましたが、 途中からVue.jsならではの話が出てきています。 それが「ライフサイクルハック」

何かというと、

コンポーネントがDOMと結びついた瞬間や、DOMからコンポーネントが削除された瞬間など、いくつかの特殊なタイミングでVueが自動的にコンポーネントへ通知を送ってくれる仕組み

とのこと。 ハック名は固定で、コンポーネントのインスタンスが生成された直後や、 コンポーネントのインスタンスがDOMと結びつく前後等、様々なものが用意されていました。

これらを利用して、コンポーネントのデータを初期化したりします。

ディレクティブ

「ディレクティブ」についても述べられていて、 「v-〇〇」と記載されている独自属性を使って、様々な機能を利用することができるものを指します。 Vue.jsについてQiitaを漁っていると大体のページで出てくるキーワードですね。

• v-bind
• v-for
• v-if
• v-else-if
• v-else
• v- show

色々あります。

フィルター

マスタッシュでテンプレートにバインドしたデータがテキストとして出力される前に、 何らかの可能を加えられる機能。

算出プロパティ

俗に言うキャッシュ機能

イベントハンドリング

JS的な話なので割愛 ただし、イベントの登録時はv-on:イベント名としてやる必要がある。

ウォッチャ

データの変更を検知して、イベントハンドラを呼び出してくれる。 算出プロパティと置き換えられる場合もあるが、 ウォッチャは非同期で動くので、外部データ取得時などは重宝する。 また、ユーザーの操作で高い頻度で処理が発生する場面についても重宝する。

算出プロパティのウォッチも可能。

フォーム入力バインディング

v-modelを使えば、入力フォームの内容もバインド出来る。 テキスト・ラジオ・チェックボックス等でバインドの仕方が変わるので注意。

トランジション

要素に動きをつけられる機能。 フェードインやフェードアウトがこれに該当。 他にもスライド系がある。

ここまでが1章・2章の内容でした。 基本的なことから、Vue.jsならではの機能も紹介されていて、 Vueで何が出来るかのイメージがしやすかったです。

次回からは実際どのようにして画面を作っていくかを見ていきます。

【読書感想】Think Smartを読みました

タイトルと著者

Think Smart 間違った思い込みを避けて、賢く生き抜くための思考法

著：ロルフ・ドベリ

概要

サブタイトルにある通り、思い込みについて多数紹介されています。 普段から人がハマっている思考の癖みたいなものに気付かされるので、 それを外してシンプルに生きていくことができそう。

読んでみてどうだったか？

もともと知っていた思い込み・バイアスもあり、 そうしたものには気をつけていかねばいけないと再認識できました。

知らない思い込みの種類も多く、今後取り入れていきたいと思える「思考の一冊」といったところです。 フラットな思考をするため、定期的に読み返すことを心がけます。（時間経っちゃうと風化しちゃいますからね。

何らかのアクションを足すのではなく、引くものが大半でした。 『重要なのは「すべきでないこと」を排除すること』と、帯にも書かれています。

個人的おすすめセクション

最後に、自分が特に大切だと感じたセクションのご紹介。

• 16 計画を立てると心が安定するわけ
• 32 期待とは慎重に付き合ったほうがいいわけ
• 41 知識が転用できないわけ
• 42 お金を寄付したほうがいいわけ
• 47 頭のスイッチを切ったほうがいいわけ
• 51 あなたの船を燃やしたほうがいいわけ
• 52 学問だけで得た知識では不十分なわけ

以上です！皆さんも興味が湧いたら読んでみてくださいねー！！

Think Smart 間違った思い込みを避けて、賢く生き抜くための思考法 [ ロルフ・ドベリ ]

【スターティングGo言語】Go言語の学習記録 その10,11

取り敢えず読み切りました！！

後半はコマンドだったり標準ライブラリの紹介がメインだったので、一気に読み切った形です。 （金曜・土曜は読み切るのに注力してブログにかけていませんでした。 　朝読み→朝の間にブログを書くルーチンでしたが、通勤退勤時にも学習を進めていたので。）

今週中に軽くまとめに入り、それ以降で実際に手を動かしてポートフォリオ作成に取り掛かります。

頑張るぞ〜。

【スターティングGo言語】Go言語の学習記録 その9

今日の進捗

213/403

朝は時間が取れず昼休憩に読み進めました。

今日の内容

ポインタ

構造体

どちらも慣れてないので非常に難しく感じました…

これも実際触りながら覚えるしかないかな…

構造体はかなり使い所ありそうな感じでした。

Javaで言うところのフィールドだけ詰めたクラス（DTOとか）のような感覚で使えそう。

休日ガット読み進めて、早めに二冊目に移りたいです。

WEBアプリも作りたいし…頑張るぞ！

【スターティングGo言語】Go言語の学習記録 その8

進捗

　200/403 半分まで来ました。

今日やったこと

・参照型

　・スライスについて

　・チャネルについて

　　・チャネルとゴルーチンの組み合わせについて

正直理解はしきれていないので、

実際手を動かす段階で覚えていく予定。

こういう概念があると把握はできたし、

把握したことにより安心も得られた。

明日からは構造体やポインタについて。

引き続き頑張ります