dependency-cruiserを試す

ツール
スポンサーリンク

フロントエンドLT会 – vol.9で気になるツールが紹介されていたので試してみます

今回はdependency-cruiserを試してみます

とりあえず、自分が今趣味で作っている環境に入れてみて何ができるかテスト

フロントエンドLT会 - vol.9 (2024/05/22 18:30〜)
## テーマは「教えて!あなたのフロントエンドトレンドLT会」(ライトニングトーク:1人5分~10分程度) フロントエンド技術が好きな皆さん、久々のフロントエンドLT会 vol.9 開催です! 初心者から熟練者まで、全員大歓迎! このLT(ライトニングトーク)会は、フロントエンド開発に関する知識を共有し、互いに学び合う...

dependency-cruiserを使ってみる

GitHub - sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD. - sverweij/dependency-cruiser
dependency-cruiserについて理解する - Qiita
概要dependency-cruiserは「循環依存を検知」「package privateな設計を守る」このようなことを実現してくれるライブラリです!スライド版はこちらです!目次背…

環境

OS:Windows10

使用しているフレームワーク:Nextjs 14.2.3

vscodeのターミナル上でコマンドは実行

事前準備

表示するためのGraphvizをインストール

以下のページからGraphvizをダウンロードします

Graphviz
Graph Visualization Software

インストール時に環境変数のパスを追加することを聞かれますので、パスを通す選択を必ずしてください

Graphvizの環境変数が通っているかを確認

vscodeのターミナルから以下のコマンドをたたいて、dotコマンドを使えるかを確認してください

dot -v

そうすると以下のような結果が返ってくるはずです

PS C:\Users\User\Documents\stgr-web-tools> dot -v
dot - graphviz version 11.0.0 (20240428.1522)
libdir = "C:\Program Files\Graphviz\bin"
Activated plugin library: gvplugin_dot_layout.dll
Using layout: dot:dot_layout
Activated plugin library: gvplugin_core.dll
Using render: dot:core
Using device: dot:dot:core
The plugin configuration file:
        C:\Program Files\Graphviz\bin\config6
                was successfully loaded.
    render      :  cairo dot dot_json fig gdiplus json json0 map mp pic pov ps svg svg_inline tk xdot xdot_json
    layout      :  circo dot fdp neato nop nop1 nop2 osage patchwork sfdp twopi
    textlayout  :  textlayout
    device      :  bmp canon cmap cmapx cmapx_np dot dot_json emf emfplus eps fig gif gv imap imap_np ismap jpe jpeg jpg json json0 metafile mp pdf pic plain plain-ext png pov ps ps2 svg svg_inline svgz tif tiff tk xdot xdot1.2 xdot1.4 xdot_json
    loadimage   :  (lib) bmp eps gif jpe jpeg jpg png ps svg

もしdotコマンドが使えない場合はwindowsの環境変数が通っていない可能性が高いので以下のページを見ながら環境変数を設定してください

【Windows10】Graphvizのインストール - Qiita
GraphvizはWindowsではコマンドでインストールできないため、手間だが以下のようにすることでインストールに成功しました。この記事は2020年5月現在のものです。公式サイトの構造などは変…

dependency-cruiserを使う

dependency-cruiserをインストール

npm i --save-dev dependency-cruiser

初期化

npm npx depcruise --init

いろんな質問が来ますが、自分の環境に合わせて答えます

そうすると「.dependency-cruiser.js」が作成されます

間違って作成しても、「.dependency-cruiser.js」を消して再度初期化すればいいので適当でいいと思います

循環依存関係を作成

app以下のフォルダを以下に対象に依存関係のsvgをファイルを作成します

※パイプ以降にdotコマンドがあると思いますが、最初にインストールしたGraphvizを使ってsvgファイル生成しているようです

npx depcruise app --include-only "^app" --output-type dot | dot -T svg > dependency-graph.svg

vscode上で確認

vscodeの拡張機能で表示します

自分が今作っているプログラムでは循環参照は発生していないようです

コンポーネント間の関係を表示するのに使えるのでは?

自分は先ほどの画像で気づいたのは循環参照がないということより、

stgr_db.tsxがClipCardから無駄に呼び出されていることに気づきました

また、実際のファイル構造は以下のようになっています

実はNextjsを触り始めたばかりなので、コンポーネントの階層構造が理解できおらずtwitchclipsフォルダにすべて入れていました

先ほど生成した画像のおかげで、コンポーネント間の関係を可視化できました

※調べてみるとdependency-cruiserをコンポーネントの可視化ツールとして紹介している人がいました

コンポーネント、パーツの依存関係・利用状況を可視化できないか考える | mersy note
コンポーネント、パーツの依存関係・利用状況を可視化できないか考える
VueやReactでコンポーネントやモジュールの依存関係を把握する - Qiita
はじめになんかこのコンポーネント誰に依存されているかわかんないの、変更した時不安(´;ω;`)って声があったので、コンポーネント間の依存関係を出すツールを調べて使ってみました。結果かなり良かっ…

まとめ

dependency-cruiserを使って循環依存があるかを実際にチェックしてみました

また、コンポーネント間の可視化ツールとしても使えるという気づきがありました

今後もこのようなLTで紹介されたツールを実際に使ってみたいと思います

コメント

タイトルとURLをコピーしました