【LWC】フロント開発におけるデバッグ方法～デベロッパーツールの使い方～

Salesforce開発のフロント開発では、Lightning Web Component（以下LWC）を使うことが多いかと思います。
「開発中のデバッグはどこを確認すればよいか分かりづらい」なんて思ったことはないでしょうか？Apexだと開発者コンソールを使用するけれどJavaScriptはどこで確認すればいいんだ．．．と作業中に手が止まってしまったことがあります。
そんな開発初心者から、今回はフロント開発でのデバッグ方法について共有していきたいと思います。

フロント開発のデバッグではデベロッパーツールを使用できます。
デベロッパーツールとはいったい何なのかからお話しすると、Google Chromeが提供する開発者向けの検証ツールになります。
デフォルトで搭載されているためGoogle Chromeを使用している方ならすぐに利用可能です。
起動方法は、適当な画面をGoogle Chrome上で開いて画面右上の縦三点リーダー＞その他ツール＞デベロッパーツール　で表示できます。
また、Windows使用の方はCtrl＋Shift＋IかF12キー、macOS使用の方はcommand＋option＋Iでも表示可能です。
表示されたデベロッパーツールは、対象の画面について左右、下に分割表示か別タブとして開くことができます。デベロッパーツール内の縦三点リーダーから表示の変更が可能なので、確認のしやすい方法で切り替えて使用しましょう。

デベロッパーツールを表示するとタブが表示されます。それぞれ便利な機能があるためどのように使用できるのか確認していきましょう。
・Elements​
　HTML/CSSの確認ができる。
　Elementsタブ内にあるStylesタブを利用してCSSについて確認や実際にカラーを変更し、動作確認が可能。
　※元のファイルには変更は反映されていないため、変更を反映させたい場合は元のファイルを更新する必要があります。
・Console
　エラーメッセージの確認や、出力したログを確認できる。
・Source
　ブレイクポイントを設置することで実行中スクリプトを中断、停止して状態を確認できる。
　ブレイクポイントからは下記の種類で行単位に実行が可能。
　　①ステップイン:一行ごとに実行
　　②ステップオーバー:一行ごとに実行。関数があった場合も実行して次の行へ進む。
　　③ステップアウト:現在の関数が呼び出し元に戻るまで実行
　　※通常の実行に戻すときは下図にある④のボタンをクリックします。

・Application
　ページ内で使用されるcookieやデータベースの内容を確認できる。表示された値は編集、追加、削除可能。
・Network
　発生した通信の情報を確認できる。
　非同期通信など、ログでは確認が難しいがこのタブから通信時に送られた内容（ヘッダー）や応答結果（レスポンス）に加え実行にかかった時間も確認できるため、意図した動きをしているかを確認可能。
・Performance
　画面のパフォーマンスを計測。
・Memory
　メモリリーク（確保したメモリ領域の解放忘れが原因でメモリの空き領域が減っていく現象）の追跡が可能。

以上のようにさまざまなことが確認できるデベロッパーツールですが、今回は使うことの多いConsoleタブとElementsタブについて下記セクションでさらに紹介します。

LWC開発ではJavascriptを使用しますが、ログを出力したときどのように確認すればよいでしょうか？
Apex開発では開発者コンソールからログの結果確認ができますが、LWCの開発ではデベロッパーツールのConsoleタブからログの確認が可能です。
出力される方法については、開発者コンソールのシステムデバッグとは異なる点があるので比較しながら確認してみましょう。

表示の方法​
・命令文に対してのログ
　ApexもJavascriptも同様に命令文1つに対して1つのログが出力される。
・オブジェクト（連想配列/ハッシュ）の表示方法　　※JS＝Javascript
　Apex：for文で配列要素1つずつに対してデバッグを実施して確認できる。
　JS：JSON（JavaScript Object Notation）のメソッドJSON.stringify（）を利用して確認。
・コードでエラーが発生した時
　Apex：エラーメッセージが実行ガバナのログ表示の上あたりに表示される。

JS：エラーはConsole画面の中で表示され、メッセージは実行箇所に表示される。

・コード実行時の記載
Apex：記載順にコードが実行される。
JS：コンソールから実行順を確認した時に、実行順番が記載したコード順と異なることがある
→　特に設定を行わずにコード実行をすると、非同期で実行されてしまうため実行順が確定されません。
　　そのため、記載した順に実行させるためにはthen/chathメソッドを使用して同期処理にすることが必要です。
　　同期処理、非同期処理については下記記事が参考になります。
　　‐　TerraskyBase Tech Blog　【LWC基礎】非同期処理とPromiseの関係​

また、ApexとJavascriptの比較ではありませんが、両方を使用して実装を行う際は下記の注意が必要です。
・JSからApexを呼ぶ処理の実行
　JS⇒Apex⇒JSの順で呼び出しされるコードを実行したとき、最初のJavascript内でエラーが発生するとApexは実行されず、Apexでエラーが発生した場合は2度目のJSでログは出力されない
　→ログを確認して想定のログが出力されていなかった場合は、確認したいコード部分だけではなく呼び出し元のコードのデバッグ方法にあった形でも確認が必要です。

LWC開発では表示画面を作成する必要がありますが、Apex開発では画面の作成は行いません。
経験が少ないと画面開発でレイアウトの確認に手間取ることもあるのではないでしょうか？
作成した画面の確認を行う場合は、先ほど紹介したデベロッパーツールのElementsタブを使用します。

LWCで作成した画面の見た目を調整するために基本的に個別にCSSは作成せずに、LWCの開発ではSalesforceが用意したLightningDesignSystemを使用して標準のデザインに合わせることが多いかと思います。
LightningDesignSystemのレイアウトの構成を勉強するために記載内容を確認したり、
利用したデザインの構成がどのように画面に反映されるのか、Clickアクションを設定した時の動作や実行結果を確認したいときなどに便利な機能です。

「デベロッパーツールでできること」のセクションでも簡単に紹介しましたが、Elementsタブでは、ブラウザ上に描画されているHTMLコードが表示されます。ここで表示されるHTMLはVSCodeで記載したHTMLとは異なり、LWCのJavascriptで操作された結果が表示されているため、コードの実行結果を確認することが可能です。
キャプチャで示した赤枠部分を押下すると、画面にマウスカーソルを合わせることで対象のコンポーネントの情報が確認できるようになります。
そのままマウスクリックを行うとElementsタブで対象のHTMLコード行が表示されます。また、Stylesタブでも対象のコードに対してフォントサイズやカラーなどの設定が表示され詳細を確認することが可能です。

実際に作成したLWCでデベロッパーツールを使用してみると下記のような表示がされます。

画面で選択した「チェック一覧」の表示部分についてh3タグが使用されています。こちらについて②で記載されている「font-size: 1em;」に打ち消し線が引かれています。
ここでは画面のセクション部分についてh3タグではなく①に記載されたslds-section__titleクラスでフォントサイズが指定されているため、h3タグに指定されたチェックボックスが表示され、そこで設定を反映しない場合の表示確認も可能です。

このようにElementsタブでは作成した画面を視覚的に確認しながらコードの確認ができるため、直感的にも作業がしやすく開発の大きな助けになります。

基本的な情報にはなりましたが、デベロッパーツールの使い方についてまとめてみました。デベロッパーツールを使いこなすことで、開発により集中して取り組むことができるようになればと思います。