JavaScript
Node.jsの % node > > > f = () => { ... ... return 'hello' ... } [Function: f] > > のような出力を、スクリプト行の > を外し、評価行をコメントアウトして、JavaScriptとして実行可能な形式にする。 記事をまとめるときに使いたくて作った。 cat <<'EOF…
半年ほどかけてようやく Material UI にも慣れてきました。AppBar と Drawer の組み合わせは昨今のアプリでは定番となっていますが、レスポンシブに Drawer の表示を切り替えようとすると、AppBar との色使いの兼ね合いで迷います。 モバイルなどの狭いスク…
lightbulbcat.hatenablog.com の続きです。React のテスト用ライブラリを色々試した結果 react-dom/test-utils をちょっと触った後で、 @testing-library/react を導入するといいんじゃないかなと思いました。学習順序的な話です。 react-dom/test-utils は …
React のテスト用ライブラリっていくつかある上に、それぞれサポートしている機能が違うんですよね。 ついでに提供されているメソッドや、メソッドチェーンの様式も様々なので、出来るだけ速やかに繰り返し実行できる環境で触りながら把握できると便利です。…
これです。 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.…
Markdown 便利ですよね。使う側にとってはテキストベースでリッチコンテンツを表現できますし、開発者側にとってもアプリを実装する際に Markdown 対応さえしてしまえば、ある程度の表現力を確保できるとともに、XSS対応などもライブラリ側がしてくれている…
useEffect と useState を組み合わせた Hook を作成しようとしたのですが、動作のタイミングが今ひとつわからずうまく処理が噛み合わない Hook ができてしまったので、簡単な例で挙動を探っていきます。 色々試してみましたが、結局よくわかりませんでした。…
最近 React のちょっとした挙動を確認するために crate-react-app でプロジェクトを作成することが多くなりました。; いらない派の私としては生成されたファイルをそのまま使いたくないので、毎回 Prettier を適用するために .prettierrc をプロジェクトルー…
Formik のフォームの値を localStorage に保存しておくライブラリとして formik-persist というものがありますが、ReactRouter でページ遷移した際に値がうまく切り替わらなかったので自前で Hook を組んで何とか実装してみます。 経緯としては以下の通りで…
React で Cross-Cutting-Concern の文脈で語られ比較されるものと言えば HOC と RenderProp と Hook ですね。 Higher-Order Components – React Render Props – React Hooks at a Glance – React 実際に開発を行っているとライブラリから提供される機能がそ…
Hyperapp を始めようとしたら Parcel という Webpack がシンプルになったようなツールがあるのを知り、バンドルされたコードを見てみたら var _hyperapp = require("hyperapp"); (0, _hyperapp.app)({ view: function view(state) { return (0, _hyperapp.h)…
公式ドキュメント を読みながら template と v-if を合わせられることを知って以下のように書きました。 Vue の単一ファイルコンポーネントの書き方ですね。 <template v-if="loaded"> ここが表示されるのを待てども...(*˘꒳˘*) </template> <template v-else> いつまでたっても Now Loading...(*˘꒳˘*) </template> <script> // ... </script> <style scoped></style>…
以前 GraphQL を利用していたときに、サーバサイドのSQLリクエストを減らすために使おうとしていたパッケージに dataloader というものがあります。 現在は GraphQL ではなく gRPC-Web を利用したアプリを書いているのですが、dataloader は別に GraphQL に…
Redux + TypeScript の検証作業で疲弊していたところで react-redux-typescript-guide を読んだら思ったより色々まとまっていて、検証のモチベーションがちょっと高まりました、という感想文です。 現在 Redux + TypeScript でアプリを作ろうと色々調べてい…
最近 Redux に手を伸ばし始めました。JavaScript で経験を積まずにいきなり TypeScript から始めたせいか無駄に試行錯誤したりハマっている気がしますが、めげずに界隈の状況把握から進めていきたいと思います。 今回は主に typesafe-actions と typescript-…
React を触り始めて 1 年くらい経過しましたが、始めの頃はモジュールのファイル名の命名規則がよくわからなくて迷走していたのをふと思い出しました。 例えば「load data」の 2 語からなるファイル名を考えると、以下 の 3 パターンが考えられます。 load-d…
Material-UI を使い始めて数日が経ち、ようやくJSSの思想が飲み込めてきました。 当初の違和感もだんだん薄れ、今では(今のところは)確かに楽だよねという感覚になってきております。 今回は型定義についてです。 import * as React from 'react' import { c…
TypeScript + Materia UI でアプリを書いていて、テーマ関係のメソッドの中に createMixins というものを見つけたので使い方を調べてみました。 デフォルトの mixin といえば gutter くらいしかなくて、自分でも登録できたら色々使えそうだな...と思い、型定…
graphql-tools の makeExecutableSchema のコードを読んでいて commentDescription なる項目が気になり、さらに utilities/buildASTSchema.js を見ていて export type BuildSchemaOptions = { ...GraphQLSchemaValidationOptions, /** * Descriptions are de…
Schema directives | GraphQL Tools によると graphql-tools の makeExecutableSchema で Directive を実装できるようなので 簡易的な認可ロジックを実装してみます。 あくまで Directive のハンズオンなので認可ロジックはとても簡単なものです。 認証情報…
(=˘ ꒳ ˘=) GraphQL Schema Language 内で Directive を定義する方法を探していたのですが、公式にドキュメントが見つからなかったのでメモしておきます... directive @myDirective(age: Int) on FIELD のように Directive を定義できるようです。 import { …
(=˘ ꒳ ˘=) GraphQL のラストフロンティア Custom Directive にもそろそろ手を出してみたい... ここまで趣味で GraphQL のいろいろな要素を見てきました。 実行時のパラメータとして GraphQLSchema、queryString、rootValue、context、variables、 スキーマ…
(=˘ ꒳ ˘=) GraphQL のスキーマ表現いろいろ多すぎ... で Introspection について眺めたら GraphQL のスキーマ表現について整理できてきたのでまとめてみます。 GraphQL のスキーマ表現 GraphQL Schema Language GraphQL.js の GraphQLSchema Introspection …
(=˘ ꒳ ˘=) GraphQL.js の TypeScript の定義を眺めながらなんとなくな雰囲気で Custom Scalar を定義してみる ...GraphQL.js の GraphQLScalarType を使います。コンストラクタの引数は以下のようになっています。 export interface GraphQLScalarTypeConfig<TInternal, TExternal></tinternal,>…
(=˘ ꒳ ˘=) GraphQL を使っているとよく schema.json などと名付けられた JSON 形式のファイルを利用している例に突き当たる... この schema.json ってなんだろうというお話。 schema.json - Apollo の場合 GraphQL の Introspection Standard Introspection…
(=˘ ꒳ ˘=) GraphQL の Subscriptions の道ってなんでこんなに険しいのか... import 地獄すぎる... の続きです。Adding Subscriptions To Schema | GraphQL Subscriptions Docs をベースに Subscription のハンズオンを行なっていきます。 今回は本当に最低…
(=˘ ꒳ ˘=) 最近 Async Iterator ってなんじゃらほいで理解がストップすることが多い... ...あたりの投稿で Async Iterator についてちゃんと理解したいと思ったので、主にMDNをソースにお勉強していきます。 Symbol について Iterator について Iterable Pr…
(=˘ ꒳ ˘=) Apollo が目につきやすい GraphQL 界隈だけどやっぱり GraphQL の生の鼓動を感じたい... lightbulbcat.hatenablog.com の続きです。GraphQL.js のコードの中に Subscription についての処理が書かれているのを見つけたので、今回は subscribe メ…
apollographql/graphql-subscriptions を使ってみたくて README の通りのコードを書いて理解しようと思ったのですが、PubSub やら AsyncIterator やら軽く聞いたことはあるもののよく理解していない用語だらけでちんぷんかんぷんでした。なので GraphQL の r…
(=˘ ꒳ ˘=) GraphQL では Query と Mutation 以外にもう一つ、Subscription というものが使えるらしい... ...という噂を聞いてはいたのですが別に Query と Mutation だけでもある程度の機能は実現できるしいいやと思いながらここまでやってきました。でもや…
