yokotaso

githubとgit(超入門)

githubとは？

• gitで管理されたソースコードをクラウド上で管理するシステム
• https://github.com/yokotaso

バージョン管理をしたことがある？

• バージョン管理がないと？
  • どこでどういう修正が入ったのか、わからない
• リリースを管理したい

yokotaso

バージョン管理とリリースフローについて

基本的なリリースフローを採用して運用してみるのがお勧めです。https://gist.github.com/Gab-km/3705015

これが正解という事はないので、ここからチームの状況に合わせたリリースフローを作成してもらえればと思います。 (基本的には、このリリースフローで事足りるはずです)

基本的な流れ

1. masterブランチを常にリリース可能なブランチとする
2. 機能追加・不具合改修をする場合は、masterからトピック・ブランチと呼ばれる開発用ブランチを作成

yokotaso

kintone-customize-uploader

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

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

yokotaso

yokotaso

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

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

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

{
 "name": "sample",

yokotaso

yokotaso

Promiseとはなにか？

Promiseは非同期処理の仕組み

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

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

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

yokotaso

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

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

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

TypeScriptとは

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

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

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!";