カレンダーコンポーネントを習得しておきたい
Vue.js周りの情報を整理していきたい
Vue.js
はじめに — Vue.js
これがないと始まらない
チートシート GitHub - vuejs-tips/cheatsheet: Vue.js 2.2 complete API cheatsheet
Vuex
Vuex とは何か? · Vuex
コンポーネント間を渡り歩くには必要（なんだと思う今のところ）
チートシート GitHub - vuejs-tips/vuex-cheatsheet: Vuex Complete API CheatSheet
Bootstrap
※脱出しようとしたりしなかったり・・・
Element-UI
コンポーネントライブラリ
テンプレートに宣言することなく次のようにメッセージ表示できる
this.$message({ type: 'success', message: 'Delete completed' });
455.86KBと重い Ver 1.4.6
コンポーネントはモバイル向けではない
Vue Material
Vue Material - Material Design for Vue.js
マテリアルコンポーネントフレームワーク
2017.10.26 Ver.0.81
Date Pickerがなくて残念。実装予定はありそう。
Vuetify
Vue.js 2 Material Component Framework | Vuetify.js
マテリアルコンポーネントフレームワーク
Vue Materialとよく似ている
Date Pickerもありチラ見の感触はよい。
Vue Materialから乗り換えるかも。
Firebase
Firebase
mBaaS（mobile backend as a Service）。
スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービス。
パブリックなサービスを簡単に展開できる。
- 認証まかせられるのは心強い（Google, Facebook, Twitter, GitHub, 匿名, パスワード）
- ストレージの同期が強み
- オフラインでも動作し、オンラインになったら同期される
- 無料枠も試用には十分ある
- Hostingも使いやすい。コマンド１つ。
- Functionsでサーバサイドも処理できる（無料プランではgoogle外通信はできない）
- ドキュメントページが重い。少し残念。
- 無料プランでも年間5回まで技術サポートが受けられる。ありがたい。
VueFire
GitHub - vuejs/vuefire: Firebase bindings for Vue.js
VuexFire
GitHub - posva/vuexfire: 🔥Firebase bindings for Vuex (Vue.js)
- Firebase database referenceをstateにバインドできる
- refを操作するとstateに反映してくれる
Nuxt.js
Nuxt.js - Universal Vue.js Applications
- Webpack/Babelの設定書く必要なし
- node.jsサーバを準備する必要なし
- *.vueファイルを書くだけでOK
- pagesディレクトリにファイル追加すると自動ルーティング
- ルートコンポーネント内のサーバデータに簡単アクセス
electron-vue
https://github.com/SimulatedGREG/electron-vue
vue-cliのテンプレート。
npm install -g vue-cli vue init simulatedgreg/electron-vue my-project
pugとstylusを加えて今のところ基本セット。
yarn add --dev pug pug-loader stylus stylus-loader
こちらもよく使う（だろう）（かもしれない）
yarn add lodash mkdirp moment rmdir
JavaScriptでAndroidなのかを判別する必要があるかもメモ
JavaScriptでiOS・Androidのバージョン判断 ref: http://qiita.com/devdyaya/items/406072f6ecd69b0a785f · GitHub
注記
ユーザエージェントを表す文字列を検出することに基づいたブラウザ識別は、信頼できないものであり、また、推奨されません。なぜなら、ユーザエージェントを表す文字列は、ユーザによって変更することができるからです。
厳格な判断というよりアプリケーションとして便宜的な判定として使うかもしれない。
npm パッケージ(Package)とモジュール(Module)
better-than-i-was-yesterday.com
パッケージは package.json によって記述されるファイルもしくはディレクトリ
モジュールは Node.js の require() によってロードされるファイルもしくはディレクトリ
Firebaseノート Cloud Functionsによる動的コンテンツ配信とキャシュによるパフォーマンス改善
要約
Cloud Functionsによる動的コンテンツ配信の基本
functions/index.js
firebase.json
キャッシュによるパフォーマンス改善
ヘッダー設定をする。単位は秒。
キャッシュが効くタイミングではパフォーマンスが改善されている。
max-ageとs-maxageの図解
テンプレートエンジンの利用とjson配信の例
ここでは
GitHub - tj/consolidate.js: Template engine consolidation library for node.js
というテンプレートエンジンを使っている。
データを取得して・・
ルートではテンプレートを使った応答。
ルートでstatic/index.htmlが応答しないよう削除している。
追記 Hostingでもヘッダー設定できる
Vue.js v-forにおけるFirebaseのデータオブジェクトの順序を制御する
問題
- Vue.jsのv-forにおけるオブジェクト展開は順序が保証されない
- Firebaseのデータはオブジェクトである
対応
- 配列に変換してビューへ流す
例
var snapToArray = function(snap){ var results = [] snap.forEach(a => { var item = a.val() item.key = a.key results.push(item) }) return results } firebase.database().ref().child('test').orderByChild('created').once('value', snap => { var results = snapToArray(snap) console.log(results) })
Firebaseからのデータ取得にてコールバックに渡されるスナップショットはval()するとデータであるオブジェクトを返す。
snap.val()
これをするとorderした順序も取得できない。
そこでスナップショットをforEachすることでorderされた順序でデータが展開できる。
Vue.jsは配列がメイン、Firebaseはオブジェクト。
んー・・こういうもの？
JavaScript 配列要素の書き換えしくじり
しくじり
items.forEach( item => { item = foo })
修正
items.forEach( (item, index, arr) => { arr[index] = foo })
