Firebase SDKのimportでwarningが出るときは
import firebase from "firebase"
すると
It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.
とwarningが出る。
使うパッケージだけimportしろってことなので
import firebase from "firebase/app" import "firebase/auth" import "firebase/firestore"
使うやつだけimportするとwarningは出なくなる
これで解決しなかったら次のissueを参照
13インチ MBPに合わせてポータブルなモニタを買った
MBPを15インチから13インチに変えた影響で作業領域が若干せまくなりました。出先でやる気を出したいときに作業領域を広げたいので小さめなモニタを探しました。
いろいろ見た結果、購入したのはこれ。
- 出版社/メーカー: cocopar
- メディア: エレクトロニクス
- この商品を含むブログを見る
よさ
- type-c対応
- HDMI(mini)入力あり
- 13.3インチ
大きさはMBP13インチとほぼ一緒。
type-c対応で給電含めてケーブル1本で完結するのがとても良いところ。
HDMI(mini)入力があるのもよくて、type-cだけだと現状mac以外に使い道がなくなるので、HDMIでいろんな機器に使い回せるのは高評価ポイント。
あまり使わないけどスピーカーも内蔵してる。
スタンド
付属品のスタンドが若干重いので、代わりにプラ製のこれを持ち運んでる。
スマホ・タブレット用折りたたみ式 薄型 スタンド 角度調整可能 強化版(黒Black)
- 出版社/メーカー: 3Q forever
- メディア: エレクトロニクス
- この商品を含むブログを見る
ケース
画面保護用のケースが一切ついてないので、使わないときはエレコムの保護ケースに入れてる。ジャストサイズ。
ポケットがついてるのでtype-cケーブルとスタンドを入れてすっきり収納。
エレコム 保護ケース ノートPC 13.3インチワイド 衝撃吸収 ZEROSHOCK スリム(MacBook Pro 13インチ) 12.1/12.5/13/13.3インチ ZSB-IBUB02BK
- 出版社/メーカー: エレコム
- 発売日: 2012/07/13
- メディア: Personal Computers
- クリック: 1回
- この商品を含むブログを見る
ケーブル
type-c to type-c なケーブルは付属してないので、Ankerの50cmのやつを使ってる。MBP13インチの左側にモニタおいてMBP右側のtype-cにつなげる長さ。
Anker USB-C & USB-C Thunderbolt 3 ケーブル (50cm) 【PD対応 超高速 40Gbps 100W出力 USB2.0 / 3.0 / 3.1 対応】
- 出版社/メーカー: Anker
- メディア: Wireless Phone Accessory
- この商品を含むブログを見る
いいよ
この大きさ&重さであれば普通に持ち歩ける。ケーブルも1本で済む。
おすすめです。
vuex-connectでnamespacedなmoduleを使いやすくするヘルパーを作った
vuex-connectはVuexでReduxのconnect
のようにstoreとコンポーネントを繋ぐやつ。
コンポーネントとstoreを繋ぐ部分を切り離せて宣言的に書けて気に入ってる。mapState
とかVuexが用意してるやつ使わなくてもstoreの値を取り出せて注入できる。
namespacedなmoduleを繋ぐとき
たとえば次のようなstoreがあったとき
const store = new Vuex.Store({ state: { foo: 'foo', }, modules: { moduleName: { namespaced: true, state: { bar: 'bar', }, mutations: { barMutation(state, payload) { state.bar = payload }, }, actions: { barAction({ commit }, payload) { commit('barMutation', payload) }, }, getters: { barbar: state => state.bar + state.bar, }, }, }, })
vuex-connect
ではこう、関数で書いて階層たどってreturn。
import { connect } from 'vuex-connect' import MyComponent from './MyComponent' export default connect({ stateToProps: { foo: 'foo', bar: state => state.moduleName.bar, }, })(MyComponent)
mapXxxxxぽく書きたいからヘルパー作った
数が少なければいいんだけど多くなってくると毎回namespaceの階層まで記述するのめんどい、のでヘルパー関数作った。
import { connect } from 'vuex-connect' import { stateToProps } from 'vuex-connect-namespace-helper' import MyComponent from './MyComponent' export default connect({ stateToProps: { foo: 'foo', ...stateToProps('moduleName', { bar: 'bar', }), }, })(MyComponent)
mapXxxxx
とかと同じように1つ目の引数にnamespaceを指定、そのあとそのmoduleのlocal stateを指定する。
ヘルパーがやってるのは指定されたnamespaceとstate名をいい感じにマッピングして、moduleのstateを返す関数に変換してるだけ。
API
内部的にやってることはほぼ同じだけど一応わけてある。
helperFunction(namespace, options) -> Object
stateToProps
gettersToProps
mutationsToEvents
mutationsToProps
actionsToEvents
actionsToProps
vuex-connectおすすめ
VuexのmapXxxxx
を無計画に使ってるとつらみになりがちで
- storeと密結合になるから
mapXxxxx
をpresentationなコンポーネントには使いたくない - コンポーネントごとに小さなcontainerを都度作るのつらい
- pageレベルのcontainerにやらせると
mapXxxxx
が増えまくってつらい - コンポーネントの
$emit
をバケツリレーしてcontainerでmapMutations
とかした処理呼ぶのつらい
とかとか。
この辺りをスッと綺麗に書けるようになるので、Vuex使う人は一度試してみるのおすすめです。
starください。
デスク付きエアロバイクがいい感じ
デスク付きのエアロバイク FlexiSpot V9 を購入した。
FlexiSpot V9 (2018 CES Innovation Awards 受賞) フィットネスバイク エアロバイク スタンディングデスク 組み立て不要 無段階調整 移動と収納簡単 (ホワイト)
- 出版社/メーカー: Loctek Visual Technology Corp.
- メディア: その他
- この商品を含むブログを見る
運動できる環境がすぐそこに
家にデスクバイクがきたことで、運動しないことに言い訳ができなくなった。そのおかげで毎日運動するようになって、心身ともに整ってきたような実感がある。
運動しながら仕事してると、頭が冴えてきて集中力が増す気がする。リモートワークしてる人には特におすすめしたい。
値段見てたっかいなーと思ったけど、買ってよかったなと思えている。
家で仕事する人、最近ジム行けてないなって人、手軽に運動する環境が欲しいって人にはおすすめできる。
邪魔になったら売ればいいし、足を畳んでデスクを外せばめっちゃ小さい。
きっかけ
デスク付きバイクの存在を知ったきっかけは👇のレビュー記事。
購入の決め手は本体のスリムさと移動が楽なキャスター式なところ。
使用感
購入してからの3週間、ほぼ毎日のように仕事or遊びながら1時間以上は漕いでる。多い日は4時間くらい。
エアロバイクとしての安定感はばっちり。デスクの大きさも丁度よい。始めのほんの数分は漕いでることに意識を少しもっていかれるが、しばらく経つと漕いでるのを忘れる。
漕いで十数分してくると汗ばんできて、少し回転を早めに漕ぐとシャツが汗びっしょりになる。汗をかいたあとの風呂最高。
大きさ
デスク付きのバイク、調べてみるとそこそこの種類が世にはあった。中にはけっこう安いやつもある。ただそのほとんどが設置スペースとして狭くないスペースを必要とするのと、本体の移動が大変そうである。
FlexiSpot v9の地面に設置してるキャスター部分の辺を測ってみると横が55cm、縦が80cm程度。
決して小さくはないが部屋に置いてあってもそこまでの圧迫感はない。
キャスターによって簡単に移動できるので、気分によって向きを変えたり場所を変えたりしてる。
本体の幅はiPhone 6Sの縦幅より細い
デスクも十分な広さ
デスクの大きさは横50cm縦58cm程。パームレストというか肘置きみたいなのが5cm~8cm程度あるので縦で使えるのは50cm程。
写真はMacBook Pro 15インチ。macの横にマウスパッド置いてマウスでの操作も問題なくできた(漕ぎながらLoLやってみた)。
パームレストがあるので手の疲れが出にくいのがいい感じ。
このデスクは高さと縦方向の位置が調整できるので最適なポジションで作業できる。
本体にドリンクホルダーがあるが、漕いでると足に干渉することがあったので別途クリップ式のホルダーを購入した。
スタンディングデスクとしても使える
デスクの高さと縦方向の位置が調整できるので、スタンディングデスクとしても使える。家の中でスタンディングやろうとすると、棚の上とか箱を積んだりとかでめんどくさいので、この使い方は意外と便利。
室内でもシューズがあったほうが漕ぎやすい
機器のペダルは自転車と同じようなペダル。室内用にゴムのカバーが付属してるが、それでも漕ぐ時の安定感を考えるとランニングシューズの用なものがあるとよいと感じた。
高負荷では連続使用可能時間が短め
大きさを考えると仕方ないが、負荷を高めの設定にした場合、機器への負担が大きいため30分程度で一旦本体を休ませる必要があるのがすこし難点。ただめちゃくちゃ筋肉付けたいとかでなければ、8段階の4くらいの負荷で長めにやればよいかなと納得してる。
デスクバイクが来てからの変化
通ってたジムを解約した。
仕事の忙しさとか引っ越して距離が遠くなったとか色々理由つけて行かなくなりがちになっていた。それでも運動はしたいというモチベだけはあって、もういっそのこと家できっちり運動すればいいかと思うようになった。
Twitchでゲームの配信を見ながら漕ぐようなときは、両手が空いてる。そういうときはダンベルかチューブを使って上半身を動かすようにしてる。
これの影響か漕いでないときもウェイトとチューブでなるべく全身を動かすように努めるようになった。毎日筋トレしてると寝付きと寝起きがとてもよい💪
筋肉を増やしたいのでプロテインも毎回飲んでる。
これ美味しくておすすめ。今まで色々試したプロテインの中でもっとも味がよくてプロテインぽさがなかった。
チャンピオン ピュアホエイ プロテインスタック チョコレートブラウニー 2.27Kg [並行輸入品]
- 出版社/メーカー: チャンピオンニュートリション
- メディア: ヘルスケア&ケア用品
- この商品を含むブログを見る
ながら運動最高
ゲームばっかりしててもこれなら運動不足にならないぞ
デスクバイクが来てからの休日🚲🎮 pic.twitter.com/Bg2viaIR8m
— じまぐ (@nakajmg) 2018年4月15日
家に長時間いる人にはほんとおすすめ
Vueのバージョンアップの内容を追いかける方法
弊CodeGridにてVueの2.1から2.5で追加された機能からいくつかピックアップして解説した記事を書きました。
CodeGridで入門シリーズを連載したVue.js 2.0。その後のアップデートをおいかけ、特に注目したい機能を選んで解説します:キャッチアップ Vue.js - 2.1から2.5まで https://t.co/39bX3uXDpn #codegrid
— CodeGrid (@CodeGrid) April 19, 2018
どういった方法で更新を追うかについては触れていないので、ここに書いておきたいと思います。
ライブラリの更新を追う
こういった記事を書く書かないに関わらず、日頃から自分がよく使うライブラリ/フレームワークに関しては更新を追って追加された機能などを把握するようにしています。
更新を追うのは大事だと思っていますが、常日頃から意識して更新を追いかけてる人ばかりではないと思います。
そんな人でも、更新の追い方さえ知っておけば、ふと気が向いたときに差分をチェックできてすぐに追いつけるかと思います。
追い方
更新の情報はライブラリ/フレームワークによっていくつかのパターンがあります。
よくあるパターンとしてはGitHubのリポジトリの次の箇所にあるパターンです。
- releasesのノート
CHANGELOG.md
更新情報として何が書かれているかはリポジトリによりますが、追加した機能についてや、バグの修正について簡潔に書かれています。
また、オフィシャルブログのようなものを運営していて、そこで新しいバージョンの目玉機能などについて解説していることもあります。
基本的にはこれらの情報を見ておけば大まかにどのような変更があったのかを把握できます。変更の詳細については、紐付いているissueや、ドキュメントに追加された項目で確認します。
わかりづらい機能の場合は該当する機能のテストコードを見るのもオススメです。
Vueの場合
本題。
Vueの場合はreleasesのページにバージョンごとに細かく何が追加/修正されたかが一覧になっています。
おもな追加機能はマイナーバージョンが上がるときに追加されることが多いので、v2.x.yのxの数字が上がった箇所のリリースノートを見るとよいです。
稀にパッチバージョンで何らかの機能向上がある場合もあります。それを見つけるには、リリースノートのページで Improvements
というキーワードでページ内検索をかけると見つけやすいです。
ドキュメントから見つける
追加された機能については、公式ドキュメントに追加されています。
ページ内検索で 新規
というキーワードで探すと追加された機能を見つけられます。
英語ドキュメントの場合は New in
で。
Vueはドキュメントの更新もしっかりしているので、ドキュメントを見ておけば大丈夫なことが多いです。
おわりに
気が向いたときにでも更新を追いかけてみてください。
リリースノートやCHANGELOGには追加された機能だけでなく、バグの修正についても書かれています。
使っていて何か挙動が変だな?と思ったときは、パッチバージョンが上がって修正されていないか、もしくはissueが作られていないかなども合わせて確認するとよいかと思います。
WebStormでJestが設定ファイルを見てくれなくなったから設定した
WebStormのJest連携便利
WebStormはエディタの中でJestによるテストを走らせられる。テスト全体ではなく、テストケースごと(it
,test
)やdescribe
単位でも走らせられる。
(左のくるくる記号をクリックするとテストが走る)
テストケース増やしたときにそこだけ実行したりできてとても便利。
importのtransform
Jestはデフォルトでimport
を解釈できないので、package.json
かjest.config.js
とかの設定ファイルでtransformを指定することになる。
SyntaxError: Unexpected token import が出るようになった
WebStormを2018.1アップデートにしたら設定が変わったのかなんなのかわからんけどテストケース単体で走らせたときにimpot
を使ってるとこでエラーが出るようになった。
どうも単体でテストケースを実行した時のワーキングディレクトリがプロジェクトのルートディレクトリではなく、テストファイルのあるディレクトリになるように変更が入った雰囲気。
コンフィグファイルが参照できないのでtransformが出来ずエラーが出る状態。
Jestの設定を変える
探したらJestの設定がわかりづらいとこにあった。
npm scriptsの一覧の
歯車クリックして Edit npm Configurations
を選択
でてくる設定の左ペインからDefaults > Jest
を選択
この設定がデフォルトの設定として使われるので、Working directory
にプロジェクトルートのパスを指定。
これでテストケース単体で実行したときもこの設定が使われて、設定ファイルも見てくれるようになる。
VueコンポーネントのnameからCSSのクラスを付与するディレクティブを作ってみた
このSFCSSをやってくうえでクラス名を記述するのをなんとか楽できないか考えた。
この記事はその試行錯誤の軌跡である。
はじめに結論
コンポーネントのname
からクラス名を付与するディレクティブを作ってプラグインをnpmに公開したが、最終的には普通にせっせと書くのが一番ベターなのでは?というところに辿りついたというお話。
めんどくさポイント
命名規則によって命名の手間は減ったが、class
をフルで記述する必要があって変わらずめんどうだった。
<template> <div class="MyComponent"> <h1 class="MyComponent_Heading"> heading </h1> </div> </template> <script> export default { name: 'MyComponent', } </script> <style lang="scss" scoped> .MyComponent { &_Heading {} } </style>
name
をtemplate
で参照してなんとか楽をできないかと考えた。
コンポーネントのname
の参照
コンポーネントのname
につけた名前は、$options._componentTag
で参照できるので、:class
を使って次のように書ける
<template> <div :class="[$options._componentTag]"> <h1 :class="[`${$options._componentTag}_Heading`]"> heading </h1> </div> </template>
が、かなりめんどうだしむしろ手間が増えてるような…🙄
methodsに定義してmixinとか…?
じゃあクラス名を返すメソッドを定義してヘルパーっぽく。mixinにすれば共通化できるし…
<template> <div :class="[className()]"> <h1 :class="[className('_Heading')]"> heading </h1> </div> </template> <script> export default { name: 'MyComponent', methods: { className(childNode = '') { return `${this.$options._componentTag}${childNode}` } } } </script>
うーん微妙。:class="[className()]"
とか毎回書くのだるそう
ならばディレクティブだ
ディレクティブにしたらまだマシになりそう
<template> <div v-class-name> <h1 v-class-name="'_Heading'"> heading </h1> </div> </template> <script> function bindClassName(el, binding, vnode) { const componentName = vnode.context.$options._componentTag const className = `${componentName}${binding.value || ''}` if (el.className.indexOf(className) !== -1) return el.className = `${className}${el.className ? ' ' + el.className :''}` } export default { name: 'MyComponent', directives: { className: { bind: bindClassName, update: bindClassName, inserted: bindClassName, } } } </script>
ディレクティブに文字列として渡さないといけなくて"'_Heading'"
としないとならないのが癪に障るけど、それっぽさは出てる。
これがレンダリングされるとこうなる。
<div class="MyComponent"> <h1 class="MyComponent_Heading"> heading </h1> </div>
vue-class-nameプラグインとしてpublish
👆のやつをプラグインにしてnpmにpublishした。
使い方
インストール
npm i vue-class-name
import vClassName from 'v-class-name' import Vue from 'vue' Vue.use(vClassName)
<template> <div v-class-name> <h1 v-class-name="'_Heading'"> heading </h1> <div> </template> <script> export default { name: 'MyComponent', } </script>
:class
での動的なクラスの切り替えと親コンポーネントからのclass
のマージについては動作確認済み。
おわりに
なんとかならんかと試して、最終的にプラグインとして公開してみたものの、処理の内容的にどこかしらパフォーマンスに影響でそうで微妙だから自分で使わなそう🤔
宣言的に書くのがtemplate
の良いところだと思うので、めんどくさくてもCSSのクラス名は静的に書くのがベターなのではと思った。
おしまい