はじめに
最近、フロントの勉強していますか？ してねえ！！
ということで、勉強半分でいい感じのサービスの UI とシステムを真似て作るということを始める。
ルール
写経すると言っても、サービスを写経したらもはや独立して売り出せば良いので、落とし所をつける。
そもそも完コピなど不可能！
ちなみに写経と言ってもソースコードは公開されていないので、 devtool 見ながら中身を予想しながら作り直す。一種のリバースエンジニアリング。
なので写経とは違うのかもしれないなぁ。。。
以下自分ルール
- なるべく UI 部分 (CSS) は真似る
- 使いずらいと思ったところは一工夫する
- コアな部分以外は雑に作る
- リファクタなどはしない。とりあえず作る。
今回お世話になる素晴らしいサービス
ということで、今回は Roadmap というタスク管理ツールを理解する。
どこが凄いのか
以下羅列
- シンプルなのにわかりやすい UI
- タスクと時系列、そしてマイルストーンの管理全てを行える最高の UI/UX
- これを元に、より特殊なソリューションを行おうとした時のポテンシャルの高さ
- 直感的なタスクの生成方法
- etc
みたいなのが主です。もっと書けばあります。
言えることは、素晴らしいサービスだなと思いました。
特に素晴らしいのが、 task の生成部分、これだよ、これが欲しかったんや。みたいな
なのでそこを作る
社内システムに転用したいので、タスクに時間を入力する項目を入れる(あんまし意味はないが雰囲気)。
作った
サイト: https://roadmap-stydy-lotdgirefy.now.sh/
本当に雑レポジトリ: https://github.com/monpy/roadmap-study
主に作った部分
- タスク生成、編集、移動
- グループのUI
- カレンダーっぽい UI
本家と違うところ
- 左側に日付などを伸ばせるところ
- グリッドな操作感を与えた、話した結果どっちになるかどうかわからないのは個人的に好きではなかった。
- scrollSync の部分をライブラリ利用した
作った感想
- 見た目はシンプルなのに、考えることが多かった。
- シンプルが一番大変ってことだよな〜
- そもそもの DOM の構造を理解するのに時間がかかった。このほうがいいじゃん、と思って作ると実はダメで本家があのような構造にしている理由がなんとなく理解できる。
- React hooks を今回初めて使った。使いやすい印象を受けたけど、雑に使うとすぐにやばい感じにな-る。逆にやばい感じに気付きやすい構造になるので個人的にはありがたい。
- 早くこういうのを利用したサービスを作りたい。個人で作るのか？
- こういうのをやろうとした時に データ構造を考える力が足りない。ここはバックエンドの人にペアプロとか頼みたいな。
- materialUI の Modal コンポーネント便利〜。
最後に
お仕事募集中〜