進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

不可欠なツールの収集

学習の目的

この単元を完了すると、次のことができるようになります。
  • Aura コンポーネントの作成に不可欠なブラウザベースのデバッグツールをインストールして使用する。
  • Aura コンポーネントの作成に最適な IDE をインストールして実行する。

ここから開始

前の単元で、何やら講義を聞かされたように、あるいは宿題を与えられたように感じたなら、もう一度原点に立ち返ってみましょう。

まったく新しい技術を使い始めるときに一番難しいのは、どこから開始すべきかを見極めることです。どのように設定するのか? 何を使ってコードを記述するのか? どこにコードを配置するのか? どのようにコードを確認し、テストするのか? このような小さな疑問が、最初の一歩を踏み出すうえで実際の障壁になる可能性があります。

ですから、とにかく実用的なことから着手しましょう。まずはここから始めます。

Aura コンポーネント開発用のツールスイート

何よりも、装備をご提供することが先決です。Aura コンポーネントの開発で必要なツールは、すでにご使用になっているツールと同じである可能性があります。ただし、Aura コンポーネントツールには、固有の側面があります。これらを確認していきましょう。

ブラウザ: Google Chrome

梯子! 多くの Web アプリケーション開発者が、開発者ツールとして優れているという理由で Google Chrome を使用しています。あなたがそうした開発者の一人であるなら、ここで終了です。次に行きましょう。

そうでない場合は、Aura コンポーネントの開発で Chrome を使用するように切り替えることを考えてください。この理由を次の 2 つの項目で説明します。

ブラウザデバッガ: Chrome DevTools

梯子! Chrome DevTools を使いこなす自信がまだない場合、優れたドキュメントがあるので、それらを参照することを強くお勧めします。「スタートガイド」から開始し、トレーニングに移動してください。DevTools の概要から開始します。DevTools の使用方法の習得に 1 分費やすたびに、後々、10 分の節約になるでしょう。(この見返りはさらに大きくなり、控えめに見積もっても 50 対 1 のようになります)。

もちろん、Firefox や Safari にも、非常に優れた開発者ツールがあります。でも、とにかく切り替えてください。その理由は次の項目を見てください。

DevTools 拡張: Salesforce Lightning Inspector

Salesforce Lightning Inspector を使用せずに Aura コンポーネントを開発することは、小枝をこすり合わせて火をおこすようなものです。やろうと思えば可能ですが、煩わしくて誰もやりたがりません。

Lightning Inspector の何が特別なのでしょうか? DevTools 用のこのプラグインを使用すると、コンポーネントツリーを移動し、コンポーネントの属性を調べて、コンポーネントのパフォーマンスのプロファイルを作成できます。サーバ側アクションへのコールとその応答を監視し、調べることができます。イベントの起動および処理のシーケンスを容易に把握することもできます(これらのすべての用語については、このトレイルの次のモジュール「Aura コンポーネントの基本概念」で説明します)。

「Hello World」よりも複雑なものを開発している場合、これは重要な作業になります。もちろん、きちんとした JavaScript 開発ツールでこれを手動で行うこともできますが、それは容易ではありません。Lightning Inspector では、これが容易になります。苦痛を伴う開発者体験と快適な開発者体験ほどの差があります。

エディタ: Visual Studio (VS) Code と Salesforce 拡張機能パック

Salesforce は、Aura コンポーネント専用のツールを備えた 2 つのエディタを提供します。開発者コンソールは、簡易編集や、このモジュールを含む小規模の学習プロジェクトに適していますが、実際のコンポーネントやアプリケーションを開発するための最良のツールではありません。

梯子! 最適なツールは VS Code です。VS Code をインストールしたら、Salesforce CLI と VS Code 向け Salesforce 拡張機能を追加します。これは、専用のナビゲーション、構文の強調表示、Aura コンポーネント固有の他の機能を VS Code に追加するものです。この組み合わせにより、Aura コンポーネント作業のための世界クラスの開発環境が与えられます。

これを持っていない、または持っているバージョンが古い場合は、最新のリリースを今すぐにインストールしてください。The Quick Start: Visual Studio Code (クイックスタート: Visual Studio Code) プロジェクトでは、このプロセスの手順を説明します。

高度な操作

Aura コンポーネントを操作するのに開発者コンソールを控えるようお勧めする理由は 2 つあります。

第一に、Visualforce で記述するよりも多くのコードを記述することになります。Aura コンポーネントでは抽象化の「次のレベル」をまだ利用できません。そのため、Visualforce では簡単であったまたは自動化されていたことを実行するのにコードを記述します。編集や、ものの移動、リファクタリングなどを容易にするエディタが必要になります。VS Code は、コードを編集する素晴らしい組み込み機能を備えています。VS Code は JavaScript を開発者コンソールよりも適切に処理します。多くの JavaScript を記述するだろうと言いましたよね?

第二に、特に最初の段階で、一度に多くの異なるコードリソースを開くことになります。比較やコピーアンドペーストなどのために、コードリソース間を移動します。VS Code のタブとウィンドウ管理機能は非常に優れています。

もう 1 点あります。VS Code を使用する必要がありません。SublimeText など、Aura コンポーネントをサポートするアドインを備えた他の素晴らしいサードパーティツールがあります。このようなツールもまた非常にうまく機能し、これらも開発者コンソールからの大きな進歩です。これらのツールのいずれかがお気に入りの場合は、是非それを使用してください!助言については、「リソース」を参照してください。