開幕

早くも2月になってしまいました、、、、！
一月は何か特別なことをやったかというとなんもしてないかったと振り返って虚しくなる今日この頃です。
（大学の期末課題出すのを忘れて確実に単位落としていることに気づきました🎒）
しかも、お正月太りをしてしまいもうわけわかんないです笑

Acvation開発したい

自分は元々、大学在学中に一つのプロダクトを作り上げることを目処にこのプロダクトを一人で実装しています！
が、最近すごくサボっていて自分が以前どのようなコードを書いたのか忘れているような状況でした。

ちなみに最後にDevブランチにプッシュしたの16日前という放置をしていました。息混んでいたのに情けない、、、、
というわけでこの機会に元々デザイン部分がひどかったということもあり、もう一度作り直したいと思ったのがきっかけです。

ここから本題！デザインのお話👨

まずみてもらいたいです。
元々のデザインを

これが元々のページです。
これだけなら自分自身は、正直あまり悪くもない、かもなく不可もない状態だと思います。（デザインセンスないからこれが精一杯です。。。これでも相当頑張っていたと思います。）

しかし！！！！！！！！！！！！

レスポンシブで見てみましょう

What???
これはまぁなんでしょう〜〜
なんと画像部分が邪魔をしていてログインボタンさえも押せないのです！！！
これは大問題なのはわかっています。
原因の方もわかっています。

Next.jsのImageタグ問題

自分自身本当にNext.jsにお世話になっており、Imageコンポーネントも同様です。
簡単に自分が思いつくだけでも

• ブラウザによってはwebpに変換して出力してくれる
• 遅延読み込みは自動的に行ってくれる
• objectFit="cover"とかいう使いやすいのがしっかり標準装備
• 画像のクオリティまで指定できるとかいうおもてなしっぷり

改めて本当に便利なものだと実感しています！！
しかし
全部画像周り自動でやってくれないかな〜とかいう魔法を信じている自分にとってはとても難しい設定となっており、
故に詰まることがとてもたくさんあると思っています。
さらに、自分の認識が正しければ
pxしかできない　or　layout="fill"しか設定できないというダブルパンチ👊
こりゃ自分には厳しいな〜と改めて実感してました。。。

ざっとこんなことがあったのでしっかりと作り直そうかなと思いました！
（自分の基準ではログインボタンが押せればいいぐらいを想定していました笑）

いざ実装

自分のこのプロダクトはtailwindCSS & Sassで全て書いています。
正直自分自身今でも上手くは使いこなせていないのですが

• サンプルコードがかなりある
• 痒いところに手が伸ばしやすい
• 補完の部分で実際にどのような定義がされているのか確認できるのでImageコンポーネントのwidthとheight設定の時に役立つことが多い

などあってこれからもしばらくはこれを使っていこうと思います。
しかし、動きを出そうとすると結構難しかったりするんですよねこれが、、

便利なライブラリ見つけた！？

公式ドキュメント：　https://headlessui.dev/
こちらのサイトです！
どうもtailwindと関係深いらしくとても簡単に記述するだけではなく独自のクラス名などがなく利用できるのでとてもおおすすめです！
特に一部の部分は参考にするだけでCSSなどの知識などもつけることができるので学べることがとても多いものになっています。
自分も実際にflex部分の知見が全くないのでこれを通して一部の部分はflex縛りで実装しました😀

結局のところ

1月最後の夜の時間を使い実装していました。　← こんなんやってないで課題やっておけばと後悔しています笑

こんな感じで綺麗め系のデザインになりました。
正直自分はこれを作るのでも相当苦労しました。
marginとpaddingしかわからない自分にとっていい経験になったと思います。
またレスポンシブについても

こんな感じで作ることができるようになって、やっとログインボタンが改善されました笑

今後の課題

一つとてもでかい問題があって
レンダリングの速度がすこぶる悪くスコアがとても低いことです。
このプロジェクト自体はNext.jsで実装しているのですが
パソコンの方は95点以上は安定して取れるようになっていますが
モバイルの方が64点と意味わかんないくらい問題がたくさんあるので修正するようです。

もし実装のヒントなどがあればぜひ教えてほしいです🙇‍♂️

また、フロント側の知識自体もまだまだ上手くできていない部分しかなくて
メモ化やキャッシュなども考えればパフォーマンス的にも良くなると思います。。。！

引き続き修正します。
もし技術的な部分も記事などのリクエストなどがあれば書こうと思うので何卒よろしくお願い申し上げます。