TypeScript自習 3日目「タスクの列挙」

リファクタリングの前にコードが何をやっているかをタスクとして列挙する。また、コードにコメントを追加して分かりやすくする。

参考図書

リーダブルコード

処理概要

kintoneのレコード詳細画面を開いたときに、印刷ボタンを表示する。印刷ボタンを押すと印刷画面が別ウィンドウで表示される。

タスクを列挙する

リーダブルコードの11章を参考に、タスクに分解する。

・kintoneのレコード詳細に印刷ボタンを表示する
・印刷画面に遷移するURLを生成する
・印刷ボタンを押した時に印刷画面を別ウィンドウで表示する

コメントを追加する

import {Button} from '@kintone/kintone-ui-component/esm/js'; // モジュール読み込み
(() => {
kintone.events.on('app.record.detail.show', function(event) {
  new kintone.Promise(function(resolve, reject) {
    // 印刷ボタンを表示する
    let button = new Button({text: '印刷'});
    let elPrintButton = kintone.app.record.getSpaceElement('printButton');
    elPrintButton.appendChild(button.render());
    resolve(button);
    return;
  })
  .then(function (UiButton) {
    console.log(UiButton);
    // URL取得
    let url = kintone.api.url('/k/v1/records', true);
    console.log(url);
    // 正規表現のマッチパターンを変数にセット
    let reg = /http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/;
    console.log(url.match(reg));
    // kintoneアプリIDの取得
    let appId = kintone.app.getId();
    console.log(appId);
    let body = {'id': appId};
    kintone.api(kintone.api.url('/k/v1/app', true), 'GET', body, function(resp) {
      console.log(resp);
      // 印刷画面用のURL生成
      let printURL = url.match(reg)[0] + '/' + resp.appId + '/print?record=' + event.recordId;
      console.log(printURL);
      // 印刷ボタンクリックのイベントハンドラ設定
      UiButton.on('click', function(event) {
        console.log('on click');
        console.log(printURL);
        window.open(printURL, null);
      });
    });
  });
});
})();

関数に分ける

タスクごとに関数に切り出す。

import {Button} from '@kintone/kintone-ui-component/esm/js';
(() => {
 kintone.events.on('app.record.detail.show', function(event) {
   new kintone.Promise(function(resolve, reject) {
     //// let button = new kintoneUIComponent.Button({text: '印刷'});
     // let button = new Button({text: '印刷'});
     // let elPrintButton = kintone.app.record.getSpaceElement('printButton');
     // elPrintButton.appendChild(button.render());
     // resolve(button);
     // return;
     const render = uiButtonRender('印刷', 'printButton');
     resolve(render);
   })
   .then(function (UiButton) {
     console.log(UiButton);
     let url = kintone.api.url('/k/v1/records', true);
     console.log(url);
     // let reg = /http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/;
     // console.log(url.match(reg));
     const parsed: string[] = parseUrlToArray(url);

     let appId = kintone.app.getId();
     console.log(appId);

     let body = {'id': appId};
     kintone.api(kintone.api.url('/k/v1/app', true), 'GET', body, function(resp) {
       // success
       console.log(resp);
       // let printURL = url.match(reg)[0] + '/' + resp.appId + '/print?record=' + event.recordId;
       const printURL: string = getPrintUrl(
         `${parsed[1]}://${parsed[2]}.${parsed[3]}.${parsed[4]}`,
         appId,
         event.recordId
       )
       console.log(printURL);
       UiButton.on('click', function(event) {
         console.log('on click');
         console.log(printURL);
         window.open(printURL, null);
       });
     });
   });
 });
})();

function uiButtonRender(buttonText: string, fieldId: string) {
 const button = new Button({text: buttonText});
 const elButton = kintone.app.record.getSpaceElement(fieldId);
 elButton.appendChild(button.render());
 return button;
}

function getPrintUrl(host: string, appId: number, recordId: number) {
 const result = host + '/k/' + appId + '/print?record=' + recordId;
 return result;
}

function parseUrlToArray(url: string) {
 const reg = /(https?):\/\/([\w-]+).([\w-]+).([\w-]+)\/([\w-]+)\/([\w-]+)\/([\w-]+\..*)/;
 return url.match(reg);
}

次は切り出した関数にテストを追加する。