🙌
[Salesforce] Lightning Web Componentを開発する[備忘]
CLI インストール
Salesforce CLIでOSを選択しインストーラをダウンロードしてインストールしておく
VS Codeで開発
プロジェクトを作成する
- Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) でコマンドパレットを開く
- SFDX を入力
- SFDX: Create Project を選択
- Standard のテンプレートを選択
- プロジェクト名を入力
- ローカルのプロジェクトの保存先を選択し決定
Salesforceアカウントで認証する
- Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) でコマンドパレットを開く
- SFDX を入力
- SFDX: Authorize an Org
- ログインの種類を選択します Production, Sandbox, etc
- Enterを押してエイリアスはdefaultにします
- ブラウザが開くのでログインします
- VS CodeのログにSuccessfully authorized xxx と出ていればOKです。
コンポーネントを作成する
- Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) でコマンドパレットを開く
- SFDX を入力
- SFDX: Create Lightning Web Component を選択
- コンポーネント名を入力
- パスはデフォルトのままEnterする
- 作成したファイルが表示される
リリースする
- force-app/main の下にある default ディレクトリを右クリック
- SFDX: Deploy Source to Org を選択
- ended SFDX: Deploy Source to Org のログが表示されればOKです。
Lightningの画面にコンポーネントを設定する
- Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) でコマンドパレットを開く
- SFDX を入力
- SFDX: SFDX: Open Default Orgを選択しブラウザで組織のページを開く
- コンポーネントを追加したい画面までいき、右上の歯車アイコン > Edit Pageを選択する
- 左側のCustomに追加したコンポーネントが存在するのでドラッグ＆ドロップします
- Save
- Activate > Assign as Org Default > Save
- Save
- 左上の←で編集画面を終了する
- コンポーネントが表示されている
Get Record ID
レコードの詳細画面でレコードの情報を取得する。
追加するコードはGet Record Dataを参照ください。
すると以下のようなデコレータの部分で
@api recordId;
↓のエラーが発生しました。
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts
こちらの対応としては Preference > Setting にて experimentalDecorators で検索しチェックをつけると解決いたしました。
Discussion