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

学習の目的

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

非圧縮コードで作業をするメリットを説明する。
非圧縮 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 (有効化)] をクリックします。

開発中のキャッシュを無効にする

ブラウザーの安全で永続的なキャッシュ設定を無効にして、キャッシュを空にせずに、コードの変更による影響を確認します。

キャッシュ設定は、サーバーとの往復処理の増加を避けることでページの再読み込みパフォーマンスを向上させます。

[Setup (設定)] から、[Quick Find (クイック検索)] ボックスに Session (セッション) と入力し、[Session Settings (セッションの設定)] を選択します。
[Enable secure and persistent browser caching to improve performance (パフォーマンスを向上させるためにブラウザーの安全で永続的なキャッシュを有効にする)] チェックボックスをオフにします。
[Save (保存)] をクリックします。

ブラウザーのキャッシュ設定を無効にすると、キャッシュをクリアせずにページを再び読み込んでコードの変更をテストできます。コードをデバッグしたら、ブラウザーのキャッシュ設定を有効にすることをお勧めします。

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

GitHub リポジトリの readme の手順を実行します。
アプリケーションランチャーで ([Items (項目)] の下にある) [Solutions (ソリューション)] を見つけて開きます。

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

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

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

DevTools を開く

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

アプリケーションランチャーで ([Items (項目)] の下にある) [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 が下端にドッキングされています。)

[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 (カスタムフォーマットツール)] を選択します。

無視リストを使用する

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

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

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

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

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

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

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

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

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

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

これらの新しいツールの使い方は、次の単元で学習します。

ヘルプをお探しですか?

もっと探す