#80 fp-tsのESM import問題、デザイントークンの管理 ─ 個人開発者向けのサービスの開発記録

tyshgc
·

本日の作業

昨日はフロントエンドのモデル駆動設計で座談会に参加したメンバーが鎌倉に来るとのことでクローズドな座談会と夜は鎌倉で会食&だったので作業の進捗はないです。

で、本日は鎌倉もくもく会だったので全体のレイアウトデザインと実装の続きと日報の画面設計・実装を行おうと思ったらfp-tsのimport周りでトラブルがあったので対応しました。

  • ✅ fp-tsのimport周りの問題対応

  • 🚴 画面設計・実装

    • ✅ 全体のレイアウトデザインと実装

      • ✅ デザイントークン

      • 🚴レイアウト設計

      • 🚴 レイアウトコンポーネントの実装

    • 🚴 日報の画面設計・実装

      • 🚴 設計

      • 🚴 実装

  • サインインの実装

    • 認証画面実装

    • 認証ロジック実装(主にClient側)

    • Server側の認証チェック実装

    • Client側の認証チェック実装

  • 🛑 🚴 イベントストーミングとサービスブループリンの融合についてzennにまとめる

  • 🛑 🚴 Feature-Sliced Designについてzennにまとめる

fp-tsのimport問題

このissueと同じ問題です。

「import { pipe } from "fp-ts/function"」がVSCode上ではエラーが起きずRemixを実行した際にエラーが出ました。ES Modulesに対応していないことが原因ぽいです。

このissueの通り「import { pipe } from "fp-ts/lib/function.js"」とlibディレクトリに向けて.jsをつけると解消されました。尚、TaskEitherなど使う際も同じく。これに3時間溶かした…😇

全体のレイアウトデザインと実装 - デザイントークン

自分は実装ができるデザイナーなので正直Figmaを使う理由が全くといってないし、Figma自体のUIがUIデザインの原則として必要なユーザビリティの品質が僕の目から見ると低いのでそういうものを使いたくない気持ちもあるところです。

ただ、デザインシステムについても必要にならない限りはそれに注力するのはシステムという概念から考えてファットなのでやらないにせよ、デザイントークン的なものは何かと必要なのでこれはどうにかしたいところです。

通常のデザイナーは実装に関わらないのでFigma Tokenを活用するらしく、それをStyle Dictionaryを使ってCSS変数にするそうです。ですが、先に述べたとおりFigma使わないのでStyle Dictionaryのjsonを自分で作成し、tailwindのconifg変換するstyle-dictionary-tailwindcss-transformerを活用して対応しようと思います。

その他、メモ

フロントエンドのモデル駆動設計その後会

  • フロントエンドのモデル駆動設計ではDDD界隈では著名な増田さんはじめ勉強会での座談会メンバーとかなり濃ゆい技術的&キャリア的な話ができました。勉強会はコロナもあってオンラインが多かったので結構前から知っているメンバーもいましたけどちゃんと会うのは初めて。因みに、この個人開発で採用しているDomain Model Made Functionalや先日のObject-Oriented Conference 2024でも取り上げられていた関数型プログラミングとオブジェクト指向型のドメイン駆動開発の話もでき、コードレビューも軽くしてもらったり充実の一日でした。

  • 夜は美味しいものを食べるをコンセプトに「鎌倉ふくみ」さんで会席料理をいただきました。ここは本当間違いないクオリティ。

本日の鎌倉もくもく会

  • 本日のもくもく会は定員枠フルブックでうち半数がここ3年以内に鎌倉や逗子に越してきた人でした。

本日の共有

← #79 #81 →

@tyshgc
デザインファーム及びスタートアップ(上場)などを経てフリーランスとして、様々なスタートアップや大手企業の新規事業の立ち上げ期における事業設計・アプリケーションの設計・開発、サービスのUX分析とデザインとエンジニアリングの両軸でお手伝いさせていただいています。 現在、個人開発者向けの支援サービスを個人開発中。 X Account: @tyshgc