Posts List

Cycle.jsでReactのPortalっぽいことをしたい

気付いたらクリスマスの夜なんですけどどういうことですか(困惑)。最近クリスマス = 平日なので一切特別感がなかったんですが、久々に休日がクリスマスになって特別感ありますね?(疑問) ちょっとCycle.jsと長い戦いを繰り広げていますが、その中で一個やりたいことが多分できたので、軽いネタとして紹介します。 Portalとは? もしかしたらPortalってなによ?という方もいらっしゃるかもしれないので紹介しておきます。私が知る限りこいつを一般的に広めたのはReact.jsだと思います。 さっと探してみたりはしたんですが、2017年くらいのStackoverflowでReactのportalの話題があるくらいなので、コンポーネントライブラリとしてこういうのを追加したのはReact.js・・・で合ってるのかな? https://reactjs.org/docs/portals.html#gatsby-focus-wrapper 詳しくは上記の公式ドキュメントが詳しいですが、要はよくあるモーダルダイアログ、つまりは 全体の上に表示されないといけないもの を実装するということをシンプルにしてくれるやつです。上記のサンプルがClass baseなコンポーネントなのは結構古いままなんだろうか? Portalが使えるうれしさとは 例えばですが、↓みたいな構造のHTMLになってて、モーダルは #modal-root ってことに出したいよ・・・っていうことを考えます。 <html> <body> <div id="root"> <!-- ここがアプリケーションのルート --> </div> <div id="modal-root"> <!-- ここにモーダルとか出したい --> </div> </body> </html> よくある、フッターをクリックしたらデザインされたconfirmationを出したい・・・ってのがありますが、React.jsで普通にそれをやろうとすると、結構しんどいです。また、モーダルも大抵はコンポーネントとして作成すると思いますが、それらのモーダルに対してpropsを渡すとき、基本的には 表示するという主体を実行したいコンポーネントの中 にモーダルを宣言したくなります。が、普通にやると、それをやってしまうと overflow:hidden とか諸々にひっかかって悲しいことになることがよくあります。 Portalは、 Componentみたいに扱えるけど、Componentとか違うところにレンダリングする ということそのものをやってくれます。この恩恵はReact.jsにおいては結構大きいと思います。これがないと、外部のstateを利用しない限り、こういった出しわけができないですし。最近のReactが強烈に推し進めている、Functional Componentの上でも重要な機能だと思います。 Cycle.jsでPortalを作ってみる Cycle.jsでは、副作用はdriverとして 扱わなければならない というのがルールです。PortalはDOMを扱うので、自然とdriverになります。 とりあえずの実装は以下のようになりました。解説は後で。 import { Driver } from "@cycle/run"; import { Stream } from "xstream"; import { VNode } from "snabbdom"; import { IsolateableSource } from "@cycle/isolate"; import { div, MainDOMSource, makeDOMDriver } from "@cycle/dom"; // Portalが受け取る = コンポーネントから渡されるSink export interface PortalSink { [k: string]: VNode; } // Portalが返す = コンポーネントが受け取るSource // isolateで諸々区別したいので、IsolateableSourceを継承している export interface PortalSource extends IsolateableSource { DOM: MainDOMSource; isolateSource(source: PortalSource, scope: string): PortalSource; isolateSink(sink: Stream<PortalSink>, scope: string): Stream<PortalSink>; } // Sourceの実装 class PortalSourceImpl implements PortalSource { public DOM: MainDOMSource; constructor(private _rootDOM: MainDOMSource, private _rootSelector: string, private scopes: string[]) { this.

Cypressのcomponent testをcycle.jsのコンポーネントでも使えるようにしてみた

あれ?もう12月?ってくらいに早く一ヶ月が過ぎていきました。もう師走ですね。 最近Cypressを色々触り初めているのですが、その中でcycle.jsのコンポーネントテストもできるようにしてみました。

JIRAの課題を依存関係で表示できるツールを作ってみた

気付いたら11月です。すっかり夜の帳が下りるのが早くなって、もう年末かねというくらいには相変わらず時間がマッハで過ぎていきます。 さて、なんだかんだ二ヶ月くらい細々と作ってましたが、大体形になったのでちょっと書いてみようかと思います。

CDKで構築したAPI GatewayにAPI keyを使うようにしたい

三連休が二回あるというのはいいなぁと思うものの、仕事できる日数が減るということもまた事実。ずっと仕事していたいというワーカホリックではないと思ってますが、意外とコミットしたい場合に時間が使えないというのは、それはそれでストレスです。 今回は、CDKでAPI Gatewayを作ったとき、API keyをどうやってやればいいんだこれ・・・ってなったのを解決したので、それについて書きます。

TypeScript + Native ESM + uvuでテストしたい

今年は残暑がそこまで厳しくなくて過ごしやすく、とてもいい感じです。この数年、残暑というか秋が無くていきなり夏から冬にいくような感じでしたし。 最近弄っているTypeScriptで、Native ESM + uvuでテストを動かせるようにしてみたいのですが、とても苦戦したのでとりあえずメモを残しておきます。

CDKで構築するAPIをローカルで確認する

今年は残暑が厳しくないかもしれないので過ごしやすくていい感じですね。 前回はCDKを使い始めたという話になりましたが、今回はCDKで構成したものを、そのままローカルで動かしたいという要求に対してアプローチしてみました。 こうやりたい CDKはお手軽にAWSにデプロイできますが、デプロイ = お金がかかることと同義なので、できればローカルで試せるだけ試してからやりたいところです。色々調べた感じでは、アプローチとしては二通りあるようでした。 AWS SAM CLIを使って、 sam local start-api で立ち上げる localstackを実行先にしてcdkをデプロイする 使えるリソース、使えないリソースがあるのと、AWS公式ではないので、細かいところが違ったりというリスクはあります どっちもメリデメありますが、今回はSAM CLIでやってみました。 SAM CLIのインストール SAM CLIは、とりあえずローカルにインストールする必要があります。 $ curl -LO <url> $ unzip -d aws-sam-cli <file> $ cd aws-sam-cli && sudo ./install $ sam --version こんなくらいでお手軽です。x86用とarm用でバイナリが分かれているので、その点だけ注意したらよさそうです。 templateの抽出 SAM CLIは、本来はSAM = Serverless Application Modelに基づいたワークロードをサポートするためのツールなので、 template.yml というCloudFormationが要求されます。これはcdkから吐き出せるので、吐き出しときます。 $ npx cdk synth --no-staging > template.yml こうすることで、CloudFormationのファイルが作成できます。 APIの開始 さて、ここまで来たら、SAM CLIからローカルAPIを立ててみます。 $ sam local start-api Mounting <function> at http://127.

初めてCDKを触ってみた

実家が秋田にあるのですが、3年振りに花火競技大会を見てきました。記憶にある限りでは初めて雨の中見ましたが、いいもんはやっぱいいもんでした。風向きだけが惜しかった。 細々となんかを作っているのですが、その過程でAWS上に環境が必要となってしまいました。そういやCDKってあったと思い出し、使ってみたのでその感想です。

Cycle.jsでやってたらドハマリしまくった話

今の会社は期初が8月なんです。なので今が期末なんですが、色々ありすぎてもう月末になってました。 最近cycle.js を使って趣味プログラムを作ってみているのですが、その中で色々試していたらとてつもなくハマったので、顛末含めて書いておこうかと思います。

簡単なQRコードが出力できるようになった

観測史上最速の梅雨明けとかで、とてつもなく暑いですね。もう今から夏が怖いです。あれ、梅雨明けたからもう夏・・・? 思ったよりも時間がかかってしまいましたが、前からやってみたかったことについて書こうと思います

React.js + recoilをSolid.jsで置き換えてみた

最近は仕事の方が色々とあって、またもや気付いたら6月も後半になっていました。最近時間の流れがマッハすぎて困ります。 今回は、いつもの実験プロジェクトにて、 Solid.jsを触ってみたので、感触とかを書いていこうと思います。