おわりに参考shadcn/uiコンポーネントのインポート先ディレクトリを変更する方法#React#Next.jsるおん2024.10.14リテールアプリ共創部のるおんです。新たなパッケージの依存関係を追加することなく、好きなコンポーネントを自由にカスタマイズして使用できるのは嬉しいですよね。コンポーネントがデフォルトでインポートされるディレクトリを変更する方法についてご紹介します。shadcn/uiとはhttps://ui.shadcn.com/docsこれはコンポーネント・ライブラリではありません。再利用可能なコンポーネントのコレクションであり、コピーしてアプリに貼り付けることができます。コンポーネント・ライブラリではないというのはどういう意味ですか?依存関係としてインストールしないという意味です。npm経由で利用することも配布することもできない。(DeepL翻訳)npmでインストールするのではなく、npxコマンドを使用してCLI経由でコンポーネントをコピーしてこれます。使うと、コンポーネントをコピペして持ってきたようなものなので、依存関係の複雑さやアップデートの追従など従来のUIコンポーネントライブラリが抱えていた問題に対処しなくても良くなります。v0もこのshadcn/uiを採用しています。以下のようにbuttonコンポーネントを追加すると、通常components/uiディレクトリにbuttonコンポーネントが追加されます。package.jsonしかしプロジェクトのディレクトリ構成によっては、このデフォルトの場所が適切でない場合があります。Folderに再利用可能なコンポーネントを格納していました。その際に、shadcn/uiから追加したコンポーネントを毎回このディレクトリに移動するのがめんどくさかったので調査してみました。initで作成されたプロジェクトのルートディレクトリにあるcomponents.jsonファイルを修正する必要があります。components.aliasesセクションを探し、uiキーの値を変更します。}}この例では、uiのエイリアスを@/app/_components/uiに変更しています。これにより、shadcn/uiのaddコマンドで追加する新しいコンポーネントは、指定した新しいディレクトリに自動でインポートされるようになります。<path>と指定してあげれば追加したいディレクトリを指定できると書いてあるのですが、こちらは現在(2024/10/14)、バージョン2.1.0では正しく動きませんでした。設定を変更したら、実際にコンポーネントを追加して動作を確認してみます。buttonこのコマンドを実行すると、buttonコンポーネントがapp/_components/uiディレクトリに追加されるのが確認できます。package.jsonおわりに以上、shadcn/uiでデフォルトでインポートされるディレクトリを変更する方法についてご紹介しました。どなたかの参考になれば幸いです。