概要

IstanbulJSが生成するHTMLレポートでは未網羅のコードがハイライトされて表されるが、ハイライトの範囲が奇妙に感じられた。様々なコードに対してHTMLレポートを生成し、それぞれのハイライト範囲についての考察を以下にまとめる。

環境

macOS 10.14.2
Node v11.1.0
React 16.7.0
create-react-app 2.1.2

簡便さのため、Reactプロジェクトで検証を行った。

再現用リポジトリ

検証環境を再現するリポジトリを以下に示す。

検証用コード

HTMLレポートにてハイライトの対象となる ステートメント ブランチ 関数 に対して、4種類の記法を用いたコードで検証を行った。

Normal - インデントや改行を適宜用いて記述する。
Split - Normalでハイライトされた箇所を複数行に分割して記述する。
Nested - ステートメント ブランチ 関数 をネストして記述する。
Abuse - ステートメント ブランチ 関数 を1行にまとめ、同じ行に2回記述する。

考察

JavaScript - react-scripts@2.xのテンプレートを使用にて生成した各レポートの内容を、以下のアイコンを用いて考察する。

🤔 - 奇妙に感じられる点を示す。
💡 - 改善案を示す。
🚫 - 検証できなかったことを示す。

Statement

Normal

Normal

🤔 ステートメントが1文字多くハイライトされている。
💡 ステートメントを正確にハイライトさせる。

Split

Split

🤔 ステートメントの1行目しかハイライトされていない。
💡 複数行にまたがってステートメントの全体をハイライトさせる。

Nested

Nested

🚫 Normalでハイライトされている箇所をネストできないため、検証不可。

Abuse

Abuse

🤔 💡 Normalで言及した内容と同様。

Branch

Normal

Conditional Operator

🤔 ステートメントが1文字多くハイライトされている。
💡 ステートメントを正確にハイライトさせる。

If

🤔 else if 節の1行目しかハイライトされていない。
💡 else if 節の全体( if キーワード以降)を複数行にまたがってハイライトさせる。

ShortCircuitEvaluation

🤔 ステートメントが1文字多くハイライトされている。
💡 ステートメントを正確にハイライトさせる。

Switch

🤔 case 節、 default 節ともに行末までハイライトされている。
💡 : 以降のスペースやコメントはプログラムとして意味を持たないので、ハイライトを : で終わらせる。

Split

Conditional Operator

🚫 Normalでハイライトされている箇所を分割できないため、検証不可。

If

🤔 💡 Normalで言及した内容と同様。

ShortCircuitEvaluation

🚫 Normalでハイライトされている箇所を分割できないため、検証不可。

Switch

🤔 💡 Normalで言及した内容と同様。

Nested

Conditional Operator

🤔 💡 Normalで言及した内容と同様。

If

🤔 else 節がハイライトされていない。
💡 if 文の全体をハイライトさせる。

ShortCircuitEvaluation

🚫 Normalでハイライトされている箇所をネストできないため、検証不可。

Switch

🤔 default 節がない場合、case 節がハイライト(黄)される。
🤔 default 節がある場合、case 節と default 節がハイライト(黄)されない。
💡 複数行にまたがって switch 文の全体をハイライト(赤)する。

Abuse

Conditional Operator

🤔 💡 Normalで言及した内容と同様。

If

🤔 else if 節が } より先までハイライトされており、アイコン[E]がハイライトの上に乗っている。
💡 else if 節のハイライトを } で終わらせる。

ShortCircuitEvaluation

🤔 💡 Normalで言及した内容と同様。

Switch

🤔 case 節と default 節のハイライト(黄)がステートメントのハイライト(赤)までカバーしている。
💡 case 節と default 節のハイライトを : で終わらせる。

🤔 二つのステートメントが一つにまとめてハイライト(赤)されている。
💡 各ステートメントを独立してハイライトさせる。

Function

関数の定義部について述べる。

Normal

ArrowFunction

括弧がある場合
🤔 ( から2文字しかハイライトされていない。
💡 ( から ) までハイライトさせる。

括弧がない場合
🤔 引数名の先頭の2文字しかハイライトされていない。
💡 引数名の全体をハイライトさせる。

ClassMethod

🤔 クラスメソッド名の先頭の2文字しかハイライトされていない。
💡 クラスメソッド名から) までハイライトさせる。

FunctionDeclaration

🤔 関数名から(までしかハイライトされていない。
💡 function キーワードから ) までハイライトさせる。

FunctionExpression

無名関数の場合
🤔 function キーワードの先頭の2文字しかハイライトされていない。
💡 function キーワードから ) までハイライトさせる。

名前付き関数の場合
🤔 関数名から(までしかハイライトされていない。
💡 function キーワードから ) までハイライトさせる。

Split

ArrowFunction

括弧がある場合
🤔 ( から始まる1行目しかハイライトされていない。
💡 ( から ) まで複数行にまたがって全てハイライトさせる。

括弧がない場合
🚫 Normalでハイライトされている箇所を分割できないため、検証不可。

ClassMethod

🤔 クラスメソッド名の先頭の2文字しかハイライトされていない。
💡 クラスメソッド名から) まで複数行にまたがって全てハイライトさせる。

FunctionDeclaration

🤔 関数名から始まる1行目しかハイライトされていない。
💡 function キーワードから ) まで複数行にまたがって全てハイライトさせる。

FunctionExpression

無名関数の場合
🤔 function キーワードの先頭の2文字しかハイライトされていない。
💡 function キーワードから ) まで複数行にまたがって全てハイライトさせる。

名前付き関数の場合
🤔 関数名から始まる1行目しかハイライトされていない。
💡 function キーワードから ) まで複数行にまたがって全てハイライトさせる。

Nested

ArrowFunction

🤔 ステートメントの1行目しかハイライトされていない。
💡 複数行にまたがってステートメントの全体をハイライトさせる。

ClassMethod

🚫 クラスメソッドをネストできないため、検証不可。

FunctionDeclaration

🤔 ステートメントの1行目しかハイライトされていない。
💡 複数行にまたがってステートメントの全体をハイライトさせる。

FunctionExpression

🤔 ステートメントの1行目しかハイライトされていない。
💡 複数行にまたがってステートメントの全体をハイライトさせる。

Abuse

まとめ

本記事では、IstanbulJSが生成するHTMLレポートにおけるハイライトの問題を検証した。続く別記事にて、ハイライト範囲の代替案と、それを実現するコードを示す。