#やりたいこと
React.js環境で特定の文字列を含むコンポーネントを使っているページを洗い出したい
#例
- このファイル(Component)群が使われているページを探したい→命名規則はなんとかFoo.js
そしてクラス名はファイル名と基本的に同じ
aaaFoo.js
bbbFoo.js
cccFoo.js
dddFoo.js
#実現可能だと思う処理の流れ
- 上記コンポーネントはインポートされて使われているので下記コマンドでなんとかFoo.jsの使われている親ファイルが分かる
->git grep --name-only "Foo } from"
0. 1の結果のファイル名からファイルパスと「.js」を除くとクラス名が取れる
->git grep --name-only "Foo } from" | sed -e "s/.[^.]*$//" | sed -e "s//index$//" | sed -E 's/.*/([^/]+)$/\1/g'
0. 2の結果のクラス名が使われている所を1と同じように探す
->git grep --name-only "[2の結果] } from"
0. 3を繰り返して見つからないとき=そのファイルが一番親だと分かる
0. 4の結果一覧を出力する
#React.jsについて
オブジェクト指向ならぬコンポーネント指向(パーツみたいな感じ)で入れ子になっています。
親コンポーネント-子コンポーネント-孫コンポーネント-ひ孫コンポーネント
親コンポーネントで子コンポーネントをimportして、子コンポーネントでは孫コンポーネントをimportして使っているような感じです。
そしてURLと紐付けられるのは一番上の親コンポーネントのみなので孫(ひ孫かも)コンポーネントである「なんとかFoo.js」の使用ページを洗い出すとなると親をたどる必要があります。
コマンドがお得意な方、ご助力頂けますと幸いです。
あなたの回答
tips
プレビュー