hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

チューブの思い出

冷蔵庫の奥のほうを改めたところ，チューブのわさび，にんにく，しょうがやからしなど，それぞれ3本ずつくらいの勢いで発掘されて，全部賞味期限切れてたので全部捨てた．

刺身をやるときとか，わさびがほしいときに家に帰ってわさびがないとめちゃくちゃつらい，ゆえに，守りの姿勢に入ってしまい，あるかわからないときに，ひとまず買って帰ってしまう．

僕はわさび大好きで，調子いいと数回くらいで使い切ってしまうので，あるかないか覚えておくのが難しい．

シーズン・イン・ザ・サン

シーズン・イン・ザ・サン

  • TUBE
  • J-Pop
  • ¥250

 

ネットプリント

実家に帰ったところ，よく行く写真屋さんがつぶれたので，ネットで写真を印刷したい，とのことだったので，がんばってやっていた．まず手頃な写真印刷するサービスを探して(この時点でまともなのを選ぶのが難しい)，そこでアカウントを取って(これも難しい)，80枚くらい印刷したいので，iPhotoで80枚選択して(難しい)，アップロードするのを待って，その後クレジットカードを入れたりしたらできた，けどうちの親には難しそうだった．Safariを使っていて，指2本でひゅってやると前のページに戻ってしまったりして，戻って進んだらアップロードした写真が消えたりしていて過酷だった．僕はインターネット大好きだから使えたけど，世間の人たちはこんなの使えているのか??

FlowとjQueryをあわせて使うときいろいろハマった

新しく書くコードにはflowtypeで型をつけたり，既存のコードにもちょっとずつ型をつけたりしている．
jQueryのオブジェクトを引数として受け取るときに型をつけるのが難しくて，しばらくハマっていた．けどできた．

  • flow-typedにない
    • 探してみるとなくて，typoしてないか3回くらい見た
% $(yarn bin)/flow-typed search jquery
No definitions found, sorry!


ざっくり書くとこんなかんじで書いたら動くようになった．変な間違いかたをしているとき，エラーメッセージを見ると，JQueryじゃなくて，JQueryStaticかな?とかいろいろ思ってしまうけど，JQueryが正しい．

// @flow

const getText = ($element: JQuery): string => {
  return $element.text();
};

module.exports = getText;

querySelectorAllしてmapしたいとき[...すると短い

表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある．

NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ．

Array.prototype.slice.callする

オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い．

Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href)

[].slice.callする

Array.prototypeのかわりに[]で書く．ちょっと短い．

[].slice.call(document.querySelectorAll('a')).map(a => a.href)

Array.fromする

最近はこれで書けると教えてもらった．[].sliceと文字数変わらないけど，こちらのほうが宣言的な気がする．

Array.from(document.querySelectorAll('a')).map(a => a.href)

Array.from() メソッドは、配列型 (array-like) オブジェクトや反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。
Array.from() - JavaScript | MDN

[…する

スプレッド演算子を使った巧みな技．プロダクションのコードで使うことはなさそうだけど，デベロッパツールでちょっと書くくらいならこれが一番短くてよさそう．

[...document.querySelectorAll('a')].map(a => a.href)

developer.mozilla.org

調べたら同じような話題がstackoverflowで展開されていた．2010年の質問だけど，2015年になって，ES6ならこう書けるって回答がついていておもしろい．

stackoverflow.com

追記： $$

デベロッパツールではdocument.querySelectorAllは$$で呼べて，かつ返り値をArrayに変換してくれているので，直接map呼べるらしい．上記いろんな工夫は全くもって不要だった…

$$('a').map(a => a.href)

Arrayに変換してくれることはドキュメントに載ってないけど，たしかに返り値はArrayになっていた．

$$(selector) は、指定された CSS セレクターに一致する要素の配列を返します。このコマンドは、document.querySelectorAll() の呼び出しと同じです。
コマンドライン API リファレンス  |  Web  |  Google Developers

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

devtoolで書くなら、document.querySelectorAllはさらに$$に置き換えられそう / 最近のブラウザだとNodeListにmapとか生えてそう => mapはなくてforEachだけだった。($$はNodeListをArrayにしてくれてて勘違いしてしまった)

2017/04/19 12:19

追記(2): 最初からmap呼べばよい

いちどArrayに変換する必要はなくて，[].map.callにNodeListと関数を渡せばよい，というのも教えてもらった．たしかに．

[].map.call(document.querySelectorAll('a'), a => a.href)
querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

アロー関数の存在をすっかり忘れていた(そっち！？)functionもreturnも省略できて楽だわー / 1,2番目の記法だとsliceするのは冗長。 [].map.call(document.querySelectorAll('a'), a => a.href) でOKです。

2017/04/19 13:04

追記(3): Array.fromの第二引数にmapFn渡せる

Array.fromに関数を渡すとmapしてくれるらしい．ふつうにドキュメントに書いてあったのでちゃんと読もう，という気になりました……

Array.from(document.querySelectorAll('a'), a => a.href)

mapFn
任意。配列のすべての要素に対して呼び出される Map 関数。
Array.from() - JavaScript | MDN

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

Array.fromの第二引数にコールバック関数を書いても良いのよ？（個人的にはそれなりに短く、分かり易い記述になるので好き）

2017/04/21 09:40

鼻焼いた

最近よく鼻血が出ていて，2日に1回くらい顔洗うと鼻血が出てびっくりしていた．

今日も会社で鼻かんだら血がダラダラ出て，鼻血が出ましたってSlackで上司に報告したりして，ふつうに困っていた．

耳鼻科に行ったところ，たしかによく切れそうな形をしているので，焼いて治療しましょうとなった．

鼻に麻酔をひたした綿を詰めてしばらく待って，鼻の中に注射して麻酔して，はんだごてみたいなやつで焼く．

おもしろいのが，椅子に電極パッドみたいなのが敷いてあって，それを踏んで座った上ではんだごてみたいのを鼻の中を触れると，尻から通電して鼻が焼ける．こてとパッドを逆にすると鼻から通電して尻が焼けそうなので怖い気がする．

火傷みたいになって，2週間くらいで治る，とのこと．怖い．怖いけど鼻血がダラダラ出ながら仕事してるほうが怖いので安心．