ひと夏の技術

"is" is なに…

この"is"というキーワード、ググラビリティがめちゃくちゃ低くてどうググったらいいかわからないし、ググってもあんまりそれっぽいのがヒットしなくて困る。

What is this "is" keyword?

という気持ちになる。isがゲシュタルト崩壊。

"is"は型の絞り込みができる便利なやつです

結論しか書けないけど、type guardに便利な型。

挙動についてはシンプルなものは以下のような振る舞いになる

const isString = (arg: any): arg is string => typeof arg === "string"; const foo = 'foo' as any // ここではanyとして振る舞いたまえ if (isString(foo)) { // isStringの結果、arg is string = foo is string = fooはstring型であることが確定している foo.length // fooをas anyしたけどfooはstringとして解釈される }

このような挙動になる。

参考情報

本件の"is"は演算子とかのページには書かれていなくて、type guard の項目にしれっと書かれている…~~こんなの見つけられるわけないジャン……~~

あるいはスタックオーバーフローのこのスレが一番わかりやすい(このブログよりもね)

まとめ

"is"は型の絞り込みができる

ランタイム時にエラーが起こるコードを未然に防げる可能性が上がる
型が確定するので書き味がよい

型が自然言語だからわかりやすい

TypeGuardする場面で使っていくといいという話。

スタックオーバーフローのリンク先のほうがコード例わかりやすい気がしてきたのでみなさん最後にこんなこと言ってアレなんですが、スタックオーバーフローのほうも読みましょう😅

Kyoto.js 15に参加した。

発表枠で応募してLT枠という形で出た。けど5分じゃなくだいたい10分位というざっくりした感じで喋った。たぶん10分位で喋れてたと思う(計るの忘れてた)。

しゃべった内容

CSS in JSと書いてから気づいたけど主語が大きすぎると思って会場で訂正した……CSS in JSってめっちゃある……

それで僕が想定しているというか動作確認しているのはReactでstyled-componentsとかemotionを使うとき…なので会場ではそう訂正させて頂いた。

なんかよくわからない止まってるスライドは会場で動画でデモを流していたスライド。speakerdeckにアップロードしているPDFには動画埋め込みはできないので割愛ということで🙏

リポジトリです

github.com

npmにもパブリッシュ済みなのでスライドの通り

yarn add @1natsu/handy-media-queryで入ります。

正直v1は完璧は求めずとりあえず作ってみるか〜という気持ちで作っていて圧倒的API不足…widthベースの3つのメソッドしかない。

v2のアップデートでもうちょいメソッド足してうまい具合にできたらな〜と思っている。

感想

Kyoto.jsはじめて参加したけど、楽しい会だった。いい具合にのんびりしていてよかった。

会場のディスプレイでどういう具合にスライドが映って見えるかわからなかったから「これくらいなら見えるかな〜」と思ってスライド作ったけど、実際は想定よりコードが小さく映ってしまって見にくかったのは非常に申し訳なかった。

次回からはもっとコードも大きい文字にしていきたい。

懇親会では発表内容についてReact書いてる人たちから共感の感想をいただけてよかった。「便利そう〜」とか「イレギュラーなメディアクエリわかる〜」とか「テンプレートリテラル内なのでたしかに〜」など。自分の気持ちとアプローチが独りよがりじゃなかった実感が得られて助かりがあった。

あとインターネットのひとと知り合いになれてよかった。

開催ありがとうございました。

会場ではサラッと言いましたがいまほぼ無なのでいいお話や縁談を歓迎しています。