ANTIGRAVITY LABEN
記事一覧/Editor View
Editor View/2026-05-05中級

Antigravity で TypeScript のパスエイリアスが効かないときの原因と直し方

AntigravityでTypeScriptの@/パスエイリアスが解決されずCannotfindmoduleエラーが出る問題を解決します。tsconfig.jsonの設定からAntigravityのワークスペース設定まで、実際に動く手順で解説します。

typescript26path-aliastsconfigeditor28troubleshooting88

@/components/Button と書いたのに赤い波線が消えありません。AIが生成したコードには ../../components/Button と書かれている——Antigravityで開発していると、パスエイリアスが全く機能しない場面に遭遇することがあります。

Next.js や Vite プロジェクトでは @/ エイリアスが当たり前のように使われていますが、Antigravity がこのエイリアスを認識できていないと、AI の補完提案が相対パスだらけになり、型エラーが消えない、インポートが壊れるといった問題が連鎖します。ここでは原因を段階的に切り分けて確実に解決する方法をお伝えします。

なぜAntigravityはパスエイリアスを認識できないのか

Antigravity がパスエイリアスを解決するには、tsconfig.json(または tsconfig.paths.json)の paths フィールドを正しく読み込む必要があります。ところが、以下のような状況でこれが崩れます。

よくある原因を 3 つ挙げます。

baseUrl が未設定のまま paths を定義している: pathsbaseUrl との組み合わせで機能します。baseUrl が欠けていると TypeScript 本体も Antigravity も解決できません。

ワークスペースのルートが正しくない: モノレポ構成や apps/web/ のようなサブディレクトリ構成で、Antigravity が開いているルートと tsconfig.json のある場所がずれているケースです。

tsconfig.json の継承(extends)が正しく展開されていない: Next.js の @tsconfig/nextjsextends しているとき、paths の継承が想定通りに機能していないことがあります。

エラーメッセージとしては以下のようなものが代表的です。

Cannot find module '@/components/Button' or its corresponding type declarations. ts(2307)
Module not found: Can't resolve '@/lib/utils'

これらが出ているときは、型の問題ではなくパス解決の問題として切り分けてください。

Step 1: tsconfig.json の baseUrl と paths を確認する

最初に確認すべきは tsconfig.json の基本設定です。

// tsconfig.json(正しい設定例)
{
  "compilerOptions": {
    "baseUrl": ".",          // 必須。省略するとpathsが機能しない
    "paths": {
      "@/*": ["./src/*"],    // baseUrlからの相対パス
      "@components/*": ["./src/components/*"],
      "@lib/*": ["./src/lib/*"]
    }
  }
}
// よくある間違い:baseUrl が欠けている
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]    // baseUrl なしでは解決されない
    }
  }
}

baseUrl: "." は「このファイルがあるディレクトリを基点とする」という意味です。"src" を baseUrl にしているプロジェクトも多いですが、その場合は paths の値も調整が必要です。

Step 2: Antigravityのワークスペース設定を確認する

tsconfig.json が正しくても、Antigravity が参照しているルートディレクトリと tsconfig.json の場所がずれていることがあります。

確認手順は次の通りです。

  1. ⌘ + Shift + P(Windows: Ctrl + Shift + P)を押して「TypeScript: Select TypeScript Version」を実行します
  2. 「Use Workspace Version」が選択されているか確認します
  3. ステータスバー右下の TypeScript バージョン番号をクリックして、正しい tsconfig.json が読み込まれているか確認します

モノレポ構成の場合、Antigravity で プロジェクトのルートではなく apps/web/ のようなサブディレクトリを開いている場合に問題が起きやすいです。以下のコマンドで診断できます。

# 開いているディレクトリからtsconfig.jsonが見えるか確認
ls tsconfig.json
 
# paths設定があるか確認
cat tsconfig.json | grep -A5 '"paths"'

Step 3: Next.js・Vite それぞれの注意点

Next.js プロジェクトの場合

Next.js 16 では create-next-app 時に自動で @/* エイリアスが設定されます。ただし、tsconfig.json を手動で編集した後に壊れることがあります。

src/ ディレクトリなしの場合:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

src/ ディレクトリありの場合:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

src/ の有無でパスが変わる点が、混乱の原因になりやすい部分です。create-next-app 後にそのまま設定を継承しているのに壊れた、という場合はここを確認してみてください。

Vite プロジェクトの場合

Vite では vite.config.tstsconfig.json両方 にエイリアスを設定する必要があります。片方だけ設定してもどちらかが壊れます。

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'
 
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // Viteのビルド時パス解決に必要
    },
  },
})
// tsconfig.json(Viteプロジェクト)
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

この 2 つが揃って初めて、ビルドも型チェックもエイリアスが機能します。「ビルドは通るが型エラーが出る」「型エラーは出ないがビルドが失敗する」という半壊状態は、どちらか一方しか設定していないことがほとんどです。

Step 4: Antigravityのキャッシュをリセットする

設定を直しても Antigravity が古い情報をキャッシュしていることがあります。以下の手順でリセットしてください。

まず Antigravity を完全に終了(⌘+Q / Ctrl+Q)します。次に、Language Server のキャッシュを削除します。

# macOS / Linux
rm -rf ~/.antigravity/typescript-cache
 
# Windows
rd /s /q %APPDATA%\antigravity\typescript-cache

その後 Antigravity を再起動して、問題のあるファイルを開き直してください。

より手軽な方法として、⌘ + Shift + P → 「Developer: Reload Window」で Antigravity のウィンドウを再読み込みする方法も効果的です。tsconfig.json を保存した直後にこれを実行すると、Language Server が設定を再読み込みします。

Step 5: AIの補完提案が相対パスになるのを防ぐ

tsconfig.json の設定を直しても、Antigravity の AI が相対パスを提案し続ける場合があります。これは AI がプロジェクトの既存コードパターンから相対パスを「正しい書き方」と判断しているためです。

プロジェクトルートに .antigravity/rules.md(または AGENTS.md)を置いて、エイリアスの使用を明示的に指示するのが効果的です。

## インポートルール
 
- 必ずパスエイリアス(@/)を使用すること
- 相対パス(../../)での3階層以上のインポートは禁止
- 例:@/components/Button, @/lib/utils, @/hooks/useAuth
- src/ディレクトリ外へのインポートはルートからのパス(@/)を使う

私の経験では、このルールファイルを置いた後の AI 補完の質が大幅に改善されました。「エイリアスが使えるはずなのに相対パスが提案される」という問題は、AI への文脈提供不足が原因であることが多いです。

確認チェックリスト

設定を変更したら、以下を順番に確認してください。

  • tsconfig.jsonbaseUrlpaths の両方がある
  • paths の値が baseUrl からの相対パス(./src/* のように ./ から始まる)になっている
  • Vite プロジェクトは vite.config.tsalias も設定している
  • Antigravity のウィンドウを再読み込みした
  • 問題のあるファイルを一度閉じて再度開いた

それでも解決しない場合、Antigravity 内のターミナルで tsc --noEmit を実行して TypeScript のエラー出力を直接確認してみてください。エラーコードが「TS2307」でなければ、パス解決以外の原因が考えられます。

パスエイリアスの設定は、一度正しく整えてしまえばほぼ触ることのない部分です。ただ、プロジェクト初期に詰まると開発の立ち上がりが遅くなりますし、AI の補完精度にも直結します。この記事の手順で解決できれば、あとは .antigravity/rules.md でAIへの指示を充実させて、快適な開発環境を整えていただければと思います。

シェア

お読みいただきありがとうございます

Antigravity Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • コピー&ペーストで使える実装コード付き
  • 毎日新しい上級ガイドを追加
  • ¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

もしこの記事がお役に立ちましたら、チップ(¥150)で応援いただけると大変励みになります。広告なしでの運営を続けるため、皆さまのご支援が大きな力になっています。

関連記事

Editor View2026-05-04
Antigravity で ESLint と TypeScript の赤波線が消えた時に確認する5つのポイント
Antigravity でエディタの赤波線エラーが急に出なくなる現象の原因を、症状別に5つの視点で診断する手順をまとめました。TypeScript Server再起動から AI が触った tsconfig の復元まで実用本位で解説します。
Editor View2026-05-07
Antigravity で「参照の検索(Find References)」が抜ける・空になる時の修正手順
Antigravity IDE の Find References が空のまま結果を返さない、あるいは一部のファイルだけ抜ける現象を、TypeScript・Python・モノレポの典型パターン別に診断して直す手順をまとめました。
Editor View2026-05-02
AntigravityでCmd+Zを押したらAI生成コードが思った以上に消える問題の防ぎ方
AIが書いてくれた100行を残したいのにCmd+Zで一気に巻き戻った、その経験を持つ人へ。Antigravityで起きる「Undoのまとめ消し」を、原因と防止策と復旧手順の3段階で整理します。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →