きみはねこみたいなにゃんにゃんなまほう

ねこもスクリプトをかくなり

Web

Material UI の AppBar と Drawer を自分好みに組み合わせる

半年ほどかけてようやく Material UI にも慣れてきました。AppBar と Drawer の組み合わせは昨今のアプリでは定番となっていますが、レスポンシブに Drawer の表示を切り替えようとすると、AppBar との色使いの兼ね合いで迷います。 モバイルなどの狭いスク…

React のテストは react-dom/test-utils から @testing-library/react に進むと理解しやすそう

lightbulbcat.hatenablog.com の続きです。React のテスト用ライブラリを色々試した結果 react-dom/test-utils をちょっと触った後で、 @testing-library/react を導入するといいんじゃないかなと思いました。学習順序的な話です。 react-dom/test-utils は …

enzyme と react-test-renderer と @testing-library/react を素朴に試す

React のテスト用ライブラリっていくつかある上に、それぞれサポートしている機能が違うんですよね。 ついでに提供されているメソッドや、メソッドチェーンの様式も様々なので、出来るだけ速やかに繰り返し実行できる環境で触りながら把握できると便利です。…

Reactコンポーネントのアンマウント後の更新を避けるために AbortController を使ってみる

これです。 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.…

React で Markdown を扱うときに便利な react-markdown と remove-markdown

Markdown 便利ですよね。使う側にとってはテキストベースでリッチコンテンツを表現できますし、開発者側にとってもアプリを実装する際に Markdown 対応さえしてしまえば、ある程度の表現力を確保できるとともに、XSS対応などもライブラリ側がしてくれている…

.vue ファイルには template を複数書けないのか

公式ドキュメント を読みながら template と v-if を合わせられることを知って以下のように書きました。 Vue の単一ファイルコンポーネントの書き方ですね。 <template v-if="loaded"> ここが表示されるのを待てども...(*˘꒳˘*) </template> <template v-else> いつまでたっても Now Loading...(*˘꒳˘*) </template> <script> // ... </script> <style scoped></style>…

CSS の position: sticky を試してみる

Material UI の ListSubHeader の sticky な振る舞いって、どう実装されているんだろうと覗いてみたら position: sticky とだけ書かれていて「こんなプロパティをブラウザがサポートする時代になったんだな」ということを今更知ったので試してみます。 本文…

dataloader を使ってリクエストを取りまとめる React デモを作る

以前 GraphQL を利用していたときに、サーバサイドのSQLリクエストを減らすために使おうとしていたパッケージに dataloader というものがあります。 現在は GraphQL ではなく gRPC-Web を利用したアプリを書いているのですが、dataloader は別に GraphQL に…

Material UI + TypeScript で withStyles (JSS) を型付きで使う

Material-UI を使い始めて数日が経ち、ようやくJSSの思想が飲み込めてきました。 当初の違和感もだんだん薄れ、今では(今のところは)確かに楽だよねという感覚になってきております。 今回は型定義についてです。 import * as React from 'react' import { c…

Material UI + TypeScript で Mixin を定義する

TypeScript + Materia UI でアプリを書いていて、テーマ関係のメソッドの中に createMixins というものを見つけたので使い方を調べてみました。 デフォルトの mixin といえば gutter くらいしかなくて、自分でも登録できたら色々使えそうだな...と思い、型定…

Wireshark でTLSの通信を読む

TLSの勉強中です。TLSの通信を眺めるにはやっぱりHTTPSだろうということで簡単なHTTPSサーバを立ててトラフィックを眺めてみたいと思います。『プロフェッショナルSSL/TLS』にも書かれていました。「一番良い方法は実際のパケットを見ることです」と。 下準…

GraphQL のため息

GraphQL とは一体何だったのか、半年ほど触れ続けていまだ掴みあぐねています。 やりたいことは分かる、が、どこに使えばいいのかわからない。 サービスに導入するとして、GraphQL で実装したい場所が見つからない。 夢は見せてくれたが、壮大な社会実験だっ…

GraphQL の Custom Directive について

(=˘ ꒳ ˘=) GraphQL のラストフロンティア Custom Directive にもそろそろ手を出してみたい... ここまで趣味で GraphQL のいろいろな要素を見てきました。 実行時のパラメータとして GraphQLSchema、queryString、rootValue、context、variables、 スキーマ…

GraphQL の色々なスキーマ表現について - GraphQL Schema Language や schema.json

(=˘ ꒳ ˘=) GraphQL のスキーマ表現いろいろ多すぎ... で Introspection について眺めたら GraphQL のスキーマ表現について整理できてきたのでまとめてみます。 GraphQL のスキーマ表現 GraphQL Schema Language GraphQL.js の GraphQLSchema Introspection …

GraphQL.js で Custom Scalars を定義する - まずは serialize から

(=˘ ꒳ ˘=) GraphQL.js の TypeScript の定義を眺めながらなんとなくな雰囲気で Custom Scalar を定義してみる ...GraphQL.js の GraphQLScalarType を使います。コンストラクタの引数は以下のようになっています。 export interface GraphQLScalarTypeConfig<TInternal, TExternal></tinternal,>…

GraphQL の Introspection について - schema.json って何だろう

(=˘ ꒳ ˘=) GraphQL を使っているとよく schema.json などと名付けられた JSON 形式のファイルを利用している例に突き当たる... この schema.json ってなんだろうというお話。 schema.json - Apollo の場合 GraphQL の Introspection Standard Introspection…

graphql-subscriptions を使ってみる - WebSocket に乗せてみる

(=˘ ꒳ ˘=) GraphQL の Subscriptions の道ってなんでこんなに険しいのか... import 地獄すぎる... の続きです。Adding Subscriptions To Schema | GraphQL Subscriptions Docs をベースに Subscription のハンズオンを行なっていきます。 今回は本当に最低…

GraphQL.js を直接使って Subscription を定義してみる

(=˘ ꒳ ˘=) Apollo が目につきやすい GraphQL 界隈だけどやっぱり GraphQL の生の鼓動を感じたい... lightbulbcat.hatenablog.com の続きです。GraphQL.js のコードの中に Subscription についての処理が書かれているのを見つけたので、今回は subscribe メ…

graphql-subscription を使ってみる - まず PubSub って何

apollographql/graphql-subscriptions を使ってみたくて README の通りのコードを書いて理解しようと思ったのですが、PubSub やら AsyncIterator やら軽く聞いたことはあるもののよく理解していない用語だらけでちんぷんかんぷんでした。なので GraphQL の r…

GraphQL.org から Subscription に関する情報を追いかけてみる

(=˘ ꒳ ˘=) GraphQL では Query と Mutation 以外にもう一つ、Subscription というものが使えるらしい... ...という噂を聞いてはいたのですが別に Query と Mutation だけでもある程度の機能は実現できるしいいやと思いながらここまでやってきました。でもや…

GraphQL.js の graphql で使われる引数(variables, context) の動作を確認する

(=˘ ꒳ ˘=) GraphQL って「何をするもの」であって「どう実装される」想定のものなのか、まだなんかよくわからない... 少し前に graphcool-framework がオープンソース化しましたし、そういうのを見ればベストプラクティスのようなものをトップダウンに得ら…

graphql を実行しながら GraphQLSchema と resolver、rootValue まわりの評価の仕組みを考える

lightbulbcat.hatenablog.com の続きです。前回は graphql と graphql-tools について、結構な量のメソッドやクラスを駆け足で読み解きながら、なんとなく GraphQL 界隈のパッケージの局所像を掴んだのでした。 今回はもう少しまったりと graphql パッケージ…

GraphQL の主要ライブラリと resolver、schema、rootValue についてざらっと眺めてみる

(=˘ ꒳ ˘=) resolver と rootValue って何が違うんだろう... makeExecutableSchema って何なんだろう... ...な記憶も新しく、むしろ現在進行形で混乱中ですが、めげずに公式サイト等眺めながら理解を進めていきたいと思います。 GraphQL 系パッケージまとめ …

GraphQL + Express の基本的なライブラリまとめ

例えば 「Express で GraphQL のHTTPサーバを立てる」として、いざネットでサンプルを探してみると graphql で express なパッケージって結構な種類を見かける気がするんですよね。 今まで特に違いを意識せずにサンプルコードからのコピペで済ませていたので…