「SweetAlert」は簡単におしゃれなアラートを実装できるJavaScriptライブラリです。 最新の「SweetAlert」には、「SweetAlert 2.x」と「SweetAlert2」があります。 どちらも、Cybozu CDNにサポートされているのでご利用ください。
ここではサンプルを通して、「SweetAlert 2.x」と「SweetAlert2」の記法の違いを見てみます。
サンプル
フィールドの準必須設定を実装します。 準必須に設定したフィールドが空のままsubmitされた場合、入力フィールド付きでアラートを表示します。
※本サンプルが対応するフィールド形式は、「文字列（1行）」、「文字列（複数行）」、「数値」、「ドロップダウン」のみです。
デモ
※「Microsoft Windows 10 Home」の「Chrome」での表示例です。
コード
「SweetAlert 2.x」の場合
(function(){"use strict";varsemiRequireds=['タイトル','著者','要約','ページ数','カテゴリ'];//準必須にするフィールドのフィールドコードvarformSettings=kintone.api('/k/v1/app/form/fields','GET',{app:kintone.app.getId()});functionsemiRequire2x(event,fieldCodes,index){if(!index)varindex=0;returnswal((function(fieldCode){varcontent;switch(event.record[fieldCode].type){case'MULTI\_LINE\_TEXT':content=document.createElement('textarea');content.addEventListener('change',function(e){swal.setActionValue(e.target.value);});break;case'NUMBER':content={element:'input',attributes:{type:'number'}};break;case'DROP\_DOWN':content=document.createElement('select');content.add(newOption(''));Object.keys(formSettings.\_result.properties[fieldCode].options).forEach(function(option){content.add(newOption(option,option));});content.addEventListener('change',function(e){swal.setActionValue(e.target.value);});break;default:content='input';break;}return{title:fieldCode,text:'入力しなくてよろしいですか?',content:content,buttons:{confirm:{value:'',}}};}(fieldCodes[index]))).then(function(result){event.record[fieldCodes[index]].value=result;if(fieldCodes.length==++index){returnevent;}else{returnsemiRequire2x(event,fieldCodes,index);}});}kintone.events.on(['app.record.create.submit','app.record.edit.submit'],function(event){varfieldCodes=[];for(varfieldCodeinevent.record){if(semiRequireds.indexOf(fieldCode)\>=0&&!event.record[fieldCode].value){fieldCodes.push(fieldCode);}}returnsemiRequire2x(event,fieldCodes);});})();
「SweetAlert2」の場合
(function(){"use strict";varsemiRequireds=['タイトル','著者','要約','ページ数','カテゴリ'];//準必須にするフィールドのフィールドコードvarformSettings=kintone.api('/k/v1/app/form/fields','GET',{app:kintone.app.getId()});functionsemiRequire2(event,fieldCodes){returnswal.mixin({text:'入力しなくてよろしいですか?'}).queue(fieldCodes.map(function(fieldCode){varinput,inputOptions=false;switch(event.record[fieldCode].type){case'MULTI\_LINE\_TEXT':input='textarea';break;case'NUMBER':input='number';break;case'DROP\_DOWN':input='select';inputOptions=Object.keys(formSettings.\_result.properties[fieldCode].options).reduce(function(options,option){options[option]=option;returnoptions;},{'':''});break;default:input='text';break;}return{title:fieldCode,input:input,inputOptions:inputOptions};})).then(function(result){if(result.dismiss)returnfalse;fieldCodes.forEach(function(fieldCode,index){event.record[fieldCode].value=result.value[index];})returnevent;});}kintone.events.on(['app.record.create.submit','app.record.edit.submit'],function(event){varfieldCodes=[];for(varfieldCodeinevent.record){if(semiRequireds.indexOf(fieldCode)\>=0&&!event.record[fieldCode].value){fieldCodes.push(fieldCode);}}returnsemiRequire2(event,fieldCodes);});})();
感想
「SweetAlert 2.x」の方がシンプル、「SweetAlert2」の方がオプションが豊富という印象でした。
「SweetAlert 2.x」は、「content.element」と「content.attributes.type」を用いてフォーム部品を指定するので、HTMLを書いている感覚に近かったです。
「SweetAlert2」は、サポートしているフォーム部品のタイプが多いのでセレクトボックスなども比較的容易に作れました。
・「SweetAlert 2.x」の場合
case'DROP\_DOWN':content=document.createElement('select');content.add(newOption(''));Object.keys(formSettings.\_result.properties[fieldCode].options).forEach(function(option){content.add(newOption(option,option));});content.addEventListener('change',function(e){swal.setActionValue(e.target.value);});break;
・「SweetAlert2」の場合
case'DROP\_DOWN':input='select';inputOptions=Object.keys(formSettings.\_result.properties[fieldCode].options).reduce(function(options,option){options[option]=option;returnoptions;},{'':''});break;
また今回のようにアラートを複数表示する場合は、「SweetAlert2」独自実装の「mixin」メソッドが便利でした。
違いは他にもあるので、実装に合わせて使い分けるとよいと思います。