ソースコードの品質

2023年 4月 6日　Posted　野々瀨(フロントエンドエンジニア)

ソフトウェアなどは、要件を満たし、正しく期待した動作をしていれば、中身（ここでは主にソースコード）はこだわる必要はないかもしれません。しかし、その中身をこだわることで、運用やその後の対応に大きく影響を与えます。特にWebコンテンツのフロントエンドの部分は、ある程度中身が確認できてしまう部分ですので、信頼という意味でも品質にはこだわりたいものです。

ソースコードの品質とは

ソースコードの品質とは、ざっくりいうと次の要素を満たすかどうかだと思っています。

機能

クライアントからの要件が満たされているか、あるいは利用者がサービスを正しく利用できるかどうかです。

信頼

サービスや機能を利用した際に、不具合が発生しても致命的な影響を与えないようにしているかどうかです。また、サービスや機能が正しい動作・結果である（間違った動作や結果を与えない）かどうかです。万が一不具合が発生しエラーとなった場合でも、それを解決する方法が提示・提供されていれば問題ありません。

使用

サービスやその機能が効率的に利用しやすい・使いやすいかどうかです。

効率

利用者にストレスを与えない応答速度や、サーバーやクライアントへの負荷を軽減するロジックであるかどうかです。

保守

修正や機能拡張などを行う際に、メンテナンスがしやすい構造になっているかどうかです。不具合が発生した際に、その箇所が特定しやすいかどうかや修正がしやすいかどうか、拡張がしやすいかどうかといった感じです。

一貫性

変数名や関数名など何を示しているのかわかりやすく、一貫性のある命名になっているか、あるいはコードになっているかどうかです。

再利用

複数や複雑な処理を一つの処理にするのではなく、シンプルで再利用しやすい構造であるかどうかです。

可読性

後から読んだ時や他の編集者が読んだ時に、そのコードが読みやすいかどうかです。

ソースコードの品質向上のポイント

ガイドラインを作る

インデントや余白の取り方、命名規則、構造などガイドラインとしてドキュメントにすることで、可読性、一貫性、再利用性などが保たれます。

検証・構文チェックツールの使用

検証・構文チェックツールを使用することで、コードの検証や品質のチェックを行うことができます。例えば、検証はブラウザーにある開発者（デベロッパー）ツールのデバッグ機能やパフォーマンス計測機能、構文チェックはJavaScriptではJSHint（ほかのJSHint、ESlintなど）といったツールを使用することで、チェックすることができます。

機能テストの実施

その機能が正しい動作をするかどうかのテストを行います。特にユーザーが入力した値を受け入れる場合、その入力した値が正しくない時の考慮も必要になります。

WebサイトやWebアプリケーションなどは、利用者がどのブラウザーで利用するかわかりませんので、異なるブラウザーでの動作テストも必要です。フロントエンドの開発では特に、ブラウザーによって動作が異なったり、そもそも言語の構文が対応していないといったこともあります。

また、テストする内容によっては、自動テストを行うツールを導入することもできます。

コードレビューの実施

コードレビューを実施することで、書いた本人では気づけない修正すべき点を発見することができる可能性があります。また、「こういう別のやり方もある」「もっとパフォーマンスを向上できる」といった発見もできます。

ドキュメントを作る

仕様書や設計書などドキュメントを用意しておくことで、それがどのような機能を持っているか、どのような動きをするのかなどがコードを見ることなく把握することができます。

履歴を管理する

ファイルを更新した際に履歴を残しておくことで、例えば不具合が起きた時、過去にどのような更新を行ってそうなったかなどが追えるようになります。Gitなどバージョン管理ツールを使用することで、コード自体の履歴を残しておくこともできます。

最後に

ソースコードの品質は、いろいろなところに影響を及ぼします。品質向上を行うことは少なからず時間のかかるもので、後回しにしたりそもそもやらなかったりなんてこともあります。「やっておけばよかった」と後悔する前に、ぜひソースコードの品質は高めたいものです。

また次の書籍も、ソースコードの品質を向上するうえで、非常に参考になりますので、是非読んでみてください。