コンポーネント開発を試してみました。Auraコンポーネントで開発を行ったため、今の所必要になることもなかったのですが、Winter'20の認定資格更新モジュールをクリアするのに必要になってしまったので、重い腰を上げてやってみました。Japanのチャンネルで動画が公開されています。YouTube実際に作成するのはこの辺りからだと思います。Componentコマンド実行コマンド実行でファイルを作成します。ファイル名はここで入力。こんな感じでLWCファイルを作成できます。作成されるファイルは下記の3つです。helloLwc.jshelloLwc.htmlhelloLwc.js-meta.xmlファイル名の先頭は小文字になるようです。自分の環境ではHelloLwc.jsで最初つくられたのですが保存してSalesforce側にデプロイしたタイミングか、それ以外のどこかで上記の3つのファイルにアクセスできるようになりました。.xmlのファイルで使用箇所などの設定ができるみたいです。</targets></LightningComponentBundle>.htmlファイルでHTMLコードを記述します。LWC!</p></template>DeployコマンドでSalesforce側にリリースします。正常にリリースすると設定のLightningコンポーネントのページに追加されます。ここまでできればLightningアプリケーションビルダーで利用可能になっていると思います。今回のコードの場合はホームのページで利用できるコンポーネントです。あとはドラッグ&ドロップで追加するだけ。テキストが表示されるシンプルなコンポーネントです。背景も何も無い状態で表示されました。上記まででLWCコンポーネントの最低限の枠ができました。続いてJS処理の実装です。「{name}」という感じに書くとバインド変数として扱われます。{name}!</p></template>JS側はこんな感じ。'Lightning';}デプロイコマンドでリリースするとSalesforce側に変数で宣言した値が表示されることを確認できます。次はInputフィールドの使い方です。</div></template>JSファイル側は次のように変更します。}}これでテキストボックスに入力した結果が画面に表示されるようになりました。次はチェックボックスをつかった条件判定についてです。今回は複数のInputフィールドを用意するのでquerySelectorの条件をID指定にします。</div></template>JS側はこんな感じ。}}これで複数のInputフィールドのクエリセレクターの使い方とチェックボックスの値によるIF判定を動かすことができました。最後にリスト表示についてです。今回は先にJSの処理から。}}HTML側はこんな感じ。</div></template>これでリスト表示ができました。リスト表示のもう一つの書き方です。</div></template>この書き方でもリスト表示ができました。リストの最初と最後の判定も動いています。Webコンポーネント開発の基本的な部分です。Apexコードとの連携は含まれていませんがこれをベースに勉強をしていけば良さそうでした。おまけ上記で覚えたやり方をベースにWinter'20でつくるハンズオンをやってみました。xmlns="http://soap.sforce.com/2006/04/metadata"><apiVersion>47.0</apiVersion><isExposed>true</isExposed><targets><target>lightning__Tab</target></targets></LightningComponentBundle>カスタムタグこれで完成。Webコンポーネントの基本的な使い方はこんな感じでした。DXでLightningアプリの開発をやってみました。はてなブログPro技術ブログ的な感じです。Guideスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。