Open3

Scrapsの練習

reponrepon

変更に強いWeb開発とは

フロントエンドから考えた

情報の「親」（唯一の情報源）はなにか

  • 人
    • ステークホルダー

ステークホルダーとは

  • ビジネス
    • 経営
    • 営業
  • 開発
    • インフラ
    • サーバ
    • フロントエンド
    • デザイン

どうすれば強くなるか

  • ステークホルダーごとに疎結合にする
    • スキーマ駆動開発（サーバとフロントの接点）
      • フロント
        • API自動生成（コードとテスト）
        • コンポーネント
          • デザインはデザイナーの範疇なので、ロジックと厳しく分離
            • テスト単位で分離すると自然
            • ロジックとデザインが分かれると、UIテストが最小になる
    • デザイントークン
      • デザイナーとフロントエンドの共通言語を作る
        • デザイン「システム」の根幹
        • この共通言語がないと、ピクセルパーフェクトや、作者の頭の中を想像することになるので疲弊する
reponrepon

デザイントークンとは

Tailwind CSSでデザインシステムを構築する［後編］
～デザイントークンを定義するときに何を議論すべきか

デザイントークンとは、デザインシステムという言語における最小の符号です。たとえば、そのデザインシステムの中で使ってよいとされる色（その名前とカラーコード⁠）⁠、フォントの種類、スペーシングの値などがデザイントークンにあたります。UIデザインを文章を書く行為にたとえたとき、デザイントークンはその最小単位、単語や文字に相当するものと考えられます。その名のとおり、UIデザインにおける字句（token）です。

たとえば、このPageの説明文のフォントの色がなぜ、このグレーなのか。そのPageでは説明文は、そのグレー色にする、ということなら、コード上はPageに対して、たとえばnoteというclassを付けられる。
Pageごとに、h1, h2, note, warning等々、フォントの色・サイズ・weight・line-height・ 背景色、くらいまで決まる。

自分はこの最小セットを、具体的なデザイントークンだと認識している。（今後認識が改まったら追記する）

reponrepon

スキーマ駆動開発とは

  • 何？
    • APIが送信・受信するデータの構造と型を、サーバとフロントで共有する開発
      • ツールとしてはOpenAPIが有名
    • ツール選定の前に課題を共有するのが大事
  • どういう場合に使う？
    • サーバとフロントでAPIを通じてデータのやり取りをするようなWebシステムの場合で、並行して開発する際に力を発揮する
      • サーバ側でhtmlまで送信するようなPageには不要かも
        • DBの一つのテーブルだけ変更する、という場合
  • なぜ使う？
    • 並行して開発後、結合時にトラブルが発生する
      • お互いに想定したデータと異なっている
        • 構造が
          • それぞれ想定していたデータがある・ない
          • 入れ子構造が逆だったり、親子と兄弟だったり
        • 型が
          • よくあるのは true/false が、サーバ側で1/0で送受信される場合

スキーマ駆動開発を使わない場合でも

  • トラブル発生を見越して
    • API送受信部分は疎結合にし、APIごとに作成するのが良いと思う
      • バックエンド
      • フロント
        • APIはAPIごとにStoreで実装するのが良いのではないか

スキーマ駆動開発の苦労を軽減する

サーバ側

https://www.youtube.com/watch?v=W6Tt4ETODP8

フロント側