はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。
今回の目的
nextjsはまだですが、実際のアプリ開発からどう作られていくかを学んでいくためにクローンアプリを開発します。
とは言っても自分で考えることは特になくYoutubeを見てやっていきます。
その中で覚えておきたい部分を分類ごとに記載していきます。なので、その時々に知ったことを小出しにしていく形になります。
使用したものや事前準備
・Macbook Pro
・Visual Studio Code
使用にさせていただいた動画
新規プロジェクトのクリーンアップ
pageルーターで対応
下記のファイルを修正・削除します。
pages
・_document.tsxを削除
・index.tsxのタグ以降を全て削除し空タグに変更、他export default外の記述（importなど）も削除
styles
・globals.cssの中を全て削除。
tailwindcss
下記のサイトを見てセットアップ
https://tailwindcss.com/docs/guides/nextjs
さらに補完入力ができるようにIntelliSenceを追加
Tailwind CSS IntelliSense
public
imageフォルダを作成
TailWindの知識
＠apply
・@applyはtailwindをcssに記述できる書き方です。
bg-[url('/images/hero.jpg')]
背景画像の設定で使用できる
lg:max-w-md
レスポンシブ対応のCSS。この場合は1024ピクセル以上で最大幅を768に指定
sm: 640ピクセル以上
md: 768ピクセル以上
lg: 1024ピクセル以上
xl: 1280ピクセル以上
2xl: 1536ピクセル以上
bg-neutral-700
グレーで明るさが700
lg:w-2/5
2/5で40%幅
appearance-none
ブラウザ固有のデフォルトクラスを無効
focus:outline-none
フォーカスした時の外枠を無効
peer
inputタグに対するアクションがあった時に、別のタグでpeer-focusなど指定するとCSSが適用される
peer-focus:-traslate-y-3
peerで設定したタグをフォーカスしたら3単位分上に移動する
duration-150
150ミリ秒で変化する
transform
変化元、scale、translateなどと一緒に使う
TypeScriptの知識
const input: React.FC
InputProps型のpropsを受け取る
Next.jsの知識
import Input from "@/components/input";
@はtsconfig.jsonに記載されているpathsを参照し参照先を読み込む
"paths": {
"@/*": ["./*"]
}
次