わいの日記

ありがちエンジニアブログ

Vuetifyの便利機能

デザインわからん

私はデザインが苦手で、
テーマカラーとか色の組み合わせなんていい感じにできた試しがありません

そんな時はVuetifyのTheme generator

vuetifyjs.com

テーマカラーを実際のコンポーネントに当てはめて確認しながら決められます

f:id:exhikkii:20181001001011p:plain


色を決定したらexport themeで色をコード化できます

f:id:exhikkii:20181001001142p:plain

2パターンで表示できる
f:id:exhikkii:20181001001146p:plain

でも、そもそも色の組み合わせがわからん

そんな時はCoolorsですね

coolors.co

このサイトはいい感じな色の組み合わせを提案してくれます
f:id:exhikkii:20181001001443p:plain

もちろん提案してくれたものを細かくカスタマイズすることも可能です

f:id:exhikkii:20181001001440p:plain


どっちも本当に重宝します


デザイン(コーディングも)しっかり勉強しないと。。。


Atomic Designって本買ったから時間見つけて読まなきゃ

『Clean Architecture』を読んだよ

名著

特に響いた1節をネタバレにならない程度にいくつか紹介します

第4章
「テストによってプログラムが正しくないことは証明できるが、プログラムが正しいことは証明できないのである。」
ポパーだね
すごくしっくりきた

第5章
Object Orientedとはソフトウェアアーキテクトの観点からすると、
ポリモーフィズムを使用することで、システムにあるすべてのソースコードの依存関係を絶対的に制御する能力」
この章あたりから依存関係の方向だとかがキーワードになってきた

第7章
単一責任の原則(SRP)
「モジュールはたった一つのアクター(変更を望む人たちをまとめたグループ)に対して責任を負うべきである」
SRPを誤認識していたのがわかった
とても目から鱗

第11章

  • 変化しやすい具象クラスを参照しない
  • 変化しやすい具象クラスを継承しない
  • 具象関数をオーバーライドしない
  • 変化しやすい具象を名指しで参照しない

ここは本当に反省反省の内容だった


読みやすいし、とても勉強になるからおすすめです


JavaScript DOMをたくさん追加する際にはcreateDocumentFragmentを使う

JSのtips

JavaScriptでcreateElementしてそれをレンダリングすることって結構あると思います
1つのDOMを追加するならともかく、複数のDOMをそれぞれ追加するのは、
毎回DOMツリーにアクセスすることになったり、
DOMの位置計算など起こるので、
パフォーマンスを 考慮すると避けたい所です

そこでDOMをたくさん追加する際にはcreateDocumentFragmentを使うといい感じです

developer.mozilla.org

めっちゃざっくり言うと、
DOMの塊を作成して、それをまとめてDOMツリーに追加するって感じですね


簡単な使用例を用意しておきました
jsfiddle.net

何かの参考になれば幸いです

appendChildの注意点

今回は生のJavaScriptのtipsを

タイトルの通り、appendChildについて

デモをjsfiddleで作成しておきました

jsfiddle.net


パッと見、
コードを見ると両方のdivタグにparaが表示されそうじゃないですか?

結果はでも通りで
2つ目のdivタグ内にしか表示されていないですよね

mozillaで挙動を確認すると、

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます(他のノードに追加する前にそのノードを親ノードから削除する必要はありません)。

つまり今回の例でいうと、
forEach内では
1つ目のdivにちゃんとnodeを追加したが、
次のループで、すでに追加しようとしたnodeがdocumentがあるので
その既存のnode(1つ目のdivに追加されたもの)を2つ目のdivに移動した
その結果、1つ目のdivには表示されなく、2つ目のdivのみに表示されたということですね

developer.mozilla.org


個人的に落とし穴になりそうなポイントだと思っています

Cloud AceさんのGCP公式トレーニングに参加してきたよ

自費☆参加

独立してお給料高くなるのは、
そのうちの幾らかは自己投資に回すためだと思っている

背景として、
今参画しているプロジェクトで
GAE、cloud function、pub/subなどを使う必要が出てきた
けどGCP全く知らん
せっかくやししっかり勉強しよう!
って感じです


今回はここに参加してきたよ

https://www.cloud-ace.jp/gcp-training_course/detail01/

概要を知るためのコースかな

アジェンダは下記の通り

各テーマについて説明があって、
簡単なミニテストがあって、
実際に手を動かしてみるという感じ

ところどころ、
テキストが古くて、実際のコンソール画面と乖離があって躊躇した
有料コースなんだから、そこらへんはしっかりしといて欲しかったな

app engineとかDatastoreは,
AWSでいうとこのあれかなみたいな感じでついていけたけど、
ネットワークとか機械学習あたりはきつかったよ

GCPをざっと俯瞰できて楽しかった

これとかも参加したいな〜
高い。。。
https://www.cloud-ace.jp/gcp-training_course/detail03/