ローカルimport抽出

dev/dev-list-local-imports

from './...' または from '../...' の形で書かれた相対 import だけを行ごとに抽出します。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

ローカルimport抽出では、from './...' または from '../...' の形で書かれた相対 import だけを行ごとに抽出します。
関連する観点としてローカルimport抽出、list local imports、開発ツールを確認し、結果をコピーして別の作業に使えます。

入力

結果

使い方

相対 import を調べたいコードを「入力」欄へ貼り付けます。
「結果」欄で from "./..." や from "../..." の行だけが並ぶことを確認します。
@scope/name、node:fs、エイリアス import は相対パスではないためこの結果には出ません。
抽出した from 句を共有する場合は、コピーボタンで結果をコピーします。

入力例・出力例

INPUT

import Button from "./Button"; import config from "../config"; import React from "react";

OUTPUT

from "./Button" from "../config"

出力はモジュール名だけでなく、from と引用符を含む一致部分です。

INPUT

import "./reset.css"; const mod = await import("./lazy");

OUTPUT

from 句を持たない副作用 import と動的 import は抽出されません。

よくある利用シーン

ファイル内で参照している ./ と ../ の相対依存だけをざっと洗い出したいとき。
npm パッケージ import とローカル import を分けて、移植時の依存確認をしたいとき。
副作用 import を除いた from 句ベースの相対参照リストを作りたいとき。
パスエイリアスではなく、実際の相対パスで書かれた import だけをレビューしたいとき。

結果確認のポイント

構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
ローカルimport抽出、list local imports、開発ツールの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

ローカルimport抽出の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

「ローカル import」とはどのパスを指しますか？

import 文のモジュール指定子が './' や '../' で始まるものをローカルインポートとして抽出します。'node_modules' から読み込む npm パッケージ名で始まる import は対象外です。

TypeScript の type import や動的 import も抽出されますか？

import type { ... } from './foo' のような型 import も ./・../ から始まる場合は抽出されます。動的 import（import('./bar')）はテキスト解析のため、記述パターンによっては検出されない場合があります。

モノレポのワークスペースパッケージへの import は抽出されますか？

@ やパッケージ名で始まるワークスペースエイリアスはローカルパス形式ではないため、このツールでは npm パッケージと同様に非ローカルとして扱われます。ワークスペース import を抽出するには dev-list-npm-imports と組み合わせてご確認ください。

関連ツール

JSON整形ツール

JSONの整形（Pretty Print）・圧縮・バリデーション・ツリービュー表示。構文エラーの位置表示、YAML変換にも対応。

正規表現テスター

正規表現のリアルタイムテスト。マッチ箇所のハイライト、グループキャプチャ表示、よく使うパターンのチートシート付き。

CSV→JSON変換

CSVファイル・テキストをJSON形式に変換。配列/オブジェクト形式の選択、ヘッダー行の自動認識にも対応。

JSON→CSV変換

JSONデータをCSV形式に変換。配列やネストしたJSONにも対応。

UUID生成ツール

UUID v4をワンクリックで生成。ハイフンなし、大文字、小文字など各種フォーマット対応。一括100個まで生成可能。

タイムスタンプ変換

UNIXタイムスタンプと人間が読める日時形式を相互変換。秒・ミリ秒に対応（マイクロ秒・ナノ秒は非対応）。ログ解析やAPI開発のデバッグに。

ASCIIコード表

ASCIIコード(0-127)の文字・10進数・16進数・2進数の一覧表。

アクセシビリティチェックリスト

Webアクセシビリティ(WCAG 2.1)の主要チェック項目を一覧表示する。

読み込み中...

このツールでできること

ローカルimport抽出では、from './...' または from '../...' の形で書かれた相対 import だけを行ごとに抽出します。

関連する観点としてローカルimport抽出、list local imports、開発ツールを確認し、結果をコピーして別の作業に使えます。

使い方

相対 import を調べたいコードを「入力」欄へ貼り付けます。

「結果」欄で from "./..." や from "../..." の行だけが並ぶことを確認します。

@scope/name、node:fs、エイリアス import は相対パスではないためこの結果には出ません。

抽出した from 句を共有する場合は、コピーボタンで結果をコピーします。

入力例・出力例

INPUT

import Button from "./Button"; import config from "../config"; import React from "react";

OUTPUT

from "./Button" from "../config"

出力はモジュール名だけでなく、from と引用符を含む一致部分です。

INPUT

import "./reset.css"; const mod = await import("./lazy");

OUTPUT

from 句を持たない副作用 import と動的 import は抽出されません。

よくある利用シーン

ファイル内で参照している ./ と ../ の相対依存だけをざっと洗い出したいとき。

npm パッケージ import とローカル import を分けて、移植時の依存確認をしたいとき。

副作用 import を除いた from 句ベースの相対参照リストを作りたいとき。

パスエイリアスではなく、実際の相対パスで書かれた import だけをレビューしたいとき。

結果確認のポイント

構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。

ローカルimport抽出、list local imports、開発ツールの観点で、入力内容と出力内容がずれていないか見直してください。

コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

データの扱い / プライバシー

ローカルimport抽出の主要な処理はブラウザ内で実行されます。

入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。

本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

「ローカル import」とはどのパスを指しますか？

TypeScript の type import や動的 import も抽出されますか？

モノレポのワークスペースパッケージへの import は抽出されますか？