
izanami で、[無料で完結！個人開発力を高める 1 日勉強法](https://izanami.dev/post/5a022161-a7be-4f9a-be56-a9aea1544087) を公開しました。

Next.js × Supabase × Clerk × Vercel を組み合わせて、ブログ＋会員機能付きのアプリを **1 日で作る実践的な学習法** をまとめたものです。

こんな方におすすめ：

- とにかく早く実践したい人
- 本を読むより手を動かしたい人
- 無料で、個人開発スキルを身につけたい人

技術構成はすべて無料で使えるもので完結しており、**Markdown で記事を書く → 認証 →DB→ デプロイまで**を一気に体験できます。

「1 日でこれだけ作れた」という成功体験が、その後の学習と開発に大きく効いてきます。

ぜひ、休日にチャレンジしてみてください。

[X ポストはこちら](https://x.com/commte/status/1910108141574128077)


Next.js × Supabase × Clerk × Vercel を使って、1日で個人開発力を底上げする実践的な勉強法を紹介します

１日で個人開発力を高める勉強法


izanami で、[個人開発 SaaS で気をつけるべき日本の法律](https://izanami.dev/post/cc5aa4dc-1988-49c5-b2ac-cddfd32e3a10) を執筆しました。
個人開発 SaaS を運営する上で、気をつけるべき日本の法律について解説しています。

以下のような法律に言及しています。

- 個人情報保護法
- 景品表示法
- 著作権法
- 資金決済法
- サイバーセキュリティ基本法
- 不正アクセス禁止法
- 特定商取引法
- 消費税法
- 電子契約法
- 名誉毀損・侮辱罪
- プロバイダ責任制限法

法的リスクを最小限に抑え、安心してサービスを運営するためにも、一度目を通してみてください。

[X は、こちらから](https://x.com/commte/status/1909020331156848944)。


個人開発で気をつけるべき日本の法律について


本日、新しい技術共有プラットフォーム『izanami』を正式にリリースしました 🎉🎉🎉

詳細は公式サイトをご覧ください。

👉 [izanami 公式サイト](https://izanami.dev/)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">エンジニアやデザイナーが技術情報を投稿するためのプラットフォーム 「izanami」 をリリースしました 🎉<a href="https://t.co/yApnhStPv8">https://t.co/yApnhStPv8</a><br><br>エンジニアとデザイナーが交流できるサービスを目指しています。記事の 3… <a href="https://t.co/WqI7tFbxdn">pic.twitter.com/WqI7tFbxdn</a></p>&mdash; コムテ (@commte) <a href="https://twitter.com/commte/status/1878966458392391800?ref_src=twsrc%5Etfw">January 14, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### コンセプト

『izanami』は、エンジニアやデザイナーが技術情報やアイデアを共有し合うためのプラットフォームです。技術記事、ノンコード記事、トレンド情報など、幅広いコンテンツをサポートしています。また、ユーザー同士が簡単に交流できる機能や、金銭的なサポート、チームブログを通じた共同作業を促進する機能も備えています。

### サービスの特徴

記事の 3 行要約、フィードバックの表示、文章の質の検証、美しいシンタックスハイライトなど面白い特徴があります。

- **技術記事投稿機能**: エンジニアリングやデザインに関する深い洞察を自由に共有できます。
- **チームブログ**: 組織内外での知識共有を促進します。チーム限定公開が可能です。
- **シンプルで直感的な UI**: 投稿・閲覧がスムーズに行えます。

izanami では、記事の要約を入力すると、記事の冒頭に概要を表示することができますが、description タグや og タグにも反映されるので検索結果やソーシャルメディアでの記事の見え方が改善されます。

### チームブログ

izanami でチームブログの PRO 版にアップグレートすると、チーム内だけで記事を共有できる「チームブログ限定公開」がご利用可能になります。イベントの参加者だけに見せる限定的ななどに便利ですね。

### これからの展望

『izanami』は、技術を通じて世界中のクリエイターを繋ぐことを目指しています。今後も多くの機能を追加予定ですので、ぜひチェックしてみてください。

フィードバックは、[izanami コミュニティ](https://github.com/izanami-dev/izanami-community/discussions)よりお気軽にお寄せください。

引き続き『izanami』をよろしくお願いいたします。


エンジニアやデザイナーが技術情報を投稿するための新しいプラットフォームを公開しました。

エンジニア・デザイナー向けプラットフォームをリリースしました


## TL;DR

この記事では、Next.js の img タグや、`<Image />`コンポーネントを使ったときのエラーとその解決策について解説します。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| React      | 18.2.0     |

### ESLint の警告

Next.js で、img タグを使うと以下のような警告が出ることがあります。

> Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element",

このメッセージは、Next.js の ESLint プラグインから出力される警告で「通常の HTML の`<img>`タグを使用すると、LCP（Largest Contentful Paint、最も大きなコンテンツの描画時間）が遅くなる可能性があり、さらに帯域幅も多く使う可能性がある」ということを伝えています。

例えば、以下のような`<Image />`を使った記述で画像を表示することが望ましいです。

```tsx
import Image from "next/image";

function Home() {
  return (
    <Image
      src="https://example.com/sample.jpg"
      alt="sample image"
      width={600}
      height={400}
    />
  );
}

export default Home;
```

[No img element \| Next\.js](https://nextjs.org/docs/messages/no-img-element)

画像を最適化するために、Next.js が提供する`<Image />`コンポーネントを使うことを検討してください。このコンポーネントは、`next/image`からインポートできます。このコンポーネントは、画像の最適化を自動で行ってくれます。

TypeScript では、次のような記述になるでしょう。

```tsx
import Image from "next/image";

type Props = {
  src: string;
  alt: string;
  width: number;
  height: number;
};

const OptimizedImage = ({ src, alt, width, height }: Props) => {
  return (
    <div>
      <Image
        src={src}
        alt={alt}
        width={width}
        height={height}
        layout="responsive"
      />
    </div>
  );
};
```

### OAuth 認証時の外部 URL のエラー

例えば、Google の OAuth 認証を実装する場合、次のようなエラーが発生することがあります。

> Unhandled Runtime Error
> Error: Invalid src prop (https://lh3.googleusercontent.com/xxxx) on `next/image`, hostname "lh3.googleusercontent.com" is not configured under images in your `next.config.js`
> See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

このエラーは、Next.js の`<Image />`コンポーネントが外部の URL を読み込む際に必要な設定が`next.config.js`にないために発生しています。外部の画像（この場合は Google の画像）を使用する場合、そのドメインを`next.config.js`に設定する必要があります。

`next.config.js`をプロジェクトのルートディレクトリに作成（または既存のものを編集）し、以下のように設定してください。

```js
module.exports = {
  images: {
    domains: ["lh3.googleusercontent.com"],
  },
};
```

この設定を追加した後、開発サーバーを再起動してください。

これで、`lh3.googleusercontent.com`からの画像を`<Image />`コンポーネントで読み込むことができるようになります。詳細は[Next.js のドキュメント](https://nextjs.org/docs/basic-features/image-optimization#domains)を参照してください。

複数の外部 URL を使用する場合、`next.config.js` ファイルに以下のような設定を追加する必要があります。

```js
module.exports = {
  images: {
    domains: ["example.com", "another-example.com"],
  },
};
```

`domains` 配列には、許可する外部ドメインを追加します。


Next.jsのImageコンポーネントでよく発生するエラーとその解決策について解説します。

Next.jsで、Imageコンポーネントエラーを解消する方法


## TL;DR

このページでは、Tailwind CSS の基礎的な使い方について解説します。Tailwind は効率的で拡張性の高い CSS フレームワークです。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| React      | 18.2.0     |
| Tailwind   | 3.3.3      |

### Tailwind CSS とは？

Tailwind CSS は、スタイリングを効率的に行える CSS フレームワークです。HTML タグ内に、規定の短いクラスを追加するだけで、多くのスタイルを適用できます。クラス名は直感的なので、CSS を書いたことがある方なら、すぐに使い方を覚えられます。

```tsx
<div className="bg-blue-500 text-white p-4">
  これは Tailwind の基本的な使い方です。
</div>
```

この例では、`bg-blue-500` で背景色を青、`text-white` で文字色を白、`p-4` でパディングを 4 に設定しています。

とはいっても、数値が少し分かりづらい。そもそも`p-4`って、何ピクセルなの？と思いませんか？

### JIT モードで直接数値を指定できる

そんな方には、JIT モードがおすすめ。`[]` で囲んで直接数値を指定できます。これが便利過ぎるんですね。

```tsx
<div className="mt-[80px]">
  <p>このテキストは上に80ピクセルのマージンがあります。</p>
</div>
```

この例では、`mt-[80px]` で上側（top）のマージンを 80 ピクセルに設定しています。

`margin-bottom: 120px` を適用したいなら、`mb-[120px]` と書けば OK です。

さらに、これを変数に入れて何度も再利用できます！

どうでしょうか？これなら、直感的に分かりやすいですよね？

設定方法：[Just\-in\-Time Mode \- Tailwind CSS](https://v2.tailwindcss.com/docs/just-in-time-mode)

※ 後述しますが、`@apply` ディレクティブを使えば、Tailwind CSS で提供されるユーティリティクラスをまとめて、カスタム CSS クラスを作成することができます。

### 命名規則

Tailwind CSS では多くの CSS プロパティに対して短縮した命名規則が用いられています。これにより、より短いクラス名で同じスタイルを適用でき、効率的なコーディングが可能です。以下は、いくつかの一般的な命名規則の例です。

| 短縮クラス名 | 対応する CSS プロパティ    | 例                         |
| ------------ | -------------------------- | -------------------------- |
| `bg`         | background-color           | `bg-red-500`               |
| `text`       | color, font-size           | `text-lg`, `text-blue-700` |
| `p`, `m`     | padding, margin            | `p-4`, `m-2`               |
| `w`, `h`     | width, height              | `w-1/2`, `h-10`            |
| `flex`       | Flexbox properties         | `flex`, `flex-row`         |
| `grid`       | Grid layout properties     | `grid`, `grid-cols-3`      |
| `border`     | border-style, width, color | `border`, `border-t-2`     |
| `rounded`    | border-radius              | `rounded`, `rounded-lg`    |

このように、新たに覚えることも少ないので、すぐに使いこなせると思います。

### チートシート

公式のチートシートが検索しやすくて便利です。まずは、こちらから目的のスタイルを探してみてください。

<a href="https://tailwindcomponents.com/cheatsheet/" target="_blank">Tailwind CSS Cheat Sheet</a>

こちらは、コンポーネント集です。コピペするだけで美しい UI を作ることができます。

<a href="https://tailwindcomponents.com/" target="_blank">Tailwind CSS Components</a>

### メリット

そもそも、なぜ フロントエンドエンジニアは、Tailwind CSS を使うのでしょうか？

Tailwind CSS を使うと、次のようなメリットがあります。

- CSS を手動で書く必要が少なくなり、デザイン変更が迅速に行える
- 既存のコンポーネント集から直接コピペして使える
- 独自のクラス名を考える手間が省けるため、開発速度が向上する
- クラス名が多くて見づらい場合は、変数に格納して使い回すことができる
- オンラインで利用できる網羅的なチートシートが便利
- scss や css ファイルを開かなくてもスタイリングが可能
- CSS の重複を減らすことで、コードの保守性が向上する

このように CSS を書くストレスを解消してくれるので、フロントエンドエンジニアにとっては非常に便利なツールです。まさに「CSS に時間をさきたくない」「TypeScript に集中したい」という方におすすめ。

### 基本的なスタイリング

Next.js での、基本的なスタイリングの例です。

```tsx
// Button.tsx

type Props = {
  label: string;
};

const Button = ({ label }: Props) => {
  return (
    <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
      {label}
    </button>
  );
};
```

このコードでは、`Button` コンポーネントを作成しています。`className` 属性に指定されたクラスが Tailwind のスタイリングに対応しています。

- `bg-green-500`: 背景色を緑に設定
- `hover:bg-green-700`: ホバー時の背景色をより濃い緑に設定
- `text-white`: 文字色を白に設定
- `font-bold`: 文字を太字に設定
- `py-2 px-4`: 上下に 2、左右に 4 のパディングを設定
- `rounded`: 角を丸く設定

### ユーティリティファーストとは

ユーティリティファーストとは、基本的なスタイルを短いクラス名で表現し、HTML 内で直接指定する考え方です。

```tsx
// Example.tsx

type Props = {
  text: string;
};

const Example = ({ text }: Props) => {
  return <p className="text-xl md:text-2xl">{text}</p>;
};
```

この例では、`text-xl` で通常の文字サイズを大きく、`md:text-2xl` で中サイズの画面でさらに大きくしています。

### 動的なスタイリング

Tailwind では JavaScript を使って動的にスタイリングできます。この特性は、React と非常に相性が良いです。

```tsx
// DynamicExample.tsx

type Props = {
  isActive: boolean;
};

const DynamicExample = ({ isActive }: Props) => {
  const buttonStyle = isActive ? "bg-blue-500" : "bg-red-500";

  return (
    <button className={`${buttonStyle} text-white font-bold py-2 px-4 rounded`}>
      Click Me
    </button>
  );
};
```

この例では、`isActive` プロパティによってボタンの背景色を動的に変更しています。

### Just-in-Time Mode

`[]` ブラケットを用いて Tailwind CSS のグリッド列や行を数値で直接指定する方法もあります。この機能は Just-in-Time (JIT) モードで特に有用です。

Tailwind CSS の Just-in-Time (JIT) モードでは、ブラケット内に直接数値や CSS 変数を指定することができます。この機能を利用すると、非常に柔軟なスタイリングが可能です。

#### mt-[80px] の例

`mt-[80px]` は、上側（top）のマージンを 80 ピクセルに設定します。

```tsx
const MarginExample = () => {
  return (
    <div className="mt-[80px]">
      <p>このテキストは上に80ピクセルのマージンがあります。</p>
    </div>
  );
};
```

#### text-[var(--white)] の例

CSS 変数を使用する場合、`text-[var(--white)]` のように指定することもできます。

```tsx
type Props = {
  text: string;
};

const TextColorExample = ({ text }: Props) => {
  return (
    <div style={{ "--white": "#ffffff" }} className="text-[var(--white)]">
      {text}
    </div>
  );
};
```

特定のピクセル数で列幅を指定することもできます。

```tsx
type Props = {
  items: string[];
};

const PixelGridLayout = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-[100px,auto,200px] gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};
```

この例では、`grid-cols-[100px,auto,200px]` というクラスで、各列の幅をピクセルで指定しています。第一列は 100px、第二列は自動（`auto`）、第三列は 200px となります。

### Grid レイアウト

Grid Layout も簡単に実装できます。`grid` クラスを親要素に適用し、子要素に対しては `grid-cols-*` や `grid-rows-*` のようなクラスを使用します。

```tsx
// GridLayout.tsx

type Props = {
  items: string[];
};

const GridLayout = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};
```

この例では、`grid` クラスでグリッドレイアウトを指定し、`grid-cols-3` で 3 列のグリッドを生成しています。`gap-4` は各アイテム間のギャップを設定しています。

### レスポンシブデザイン

Tailwind CSS では、レスポンシブデザインも容易に実現できます。

```tsx
// ResponsiveGrid.tsx

type Props = {
  items: string[];
};

const ResponsiveGrid = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};
```

この例では、`grid-cols-1 md:grid-cols-3 lg:grid-cols-4` といったクラスを使って、デバイスの画面サイズに応じた柔軟なグリッドレイアウトを実現しています。

### ネストされたグリッド

グリッド内部に別のグリッドを配置するネストも可能です。

```tsx
// NestedGrid.tsx

type Props = {
  items: string[][];
};

const NestedGrid = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-2 gap-4">
      {items.map((subItems, index) => (
        <div key={index} className="grid grid-cols-2 gap-2">
          {subItems.map((item, subIndex) => (
            <div key={subIndex} className="bg-gray-300 p-4">
              {item}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};
```

この例では、親のグリッドが `grid-cols-2` で 2 列、各子のグリッドが `grid-cols-2` でさらに 2 列となっています。

以上が、React と Tailwind CSS を用いたグリッドレイアウトの基本的な使い方です。Tailwind は短いクラス名で多くのスタイリングオプションを提供するため、グリッドレイアウトも非常に簡単に設定できます。

### @apply

`@apply` ディレクティブは、Tailwind CSS で提供されるユーティリティクラスをまとめて、カスタム CSS クラスを作成するための強力な機能です。これにより、プロジェクト内で再利用可能なコンポーネントスタイルを効率的に定義することができます。

`@apply` の基本的な使い方は簡単です。CSS ファイル内で、新しいクラス名を定義し、その後に `@apply` ディレクティブを続け、適用したい Tailwind のユーティリティクラスを指定します。

```css
.my-button {
  @apply bg-blue-500 text-white py-2 px-4 rounded;
}
```

この例では、`.my-button` クラスが定義され、それに `bg-blue-500`、`text-white`、`py-2`、`px-4`、`rounded` といった Tailwind のユーティリティクラスが適用されます。

#### 制限と注意点

`@apply` ディレクティブは非常に便利ですが、すべてのユーティリティクラスが使用できるわけではありません。例えば、`hover:`、`focus:` などの状態クラスや、`group-hover:` などの依存クラスは `@apply` で直接使用することはできません。

#### プラクティカルな例

Next.js や他の React フレームワークで `@apply` を使用する場合、CSS モジュールやスタイルドコンポーネントと組み合わせて使うことが多いです。

```css
/* styles/Button.module.css */
.button {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
```

```jsx
import styles from "./Button.module.css";

const Button = ({ label }) => {
  return <button className={styles.button}>{label}</button>;
};
```

このように、`@apply` ディレクティブはコードの可読性を高め、再利用可能なカスタムスタイルを短時間で作成する際に大変役立ちます。


Tailwind CSSを用いて効率的なスタイリングを実現する方法を解説します。

Tailwind CSS の基本的な使い方

## TL;DR

この記事では、Tailwind Just-in-Time（JIT）モードの実装について説明します。JIT モードを使用すると、`[]` ブラケット内に任意の値を直接指定できます。このモードにより、スタイルの柔軟性が増し、ページの読み込み速度も向上します。

Tailwind JIT モードは、実際にプロジェクトで使用されるクラスだけを生成するため、最終的な CSS ファイルサイズが小さくなります。

後述しますが、アコーディオンメニューも JavaScript を使わずに簡単に実装できます。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| Tailwind   | 3.3.3      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### 設定

設定が必要な場合は、`tailwind.config.js` に以下のように記述します。

```tsx
// tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
};
```

- `mode: 'jit'` この行で JIT モードを有効にします。
- `purge: ['./src/**/*.{js,ts,jsx,tsx}']` この行では、どのファイルをスキャンするかを指定しています。

詳細は、[Just\-in\-Time Mode \- Tailwind CSS](https://v2.tailwindcss.com/docs/just-in-time-mode)を参照してください。

### html に記述する

html に記述する場合は、このようになります。直接数値を記述できるので、分かりやすいですね。

```html

<div class="mt-[40px]"></div>


<div class="w-[60%] sm:w-[100%]"></div>


<div class="text-[var(--black)]"></div>


<div class="m-auto"></div>
```

### tsx に記述する

tsx に記述する場合は、このようになります。html と同じ記述です。

```tsx
<div className="mt-[80px]">
  <p>このテキストは上に80ピクセルのマージンがあります。</p>
</div>
```

### 複数のプロパティを指定する場合

改行しても反映されます。

```tsx
<h4
  className="
  font-normal
  text-[#333]
  text-[1.4rem]"
>
  XXXX
</h4>
```

border を指定します。

```tsx
<div className="border-t-[1px] border-b-[1px] border-[var(--mid-gray)]"></div>
```

### 画像のアスペクト比を指定する

画像にアスペクト比やオブジェクトの位置を指定する場合は、このようになります。

```tsx
<Image
  src="/image/company/staff.jpg"
  alt=""
  width={800}
  height={800}
  className="
  aspect-[1/1]
  object-cover"
/>
```

### Grid レイアウト

このコンポーネントは、子要素を 3 列のグリッドに配置する汎用的なレイアウトです。画面が小さい（`sm`ブレークポイント以下）場合は、1 列になります。グリッドの各アイテム間には 60 ピクセルのギャップが設定されています。全体の配置は中央になります。

```tsx
type Props = {
  children: React.ReactNode;
};

const MyGrid = ({ children }: Props) => {
  return (
    <div
      className="
      mt-[40px]
      grid
      grid-cols-3
      sm:grid-cols-1
      gap-[60px]
      place-content-center"
    >
      {children}
    </div>
  );
};

export default MyGrid;
```

### calc 関数を使う

自動計算も簡単です。

html

```html

<div class="w-[calc(100% - 16px)]"></div>
```

tsx

```tsx
type Props = {
  someValue: number;
};

const MyComponent = ({ someValue }: Props) => {
  return (
    <div className={`w-[calc(100% - ${someValue}px)]`}>{/* コンテンツ */}</div>
  );
};

export default MyComponent;
```

### 疑似要素を使う

疑似要素を使う場合は、`before:` や `after:` を使います。`before:content-['XXXX']` というように、`content` の値を指定します。

```tsx
<li key={index} className="before:content-['-'] before:text-[1.2rem]">
  {item}
</li>
```

### var 関数を使う

CSS 変数を使用する場合、`text-[var(--white)]` のように指定することもできます。

```tsx
<h3 className="text-center text-[var(--black)]">XXXX</h3>
```

### アコーディオンメニュー

アコーディオンメニューを作成する際に、HTML の`<summary>`および`<details>`タグを使用すると、JavaScript なしで簡単に実装できます。以下はその一例です。

```tsx
type AccordionProps = {
  title: string;
  content: string;
};

const Accordion = ({ title, content }: AccordionProps) => {
  return (
    <details className="border rounded overflow-hidden mb-4">
      <summary className="bg-gray-200 p-4 cursor-pointer">{title}</summary>
      <div className="p-4">{content}</div>
    </details>
  );
};

export default Accordion;
```

この`Accordion`コンポーネントは`title`と`content`というプロパティを受け取り、それぞれが`<summary>`と`<div>`タグの中に表示されます。`<details>`タグによってアコーディオンの開閉機能が自動で備わります。

このコンポーネントを使用するには以下のようにします。

```tsx
const App = () => {
  return (
    <div>
      <Accordion
        title="Section 1"
        content="This is the content for section 1"
      />
      <Accordion
        title="Section 2"
        content="This is the content for section 2"
      />
      {/* 他のコンポーネントや内容 */}
    </div>
  );
};

export default App;
```

### 動的なクラスの生成

動的にクラスを生成することができます。これは、React で UI を動的に制御する際に非常に有用です。

```tsx
type ButtonProps = {
  isActive: boolean;
};

const Button = ({ isActive }: ButtonProps) => {
  const buttonClass = isActive ? "bg-blue-500" : "bg-gray-300";
  return <button className={buttonClass}>Click Me</button>;
};
```

Tailwind JIT モードの基本から応用までを、TypeScript のソースコードとともに丁寧に解説します。

Tailwind CSS の JIT モードを使って素早く開発しよう！


## TL;DR

フロントエンドエンジニアの方々にとって、npm コマンドは日常的に使用されるツールだと思います。

Next.js を用いたプロジェクトでは、npm コマンドを活用して開発作業を効率化する場面が多く、修正やバージョンアップにも役立ちます。この記事では、Next.js プロジェクトで頻繁に使われる npm コマンドを一覧で紹介し、各コマンドがどのような状況で活躍するのか、使いどころを解説します。

### 予備知識

npm コマンドを扱う上での予備知識を簡単に解説します。

#### npm について

npm（Node Package Manager）は、Node.js のパッケージマネージャーで、JavaScript のコードやライブラリを管理するためのツールです。npm は、公式の npm レジストリからパッケージをダウンロードしたり、自分自身で作成したパッケージを公開したりすることができます。これによって、開発者はコードの再利用、共有、管理が容易になります。

#### package.json について

`package.json` ファイルは、Node.js プロジェクトの設定ファイルです。プロジェクトのメタデータ（名前、バージョン、説明など）や依存関係（ライブラリやツール）、スクリプト（ビルド、テスト、デプロイなど）が定義されています。

### npm のバージョンをチェック

```bash
npm -v
```

npm の現在のバージョンを表示する。

##### 使いどころ

- 使用している npm のバージョンを確認する
- アップデートが必要かどうかを判断する際に役立つ

### インストール済のパッケージ一覧表示

```bash
npm list
```

インストールされたパッケージとその依存関係を一覧表示する。

##### 使いどころ

- プロジェクトにインストールされたパッケージを確認する
- パッケージの依存関係を視覚的に理解する
- トラブルシューティングや依存関係の管理に役立つ

### アップデート

```bash
npm update
```

アップデート可能なパッケージを最新バージョンに更新する。

##### 使いどころ

- プロジェクトのすべてのパッケージを一括で更新
- 依存関係も適切に更新される
- セキュリティの問題修正やパフォーマンスの改善に寄与する場合がある

### キャッシュの整合性を確認

```bash
npm cache verify
```

キャッシュの整合性を確認する。

##### 使いどころ

- キャッシュに格納されたデータが破損していないかをチェックする
- 不要なデータや破損したデータがあれば報告する
- キャッシュの健全性を維持し、問題がある場合は修復の指針を提供する

### npm のキャッシュをクリア

```bash
npm cache clean -f
```

npm のキャッシュを強制的に削除する。

##### 使いどころ

- インストールの問題解消に役立つ場合がある
- ディスクスペースを解放する
- `-f` オプションで強制的にキャッシュを削除する

### プロジェクトをローカルで実行

```bash
npm run dev
```

開発モードでプロジェクトをローカル環境で実行する。

##### 使いどころ

- 開発中にリアルタイムで変更を反映させることが多い
- デバッグやエラーの確認が容易

### ビルドプロセスを実行

```bash
npm run build
```

プロジェクトをビルドする。

##### 使いどころ

- プロダクション用にコードを最適化する
- CSS、JavaScript、画像などの資源をバンドルする
- コンパイルやトランスパイル（TypeScript を JavaScript に変換するなど）を行う

### ビルドしたプロジェクトをスタート

```bash
npm start
```

ビルドされたプロジェクトをローカル環境で実行する。

##### 使いどころ

- ビルドされたプロジェクトをローカルで実行する
- 通常、本番環境と同じ条件でアプリケーションを動かす
- ビルド成功後に自動的にサーバーを立ち上げる場合もある

### プロジェクトの依存関係をインストール

```bash
npm install
```

プロジェクトが依存しているパッケージをインストールする。

##### 使いどころ

- `package.json` ファイルにリストされている依存パッケージをインストールする
- オプションとしてパッケージ名を指定することで、特定のパッケージをインストールできる
- 開発依存性（devDependencies）も含めてすべての依存性がインストールされます

### 特定のパッケージをインストール

```bash
npm install package-name
```

### 特定のパッケージをアンインストール

```bash
npm uninstall package-name
```

### 開発環境に特定のパッケージをインストール

```bash
npm install package-name --save-dev
```

特定のパッケージをプロジェクトの開発依存関係としてインストールする。

##### 使いどころ

- テストライブラリ、ビルドツール、リンターなどの開発時にのみ必要なパッケージをインストールする
- 本番環境にはインストールされない
- `package.json` に依存関係を記録し、他の開発者と簡単に共有できる

### グローバルにパッケージをインストール

```bash
npm install -g package-name
```

特定のパッケージをシステム全体で利用可能にするためにグローバルにインストールする。

##### 使いどころ

- コマンドラインツールやビルドツールなど、プロジェクト固有でないパッケージをインストールする
- システム全体で利用可能になる
- プロジェクトの `package.json` には影響を与えない

### パッケージを特定のバージョンでインストール

```bash
npm install package-name@version
```

特定のバージョンの npm パッケージをインストールする。

##### 使いどころ

- 特定のバージョンのパッケージを明示的にインストールする
- バージョンの違いによる不具合を避けるために使用する
- プロジェクトが依存する特定のバージョンのパッケージを管理

### 依存関係を再インストール

```bash
rm -rf node_modules package-lock.json
npm install
```

依存関係とロックファイルを削除後、再インストールします。

##### 使いどころ

- `node_modules` と `package-lock.json` の両方をクリアして依存関係をリセットする
- 依存関係に問題が生じた場合のトラブルシューティング
- 新たな環境で依存関係を一から確立する場合

### ローカルプロジェクトでの npm パッケージをアウトデート

```bash
npm outdated
```

プロジェクトで使用されている npm パッケージが最新版であるかどうかを確認する。

##### 使いどころ

- プロジェクトにインストールされているパッケージの現在のバージョンと、利用可能な最新バージョンを比較する
- 更新が必要なパッケージを特定し、必要に応じて更新作業を行う
- セキュリティリスクの低減や新機能の利用につながる

### ローカルプロジェクトの特定のパッケージをアップデート

```bash
npm update package-name
```

指定されたパッケージを最新バージョンに更新する。

##### 使いどころ

- 特定のパッケージだけを最新バージョンに更新する
- 依存関係も適切に更新されます
- セキュリティの問題修正やパフォーマンスの改善に寄与する場合があります

### プロジェクトに関するセキュリティの脆弱性をチェック

```bash
npm audit
```

プロジェクトの依存関係に存在するセキュリティの脆弱性を探す。

##### 使いどころ

- セキュリティの脆弱性を特定する
- 対応策を提案する場合がある
- 修正の必要性や重要度を評価する

### セキュリティの脆弱性を自動修正

```bash
npm audit fix
```

npm audit で検出された脆弱性を自動で修正する。

##### 使いどころ

- セキュリティの脆弱性を修正する
- 修正可能な依存関係を自動で更新する
- 手動での対処が必要な場合も指摘する

### 未使用の依存関係を削除

```bash
npm prune
```

未使用の依存関係を`node_modules`から削除する。

##### 使いどころ

- プロジェクトをクリーンに保つ
- ディスク容量を節約する
- 開発環境と本番環境の整合性を高める

### npm の設定リストを表示

```bash
npm config list
```

設定されている npm の全ての設定項目をリストする。

##### 使いどころ

- npm の設定項目を確認する
- トラブルシューティングや設定変更に役立つ

### 特定のパッケージの詳細情報を表示

```bash
npm info package-name
```

指定したパッケージに関する詳細情報を表示する。

##### 使いどころ

- バージョン、依存関係、レポジトリなどの情報を提供する
- パッケージ選定やバージョン管理に役立つ

### npm レジストリでパッケージを検索

```bash
npm search package-name
```

指定した名前に一致または関連するパッケージを npm レジストリから検索する。

##### 使いどころ

- 既存のパッケージを探す
- 機能や用途に応じたパッケージを見つける
- パッケージの人気や評価を確認する

### npm のルートディレクトリを表示

```bash
npm root
```

インストールされたパッケージが格納されているディレクトリ（通常は `node_modules` ディレクトリ）の絶対パスを表示する。

##### 使いどころ

- パッケージがインストールされた場所を特定する
- パッケージの管理や移動に役立つ
- `node_modules` ディレクトリの位置を確認する

### npm のグローバルルートディレクトリを表示

```bash
npm root -g
```

グローバルにインストールされたパッケージが格納されているディレクトリの絶対パスを表示する。

##### 使いどころ

- グローバルにインストールされたパッケージの場所を特定する
- グローバルパッケージの管理や移動に役立つ
- グローバルにインストールされた`node_modules`ディレクトリの位置を確認する


この記事では、Next.js プロジェクトで頻繁に使われる npm コマンドの一覧とその説明を行います。

npm コマンド一覧 チートシート


## TL;DR

このページでは、デプロイ時に ESLint のエラーが出る対処法の実装方法について解説します。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| React      | 18.2.0     |

### error ESLint: Failed to load config "prettier" to extend from.

デプロイ時に以下のようなエラーが出るときがあります。

```bash
- error ESLint: Failed to load config "prettier" to extend from. Referenced from: /vercel/path0/.eslintrc.json
```

このエラーメッセージは、Vercel でのデプロイ時に ESLint の設定で問題が発生していたときに表示されました。原因を追うと、eslintrc.json の設定ミスや、 `;` `,` などの記号が、VSCode の自動整形により削除されていたことが原因でした。

ESLint での自動整形に加え、VSCode で保存したときに自動的に整形されるように設定していたのですが、その設定が正しく行われていなかったために、デプロイ時にエラーが発生していました。

この問題は、ローカルでデプロイするときも同じように発生します。

まずは VSCode の設定を見直してみましょう。

### VSCode の settings.json

最初に、VSCode の settings.json の設定を確認してみましょう。私の環境では以下です。

```json
// prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": true, // セミコロンを付ける
"prettier.singleQuote": false, // シングルクォートを付ける
"editor.codeActionsOnSave": { // 保存時に Eslint で自動整形
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false, // 保存時の VSCode による 自動整形を無効化
```

※ `editor.formatOnSave` が有効なっている場合、保存時に自動的にフォーマットが実行されます。この設定が有効になっていると、ESLint の設定と競合してエラーがでる可能性があります。そのため、`editor.formatOnSave` を `false` に設定しています。

ただし、上記の設定は主に JavaScript や TypeScript のコードに対する動作を指定しています。Markdown ファイルやその他のファイルに対しては特に設定がないため、自動フォーマットや Lint は働かないので、整形したい言語を true に設定してください。

```json
"[markdown]": {
  "editor.formatOnSave": true
},
"[html]": {
  "editor.formatOnSave": true
},
```

### .eslintrc.json

解決しない場合、Next.js のプロジェクトを確認していきます。以下の 2 つのファイルを確認してください。

- package.json
- .eslintrc.json

まずは、`package.json` ファイルを確認し、`eslint-config-prettier` が依存関係に含まれているか確認してください。もし含まれていなければ、プロジェクトに追加してみてください。

```bash
npm install --save-dev eslint-config-prettier
```

または

```bash
yarn add --dev eslint-config-prettier
```

次に、ESLint の設定ファイル（`.eslintrc.json`）において、`extends` セクションに `prettier` が正しく設定されているか確認してください。

```json
{
  "extends": ["prettier"]
}
```

私の環境ではこのように設定しました。

```json
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}
```

#### next lint

`next lint`は、Next.js のプロジェクトで ESLint を実行するためのコマンドです。ESLint は、JavaScript や TypeScript のコードで一般的な問題点やスタイル違反を検出するためのツールです。`next lint`を実行すると、プロジェクト内のすべての JS や TS ファイルが ESLint によって解析され、警告やエラーがコンソールに表示されます。

特に Next.js には、パフォーマンスやアクセシビリティ、SEO などに関連する独自の ESLint ルールもいくつか用意されています。これらのルールはプロジェクトの品質を高めるのに役立つものが多いです。

したがって、`next lint`はコードの品質を保ち、潜在的な問題を早期に発見するために非常に有用なコマンドです。プロジェクトのビルドやデプロイの前に実行することで、より安全なコードをリリースすることができます。

それでは、next lint を実行してみましょう。

```bash
`next lint`
```

これでも解決しない場合、以下のようにシンプルな形で一度リセットしてみてください。この状態で`next lint`を再実行してみてください。

```json
{
  "extends": ["next", "next/core-web-vitals"]
}
```

エラーが解消された場合、次に"prettier", "plugin:prettier/recommended"を extends に追加して再度 next lint を実行します。

```json
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}
```

以下のように表示されれば成功です。

```bash
next lint
info  - Loaded env from /プロジェクト名/.env.local
✔ No ESLint warnings or errors
```

### 依存関係を再インストール

プロジェクトの `node_modules` と `package-lock.json` もしくは `yarn.lock` を削除し、依存関係を再インストールします。これはプロジェクトによっては注意が必要です。

```bash
rm -rf node_modules package-lock.json
npm install
```

または

```bash
rm -rf node_modules yarn.lock
yarn install
```

`eslint-config-prettier` と `eslint-plugin-prettier` がプロジェクトの `devDependencies` に正確にインストールされていることを確認します。

```bash
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

または

```bash
yarn add --dev eslint-config-prettier eslint-plugin-prettier
```

ESLint の設定が `.eslintrc.json` ファイル内で正確に行われているか確認します。特に `extends` フィールドが正確かどうかを確認してください。

```json
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}
```

ローカルで ESLint を再度実行してみて、エラーが解消されるか確認します。

### npx eslint --fix .

```bash
npx eslint --fix .
```

`npx eslint --fix .` コマンドは、ESLint を使ってプロジェクト内の JavaScript または TypeScript ファイルをリント（コードのスタイルや構文をチェック）し、自動修正可能な問題を修正します。ここでの `--fix` オプションは、自動で修正できる問題については修正を行うという意味です。`.`（ドット）は現在のディレクトリを指すので、このコマンドは現在のディレクトリとそのサブディレクトリ内のすべての対象ファイルに対してリントを実行します。

具体的には、このコマンドは以下のような作業を行います。

- 設定されたルールに基づいてコードの問題を検出します。
- 自動修正が可能な問題（例えば、インデントの不整合や不要なセミコロンなど）は、自動で修正します。

このコマンドを実行することで、コードの品質を一定の水準に保ち、また一貫したコーディングスタイルを維持することができます。ただし、自動で修正できない問題については手動で修正する必要があります。

以上の手順を実行してエラーが解決した後、再度 Vercel でデプロイを試みてみてください。


デプロイ時にESLint のエラー（ESLint: Failed to load config prettier to extend from.）が出るときの原因と対処法を詳しく解説します。

ESLint のエラー：error ESLint: Failed to load config

2023年版のフロントエンド開発における主要なツール、サービス、フレームワークについて、初学者にもわかるように解説します。

要チェック！フロントエンド開発ツール・サービス・フレームワーク集


## TL;DR

このページでは、Next.js プロジェクトの設定や依存ファイルを別のプロジェクトに効率よくコピーする方法について解説します。この手法はプロジェクト設定や依存関係の管理を効率化します。

| 開発環境   | バージョン |
| ---------- | ---------- |
| Next.js    | 13.4.4     |
| TypeScript | 5.0.4      |
| React      | 18.2.0     |

似たようなプロジェクトを作りたい時、毎回依存関係や設定を一から行うのは手間がかかります。

だからといって、`git clone` を使う場合は、全てのファイルとフォルダをコピーできますが、`.git` ディレクトリや履歴を削除する必要がありますし、特定のファイルやフォルダだけをコピーしたい場合には不便です。

そこで、この記事では既存のプロジェクトから設定と依存関係をコピーして新しいプロジェクトを効率よく作成する方法を解説します。

### コピーするもの

既存のプロジェクトから新しいプロジェクトへ以下のようなファイルとディレクトリを、よしなにコピーしてください。

- package.json
- next.config.js（存在する場合）
- .env、.env.local（存在する場合）
- .babelrc（存在する場合）
- .eslintrc（存在する場合）
- .prettierrc（存在する場合）
- public ディレクトリ（存在する場合）
- styles ディレクトリ（存在する場合）

### コピーしないもの

以下の項目はコピーを避けてください。

- .git
- .next
- .gitignore

### 依存関係をインストール

新しいプロジェクトディレクトリに移動した後、ターミナルで以下のコマンドを実行し、依存関係をインストールします。

```bash
npm install
```

必要なコンポーネント、ページ、API ルート等を既存のプロジェクトから適切にコピーしてください。すべてのファイルとディレクトリが正しく配置されたら、新しいプロジェクトで開発サーバーを起動します。

```bash
npm run dev
```

### 環境変数の調整

`.env` や `.env.local` ファイルをコピーした後は、新しいプロジェクトで必要な環境変数に適切な値を設定します。

```bash
# .env.local の例
DATABASE_URL="your_new_database_url"
API_KEY="your_new_api_key"
```

### バージョン互換性の確認

依存関係のバージョンも既存のプロジェクトからコピーされるので、新旧プロジェクトでの互換性を確認し、必要であればアップデートを行います。

```bash
npm outdated
```

### 自動化のためのスクリプト

設定のコピーを自動化するためのシェルスクリプトの例も紹介します。

```bash
#!/bin/bash
srcDir="./existing_project"
destDir="./new_project"
files=("package.json" "next.config.js" ".env" ".babelrc")

for file in "${files[@]}"; do
  cp "$srcDir/$file" "$destDir/"
done
```

このスクリプトを `copy-config.sh` という名前で保存し、実行権限を付与します。

```bash
chmod +x copy-config.sh
./copy-config.sh
```

### git colone

`git clone` コマンドを使用して既存のプロジェクトを複製することも可能です。ただし、その方法にはいくつか注意点があります。

クローンした後、`.git` ディレクトリを削除する必要があります。これをしないと、新しいプロジェクトが既存のリモートリポジトリに関連付けられてしまいます。

クローンすると、すべての履歴も含まれてしまいます。新しいプロジェクトで既存のコミット履歴が不要な場合、この点がデメリットとなることもあります。

`git clone` は全てのファイルとフォルダをコピーしますが、特定のファイルやフォルダだけをコピーしたい場合には不便です。

`git clone` は速くて簡単な方法ですが、上記のような状況に対応する必要があります。手動で設定ファイルや依存関係をコピーする方法は、よりカスタマイズしやすく、必要な部分だけをピックアップできる利点があります。どちらの方法が適しているかは、プロジェクトの要件や目的によります。

### 最後に

何か問題や疑問が生じた場合や、もっと効率的な方法をご存知の方がいらっしゃいましたら、ぜひ共有してください。


Next.js プロジェクトの設定や依存ファイルを効率よく別のプロジェクトにコピーする手法を解説します。

2025-04-10

１日で個人開発力を高める勉強法

2025-04-07

個人開発で気をつけるべき日本の法律について

2025-01-11

エンジニア・デザイナー向けプラットフォームをリリースしました

2023-10-25

Next.jsで、Imageコンポーネントエラーを解消する方法

2023-09-19

Tailwind CSS の基本的な使い方

2023-09-19

Tailwind CSS の JIT モードを使って素早く開発しよう！

2023-09-18

npm コマンド一覧チートシート

2023-09-17

ESLint のエラー：error ESLint: Failed to load config

2023-09-07

要チェック！フロントエンド開発ツール・サービス・フレームワーク集

2023-09-07

Next.js プロジェクトを別のプロジェクトにコピーする方法

2025-04-10

１日で個人開発力を高める勉強法

2025-04-07

個人開発で気をつけるべき日本の法律について

2025-01-11

エンジニア・デザイナー向けプラットフォームをリリースしました

2023-10-25

Next.jsで、Imageコンポーネントエラーを解消する方法

2023-09-19

Tailwind CSS の基本的な使い方

2023-09-19

Tailwind CSS の JIT モードを使って素早く開発しよう！

2023-09-18

npm コマンド一覧 チートシート

2023-09-17

ESLint のエラー：error ESLint: Failed to load config

2023-09-07

要チェック！フロントエンド開発ツール・サービス・フレームワーク集

2023-09-07

Next.js プロジェクトを別のプロジェクトにコピーする方法

npm コマンド一覧チートシート