いいねプラグインのjQuery削除#229
Conversation
There was a problem hiding this comment.
いくつかきになるので、ご確認のうえ、修正ください。
修正方法
- vote.js:95 — Object.values → Object.entries
- for (const [fieldCode, value] of Object.values(fields)) {
+ for (const [fieldCode, value] of Object.entries(fields)) {理由: Object.values() はフィールドオブジェクト自体の配列を返す。プレーンオブジェクトを [key, value] で destructuring しようとすると TypeError: object is not iterable が発生する。Object.entries() なら [fieldCode, fieldObject] のペア配列になり、元の $.each と同じ挙動になる。
- vote.js:174 & mobile-vote.js:185 — update() の Promise が reject されない
vote.js と mobile-vote.js の両方で同じ修正を適用:
update: function() {
- return new Promise((resolve) => {
+ return new Promise((resolve, reject) => {
const newRecord = {};
newRecord[VOTE_FIELD] = {'value': voteUsers};
newRecord[VOTE_COUNT_FIELD] = {'value': voteUsers.length};
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', {
'app': APPID,
'id': recordId,
'record': newRecord,
'revision': revision
}, resolve, (e) => {
NotifyPopup.showPopup(createErrorMessage(e));
+ reject(e);
});
});
}理由: エラーコールバックで reject() を呼ばないと Promise が永久 pending になり、呼び出し元の clickable が false のままリセットされず、ボタンが操作不能になる。
- vote.js:326 — !== null が undefined をすり抜ける
- if (voteModel !== null) {
+ if (voteModel !== undefined) {または、より明示的に:
- if (voteModel !== null) {
+ if (voteModel) {理由: filter()[0] はマッチなしで undefined を返す。undefined !== null は true なので条件をすり抜け、new VoteView(undefined) が呼ばれてクラッシュする。
- config.js:302/356
スクリプトは DOM が構築された後に読み込まれることが多く、DOMContentLoaded が既に発火済みの場合はコールバックが一切呼ばれません。
9行目の console.log(document.readyState) はおそらくこれを調査したためのものでしょうか。
ただし、単純にコメントアウトを解除すると、kintone 環境では動かない可能性があります。
次のような書き方が安全ではないかと思います。
function init() {
const loginInfo = kintone.getLoginUser();
const lang = getLanguage(loginInfo.language);
renderConfigUI(lang);
// ... 以下の実行コード
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init(); // 既にDOMが準備済みなら即実行
}
- vote.js:319 — fetchVoteModels() に lang を渡す
- fetchVoteModels().then((voteModels) => {
+ fetchVoteModels(lang).then((voteModels) => {理由: language が undefined のまま VoteModel コンストラクタに渡され、API エラー時に Msg[undefined].updatedWhileClicking で TypeError が発生する。
- config.js:148/160 — arrItem[0] へのガード追加
this.data.value = data;
- this.data.name = arrItem[0].textContent;
+ if (arrItem[0]) {
+ this.data.name = arrItem[0].textContent;
+ }
...
} else {
- arrItem[0].classList.add('kintoneplugin-dropdown-list-item-selected');
+ if (arrItem[0]) {
+ arrItem[0].classList.add('kintoneplugin-dropdown-list-item-selected');
+ }
}理由: 保存済みのフィールドがアプリから削除された場合、arrItem が空配列になり arrItem[0].textContent で TypeError がスローされる。
- config.js:9 — デバッグログ削除
- console.log(document.readyState);
|
今回の依頼内容ではないですが、もし可能であれば、 Devnet API ドキュメントおよびTipsの内容をベクタリングしてMCPサーバーを作ったので、
設定した後に、次のようなプロンプトで試してください。
AIが提案した変更非同期処理の問題点と推奨の書き方問題1: kintone.api をコールバックで包んだ Promise アンチパターン 現在の書き方（アンチパターン） — vote.js:161-170 推奨の書き方（async/await） 問題2: update() でエラー時に reject が呼ばれない 推奨の書き方 問題3: toggleLoginUser() の .then().then() チェーン 推奨の書き方 問題4: fetchVoteModel / fetchVoteModels の Promise ラップ 推奨の書き方 問題5: イベントハンドラーで Promise を返していない（index.show） 推奨の書き方 問題6（バグ）: イベントハンドラーの引数が間違い // ❌ 間違い // ✅ 正しい 問題7: config.js のコールバック形式 |
| @@ -20,7 +20,6 @@ | |||
There was a problem hiding this comment.
"zh":"https://cybozudev.kf5.com/hc/kb/article/1007993/"を削除してほしいです。
このサイトは閉鎖したためです
There was a problem hiding this comment.
Pull request overview
This PR removes the jQuery dependency from the “いいね (Like) プラグイン” sample by converting DOM manipulation and async flows to vanilla JavaScript, and bumps the plugin version.
Changes:
- Removed jQuery script loading from the plugin manifest.
- Rewrote desktop/mobile runtime scripts (
vote.js,mobile-vote.js) to use vanilla DOM APIs andasync/awaitforkintone.api. - Rewrote the config UI script (
config.js) to use vanilla DOM APIs andasync/await, including a DOM-ready initialization.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| examples/vote/manifest.json | Removes external jQuery references and bumps plugin version. |
| examples/vote/js/vote.js | Converts desktop “Like” UI + record API interactions from jQuery/Deferreds to vanilla DOM + async/await. |
| examples/vote/js/mobile-vote.js | Converts mobile “Like” UI + record API interactions from jQuery/Deferreds to vanilla DOM + async/await. |
| examples/vote/js/config.js | Converts config page UI rendering and field fetching from jQuery to vanilla DOM + async/await. |
Comments suppressed due to low confidence (1)
examples/vote/js/config.js:356
- If the fields API call fails in
initConfigPage,voteDropdown/countDropdownstay undefined, but the Save button handler still callsvoteDropdown.getSelectedData()and will throw at click time. The new try/catch makes this path more likely (the page continues rendering after the error).
document.getElementById('setting_submit').addEventListener('click', () => {
const config = {};
const voteValue = voteDropdown.getSelectedData().value;
config.vote_field = !voteValue ? '' : voteValue;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } catch (mess) { | ||
| const error = mess.error; | ||
| NotifyPopup.showPopup(Msg[lang][error]); | ||
| }); | ||
| } |
いいねプラグインのjQueryはがしてバニラ化しています。