import文のコンフリクト解決

import文のコンフリクト

importのコンフリクトは、モダンなJavaScript/TypeScriptプロジェクトで最も頻繁に発生するマージコンフリクトの1つです。2つのブランチが同じファイルに新しいimport文を追加した場合、特にインポートがまとめられているファイル上部で発生します。

なぜimportがよくコンフリクトするのか

ほとんどのスタイルガイドやオートフォーマッターはimportをアルファベット順またはカテゴリ別にソートします。2つのブランチが同じアルファベット位置に新しいimportを追加すると、Gitは同じ行への重複変更として認識します:

<<<<<<< HEAD
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
=======
import { useState, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";
>>>>>>> feature/add-tooltips

解決アプローチ

importのコンフリクトは、両方のブランチが正当な依存関係を追加しているため、ほぼ必ずManual Editが必要です。正しい解決は両側のユニークなimportを結合することです:

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
import { Tooltip } from "@/components/ui/tooltip";

避けるべき落とし穴

• 重複import: 不注意なマージで同じモジュールを2回importすると、ビルドエラーが発生します。
• 未使用import: 一方のブランチがimportを削除し、もう一方が保持した場合、そのimportがまだ必要かどうか確認してください。
• 循環依存: 両方のブランチのimportをマージした後、循環importチェーンが導入されていないか確認してください。

自動化のヒント

importコンフリクト解決後にリンターやフォーマッターを実行してください。ESLintのimport/orderルールやPrettierがソートの整理と未使用importの自動削除を行います。