More than 1 year has passed since last update.

【fwywd】初学者が Next.js tailwindcss JavaScript を使用してポートフォリを作成して学んだこと

Last updated at 2021-12-20Posted at 2021-12-18

はじめに

初めてQiitaへ投稿いたします。

今回、ポートフォリオを作成する機会がありました。作成を通じて、私がつまずいたところ、学んだことをアウトプットしていきます。

同じように苦戦している初学者の方の参考になれば幸いです。

どのようなポートフォリオを作成したかは、こちらのリンク先からご確認ください。
リンク先➣➣ポートフォリオ

導入方法すらわからない状況でしたので、こちらのリンク先を見ながら導入していきました。
Vs Code を使用していましたら、便利な拡張機能も紹介していましたので、是非ご参考にしてください。

css は少し触れたことがあるので、なんとなくは理解していました。それもあり、tailwindcss の使用に関して大きな抵抗はそこまでありませんでした。
もしcss も触ったことが無い方がいきなりtailwindcss で実装すると、使用イメージがあまりつかめないのかな？と思いました。

①「className」にtailwindcssのプロパティを割り当てていけば良いこと
②プロパティは連続して書いてOK
③Vs Code が自動で補完してくれるので、なんとなくプロパティを理解していてもサクサク書ける

例）
className='mt-5 py-5 font-bold text-white'

上記のコードの意味
「margin-topに5px, padding y方向に5px, フォントは太文字、テキストは白色」

レスポンシブデザインで、以下の部分でつまずきました。

sm: md: lg: をどのように使用すればいいのかが分からない、法則性を自身で見つけ出すこと

DevToolsを使用して、sm: md: lg: を一つ一つテストし変化点、法則性を見つけていきました。
使い方の記事➣➣DevToolsの使い方

DevToolsのResponsiveを使用して、画面の大きさを手動で変更していました。

ここで発見できた法則性として、
「指定したサイズから変更になり、それ以下は適応されない」

例として、「sm(640px)」で見ていきます。

例）
sm:font-bold
// 640pxからフォントを太文字に変更

この場合、640px以上のサイズには反映されますが、640px未満（639pxから）のサイズには反映されなくなってしまうことを意味しています。
ここの法則性を発見するのに、とても時間がかかりました。

この法則性から、私の中では**「最小サイズ（スマホ）から作成していくことが効率的」**だと思います。
この部分に関しては、今後Web開発をしていく中で、検証してみたいと思います。

概念を理解するのに、最初は戸惑いました。コンポーネントを一言で表現するなら**「分業した仕事をまとめること」**
言葉で表現しても、最初はピンとこなかったので簡易的に図でまとめみました。

言葉は悪いかもしれませんが、仕事しない上司（Index）が仕事を振りまくり、関連部署の部下たちがタスク管理。
各部署が作成した資料を、中間管理職（Layout）がチェックし、上司（Index）へ提出する。
自分の言葉で表現すると、理解度が高まりました。

初学者ですので、誤った理解がある可能性がございます。ございましたら、ご指摘頂けると幸いです。
内容は随時追加、更新していきます。