【Lightning Web Component】コードの共通化をやってみました

こんにちは、アンダーソンです。
今回はLWCでのコードの共通化の仕方についてまとめました。

ApexでもUtilクラスを作成して、よく使う処理のメソッドなどを
まとめていたと思いますが、LWCでもそういった処理をすることができます。

簡単な処理を作りましたので、実際に試してみたいと思います。

入力値を計算してくれる共通コード

ちょっといいモノが思い浮かばなかったので
入力した値を計算する処理を作ってそれを共通化していきたいと思います。

const incrementNumber =(number) =>{
    return number + 1;
}
const decrementNumber =(number) => {
    return number - 1;
}
const doubleNumber =(number) => {
    return number * number;
}


export { incrementNumber,decrementNumber,doubleNumber }

入ってきた値numberに対し、インクリメントやデクリメントをして返すという
簡単なコードです。

これを通常のLWCコンポーネントを作るのと同じように作成し、
htmlは削除し、jsファイルとxmlファイルのみ残しておきます。

共通コードを読み込む

では先ほど作成した、コードを別のjsファイル内で読み込みます。

import { incrementNumber,decrementNumber,doubleNumber } from 'c/calculator';

これでOKです。
先ほど設定した関数名を指定します。

そして処理は単純に関数を呼び出すのみでOKです。

number = 2;

this.number = doubleNumber(this.number);
console.log(this.number);

組織として共通化のコードがあれば簡単に呼び出すことができます。
Apexだとエラー吐き出し時に共通クラスや例外クラスを呼び出すなどしていましたが、
そういった使い方ができそうですね。

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

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