😸
【JavaScript⇄Apex】変数の受け渡し方法
はじめに
JavaScriptとApex間で変数を受け渡す方法をまとめました。一部データ整形も入っています。
JSからApexにsObjectを渡す
JS
import { initAccountRating } from '@salesforce/apex/...';
export default class ... extends LightningElement {
sampleFunc() {
// 取引先の配列
const accounts = [
{
Id: '0015j000019OUYAAA4',
Name: 'Apple Inc.',
Rating: 'Warm',
},
{
Id: '0015j000019OUYAAB5',
Name: 'Google Inc.',
Rating: 'Cold',
}
];
initAccountRating({ accountList: accounts }).then(newAccounts => {
console.log(newAccounts);
// [
// { Id: '0015j000019OUYAAA4',
// Name: 'Apple Inc.',
// Rating: '' },
// { Id: '0015j000019OUYAAB5',
// Name: 'Google Inc.',
// Rating: '' }
// ],
}).catch(error => {
...
});
}
}
Apex
@AuraEnabled
public static List<Account> initAccountRating(List<Account> accountList) {
for (Account account : accountList) {
account.Rating = '';
}
return accountList;
}
結論
JSでオブジェクトを用意し、Apexで型を指定して受け取る。
Tips
JSのオブジェクトは Id プロパティさえあれば、受け渡すことが可能。
Apexで項目を使いたい場合、その項目もJSオブジェクトのプロパティとして設定する。
JSからApexにオブジェクトを渡す
オブジェクト単体の場合
JS
import { func1 } from '@salesforce/apex/...';
export default class ... extends LightningElement {
sampleFunc() {
const person = { name: '田中 一郎', age: 20 };
func1({ person: person }).then(newPerson => {
console.log(newPerson); // { name: '田中 一郎', age: 21 }
}).catch(error => {
...
});
}
}
Apex
@AuraEnabled
public static Map<String, Object> func1(Map<String, Object> person) {
person.put('age', Integer.valueOf(person.get('age')) + 1);
return person;
}
オブジェクト配列の場合
JS
import { func2 } from '@salesforce/apex/...';
export default class ... extends LightningElement {
sampleFunc() {
const people = [
{ name: '田中 一郎', age: 20 },
{ name: '佐藤 太郎', age: 25 },
];
func2({ people: people }).then(newPeople => {
console.log(newPeople);
// [
// { name: '田中 一郎', age: 21 },
// { name: '佐藤 太郎', age: 26 }
// ]
}).catch(error => {
...
});
}
}
Apex
@AuraEnabled
public static List<Map<String, Object>> func2(List<Map<String, Object>> people) {
for (Map<String, Object> person : people) {
person.put('age', Integer.valueOf(person.get('age')) + 1);
}
return people;
}
結論
- オブジェクト単体の場合、
Map<String, Object>で受け取る。 - オブジェクト配列の場合、
List<Map<String, Object>>で受け取る。
参考
ApexからJSにオブジェクトを渡す
パターン1
Apex
@AuraEnabled
public static List<Map<String, Object>> func1() {
// 本のリスト
List<Map<String, Object>> books = new List<Map<String, Object>>{
{
'title' => '嫌われる勇気',
'author' => '岸見 一郎、 古賀 史健',
'price' => 2000,
'available' => false
},
{
'title' => '1分で話せ',
'author' => '伊藤 羊一',
'price' => 1800,
'available' => true
},
};
return books;
}
JS
import { func1 } from '@salesforce/apex/...';
export default class ... extends LightningElement {
...
sampleFunc() {
func1().then(books => {
console.log(books);
// [
// { title: '嫌われる勇気',
// author: '岸見 一郎、 古賀 史健',
// price: 2000,
// available: false },
// { title: '1分で話せ',
// author: '伊藤 羊一',
// price: 1800,
// available: true }
// ],
}).catch(error => {
...
});
}
}
パターン2
Apex
@AuraEnabled
public static String func2() {
JSONGenerator gen = JSON.createGenerator(true);
gen.writeStartArray(); // 配列start
gen.writeStartObject(); // オブジェクトstart
gen.writeStringField('title', '嫌われる勇気');
gen.writeStringField('author', '岸見 一郎、 古賀 史健');
gen.writeNumberField('price', 2000);
gen.writeBooleanField('available', false);
gen.writeEndObject(); // オブジェクトend
gen.writeStartObject();
gen.writeStringField('title', '1分で話せ');
gen.writeStringField('author', '伊藤 羊一');
gen.writeNumberField('price', 1800);
gen.writeBooleanField('available', true);
gen.writeEndObject();
gen.writeEndArray(); // 配列end
return gen.getAsString(); // String型
}
JS
import { func2 } from '@salesforce/apex/...';
export default class ... extends LightningElement {
...
sampleFunc() {
func2().then(json => {
const books = JSON.parse(json);
console.log(books);
// [
// { title: '嫌われる勇気',
// author: '岸見 一郎、 古賀 史健',
// price: 2000,
// available: false },
// { title: '1分で話せ',
// author: '伊藤 羊一',
// price: 1800,
// available: true }
// ],
}).catch(error => {
...
});
}
}
結論
- Apexで
Map<String, Object>用意 → JSで受け取る。 - Apexで
JSONGeneratorを利用してJson文字列作成 → JSで解析して受け取る。
参考
Apexで取得したDateをJSで日本時間に変更する
Apex
@AuraEnabled
public static Account func() {
// 一番新しく作成された取引先レコードを取得
return [SELECT Name, CreatedDate
FROM Account
ORDER BY CreatedDate DESC
LIMIT 1];
}
JS
import { func } from '@salesforce/apex/...';
export default class ... extends LightningElement {
...
sampleFunc() {
func().then(account => {
console.log(account.CreatedDate); // 2023-10-04T00:28:06.000Z
// 日本時間に変更
console.log(new Date(account.CreatedDate).toLocaleString('ja-JP')); // 2023/10/4 9:28:06
console.log(new Date(account.CreatedDate).toLocaleDateString('ja-JP')); // 2023/10/4
console.log(new Date(account.CreatedDate).toLocaleTimeString('ja-JP')); // 9:28:06
}).catch(error => {
...
});
}
}
結論
new Date(date).toLocaleString('ja-JP') // 2023/10/4 9:28:06
new Date(date).toLocaleDateString('ja-JP') // 2023/10/4
new Date(date).toLocaleTimeString('ja-JP') // 9:28:06
参考
終わりに
随時更新します。
Discussion