トラブルシューティングの準備をする

学習の目的

この単元を完了すると、次のことができるようになります。

非圧縮コードで作業をするメリットを説明する。
非圧縮 Lightning Web コンポーネントの取得方法を示す。
DevTools 内での Lightning Web コンポーネント JavaScript の位置を特定する。
無視リストを使用して自分のコードのみに集中する。
プロキシデコレーターのカスタムフォーマットツールを有効化する。

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Lightning Web コンポーネント特有の JavaScript の課題

JavaScript のトラブルシューティングには特別なスキルが求められます。JavaScript で構築された Lightning Web コンポーネントのトラブルシューティングでは、さらに高度なスキルが求められます。まず、Lightning Web コンポーネントは、コンパイルされると圧縮されるということを知っておきましょう。圧縮することで、サイズが小さくなり、ブラウザーへの読み込みが速くなります。一方で、トラブルシューティングは困難になります。その理由は、コードを圧縮すると、改行が削除され、変数名が変更されるためです。

始める前に

ほとんどのブラウザーの開発者ツールに類似の機能がありますが、このモジュールでは Chrome DevTools を取り上げます。では、DevTools を詳しく調べられるように環境を設定しましょう。

ここでは Salesforce DX 開発環境が設定されていること、ユーザーが容易にその環境を使用して Lightning Web コンポーネントを作成し、組織にリリースできることを前提としています。まだこのプロセスに不慣れな場合は、このモジュールの前に「クイックスタート: Lightning Web コンポーネント」プロジェクトを修了してください。

一緒にトレイルを進みましょう

エキスパートの説明を見ながらこのステップを実行したい場合は、次の動画をご覧ください。これは Trailhead Live の「Trail Together」(一緒にトレイル) シリーズの一部です。完全なセッションへのリンクは、「リソース」セクションを参照してください。

トラブルシューティング環境を設定する

まず、いくつかの Lightning Web コンポーネントで Trailhead Playground を設定して、トラブルシューティングに向けた準備をします。

Lightning Web コンポーネントを実際に使ってみる

ではここで新しい Trailhead Playground を作成し、このモジュールの手順を実行してみましょう。ページの最下部までスクロールし、Playground 名をクリックして、[Create Playground (Playground を作成)] を選択します。Trailhead Playground を作成するには、通常 3、4 分かかります。また、ハンズオン Challenge を実行するときにも Playground を使用します。

必ず新しい Trailhead Playground を使用してください。既存の組織や Playground を使用すると、Challenge に取り組んでいるときに問題が発生することがあります。

デバッグモードを有効化

この手順を踏むだけで、コードのトラブルシューティングが格段に容易になります。Lightning Web コンポーネントはコンパイルされますが、デバッグモードが有効である組織では、コードは圧縮されません。したがって、変数名も変わらず、コード全体の構造もそのままなので、トラブルシューティングしやすくなります。

[Setup (設定)] の [Quick Find (クイック検索)] ボックスに Debug Mode (デバッグモード) と入力し、[Debug Mode (デバッグモード)] を選択します。
該当するユーザーの横にあるチェックボックスをオンにします。
[Enable (有効化)] をクリックします。

Lightning Web セキュリティの無効化

ブレークポイントを処理するための一時的な回避策として、Lightning Web セキュリティを無効化します。

[Setup (設定)] から、[Quick Find (クイック検索)] ボックスに Session (セッション) と入力し、[Session Settings (セッションの設定)] を選択します。
[Lightning Web Security (Lightning Web セキュリティ)] で、[Use Lightning Web Security for Lightning web components and Aura components (Lightning Web コンポーネント用および Aura コンポーネント用 Lightning Web セキュリティの使用)] のチェックボックスをオフにします。
[Save (保存)] をクリックします。

キャッシュのクリアとハードリセットの実行

Lightning Web セキュリティを無効化するためには、ブラウザーのハードリセットに加えて、ブラウザーキャッシュをクリアする必要もあります。

ブラウザーウィンドウ内を右クリックし、[Inspect (検査)] を選択します。
を右クリックして、[Empty Cache and Hard Reload (キャッシュのクリアとハード再読み込み)] を選択します。

[Normal Reload (通常再読み込み)]、[Hard Reload (ハード再読み込み)]、[Empty Cache and Hard Reload (キャッシュのクリアとハード再読み込み)] が表示された [Reload (再読み込み)] メニュー。

GitHub から Lightning Web コンポーネントを入手する

GitHub リポジトリの readme の手順を実行します。

重要!

readme には古い SFDX コマンドが記載されています。以下の新しい SF コマンドを使用してください。

CLI を更新するには、以下を使用します。

sf update

権限セットを割り当てるには、以下を使用します。

sf org assign permset -n Solutions_Full_Access

アプリケーションランチャーから、[Solutions] を見つけて開きます。

ご使用の環境で、ブラウザーの DevTools を使用してトラブルシューティングを行う準備ができました。

このセクションでの重要なポイントを理解できているかどうかを、フラッシュカードで確認します。

各カードの問題や用語を読んだ後、カードをクリックまたはタップすると正解が表示されます。右向き矢印をクリックすると次のカードに移動し、左向き矢印をクリックすると前のカードに戻ります。

DevTools を開く

では、Chrome DevTools で Solutions アプリケーションを見てみましょう。

アプリケーションランチャーから、[Solutions] を見つけて開きます。
ブラウザーウィンドウ内を右クリックして、[Inspect (検査)] を選択し、[Sources (ソース)] タブをクリックします。

Chrome で DevTools を開くにはいくつかの方法があります。

メニューで [Customize and control Google Chrome (Google Chrome をカスタマイズして制御)]| [More tools (その他のツール)] | [Developer tools (開発者ツール)] をクリックして、[Sources (ソース)] を選択します。

F12、Ctrl+Shift+I (Windows)、または Cmd+Option+I (macOS) を押します。

DevTools が開いた Solutions アプリケーション。各番号は下の説明に対応しています。

DevTools には DevTools メニュー (1) があり、[Sources (ソース)] タブを選択すると、以下のペインから構成される [Sources (ソース)] パネルが表示されます。

ファイルナビゲーターペイン (2) には、この Web ページから要求されたすべてのファイルが表示されます。
コードエディターペイン (3) には、ファイルナビゲーターで選択されたファイルが表示されます。
JavaScript デバッグペイン (4) には、ブレークポイント制御ツールバーと、JavaScript を検査するためのいくつかのツールが表示されます。

DevTools メニューには、ブラウザーのいろいろな部分を表示するためのオプションがあります。このモジュールでは、主に [Sources (ソース)] と [Console (コンソール)] を使用します。

[Elements (要素)] パネルは、DOM と CSS の表示や変更に使用します。
[Console (コンソール)] パネルは、console.log() で作成したメッセージの読み取り、変数の操作、JavaScript の実行に使用します。
[Sources (ソース)] パネルは、JavaScript ファイルの表示とデバッグに使用します。

DevTools の場所を変更する

デフォルトでは、DevTools のツールは画面の右端にドッキングされています。これらのツールは、画面の左端や下端にドッキングしたり、ドッキングを解除して別のウィンドウとして表示したりできます。

[Customize and control Google Chrome (Google Chrome をカスタマイズして制御)] DevTools アイコンをクリックして、使用するドッキングの場所を選択してください。(このモジュールで使用する画像では、DevTools が下端にドッキングされています。)

[Dock side (ドッキング場所)] オプションボタンとして [Undock into separate window (別のウィンドウとしてドッキング解除)]、[Dock to left (左端にドッキング)]、[Dock to bottom (下端にドッキング)]、[Dock to right (右端にドッキング)] が表示されている。

カスタムフォーマットツールを有効にする

Lightning Web コンポーネントでは、JavaScript プロキシを使用して、主にデコレーター (@api、@track、@wire) でプロビジョニングされているデータを参照のみにしています。デバッグモードでは、カスタムフォーマットツールを使用して、プロキシを読み取り可能に変換できます。Chrome DevTools では、プロキシではなく実際の値が表示されます。では、カスタムフォーマットツールを有効にしましょう。

DevTools で [Settings (設定)] をクリックします。[Preferences (設定)] ページが開きます。
[Console (コンソール)] の下にある [Custom formatters (カスタムフォーマットツール)] を選択します。

[Custom formatters (カスタムフォーマットツール)] が選択された [Console (コンソール)]。

無視リストを使用する

無視リストを使用すると、DevTools の使用中に選択した JavaScript ファイルを無視して、自分が定義した例外でのみ一時停止することができます。これにより、コード中でトラブルシューティングの対象ではないフレームワークコードを無視できます。

[Settings (設定)] で [Ignore List (無視リスト)] をクリックします。
[Add pattern (パターンを追加)] をクリックします。
/aura_prod.*.js$ と入力して [Add (追加)] をクリックします。
[Add pattern (パターンを追加)] をクリックします。
/components/.*.js$ と入力して [Add (追加)] をクリックします。
[Settings (設定)] を閉じます。

Lightning Web コンポーネントの特定

[Sources (ソース)] では、ファイルナビゲーターに ([Page (ページ)] の下に) Lightning Web コンポーネントが表示されます。現在のページの Lightning Web コンポーネントは、すべて modules/c フォルダーに保存されています。

DevTools で [Sources (ソース)] タブをクリックします。
ファイルナビゲーターの [Page (ページ)] の下で lightning/n と modules/c を展開します。

ファイルナビゲーターの [Page (ページ)] の下で lightning/n と modules/c が展開されている。

display.js をクリックします。コードエディターでファイルが開きます。

display.js の画面

display.js で class Display を探します。(コードウィンドウ内をクリックしてから Ctrl+F (Windows) または Cmd+F (macOS) を押し、[Find (検索)] ボックスに class Display と入力します。)

コードがコンパイルされていますが、圧縮されていないため、変数名は変更されていません。

JavaScript ファイルに数行しか表示されていない場合は、組織でデバッグモードが有効になっていません。デバッグモードを有効にしてもコードエディターに表示されるコードが変わらない場合は、ハード再読み込みを実行してください。DevTools を開いた状態でブラウザー内を右クリックし、[Reload (再読み込み)] ボタンをクリックしてから [Hard Reload (ハード再読み込み)] をクリックします。