転職用のポートフォリオとして、個人でWebアプリ「Hubpin」を作っています。
制作の経緯は「Hubpin 開発記録」に時系列でまとめています。
設計と判断は自分で行い、実装も原則自分で書いています。AIには手順書・レビュー・調査を任せています。
カードのタイトルに文字数の上限をつけて、60文字にしました。
同じ理屈で説明文にも上限をつけようとしたら、うまくいきませんでした。
説明文が出る場所は2つありました
同じデータなのに、表示される場所が2種類ありました。
- リンクのカード：カードの中にそのまま出る
- メモのカード：クリックすると開くパネルに出る
崩れ方が反対でした。
リンクのカードは、説明文が長いとカードが伸びます。カードは高さを揃えているので、
その行のカード全部が一緒に高くなります。
開くパネルのほうは開いたときに行を占有する作りで、もともと伸びる前提の場所なので長くても崩れません。
しかもメモは、説明文が本体です。空のメモはデータとして意味を持たないので、
必須にすると決めていました。長い文章が入る想定の場所でした。
1つの数字にすると、どちらかが壊れます
- 短くする → メモの本文が窮屈になる
- 長くする → リンクのカードが崩れる
二択でした。どちらも選びたくないものです。
気づいたこと
タイトルのときは、60という1つの数字で足りていました。
**それは「データとして妥当な長さ」と「表示が崩れない長さ」が
たまたま近かったからでした。**
説明文では、この2つが離れていました。近かったのは偶然だったと分かりました。
分けました
見ているものが違うので、担当を分けました。
- データとして異常か → 入力チェック（巨大な文字列を弾く）
- 表示が崩れるか → CSS（はみ出した行を隠す指定）
入力チェックの上限は500にしました。
メモの本文が書ける長さを採ったので、表示の都合はここに持ち込んでいません。
リンクのカードのほうは、CSSで2行に抑える指定を足す宿題にしました。
覚えておきたいこと
1つの層に2つの仕事をさせようとしていました。
入力チェックに「データが異常か」と「見た目が崩れるか」の両方を
持たせようとしたので、二択になりました。分けたら二択が消えました。
前回、タイトルの上限で学んだのは「層を1つ薄くしたら、その仕事を
引き受ける層を決める」でした。今回は逆向きでした。
寄せすぎた保証を、分けられるかどうか。
どちらも「その保証をどの層が持つか」を決める話でした。
1日で両方向から出てきたのが、自分でもおもしろかったです。
