メンバーシップに加入する
■どんなメンバーシップか Webエンジニアをしているnap5を応援していただける方向けのメンバーシップです。参加費はすべて活動費に当てさせていただきます。 ■活動方針や頻度 制作の様子や普段アップしているようなWeb関連の記事情報を投稿する予定です。制作の進行などによっては更新が低い月もあります。作成したUdemyでのフロントエンド開発コースの無料クーポンなどを配布しようかと考えています。どんなコースがあると嬉しいか、コメントで教えてくれると嬉しいです。リクエストをいただいた中で、吟味してコース制作したいと思います。また、○○なUIを実現したいときに、nap5さんならどう解決するか気になるといった場合にもコメントで教えてくれると嬉しいです。デモコード作って発信していければと考えています。 ■どんな人に来てほしいか nap5のweb制作活動を応援したいと思ってくれている方に加入いただけたら嬉しいです。 ■どのように参加してほしいか 温かく見守ってください。
記事一覧
ts-patternとneverthrowを使ったワークアラウンド～カスタムエラークラスを添えて～
まえがきこちらの記事に遭遇したので、neverthrowのResult型を使ったバージョンを書いてみました。 デモ https://codesandbox.io/p/sandbox/recursing-dhawan-xrdtc9?fi…
DDD関連で有用だと思ったコメントリンク
DDD関連で有用だと思ったコメントについてメモを残しておきます。 有用だと思った部分はこちらのコメントになります。 https://github.com/little-hands/ddd-q-and-a/iss…
再帰するメインとサブのテーブルを持つMUIテーブルの導線を考えてみるときの素案
https://codesandbox.io/p/devbox/back-demo-v5rsld
途中でFlattern挟んで、親ID持ちながら、一括操作などに持ち込めそうか
Visitedでパンくずたどる感じも良さそう
MUIのrowspanとcolspanを使った入れ子テーブルのデモ
https://codesandbox.io/p/devbox/back-demo-gdz97h
ポケモン画像を使ったDnDKitのDroppableデモ
https://codesandbox.io/p/devbox/back-demo-yz4chc
Mui TableのrowSpanを使ったデモを作ってみました
https://codesandbox.io/p/devbox/back-demo-t955ph
DnDKitのMultiple Containersのデモを抜き出してみました
original
https://codesandbox.io/p/devbox/back-demo-jcgywr
revised
https://codesandbox.io/p/devbox/back-demo-vr46f8
参考
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup
メンバーシップ制度を始めました
こんにちわ。nap5です。
この度、メンバーシップ制度を始めました。
以下のリンクがメンバーシップへのログインURLになります。
２つプランがあります。
１つはベーシックプランで、もう１つはプラチナプランです。
両プラン共通のサービスとしてこれまで公開してきたようなWeb情報などをメンバーシップに入っていただいた方には発信していこうと思います。また、「このデザインやこの動きのアニメーショ
ts-patternとneverthrowを使ったワークアラウンド～カスタムエラークラスを添えて～
まえがきこちらの記事に遭遇したので、neverthrowのResult型を使ったバージョンを書いてみました。
デモ
https://codesandbox.io/p/sandbox/recursing-dhawan-xrdtc9?file=%2Fsrc%2Findex.ts%3A1%2C1
ramdaに関してはrambdaを使ってます
定義側になります
import { Result,
React,Typescriptを使った多階層ドロップダウンメニューの紹介
まえがき
Udemyやランサーズにあるようなホバーしたら、サブメニューまで展開されるUIになります。
floating uiを使って実現できましたので、紹介です。
今回はメニュー構造もそれっぽくさせて、有料で公開してみます。
データ構造を以下のように定義して、実現しています。
export type TFlattedMenu = { id: string; name: string;
cycle関数を使った循環するUIの作り方
まえがき
こんにちわ。nap5です。
cycle関数を使った循環するUIの作り方の紹介です。
function cycle(start: number, end: number, value: number) { if (value < start) return end; if (value > end) return start; return value;}
利用シーン
この`
部分適用を利用したwithProviders関数
まえがき
こんにちわ。nap5です。
部分適用を利用したwithProviders関数の紹介です。
結論
import type { ComponentType, PropsWithChildren } from "react";type Props = Record<string, unknown>;export const withProviders = <P extends Pr
DDD関連で有用だと思ったコメントリンク
DDD関連で有用だと思ったコメントについてメモを残しておきます。
有用だと思った部分はこちらのコメントになります。
https://github.com/little-hands/ddd-q-and-a/issues/797#issuecomment-1109857715
入出力守れば、コントローラがレポジトリの実装の束縛を受けずに済むようです。
簡単ですが、以上です。
アーキテクチャと集約の要諦
まえがき重要なことを残してある記事でして、メモ書きしておきます。
まとめ情報設計における階層化ならびにグループ化は大事。
ドメインの階層化ないしはグループ化を実現するためのアプローチの引き出しを増やすことも大事。
レポジトリ層をドメインと1対1で対応づけるのはデフォルト。
（自動生成の型をそのままマップする。）
ユースケースに応じて独自のレポジトリ層を設けて、情報設計の透明度を上げるのが
fast-checkを利用した再帰構造データのプロパティベーステストのワークアラウンド
こんにちわ。nap5です。
fast-checkを利用した再帰構造データのプロパティベーステストの紹介です
再帰データに関してはやや工夫が必要でして、そのワークアラウンドになります。
テスト対象のコードになります。
export type TFlattedMenu = { id: string; name: string; parentId: string | null;};expo
codesandboxでデモをアップできなくなったとき
こんにちわ。nap5です。
久しぶりに、デモを書いていましたら、codesandboxにアップできなくなっておりました。
プライシングページに行くと、９ドルでしたので、アップグレードしました。
ドラフトは１０個までらしく、CLIからはデフォでドラフトで作る仕様みたいでして。そこで制限にかかったみたいです。
ドラフトからはdevboxにブラウザのボタン一つで移行できるみたいですが、間口はドラ
再帰するメインとサブのテーブルを持つMUIテーブルの導線を考えてみるときの素案
https://codesandbox.io/p/devbox/back-demo-v5rsld
途中でFlattern挟んで、親ID持ちながら、一括操作などに持ち込めそうか
Visitedでパンくずたどる感じも良さそう
MUIのrowspanとcolspanを使った入れ子テーブルのデモ
https://codesandbox.io/p/devbox/back-demo-gdz97h
ポケモン画像を使ったDnDKitのDroppableデモ
https://codesandbox.io/p/devbox/back-demo-yz4chc
Mui TableのrowSpanを使ったデモを作ってみました
https://codesandbox.io/p/devbox/back-demo-t955ph
DnDKitのMultiple Containersのデモを抜き出してみました
original
https://codesandbox.io/p/devbox/back-demo-jcgywr
revised
https://codesandbox.io/p/devbox/back-demo-vr46f8
参考
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup