Zenn
Open7

Udemy「Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座」の学習メモ

なぎそらなぎそら

Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座

以下の講座の学習メモです。

https://www.udemy.com/course/nextjs-shadcn-fullstack-webapp-dev/

Cursorハッカソンに参加して、無理やりアプリを完成させたけど基礎を知りたくなったので、次にアプリを作る前に勉強しようと思いUdemyを受講しました。

GitHubは以下のリポジトリです。ご参考にどうぞ。

https://github.com/nagisora/post-writer-webapp

なぎそらなぎそら

20241104（19:40～21:30）

npx create-next-app@latest

  • 「Would you like to use Turbopack for next dev?」って聞かれた。
  • ローカルサーバーが高速化されるみたい。Yesにしてみる。
  • インポートエイリアスも今までNoにしてたけど、講座でYesにしてたからYesにした。
  • srcディレクトリも今までYesにしてたけど、講座でNoにしてたからNoにした。
  • 一先ず、講座の言う通りに進める。

shadcn

  • インストール時にCtrl+Cしてもう一度インストールしようとしたらエラーが出た
  • create-next-appからやり直す。初期状態でgit initしておく。

入れ直し

  • create-nextしたらfirst commitしてくれてるみたい。
  • ブランチもmainだし。
  • Githubのリモートに紐づけて、pushのみした。
  • developブランチを作り、shadcn入れる
  • next.js 15だとエラーになる。Cursorにエラーとdocをポイする。
  • https://ui.shadcn.com/docs/react-19　の「How to fix this」の上にあるエラーが出た。
  • forceとlegacyの違い。
--force: 依存関係の競合を無視して上書きし、パッケージのインストールを強制します。
--legacy-peer-deps: 厳密なピア依存関係チェックをスキップし、未解決のピア依存関係があってもエラーを回避してパッケージのインストールを許可します。
  • 何となくlegacyでインストール
npm install --legacy-peer-deps
  • 何かないらしいので入れた
npm install tailwindcss-animate
  • 何か色々入れたけどエラーが出続ける。

React18

  • 解決策2のreact18にしてみる。
npm i react@18 react-dom@18
  • shadcnは問題なく入った
npx shadcn@latest init
Success! Project initialization completed.
  • tailwind-animateのエラーが一瞬出るけど、問題なく立ち上がる
  • ボタンを追加。動いた。良かった。
npx shadcn@latest add button
なぎそらなぎそら

20241105（19:50～20:30）

  • 今日は仕事でとても疲れたので30分のみ

layout.tsxの修正

  • 講座とNext.js 15のlayout.tsxが全然違うので戸惑う
  • Cursorにやってもらった。「fontをgoogleのnoto_sans_jpにして、変数名はfontNotoSansJPにして」「googleフォントをインストールしてそれを使って」

Tailwind CSSが良く分からないので解説してもらった

以下は、指定されたCSSクラスの各要素についての解説です。

  1. bg-background:

    • これは背景色を設定するクラスです。具体的な色はプロジェクトのCSS設定やテーマによって異なりますが、通常は特定の色やグラデーションを指定します。

  2. antialiased:

    • このクラスは、テキストのアンチエイリアス処理を有効にします。アンチエイリアス処理は、テキストのエッジを滑らかにし、より視覚的に快適に見えるようにする技術です。これにより、特に小さいフォントサイズでの可読性が向上します。

  3. min-h-screen:

    • このクラスは、要素の最小高さを画面の高さに設定します。これにより、body要素が画面全体を覆うようになり、コンテンツが少ない場合でも、ページがスクロール可能であることを保証します。

これらのクラスは、一般的にTailwind CSSなどのユーティリティファーストCSSフレームワークで使用されるもので、迅速にスタイルを適用するための便利な方法です。

Tailwind CSSが良く分からないので解説してもらった part2

以下は、Tailwind CSSの各要素についての解説です。

app/(marketing)/page.tsx
      <section className="pt-6 md:pt-10 lg:pt-32 pb-8 md:pb-12">
        <div className="container text-center flex flex-col items-center gap-4 max-w-[64rem]">

解説

  • pt-6: 上部のパディングを設定します。6は、Tailwindのスケールに基づいて、1.5rem（24px）に相当します。

  • md:pt-10: 中サイズの画面（md）以上で、上部のパディングを10（2.5rem、40px）に設定します。

  • lg:pt-32: 大サイズの画面（lg）以上で、上部のパディングを32（8rem、128px）に設定します。

  • pb-8: 下部のパディングを設定します。8は、2rem（32px）に相当します。

  • md:pb-12: 中サイズの画面（md）以上で、下部のパディングを12（3rem、48px）に設定します。

  • container: コンテナクラスは、要素を中央に配置し、最大幅を設定します。レスポンシブデザインに対応しています。

  • text-center: テキストを中央揃えにします。

  • flex: フレックスボックスを使用して、子要素を配置します。

  • flex-col: フレックスボックスの方向を縦（列）に設定します。

  • items-center: フレックスアイテムを交差軸（縦方向）で中央に配置します。

  • gap-4: フレックスアイテム間の隙間を設定します。4は、1rem（16px）に相当します。

  • max-w-[64rem]: 最大幅を64rem（1024px）に設定します。これにより、画面サイズが大きくても、要素の幅がそれ以上には広がりません。

これらのクラスを組み合わせることで、レスポンシブで整然としたレイアウトを実現しています。

Tailwind CSSの要素を表示する

  • VSCode拡張機能「Tailwind CSS IntelliSense」をインストールする
なぎそらなぎそら

20241106

  • 障害対応で2h残業してヘトヘトだったのでサボり

20241107（20:20～21:00）

  • 昨日の疲れが残ってるので、8だけやった
  • Cursor Tabがコードを書いてくれるので、打たなくて良いの楽
  • 3.5-Haikuを使ってみたけど、コードの理解力が高い気がする
  • これが無制限で使い放題は凄い！

https://x.com/kinopee_ai/status/1854153597828952305

なぎそらなぎそら
  • 金土日：疲れたので休養にした

20241111（20:00～21:00）

  • 9～11までやった。
  • 以下調べたこと。
z-index: 40; は、CSSのプロパティで、要素の重なり順序を制御するために使用されます。

cn は "className" の略です。
これは開発者間で広く使われる慣習的な省略形で、特に React や Next.js のプロジェクトで頻繁に見られます。
なぎそらなぎそら

20241112（20:00～22:00）

  • Replitを語る会に参加。Udemyはお休み
  • ReplitのCEOさん（Amjad）？が来てくれて直接説明してもらえた！
  • Amjadさんの英語がゆっくりで聞きやすくて助かった
  • ReplitはDB構築まで兼ね備えた、AIアプリ開発webIDEって感じかな？
  • 海外のエンジニアの話を生で聞けて楽しかった！
  • 吉波さんのReplit向けのプロンプトが凄い！
    • Replitは最初に認証を入れるとバグるので、最後にいれる
    • フォントを16pxにすると崩れなくて良い
react, expressで、openaiのapiを使った特定スキルを教えるAIチューターを作りたい。とにかくニッチなスキルかつ、狭く深スキルを教えるAIチューター
プラットフォームではなくチャットインタフェース。認証もいらない。
素晴らしい。モバイルで使いたいので全てのフォントサイズを16pxにしてください。またプログラミングの中でも特定の言語に絞ってニッチな学習（狭く深く）できるようにしてください
なぎそらなぎそら

20241114（07:30～09:00）

  • 昨日はSTATION Aiで、Google Startup School Aichiの卒業式に参加して疲れたのでお休み
  • 今日は朝早めに目が覚めたので、Udemyやったりしていた
  • 12をやった