郵便番号の入力を Lightning Experience で実現する LWC 開発！
この記事では、郵便番号から住所を自動入力するシンプルで便利な Lightning Web コンポーネント (LWC) を例に挙げ、LWC 開発の魅力とポイントに迫ります。LWC の開発に不慣れ方でも安心してください。この記事で紹介するコンポーネントはインストール可能で、すぐにご自身の組織で試すことができます。なお、LWC は オープンソース版と Salesforce Platform 版の2 種類がありますが、この記事では Salesforce Platform 上の LWC について扱います。
試す
以下のリンク先から、Lightning アプリケーションビルダーで使用できるコンポーネントおよび、Lightning フロー (画面フロー) で利用できるコンポーネントをインストールすることができます。(注: 入力値を保存する処理については割愛しているため、各自で実装が必要です。)
実装例
郵便番号から住所を自動入力するにあたり、Web で最もポピュラーなライブラリの 1つである、YubinBango を使用します。
<template>
<lightning-card icon-name="standard:address" title="住所入力フォーム">
<div class="slds-p-horizontal_small">
<lightning-layout>
<lightning-layout-item size="6">
<lightning-input label="郵便番号" pattern="[0-9]{7}" type="text" max-length="7"
value={postalCode} onchange={handlePostalCodeChange}></lightning-input>
</lightning-layout-item>
</lightning-layout>
<lightning-layout>
<lightning-layout-item size="12">
<lightning-input label="住所" type="text" value={address}></lightning-input>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
const PREFECTURES = [
'北海道',
'青森県',
//中略
'沖縄県'
];
export default class ExampleForm extends LightningElement {
postalCode;
address;
async handlePostalCodeChange(event) {
this.postalCode = event.target.value;
if (!this.postalCode || !event.target.checkValidity()) {
return;
}
const response = await fetch(`https://yubinbango.github.io/yubinbango-data/data/${this.postalCode.substring(0,3)}.js`)
const addressFunctionText = await response.text();
const addressMap = JSON.parse(addressFunctionText.replace('$yubin(','').replace(');','')); // 余計な文字列を削除
const addressData = addressMap[this.postalCode]; // e.g., [13,"新宿区","西新宿","２丁目８－１"]
if (addressData) {
const prefecture = PREFECTURES[addressData[0] - 1];
// 都道府県と、配列の2番目以降を文字列結合 (項目を分ける場合はここで処理)
this.address = prefecture + addressData.slice(1).join('');
}
}
}
ソースコードのポイント
HTML
- lightning- から始まるタグは、基本コンポーネントと呼ばれ、最新の Lightning Experience のユーザインタフェースを構成するブロックです。基本コンポーネントを組み合わせることで、1 から HTML や CSS を組み立てる必要がなく、効率よく Lightning Experience のユーザインタフェースと整合の取れたコンポーネントを作成することができます。
- lightning-input は HTML5 の <input> に準拠し、様々なデータ型やバリデーションチェックをサポートしています。詳細は、lightning-input タグのコンポーネントリファレンス (英語) を参照してください。
JavaScript
- 一般に、LWC でサードパーティのライブラリを使用するには、静的リソースにそのライブラリをアップロードして JavaScript ファイルで読み込む方法が取られます。しかし、Salesforce Platform 上では、Lightning Locker と呼ばれる独自のセキュリティ上の理由で、サードパーティのライブラリが直接使用できない場合があります。そこで、このライブラリが参照している、郵便番号先頭3桁毎の住所データ (例: 100 始まりの郵便番号データ) を Fetch API で取得してします。なお、クライアントサイドから直接コールアウトする際には、URL を CSP 信頼済みサイトに登録しておく必要があります。
コンポーネントをモジュール化する
フォームのレイアウトが異なる複数のコンポーネントから、この機能を呼び出す場合を考えてみましょう。各コンポーネントで同じ JavaScript ロジックを実装することも可能ですが、メンテナンス性に欠けます。LWC は、JavaScript ファイル単独でもデプロイ可能であるため、そのコンポーネントをモジュールとして、他のコンポーネントから import して扱うことができます。このようなコンポーネントはサービスコンポーネントと呼ばれます。
サービスコンポーネント
export default async function getAddressByPostalCode(postalCode) {
const response = await fetch(
`https://yubinbango.github.io/yubinbango-data/data/${postalCode.substring(0, 3)}.js`
);
const addressFunctionString = await response.text();
const addressMap = JSON.parse(
addressFunctionString.replace("$yubin(", "").replace(");", "")
);
const addressData = addressMap[postalCode];
if (addressData) {
return {
state: prefectures[addressData[0] - 1],
city: addressData[1],
street: addressData[2],
extended: addressData.length === 4 ? addressData[3] : undefined
};
}
return undefined;
}
フォームのコンポーネント
サービスコンポーネントを使用するコンポーネントのロジックが簡潔になることが分かります。
import { LightningElement } from "lwc";
import getAddressByPostalCode from "c/postalCode"; // サービスコンポーネントのモジュールを import
export default class PostalCodeExampleForm extends LightningElement {
postalCode;
address;
async handlePostalCodeChange(event) {
this.postalCode = event.target.value;
if (!this.postalCode || !event.target.checkValidity()) {
return;
}
const address = await getAddressByPostalCode(this.postalCode); // サービスコンポーネントのモジュールを呼び出し
if (address) {
this.address = Object.values(address)
.filter(v => v !== undefined)
.join("");
}
}
}
おわりに
この記事では、シンプルながら便利で再利用可能な LWC の例を示しました。例を通して、LWC が標準的な Web の技術を土台にしていることを学びました。また、LWC はパフォーマンスに優れ、現在開発者向けに最も注力して機能追加されている領域の 1 つです。加えて、LWC は Web とともに進化しており、LWC を学ぶことは汎用的な Web の技術やベストプラクティスを適用し、身につけるきっかけになります。これは、アプリケーションの品質やエンジニアのスキルアップなど様々な面でプラスに寄与するでしょう。
プログラミングや開発というと複雑で巨大なアプリケーションを想像してしまうかもしれませんが、この記事で紹介したようなちょっとした「コンポーネント」でも、ユーザ体験を大きく変えられる可能性があります。この記事が LWC を学びはじめるきっかけやヒントになれば幸いです。
リソース
- この記事で紹介したソースコードは、GitHub のリポジトリで参照できます。
参考リンク
- Trailhead – Lightning Web コンポーネントを使用した熊追跡アプリケーションの作成
- Trailhead には Lightning Web コンポーネントを学ぶための様々なモジュールが提供されていますが、まずは動くものを作成してイメージを掴むことが大切です。このプロジェクトでは、ソースコードをコピー＆ペーストしながら、かわいい熊を地図上にプロットするコンポーネントの作成方法を学ぶことができます。
- GitHub – LWC Recipes (英語)
- Salesforce 公式の LWC サンプル集です。数十行程度の小さなコンポーネントで様々な例を確認することができます。
著者について
小坂 駿(こさか・しゅん)さんはアクセンチュア株式会社のアソシエイト・マネジャーで、技術者・コンサルタントとして、金融・小売・通信・エネルギーなど様々な業界のクライアントに対して Salesforce の導入支援を含む企業のデジタルトランスフォーメーションを支援しています。また、社外では Salesforce コミュニティの運営や Visual Studio Code 拡張機能の日本語化など、Salesforce に関わるエンジニアと一緒にスキルアップしていく様々な方法を展開・模索しています。趣味は山・岩・崖登り。
