読書メモ Vue.jsのコンポーネントシステム
Vue.jsのコンポーネントシステムについて、初歩的だけど大事そうなところメモ。本のコピペ 🙏
コンポーネントシステムとは
- Vue.jsにおけるコンポーネントとは、再利用可能なVueインスタンス
- Vue.jsのコンポーネントは、第一引数にコンポーネントの名前、第二引数にコンポーネントの内容、構成情報などのオプションを指定（Vue.component()APIを使う）
- 第二引数に入りそうなオプション。この中でtemplateとpropsがコンポーネント向けに使われる
- props は、 カスタムタグを親のコンポーネントに記述 するときに、 子のコンポーネントに対して外から受け取る変数を定義するオプション
- 親子関係があり、コンポーネントを利用する側が親、利用される側が子
書いてみた
- js側
- html側
- ブラウザ側
親コンポーネントと子コンポーネントの通信
親から子はなんなくわかった。子から親がよくわからない。親子関係についてもなんかよくわからなくなってきた？
ログインフォームの機能を持ったコンポーネント
読書メモ Vue.jsの処理
Vue.jsの処理について、初歩的だけど大事そうなところメモ。本のコピペ 🙏
まずはDOM要素にVueインスタンスをマウント
- Vue.jsの処理は、Vueインスタンスを生成し、DOM要素にマウントするところから始まる
- オプションオブジェクトのelプロパティ指定したDOM要素が、マウントの対象
マウントしたあとの表示に欠かせないdataプロパティ
- dataプロパティには、UIの状態となるデータのオブジェクトを指定
- dataプロパティプロパティに指定した値はテンプレートから参照できて、リアクティブシステムに乗っかれる
書いてみたメモ
Mustacheというテンプレートエンジンの記法 {{}} でJavascript側のデータを展開する
フィルタ
- フィルタは汎用的なテキストフォーマット処理をする仕組み（書いてみたメモに追記）
- フィルタで定義したやつをテンプレートで使う
算出プロパティ
- あるデータから派生したデータをプロパティとして公開する仕組み
- データに何かしらの処理を与えたものをテンプレートに渡したいときに使う
- Mustacheで展開するには複雑すぎるときに使う（テンプレート側に直接複雑な式を書くのは、読みにくくなるしよくない）
メソッド
2.10 comming soon...
ディレクティブ
2.9 comming soon... ディレクティブ量多そうなので別記事にメモろう
各プロパティ
今のとここ、dataとelとfiltersとcomputedを学んだ。もっと読み進めるぞー
完成例
2章では、Vue.jsの基本機能を紹介してくてて、最終的には以下の文房具購入フォームができる。
Vue.js を勉強し始めた
モチベーション
Laravel のお勉強でTODOアプリを作ってみてて、TODOを達成したらGithubの草が生えるみたいなグラフを表示させたくて、調べてたら以下のライブラリを見つけた。これの導入方法が不明過ぎたので、Vue.js を勉強し始めた。
Githubの草みたいなやつ生やしたい場合、cal-heatmapというライブラリを使ってる人の記事をたくさん見かけたけので、僕の作ってるアプリで試しにコピペして動かして見たところ、ブラウザがSafariだと動かない問題に遭遇した。
以下、エラーメッセージ。このエラーメッセージ自体よくわらないままだけど、ググった感じVue.jsと何か関係してそう？かと感じたので、Vue.jsの場合どうやってやるか調べてたら上記ライブラリを見つけた。
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
以下、作りたいと思ってるもの。勉強だー
読書メモ Vue.jsを支える技術
Vue.jsを支える技術
以下、重要な３つの技術的バックグラウンド
1.コンポーネントシステム
- WebアプリケーションのUIは、それを構成する複数の部品の集まりだと考えることができる
- UIは、①データと、②そのデータを画面に表示するビュー、③データを変更するユーザーのアクションの3つから成り立つ
- これらのUIの部品を、UIコンポーネントという
- UIコンポーネントを効率よく扱う仕組みがコンポーネントシステム
- Vue.jsのコンポーネントとは、再利用可能なVueインスタンスのこと
2.リアクティブシステム
リアクティブシステムの説明。全然わからん
- リアクティブシステムとは、状態の変化をVue.jsが検知して自動的にDOM側に反映できるようにする仕組み
- リアクティブシステムは、コンポーネントレンダリングの骨格となる
- リアクティブシステムは、「変更と同時に各所を変更させたり、変更がどの箇所に影響を与えているかわかる」のが嬉しいっぽい
- リアクティブシステムは、リアクティブプロパティとウォッチャのセットによって実現
リアクティブなデータバインディングとは、HTMLテンプレート内で対象となるDOM要素にバインディングを指定することで、Vue.jsがそのデータの変更を検出するたびに、バインディングされているDOM要素が自動で表示内容を変更する
データの変更に応じて、ビューを更新する仕組みをデータバインディングという
- バインディングとは、あるものとあるものを紐づけるという意味で、Vue.jsの場合は、データと対象要素を結びつけるという意味
3.レンダリングシステム
- 仮想DOMによるDOMの高速なレンダリングを提供してる
- 仮想DOMとは、DOM操作を簡略化、高速化するための技術
感想
コンポーネントシステムの概念はなんとなくわかった。2と3は、よくわからんのでもう少し読み進めるぞ
読書メモ ビジネス教養 EC ビジネス編
週末台風だったのギークハウスに集まって、運転代行業をテーマにスタートアップウィークエンドしてきた。
Facadeデザインパターン pic.twitter.com/hGZKrn6X2s
— 島袋恵😘 (@20092014) September 29, 2018
わいわい楽しかったけど、ビジネス教養足りてないなと感じたので、以下の本を読み始めた。そのメモ。
初級者編 pic.twitter.com/7qvGegrcmG
— 島袋恵😘 (@20092014) September 30, 2018
初級者なのでまず以下の２つを抑えるようにする。
- ビジネスの構造を数式で理解する
- 主要な数字を暗記する
この本は、会計の専門家じゃなくても、決算を通してビジネスモデルを理解することで、普段の仕事や転職に活かして行けるような知識を得るっていうテーマで書かれて、その中では代表的なインターネットのビジネスモデルを例にとって解説されてる。まずは、ECビジネス編。
EC ビジネス編
- ECビジネスで押さえておきたい数式。取り扱ってる商品の金額の合計に対しての売上の割合が重要っぽくて、テイクレートっていうんだけど、アメリカだと10%ぐらい、中国だと3%ぐらい、日本だと楽天で7%ぐらい。日本の場合で考えると、取扱高に7%かけた値が、売上のポテンシャルとして見積れるっぽい。
ネット売上 = 取扱高 × テイクレート
ECビジネスは、大きくマーケットプレイス型と直販型に分かれる
直販型（規模の経済で、ボリュームディスカウントできたら強い）
ネット売上 = 販売額 - 仕入れ値
ネット売上 = 出品料 + 売上手数料 + 広告掲載料
中国でいうとアリババってとこだけど、テイクレート3%ぐらい
日本だと、楽天が強くてテイクレート7%ぐらい（取扱高に対して売りげが380億）
取扱高の部分をもう少し見てみる
取扱高 = 購買単価 × 購買頻度
- 日用品ECは、利用頻度と継続率が高い。自然と購買頻度も高くなる。そうすると取扱高も増える。
ファサードとDI 参考メモ
ファサードとDIがよくわからないので後で読む。Laravel学習帳とララ帳わかりやすそう
Laravel学習帳
DIは、あるオブジェクトが他のオブジェクトを外から注入しようというものです。
つまり DI とは、「依存性の注入」として理解するよりも「依存している部分を、外から注入すること」と捉えるほうがわかりやすいかもしれません。
DIパターンでないコードは「依存関係のあるコードをクラス内で生成すること」
ララ帳
ファサードとはlaravel10.wordpress.com
- ファサードは依存性注入の1つの方法です。依存性注入を使うと柔軟性、保守性が上がります。詳細は「依存性の注入とは」をご覧ください。
サービスコンテナとはlaravel10.wordpress.com
依存性の注入とはlaravel10.wordpress.com
依存性の注入とはlaravel10.wordpress.com
- Laravel では、依存性の注入という概念を核としてフレームワークが作成されています。この概念を理解することが、Laravel を理解することへの近道になるかと思います。
そのほか
DBファサードとかがわかりやすくて裏がMySQLやPostgreSQLやSQL Serverが何になってても良くて使える便利ヘルパー群って感じっす。どの裏側の仕組み使うかは実行時にDIで決めます
— さぼ@ギークハウス沖縄 (@saboyutaka) 2018年9月27日
https://twitter.com/saboyutaka/status/1045334377972944897
https://twitter.com/saboyutaka/status/1045334377972944897
デザインパターンのそのままFacadeパターンの実装なんですけど、利用者は裏側を知る必要がない、という利点があるパターンす
— さぼ@ギークハウス沖縄 (@saboyutaka) 2018年9月27日
