An Empirical Evaluation of Code Smell Detection in Angular Applications
本研究は、グレー文献から導出された Angular 固有のコードスマルの最初のカタログを提示し、これらの問題を検出する自動化された静的解析ツールの高い有効性を示しており、精度が 0.88 以上、F1 スコアが最大 1.00 に達することを明らかにしている。
原論文は CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) でライセンスされています。 これは以下の論文のAI生成解説です。著者が執筆または承認したものではありません。技術的な正確性については原論文を参照してください。 免責事項の全文を読む
あなたはAngularと呼ばれる特定の設計図と道具のセットを使って、巨大で複雑な家を建てていると想像してください。これは、堅牢で整理されており、必要なものがすべて内蔵されているため、モダンな Web アプリケーションを構築する人気のある方法です。しかし、現実の建設と同様に、不注意であれば、手を抜いたり、散漫な方法で物を建てたりし始める可能性があります。これらの散漫な習慣は**「コードスメル」**と呼ばれます。
コードスメルを壊れた壁ではなく、エンジンからの奇妙な音や、開きにくいドアのような警告サインだと考えてください。家がすぐに崩壊するわけではありませんが、設計に欠陥があることを示しており、これを無視し続けると、後で修正や拡張が地獄のように困難な家になってしまうことを示唆しています。
この論文は、Angular 開発者のコミュニティに入り込み、「最も一般的な悪い習慣は何ですか？」と尋ねた専門家チーム（研究者）のようなものです。彼らは公式の規則書だけを見たのではなく、フォーラム、ブログ、チャットグループ（論文では「グレイ文献」と呼ばれる）にいる開発者の声に耳を傾けました。
以下に、彼らが発見し、行ったことを簡単に説明します。
1. 探偵仕事：スメルの発見
研究者たちは探偵のように振る舞い、数百のオンラインディスカッションを精査して、繰り返される不満を見つけ出しました。その結果、Angular 開発者がよく陥る**11 の特定の「悪い習慣」**を特定しました。
理解を助けるために、いくつかのスメルを簡単な比喩で示します。
- 「流し台」コンポーネント（巨大コンポーネント）: 家の一つの部屋が、キッチン、寝室、バスルーム、ガレージのすべてを同時に務めようとしていると想像してください。Angular では、1 つのコードがあまりにも多くの異なる役割を果たそうとしたときにこのことが起こります。それは巨大で、混乱し、片付けにくくなります。
- 「魔法の箱」（
anyタイプの過剰使用）: Angular は TypeScript という言語を使用しており、これは正しい種類のレンガを正しい穴に入れているかチェックする厳格な安全検査官のようなものです。開発者が怠け、「ここには何でも入れていいよ」と言って、anyという「魔法の箱」を使うことがあります。これにより安全検査官がオフになります。家は今日は何も問題ないように見えるかもしれませんが、後で、検査官が見ていなかったためにその床が耐えられなかった重いソファが床を突き破るかもしれません。 - 「綱引き」（過剰な親から子への通信）: 親が子供に絶えず指示を叫んだり、さらに悪いことに、親が子供の部屋に手を入れて家具を直接入れ替えたりすると想像してください。Angular では、コンポーネントは礼儀正しく話すべきです。親コンポーネントが子コンポーネントを掴んで、直接その状態を変更させようとすると、解きほぐすのが難しいきつく散漫な結び目を作ることになります。
- 「直接ハンマー」（直接 DOM 操作）: Angular は壁（画面）を自動的に塗る特別な方法を持っています。しかし、開発者が焦ってハンマーを掴み、自動塗装機を迂回して壁を直接叩くことがあります。これは一時的には機能しますが、システムが家を一貫して保つ能力を損ないます。
- 「コピー＆ペースト」の家（重複したコンポーネント）: すでに一つ建てたことを忘れて、同じ家に二つの同じキッチンを作ると想像してください。これはスペースの無駄であり、流し台を変更したい場合、二つの場所を両方とも変更しなければならないことを意味します。
2. 重複：Angular と React
研究者たちはまた、興味深いことに気づきました。彼らはこれらの Angular のスメルを、もう一つの人気のある構築フレームワークであるReactで見られる悪い習慣と比較しました。
- 共通点: 悪い習慣の約半分（「流し台」や「コピー＆ペースト」の問題など）は、Angular と React の両方で同じです。ブロックで構築する場合、使用するブロックのブランドに関係なく、人間は同じ間違いを犯すことがわかりました。
- 固有のスメル: 一部のスメルは Angular に固有のもので、通常は画面の更新方法やデータ処理に関する特定のルールに関連しています。
3. 解決策：新しい「嗅ぎ分け」ツール
11 のスメルのリストができると、研究者たちは単に報告書を書くだけでなく、ロボット検査官を構築しました。
- 彼らは React の悪い習慣を嗅ぎ分ける既存のツールを手に取り、Angular を理解できるようにアップグレードしました。
- この新しいツールはコードファイルをスキャンし、これら 11 のスメルの特定のパターンを探し出し、それらをフラグ付けします。
4. 試験：ロボットは機能したか
ロボットがどれほど優れているかを確認するために、彼らは実際のオープンソースの Angular プロジェクトのセットでテストを行いました。まず、スメルが実際に存在することを確認するために手動でコードをチェックし、その後ロボットを実行させました。
- 結果: ロボットは驚くほど優秀でした。悪い習慣を非常に高い精度（88% 以上正確）で検出し、「魔法の箱」（
anyタイプ）や「コピー＆ペースト」の問題を見つけることにおいてはほぼ完璧でした。 - 一つの不具合: ロボットはサイズに対して少し興奮しすぎることがありました。複雑な仕事のため（大きな正当な倉庫のように）、ファイルが自然に大きい場合でも、ロボットはそれがよく整理されていても「巨大ファイル」のスメルとしてフラグ付けすることがありました。これは、重い箱を持っている人全員を止めるセキュリティガードのようで、単に家具を運んでいる人であっても止めてしまうようなものです。
なぜこれが重要なのか
主な結論は、この研究が、実際の開発者が実際に話していることに基づいた、Angular 固有の悪い習慣の最初の公式カタログを作成したということです。彼らは、これらの問題を早期に検出するための自動化されたツールを構築できることを証明し、開発者が将来、デジタルの家を清潔で安全にし、拡張しやすく保つのに役立つことを示しました。
要約すると：彼らは開発者の声を聞き、一般的な間違いをリストアップし、その間違いを見つけるロボットを構築し、そのロボットが非常にうまく機能することを示しました。
自分の分野の論文に埋もれていませんか？
研究キーワードに一致する最新の論文のダイジェストを毎日受け取りましょう——技術要約付き、あなたの言語で。