JavaScriptにおける循環参照問題
🎯 このドキュメントを読んだ後の状態
- 循環参照問題が何かを理解している。
- 循環参照問題を解決する方法を知っている。
- 循環参照問題を予防する方法を知っている。
😭 問題状況
Storybookのストーリーを書いている時に遭遇した循環参照問題
上記の記事で確認できるように、Storybookでストーリーを書いている時に循環参照問題に遭遇した。
普段から循環参照問題というキーワードは聞いたことがあったが、実際にはちゃんと理解していないと感じた。
そこで、この機会に循環参照問題とは何かを確認し、その解決方法を調べることにした。
🤔 循環参照問題とは？
循環参照（Circular Dependencies）とは、2つ以上のモジュールが直接的または間接的にお互いを参照している状況を意味する。
上記の例のように、ModuleAとModuleBがお互いを参照している状況が発生すると、これを循環参照問題と呼ぶ。
このような状況が発生すると、モジュールが無限にお互いを参照することになり、プログラムが無限ループに陥る状況が発生する可能性があるため、問題として分類される。
見ての通り、意外とソフトウェア開発でよく発生する問題であり、特にモジュール間の依存関係が複雑になればなるほど発生する確率が高くなる。
コードを通じてもう少し詳しく見てみよう。
📝 直接循環参照の例
上記のコードでModuleAとModuleBがお互いを参照している。
このようになると、functionAが呼び出されるとfunctionBが呼び出され、functionBが呼び出されるとfunctionAが呼び出される無限ループに陥ることになる。
このような状況が発生すると、プログラムが無限ループに陥り、プログラムが正常に動作しなくなる。
📝 間接循環参照の例
循環参照は2つ以上のモジュールが直接参照することだけでなく、間接的に参照する場合にも発生する可能性がある。
上記のコードでModuleAはModuleCを参照し、ModuleCはModuleBを参照し、ModuleBはModuleAを参照している。
ここでmoduleA → moduleC → moduleB → moduleAの順で循環参照が発生する。
🤔 循環参照はなぜ問題なのか？
単に無限ループに陥ること以外に、より具体的な理由を見てみよう。
| 問題 | 説明 |
|---|---|
| モジュール初期化問題 | JavaScriptモジュールシステム（特にESモジュール）は、モジュールをロードする際にまず依存関係をすべてロードしてから実行する。循環参照がある場合、モジュールが完全に初期化される前に他のモジュールを参照することになり、初期化されていない状態の値を参照することになる。 これにより undefinedまたは予期しない値が返される可能性がある。 |
| メモリリーク | 循環参照はガベージコレクション（garbage collection）を妨げる可能性がある。特にオブジェクト間の循環参照はメモリリークを引き起こす可能性がある。 ガベージコレクションはある変数の参照カウントが0になった時に実行されるが、循環参照が発生すると決して0にならないためである。 |
| コード保守の困難さ | 循環参照はコードを理解し保守することを困難にする。 特に循環参照が発生すると、モジュール間の依存関係が複雑になり、コードを理解することが難しくなる。 これはコードの再利用性と拡張性を阻害する。 |
| テストの困難さ | 循環参照はテストを困難にする。 特にモジュール間の依存関係が複雑になると、テストコードを書くことが難しくなる。 これが先述したStorybookの作成過程で私が経験した問題でもあった。 |
🤔 循環参照の例と問題点
簡単なReactコンポーネントを使用する例を通じて、循環参照問題を確認してみよう。
moduleA → moduleB → moduleA → moduleB → moduleA → moduleB → moduleA → ... のような参照が発生する。
そしてこれは以下のようなエラーを発生させる可能性がある。
これは無限ループが発生してコールスタックが超過したためである。
🤔 循環参照問題を検出する方法
実際、最も良いのは意識的に毎回チェックしながら進むことである。
ただし、そうすると生産性が著しく低下する問題が発生する。
毎回一つ一つ発生するかどうかを考慮するには...私たちが解決すべき問題や注意すべきことがあまりにも多い。
そこで、このような問題を検出するツールと方法を見てみよう。
📝 ESLintを使用した循環参照の検出
ESLintを使用すると循環参照を検出できる。
eslint-plugin-importプラグインを使用すると、循環参照を検出できる。
そして.eslintrc.jsファイルに以下のように設定を追加する。
このように設定すると、ESLintが循環参照を検出し、エラーを発生させる。
実はインターネットなどで探してESLintを使用する時、いつもimportモジュールをダウンロードして使っていたが...このような目的で使うということを今回初めて知った...
やはりいつも何でもちゃんと理解しておかないと、いつか痛い目に遭うようだ...
📝 TypeScriptを使用した循環参照の検出
TypeScriptを使用すると循環参照を検出できる。
TypeScriptは基本的に循環参照を検出し、エラーを発生させる。
📝 循環参照可視化ツールの使用
madgeのようなツールを使用すると、コードの依存関係を視覚的に表示して循環参照を簡単に検出できる。
インストール
循環参照の検出
そして以下のようにコマンドを実行すると、依存関係グラフを視覚的に確認できる。
src/は分析するソースディレクトリのパスである。
このようにすると、結果として循環参照があるファイルとパスを出力してくれる。
依存関係グラフの可視化
graph.svgは生成されるグラフファイル名である。
src/は分析するソースディレクトリのパスである。
このようにすると、graph.svgファイルが生成され、依存関係グラフを視覚的に確認できる。
🤔 循環参照問題の解決方法
循環参照を解決するためには、モジュール間の依存関係を再構成するか、中間層を導入して依存関係を分離する必要がある。
以下は一般的な解決方法である。
| 解決方法 | 説明 |
|---|---|
| 依存性逆転の原則（DIP）の適用 | 依存性逆転の原則（DIP）は、高水準モジュールが低水準モジュールに依存せず、抽象化されたインターフェースに依存するようにする原則である。 これによりモジュール間の直接的な依存関係を減らすことができる。 |
| 依存性注入（DI）の適用 | 依存性注入（DI）は、依存関係を外部から注入されるようにするデザインパターンである。 これによりモジュール間の依存関係を外部から注入されるようにし、循環参照を防止できる。 |
| 共通モジュールへの分離 | 2つ以上のモジュールがお互いを参照する必要のない共通機能を別のモジュールに分離して依存関係を除去できる。 |
| 動的インポート（Dynamic Import）の使用 | 循環参照が必須の場合、動的インポートを使用してランタイムにモジュールをロードすることで、初期化時点の循環参照を回避できる。 |
| 依存関係構造の再設計 | 根本的な解決方法である。 モジュール間の依存関係構造を再設計して循環参照が発生しないように変更する。 |
🧸 実際の事例
先にも言及したが、私が実際にStorybookのストーリーを書いている時に経験した問題である。
これに対する解決過程は以下で参考にできる。
Storybook作成中に発生した循環参照エラーの解決：Dropdownコンポーネントの事例分析
📚 まとめ
- 循環参照は2つ以上のモジュールが直接的または間接的にお互いを参照している状況を意味する。
- 循環参照はモジュール初期化問題、メモリリーク、コード保守の困難さ、テストの困難さなど様々な問題を発生させる。
- 循環参照を検出するためには
ESLint、TypeScript、madgeのようなツールを使用できる。 - 循環参照を解決するためには依存性逆転の原則（DIP）、依存性注入（DI）、共通モジュールへの分離、動的インポート、依存関係構造の再設計などの方法を使用できる。
循環参照について調べてみた。
NAVERブーストキャンプでも、専攻の授業を受けながらも、よく聞いた話の一つは単一責任の原則（SRP）だった。
そこまで行かなくても、依存関係をできるだけ低くするのが良いという話だった。
予期しないエラーがたくさん発生する可能性があり、保守が難しいという側面からだった。
今回循環参照について調べてみて...より多様な意味が含まれていることを感じることができた。
何か分かっていると思っていたが...まだまだ不足しているという思いがした...もっと頑張らないといけない...