処理を整理したり、TypeScriptに書き換えてみたり

「URLのテキストを元にQRコードをブラウザに表示してみる」は完成できたのですが、今日は、処理を見直して整理したり、JavaScriptからTypeScriptに置き換えてみたりしました。

job本体の見直し

GitHub ActionsでkintoneのREST APIを使ってデータを読んだり、更新したりすることができるようになったのですが、jobの処理本体が冗長でカッコ悪いなと思ったので、ゴリゴリ書き直してテスト実行しました。

対象データの有無チェックはFilterで良いのでは

Javascript使い慣れていないな～というのが露呈した箇所があったので、見直しました。まず、取得したデータのうち、ステータスが「承認済('accepted')」のレコードがあれば、リストファイルの更新が必要と判定する関数がしっくりこなかったので修正しました。
mapでステータスが承認済のレコードを抽出して、あればtrueを返す関数を追加していたのですが、Filter条件をステータスが承認済のレコードとして、対象件数>0なら対象データありと判定できることに気がついたので修正しました。

修正前

// 更新対象データの有無チェック
function isExistUpdateData(rows) {
  const items = rows.records.map(
    (record) => {
      // 取得データ→JSON→オブジェクト
      if(record.ステータス.value === 'accepted') {
        console.log(`jrec.ステータス.value = ${record.ステータス.value}`);
        return true;
      }
  }); 
  return items.length > 0;
}

修正後

      // 新しい対象データの有無
      if(kintoneRows.filter((row)=>row.status === 'accepted').length === 0){
        console.log('not exist of update => data skip next job');
        return;
      }

kintoneから取得したレコードはmapで整形までやると良いのでは？と思って、こちらも扱いやすい形にすることができました。

修正前

      // レコードの取得
      const resp = await client.record.getRecords(params);
      const resultArrays = resp.records.map(
        // 取得データ→JSON→オブジェクト
        (record) => {
          return JSON.parse(JSON.stringify(record));
        }
      );

修正後

      // レコードの取得
      const resp = await client.record.getRecords(params);
      const kintoneRows = resp.records.map(
        (record)=>{
          const jrec = JSON.parse(JSON.stringify(record));
          return {
            id : jrec.$id.value,
            title: jrec.title.value,
            url: jrec.URL.value,
            descriptions: jrec.descriptions.value,
            status: jrec.ステータス.value
          };
        });

TypeScriptで作ればよかったのでは

kintoneのREST APIの使い方の例をもとに、そのままJavaScriptで作り続けてしまったのですが、途中で「TypeScriptにすればよかったのでは？」と思いながら、そのままJavaScriptで作り続けてしまいました。TypeScript入門も途中なので、kintoneのレコード取得jobの本体だけでも、TypeScriptで書き直してみると良いと思いました。

import {KintoneRestAPIClient} from '@kintone/rest-api-client';
import {writeFile} from 'fs';

// リスト表示用タグの取得
function getUrlList(rows: kintoneRow[]): string {
  const urls = rows.map(
    (row) => {
      return `\t\t<li><div>${row.title}<div><img src=\"${getQRCodeUrl(row.url)}\" alt=\"${row.url}\" title=\"${row.title}\" /><div>${row.descriptions}</div></div></div></li>\n`;
        });
        return urls.join('');
}

// QRコード生成用URLの取得
function getQRCodeUrl(url: string) {
  return `http://api.qrserver.com/v1/create-qr-code/?data=${url}&size=100x100`;
}

// リスト表示用タグの整形
function getExportFileData(urls: string) {
  return `export function UrlList() { \n\t return ( <ul>\n${urls}</ul>\n);\n}`;
}
      
interface kintoneRow {
  id: number,
  title: string,
  url: string,
  descriptions: string,
  status: string
}

(async () => {
    try {
      // クライアントの作成
      const client = new KintoneRestAPIClient({
        // kintoneのデータ取得先を設定
        baseUrl: 'https://1lc011kswasj.cybozu.com',
        auth: {
          apiToken: process.env.KINTONE_API_TOKEN
        }
      });
  
      // リクエストパラメータの設定
      const APP_ID = 2;
      const query_string = 'ステータス="accepted" or ステータス="published" order by $id';
      const params = {
        app: APP_ID,
        fields:['$id', 'ステータス', 'title', 'URL', 'descriptions'],
        query: query_string
      };
      
      // レコードの取得
      const resp = await client.record.getRecords(params);
      const kintoneRows: kintoneRow[] = resp.records.map(
        (record)=>{
          const jrec = JSON.parse(JSON.stringify(record));
          return {
            id : jrec.$id.value,
            title: jrec.title.value,
            url: jrec.URL.value,
            descriptions: jrec.descriptions.value,
            status: jrec.ステータス.value
          };
        });
      // 新しい対象データの有無
      if(kintoneRows.filter((row)=>row.status === 'accepted').length === 0){
        console.log('not exist of update => data skip next job');
        return;
      }

      // リスト表示用タグの取得
      const urls = getUrlList(kintoneRows);
      const exportData = getExportFileData(urls);
      
      const LIST_PATH = './src/url_list.js';

      // リスト追加先のファイル準備
      const listFile = writeFile(LIST_PATH, exportData, err => {
        if( err ){
          console.log(err.message);
        } else {
          console.log(`create data file`);
        }
      }); 

      // 取得データのステータス更新
      kintoneRows.filter((row)=>row.status === 'accepted').forEach(
        (record) => {
            client.record.updateRecordStatus( {action:'公開する', app:APP_ID, id:record.id})
            });
    } catch (err) {
      console.log(err);
    }
  })();

こちらは、ターミナルで実行して動作確認はできたのですがGitHub Actionsのワークフローには反映できていないので、そちらも試したいと思っています。

まとめ

実は、最初にTypeScriptでコードを書き直してみたときに、JavaScriptでももっとスッキリさせることができるのでは？と気がついたので、これはこれでやって良かったなと思いました。今週はここまでにします。次回は、また次の週末の予定です。