こんにちは、アンダーソンです。
今回はLWCでのコードの共通化の仕方についてまとめました。
ApexでもUtilクラスを作成して、よく使う処理のメソッドなどを
まとめていたと思いますが、LWCでもそういった処理をすることができます。
簡単な処理を作りましたので、実際に試してみたいと思います。
Contents
入力値を計算してくれる共通コード
ちょっといいモノが思い浮かばなかったので
入力した値を計算する処理を作ってそれを共通化していきたいと思います。
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だとエラー吐き出し時に共通クラスや例外クラスを呼び出すなどしていましたが、
そういった使い方ができそうですね。