メンバーシップ

nap5

Senior staff frontend developer.

nap5

Senior staff frontend developer.

メンバーシップに加入する

■どんなメンバーシップか Webエンジニアをしているnap5を応援していただける方向けのメンバーシップです。参加費はすべて活動費に当てさせていただきます。 ■活動方針や頻度 制作の様子や普段アップしているようなWeb関連の記事情報を投稿する予定です。制作の進行などによっては更新が低い月もあります。作成したUdemyでのフロントエンド開発コースの無料クーポンなどを配布しようかと考えています。どんなコースがあると嬉しいか、コメントで教えてくれると嬉しいです。リクエストをいただいた中で、吟味してコース制作したいと思います。また、○○なUIを実現したいときに、nap5さんならどう解決するか気になるといった場合にもコメントで教えてくれると嬉しいです。デモコード作って発信していければと考えています。 ■どんな人に来てほしいか nap5のweb制作活動を応援したいと思ってくれている方に加入いただけたら嬉しいです。 ■どのように参加してほしいか 温かく見守ってください。

  • ベーシックプラン

    ¥500 / 月

  • プラチナプラン

    ¥1,000 / 月
  • 固定された記事

メンバーシップ制度を始めました

こんにちわ。nap5です。 この度、メンバーシップ制度を始めました。 以下のリンクがメンバーシップへのログインURLになります。 ２つプランがあります。 １つはベーシックプランで、もう１つはプラチナプランです。 両プラン共通のサービスとしてこれまで公開してきたようなWeb情報などをメンバーシップに入っていただいた方には発信していこうと思います。また、「このデザインやこの動きのアニメーションを実現したいんだけど、nap5さんならどう解決するのかな？そうだ、質問してみよ

nap5

    • ts-patternとneverthrowを使ったワークアラウンド～カスタムエラークラスを添えて～

      まえがきこちらの記事に遭遇したので、neverthrowのResult型を使ったバージョンを書いてみました。 デモ https://codesandbox.io/p/sandbox/recursing-dhawan-xrdtc9?file=%2Fsrc%2Findex.ts%3A1%2C1 ramdaに関してはrambdaを使ってます 定義側になります import { Result, err, ok } from "neverthrow";import { pi

      nap5

      • React,Typescriptを使った多階層ドロップダウンメニューの紹介

        まえがき Udemyやランサーズにあるようなホバーしたら、サブメニューまで展開されるUIになります。 floating uiを使って実現できましたので、紹介です。 今回はメニュー構造もそれっぽくさせて、有料で公開してみます。 データ構造を以下のように定義して、実現しています。 export type TFlattedMenu = { id: string; name: string; parentId: string | null;};export type

        50,000
        nap5

        • 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;} 利用シーン この`cycle`関数は、与えられた値が特定の範囲内に収まるように調整するためのもので

          nap5
        • 固定された記事

        メンバーシップ制度を始めました

        nap5

        • ts-patternとneverthrowを使ったワークアラウンド～カスタムエラークラスを添えて～

          nap5

        • React,Typescriptを使った多階層ドロップダウンメニューの…

          nap5

        • cycle関数を使った循環するUIの作り方

          nap5

        メンバーシップ

        • 質問コーナー

          この投稿を見るには メンバーになる必要があります

        • OGP

          この投稿を見るには メンバーになる必要があります

        • ホバーしたら上下に移動するcssエフェクトを作ってみました

          この投稿を見るには メンバーになる必要があります

        • react-burger-menuライブラリを使ったレスポンシブなハンバーガーメニューを作りました

          この投稿を見るには メンバーになる必要があります

        • 質問コーナー

          この投稿を見るには メンバーになる必要があります

        • OGP

          この投稿を見るには メンバーになる必要があります

        • ホバーしたら上下に移動するcssエフェクトを作ってみました

          この投稿を見るには メンバーになる必要があります

        • react-burger-menuライブラリを使ったレスポンシブなハンバーガーメニューを作りました

          この投稿を見るには メンバーになる必要があります

        記事

          部分適用を利用したwithProviders関数

          まえがき こんにちわ。nap5です。 部分適用を利用したwithProviders関数の紹介です。 結論 import type { ComponentType, PropsWithChildren } from "react";type Props = Record<string, unknown>;export const withProviders = <P extends Props>( InnerComponent: ComponentType<P>,

          nap5

          部分適用を利用したwithProviders関数

          nap5

          Udemyやランサーズにあるような木構造を含むホバー駆動のグローバルメニューの作り方

          まえがき Udemyやランサーズにあるようなホバーしたら、サブメニューまで展開されるUIになります。 floating uiを使って実現できましたので、紹介です。 作りたいと思っても正しく実装できる人はおそらく限られると思うので、有料で公開してみます。 デモ 画像ですが、リンク切れているように見えて実はクリックすると見れるみたいです。 以下は有料で、デモコードへのリンクが張ってあります。購入された方は適宜流用してくださいませ。 デモコード（有料）

          50,000
          nap5

          Udemyやランサーズにあるような木構造を含むホバー駆動の…

          nap5

          DDD関連で有用だと思ったコメントリンク

          DDD関連で有用だと思ったコメントについてメモを残しておきます。 有用だと思った部分はこちらのコメントになります。 https://github.com/little-hands/ddd-q-and-a/issues/797#issuecomment-1109857715 入出力守れば、コントローラがレポジトリの実装の束縛を受けずに済むようです。 簡単ですが、以上です。

          nap5

          DDD関連で有用だと思ったコメントリンク

          nap5

          アーキテクチャと集約の要諦

          まえがき重要なことを残してある記事でして、メモ書きしておきます。 まとめ情報設計における階層化ならびにグループ化は大事。 ドメインの階層化ないしはグループ化を実現するためのアプローチの引き出しを増やすことも大事。 レポジトリ層をドメインと1対1で対応づけるのはデフォルト。 （自動生成の型をそのままマップする。） ユースケースに応じて独自のレポジトリ層を設けて、情報設計の透明度を上げるのが、アレンジ。 重要な引用補遺Typescriptでいうとレコード型を使ったオブ

          nap5

          アーキテクチャと集約の要諦

          nap5

          fast-checkを利用した再帰構造データのプロパティベーステストのワークアラウンド

          こんにちわ。nap5です。 fast-checkを利用した再帰構造データのプロパティベーステストの紹介です 再帰データに関してはやや工夫が必要でして、そのワークアラウンドになります。 テスト対象のコードになります。 export type TFlattedMenu = { id: string; name: string; parentId: string | null;};export type TMenu = { id: string; name: st

          nap5

          fast-checkを利用した再帰構造データのプロパティベーステストのワークアラウンド

          nap5

          codesandboxでデモをアップできなくなったとき

          こんにちわ。nap5です。 久しぶりに、デモを書いていましたら、codesandboxにアップできなくなっておりました。 プライシングページに行くと、９ドルでしたので、アップグレードしました。 ドラフトは１０個までらしく、CLIからはデフォでドラフトで作る仕様みたいでして。そこで制限にかかったみたいです。 ドラフトからはdevboxにブラウザのボタン一つで移行できるみたいですが、間口はドラフトに制限することで、うまいこと皮算用しているみたいでした。 課金後はログイン

          nap5

          codesandboxでデモをアップできなくなったとき

          nap5

          再帰するメインとサブのテーブルを持つMUIテーブルの導線を考えてみるときの素案 https://codesandbox.io/p/devbox/back-demo-v5rsld 途中でFlattern挟んで、親ID持ちながら、一括操作などに持ち込めそうか Visitedでパンくずたどる感じも良さそう

          nap5

          再帰するメインとサブのテーブルを持つMUIテーブルの導線を考えてみるときの素案 https://codesandbox.io/p/devbox/back-demo-v5rsld 途中でFlattern挟んで、親ID持ちながら、一括操作などに持ち込めそうか Visitedでパンくずたどる感じも良さそう

          nap5

          MUIのrowspanとcolspanを使った入れ子テーブルのデモ https://codesandbox.io/p/devbox/back-demo-gdz97h

          nap5

          MUIのrowspanとcolspanを使った入れ子テーブルのデモ https://codesandbox.io/p/devbox/back-demo-gdz97h

          nap5

          ポケモン画像を使ったDnDKitのDroppableデモ https://codesandbox.io/p/devbox/back-demo-yz4chc

          nap5

          ポケモン画像を使ったDnDKitのDroppableデモ https://codesandbox.io/p/devbox/back-demo-yz4chc

          nap5

          ポケモン画像を使った三目並べのようなラフなデモ https://codesandbox.io/p/devbox/back-demo-sdclpt https://react.dev/learn/tutorial-tic-tac-toe#what-are-you-building

          nap5

          ポケモン画像を使った三目並べのようなラフなデモ https://codesandbox.io/p/devbox/back-demo-sdclpt https://react.dev/learn/tutorial-tic-tac-toe#what-are-you-building

          nap5

          Mui TableのrowSpanを使ったデモを作ってみました https://codesandbox.io/p/devbox/back-demo-t955ph

          nap5

          Mui TableのrowSpanを使ったデモを作ってみました https://codesandbox.io/p/devbox/back-demo-t955ph

          nap5

          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

          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