【Lightning Web Component】リアルタイムでメッセージを変化させよう【Salesforce】

こんにちは、アンダーソンです。
今回はLWCを作っていくシリーズ第二弾です。
リアルタイムにメッセージを変化させていく実装をしていきたいと思います。
前回のおさらいはこちらをご覧ください。

Lightning Web Component (LWC)を作ってみよう【Salesforce】

Lightning Web Componentを1から初めてみませんか？ この記事ではこれからLightning Web Componentを始める方に向けて、LWCについて解説をしています。 Lightning Web Componentが気になる方は是非ご覧ください。

keneloper.com

2020.05.05

inputを使ってみよう

LWCはWeb標準のプログラミングモデルのため、htmlでよく使うマークアップ、
例えばdivとかinputなどは普通に使えます。
まずinputを使って文字を入力できるようにします。
前回のhtmlファイルに追加していきます。

<input value={message}></input>

追加した画面がこちらです。

messageにHello Worldを入れているので初期表示されていますが、ちゃんと入力できますね。
ただし今の状態では入力値が自動的に変更されるということはありません。

JavaScriptでイベントを取得する

では次にJavaScriptファイルを変更していきます。
JavaScript側ではinputが変更されたというイベントをキャッチし、
inputの内容がmessageに代入されていくという内容を書いていけばOKです。

inputChage( event ){        
   this.message = event.target.value;
}

inputChangeというイベントを受け取るメソッドで、メッセージに受け取ったイベントに含まれる入力内容を代入します。
次にこのメソッドを呼び出す実装をしていきます。
htmlファイルのinput内に下記を追加しましょう。

onchange={inputChage}

これでデプロイして実際にやってみましょう。
たぶんできません(ごめんなさい)

通常のinputマークアップではこの動きができないらしく、
ここはinputをlightning-inputに書き換えることで解決します。

<lightning-input value={message} onchange={inputChage}></lightning-input>

これで実際に試してみましょう。

まだ確定していませんが、ちゃんとラベルに反映されていますね。
これでリアルタイムにメッセージを変更することができました。

まとめ

今回はHelloWorldのメッセージを動的に変更するという内容をやりました。
少しだけJavaScriptの知識が必要ですが、まだまだとっつきやすいとは思います。
実際にはもっとハードな実装が望まれると思いますので、どんどんここでもやっていきます。

今回のソースはGitHubにもアップしています。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。