👶バックエンドエンジニアのデザインよちよち歩き
Yuta Miyama結論：やっと next.js + tailwindcss で進捗が出せる構成になった。ふりかえったら「なんでこんなに選定に苦労したんだ」と思うが、やってみないと分からなかった。
Yuta Miyama背景：バックエンドエンジニア。React/Flutter/TSなどFrontend界隈は、要素を限定してキャッチアップすれば動くものはつくれる。デザインはど素人。
Yuta Miyamaデータを可視化して提供したい個人開発サービスがあり、データの準備、JSON API、ソート・フィルタ機能の選定まではできた。だが、実際に「人に使ってもらえるまでのデザイン」が遠い。。
Yuta MiyamaMaterial UIのようなフレームワークを学んだ方がいいのか、もうちょっとデザインの要素から足腰鍛えた方がいいのか。。それとも学ぼうとしているレイヤーそのものが違うのか。
「機能するUIに最短でたどりつく」という目標設定でググり続けて、時間が無為にすぎていった。
- 機能実装
- デザインの類似例を探す
- UXユーザーストーリーを文書で記述する
あたりで泥沼にはまる自分。
Yuta Miyamaそんな中で、Next.js（これはまぁダイナミックな挙動はないのでこれで良いかなと）+ TailwindCSSが自分を救ってくれた。
https://tailwindcss.com/docs/utility-first この説明をぜひ読んでほしい。
HTML/CSSの基礎、という枯れた技術のアブストラクトを崩さないで、モダンなフロント開発ができるという安心感がある。
Yuta Miyamaあとは、実際に機能を提供するコンポーネントと、CSSをつなげていけばいいと思う。
機能を提供する：https://material-app.bootlab.io/orders https://material-ui.com/components/data-grid/ あたり
あとは普通にReactの書き方まったく最近触っていなかったのでおさらい :) https://reactjs.org/tutorial/tutorial.html
https://react-super-responsive-table.netlify.app/ こんなのも気にはなっている。
Yuta MiyamaUIとしては、同じようなUXを提供しようとしている既存サービスを「UIを眺めてUXに因数分解する作業」が大事。
Yuta MiyamaMobile first なリストビュー。tableではなく div / list を使って柔軟に組んだ方がいいのかな。
Yuta Miyamaとにかく大事なのは、Call to Actionがしっかりしていること。「この場所で何をしてもらいたいか」がちゃんと伝わること。
Yuta Miyama
などを見て、勉強中。
小さな単位のコンポーネントからつくっていったが、おそらく大枠からせめていったほうがよかった気がする。
並行して、（おそらく 3rd-partyの）サイトもみて、使えそうなものがないか物色している。 当たり外れが大きくても、 tailwindCSSを学ぶという意味では役に立つところが嬉しい。
Yuta Miyama
HTMLのクラスにがんがん書いていくということで、リファレンスがないときつい。
ツールの種類を理解したら、https://tailwindcss.com/docs/intellisense を入れるのもありだなぁ。
Yuta Miyama調べていること。
TailwindCSSで、幅をモバイルまで狭めたときに、何を出して何を出さないのかどうやって決めているのか。
Yuta Miyama今日は、Responsive / Breakpoint と、Flex/Gridの使い方を TailwindCSSで学んだ・思い出した。
Responsive / Breakpoint
<div class="w-10 md:w-20"></div> と書くと、
mobile first で、width 10 (1rem だったかな) で、mdの breakpoint (デフォルトだと640pxだったかな)で w-20が上書きされて適用される。
Flex/Grid
Gridは、現在のwidth/heightの中で一番大きなものをグリッドの幅・高さとし、それを当分で区切る形でGridが形成される（Heightに関してはまだ未確認）。
Container（そもそもの Max-Width）と併用して、比較的理解しやすいレイアウト設計。
Flexは、コンセプトを理解していることが重要。
providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
なので、例えば縦に二つの要素を均等に並べたい（でも、文字や画像がどれだけ幅・高さとるか未定）の場合は、Flexでやるとけっこう良い感じに端的に記述できるはず。
Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
これは知らなかった。メモメモ。