第8回コベチケの会

コベリンの最近の取り組みとして、業務などで役立ちそうな知見を共有する会を開催することになりました。 そのついでに発表に使ったアジェンダもそのまま公開してしまおうという豪快な企画です。

※ アジェンダをそのままコピペして公開したものなので若干見にくい箇所もあるかもしれませんが、ご了承ください。

Chrome DevTools のノウハウ by mironal

これの Console タブで色々する.

image.png (41.1 kB)

Element を簡単に取得する

Elements タブで取得したい要素を選択すると $0 という変数に勝手に入る.

image.png (18.9 kB)

こうやって参照できる.

image.png (7.1 kB)

Selector を取得

任意の要素を選んで右クリックでコピーできる. ちょっといじって document.querySelectorしたりする.

image.png (315.0 kB)

結果をあれこれ

Spreadsheet に貼り付けて使いたいときは csv より tsv

なんかデータを作って CSV で出力したとする.

const data = [
  {name: "name1", value: 0},
  {name: "name2", value: 10},
  {name: "name3", value: 1000},
]

console.log(
  data.map( d => [d.name, d.value].join(",")).join("\n")
)
/*
name1,0
name2,10
name3,1000
*/

image.png (40.3 kB)

これを Sparedsheet に貼り付けるとこうなる. 悲しい. テキストを列に分割 の作業が必要.

image.png (14.8 kB)

一方 TSV で吐き出すと.

console.log(
  data.map( d => [d.name, d.value].join("\t")).join("\n")
)

こうなる. 嬉しい.

image.png (18.1 kB)

コピペめんどくさい

さっきみたいに console.log で DevTool に出力するとコピペが面倒.

そういうときは copy 関数を使うと、勝手にクリップボードに入る.

copy(
  data.map( d => [d.name, d.value].join("\t")).join("\n")
)

image.png (14.6 kB)

文字列じゃなくてもオブジェクトをそのまま入れたりもできるから、 JSON とかそのままクリップボードにコピーすることもできる.

image.png (29.2 kB)

この辺見ると色々ある: https://developer.chrome.com/docs/devtools/console/utilities/

まとめ

Dev Tool のちょっと便利なよく使う機能を紹介. 他にも色々あるので chrome dev tools 便利 みたいにググると色々出てくる.

フロントエンド開発のときは絶対便利だし、バックエンドで nodejs 使ってるときもサクッと js の動作確認したいときに便利. node 立ち上げてもいいけどね...

お家で楽しめるミニアクアリウム(立ち上げにかかった金額) @takkumattsu

コロナ禍で緊急事態宣言が出ていて外に遊びに行きにくい日々が続いているのでお家で楽しめるアクアリウムに手を出してみました!

今はミナミヌマエビを3匹入れて飼っています。

ちなみにコンセプトはデスクの上で楽しめる小さな水槽です。

立ち上げにかかった金額

今日は自分が揃えたアクアリウム道具一式がどれくらいかかった紹介していきたいと思います。

ずばり

合計 19,403円


結構たけぇw

詳細はこんな感じです!

結構高い道具(スプリングシザーやピンセット)を買ってしまっているのでこの辺を100均のもので始めるともう6,000円くらい安く抑えられると思います。

まとめ

個人的にはレイアウトをどうするかだけでも無限に悩めるので家で楽しめる趣味としてはかなりオススメできると思います!
15cm × 15cm × 17cm なので場所をとらず楽しめるのもオススメポイント!

実際立ち上げてみての費用を出してみたので初めて見たい人の参考になるといいなと思ってまとめてみました!

コロナ禍を楽しく過ごせますように!