yokotaso

import {isEmpty} from "./empty-validator";

(() => {
    const events = [
        "app.record.create.submit",
        "app.record.edit.submit"
    ];
    kintone.events.on(events, (ev) => {
        if(isEmpty.test(ev.record.文字列__1行_.value)) {
            ev.record.文字列__1行_.error = "必須項目です！";

yokotaso

import v8n from "v8n";

export const isEmpty = v8n().undefined();

yokotaso

import jQuery from "jquery";
(() => {
    const events = [
        "app.record.create.show",
        "app.record.edit.show",
    ];
    kintone.events.on(events, (ev) => {
        const el = kintone.app.record.getHeaderMenuSpaceElement();
        const hello = "hello";
        const world = "world!";

yokotaso

const path = require('path');

module.exports = {
  mode: "development",
  entry: {
      'polyfill': '@babel/polyfill',
      'kintone-create-edit-show': './src/kintone-create-edit-show.js'
  },
  module: {
    rules: [

yokotaso

プログラムのモジュール化

テストコードや再利用可能なプログラムを作っていくためには、モジュールシステムを利用する必要があります。 ですが、kintone�の上でプログラムを書くとIE11をサポートする関係でモジュール機能を利用することができません。

今回は、TypeScriptとWebpackという技術を使ってモジュール機能を実現します。

TypeScriptとは

Microsoftが開発しているJavaScriptをコンパイルするための言語。 JavaScriptに対して型情報をつけることができる。

yokotaso

Promiseとはなにか？

Promiseは非同期処理の仕組み

JavaScriptは、JavaScriptが並行処理をするために導入された仕組み。

kintoneのAPIを実行したときに, opt_callback を省略すると、kintone.Promiseが帰ってくるがこれは Promiseをサポートしているブラウザに標準で入っているPromiseと同じものです。

次のリンクがおすすめです。

yokotaso

yokotaso

コードの書き方を統一する

コードの品質を保つためには機会で判定できることはできるだけ機会にやらせるほうがよい。 JavaScriptは特に柔軟な言語といわれていて、良くないと言われる書き方ができてしまう。

そこでルールに違反したコードを自動検出してくれるeslintを紹介する。

{
 "name": "sample",

yokotaso

yokotaso

kintone-customize-uploader

次のようなディレクトリの構成を前提とします

 +- src/index.js <-- アップロード対象のJS
 +- conf/secret.json <-- ログインに必要な情報を管理
 +- customize-manifest.json <-- アップロードに必要な情報を入れる
 +- package.json <-- npm の設定ファイル