デイトラ40代プログラミング日記【17ヶ月目第3週】アラフォー初心者

Macのみで Next.js コーディングをすることにした

今度は Tailwind CSS がMacでうまく動かない

結局、 Tailwind Ver.4 をインストールしていたことが原因

Ver.3にヴァージョンダウンしたら Tailwind.config.js が生成されて環境構築できた！

今日は環境構築に時間を割いた1日だった、Macのほうが環境構築に良いって味わったあ〜😅

Tailwind CSS 使いにくいから SCSS で Next.js 使えるかAIに質問したらわかりやすく教えてくれた👇️

「rfce」は、React開発環境でよく使用されるコードスニペット（短縮コマンド）。

「React Functional Component Export」の略で、Reactの関数コンポーネントのボイラープレート（テンプレート）を生成する👇️

import React from 'react'

function ComponentName() {
  return (
    <div>ComponentName</div>
  )
}

export default ComponentName

以下の要素を含む基本的な関数コンポーネントの構造を作成する👇️

• Reactのインポート文
• コンポーネントの関数宣言
• シンプルなJSX構造を持つreturn文
• コンポーネントを他の部分で使用可能にするためのexport文

「rfce」を使用することで、新しいコンポーネントを作成する際の時間を節約できる。

Reactの関数コンポーネントに対して一貫した開始点を提供する。

これにより、素早くコンポーネントの基本構造を作成し、すぐにロジックやスタイリングの実装に取り掛かることができる👍️

要は、HTMLの「⌘ !」と同じ👍️