Quantcast
Viewing latest article 5
Browse Latest Browse All 1436

SFDC:コードスニペットをつかったLightning Web コンポーネントの開発を試してみました

2023年10月17日ごろ公開されてたSalesforce Developers Blogの「Build Lightning Web Components Faster with Code Snippets」という記事で紹介されていたコードスニペットをつかったLightning Web コンポーネントの開発を試してみました。

Image may be NSFW.
Clik here to view.

Build Lightning Web Components Faster with Code Snippets | Salesforce Developers Blog


Salesforce Extension Pack for Visual Studio Code (v58.6.2)から利用可能になるようです。自分の環境をチェックしてみたら「v59.3.1」となっていたので全然OKでした。

Image may be NSFW.
Clik here to view.


バージョン確認する際に最初にインストール中になっていたので勝手にアップデートされていると思います。

Image may be NSFW.
Clik here to view.

コードスニペットとは

そもそもコードスニペットとはというところで、コードを書いてるときの保管機能という感じ。

Image may be NSFW.
Clik here to view.

コードスニペットの使い方

使い方は二種類。コマンドパレットから起動する方法とHTMLファイルにコードを書いているときの自動起動。

Image may be NSFW.
Clik here to view.


実際に動かしてみました。まずはLWCを新規作成。

Image may be NSFW.
Clik here to view.

「cmd + p」でコマンドパレットを起動。「>」を最初に入力。それからスニペットと入力するとスニペットを挿入と出てきました。

Image may be NSFW.
Clik here to view.


スニペットを挿入を選択すると候補がでてきます。

Image may be NSFW.
Clik here to view.


今回は記事と同じように「pill」を入力。

Image may be NSFW.
Clik here to view.


ポチポチと進めるとコード挿入がうまくいきました。「lightning-pill」の「lightning-avatar」という感じで必要なタグがひとまとめになって挿入できる感じ。

Image may be NSFW.
Clik here to view.


上記がコマンドパレットからスニペット機能を利用する方法の利用イメージです。もうひとつHTMLファイルにコードを書いているときの自動起動の方は次のような感じでした。


「<」とタグの先頭部分の記号を書くと候補が出てきます。(※ちょっと間違えてた。後で少し下に補足書きます。)

Image may be NSFW.
Clik here to view.


先程と同じく「pill」と入力。候補が絞り込まれます。

Image may be NSFW.
Clik here to view.


使いたいのが表示されないなってときにはやり直すと解決するかも。

Image may be NSFW.
Clik here to view.


これでコードスニペットの機能を使ってコードの挿入ができました。

Image may be NSFW.
Clik here to view.


実行結果はコマンドパレットの手順のときと同じ。・・・と思ったのですが、先頭に余計な「<」がついてました。

Image may be NSFW.
Clik here to view.


どうやら先頭の「<」はいらないみたいです。最初から「pill」と入力する形で反応しました。

Image may be NSFW.
Clik here to view.


Salesforce Developers Blogで紹介されていたLightning Web コンポーネントの開発が楽になるコードスニペット機能はだいたいこんな感じでした。lightningタグはけっこう覚えるのが大変なのでコードスニペットで補完してくれるようになるのはすごい便利そうでした。

コードスニペットの自作

ここは試しませんでしたが、「プロジェクトのディレクトリsnippets.code-snippetsにファイル」を作成する形で自作のコードスニペットを用意できるみたいです。

Image may be NSFW.
Clik here to view.


デフォルトでは作成されていないので、必要なら自分で用意する感じ。

Image may be NSFW.
Clik here to view.


配置場所は「.vscode」の中っぽい。

Image may be NSFW.
Clik here to view.


いまのところ自作するような場面は無いかなと思いましたが、会社の組織でよくでてくるキーワードとかコードスニペットに用意すると良いのかなと思います。


Viewing latest article 5
Browse Latest Browse All 1436

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>