kintoneのカスタマイズ効率をあげよう1 – エディタ設定

  • 投稿日
  • 更新日
  • 著者 potara
  • カテゴリー 環境構築

Featured Image(Photo) by Pankaj Patel on Unsplash

更新履歴

はじめに

JavaScriptに関する技術は日々進歩し、次々と新しいソフトウェアが生まれています。webpackやBabelなどを利用することが一般的になっていますが、こういったソフトウェアに詳しくない人が一足飛びに導入すると、詳しいことはよく分からないけど動いているから使っている、別のことをやろうとした場合に応用が効かない、という状況になりかねません。

またdeveloper networkにも上記のようなソフトウェアを利用した記事が掲載されるようになってきましたが、記事の関連がよくわからずこの記事とこの記事を両方を実現したい場合どうしたらいいの？という状況になっています。

そこで本シリーズではモダンな開発環境やコーディングスタイルをstep by stepで紹介します。以下のような悩みを抱えている人は是非試してください。

  • JavaScriptファイルの手動アップロードが面倒だと思っている人
  • customize-uploaderを利用しているけど、アップロード反映までの時間が長いと思っている人
  • モダンな開発環境、コーディングスタイルを身に着けたい人

本記事ではコーディングに必要なエディタの環境を整備します。エディタはVisual Studio Codeを利用します。

Visual Studio Codeのインストール

以下からダウンロードしてインストールします。

Visual Studio Code – Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and avail…
code.visualstudio.com

Node.jsのインストール

以下からダウンロードしてインストールします。

Node.js
Node.js® is a JavaScript runtime built on Chrome
nodejs.org

プロジェクトフォルダの作成

まずはプロジェクトフォルダを作ります。例えば「C:\Users\user-name\Documents\git\customize-example」です。

Visual Studio Codeの設定

ESLint

やってくれること

コードのおかしいところを指摘してくれます。ESLintなしの状態でもある程度指摘してくれますが、ESLintを入れるとさらに指摘してくれる範囲が拡がります。

インストールと設定

VS Code ESLint extensionを開き、Installをクリックしてインストールします。

これだけだと動作しないので、npmのESLintもインストールします。またサイボウズさんオススメのESLintの設定があるのでこれも合わせてインストールします。

Visual Studio Codeで作成したフォルダ（例の場合はcustomize-example）を開きます。Ctrl + @を押してターミナルを表示し、以下のコマンドを実行します。

> npm init
> npm install --save-dev eslint @cybozu/eslint-config

npm init後に入力を求められますが、よくわからない人は全部Enterで大丈夫です。

ESLintの設定ファイルを作成します。ファイル名は.eslintrc.jsです。指定するルールはこちらを参考にしてください。よくわからない人はES5のルールにしておきましょう。prettier系のルールを指定することで後ほどインストールするPrettierも有効になります。

module.exports = {
  extends: ["@cybozu/eslint-config/presets/kintone-customize-es5-prettier"]
};

これでESLintが有効になりました。

次はファイルの保存時にESLintが実行されるようにします。Visual Studio Codeの設定ファイル（settings.json）を開いて以下の内容を貼り付けます。すでに設定が存在する人は追記してください。
settings.jsonの開き方がわからない人はこちら

{
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  },
}

Prettier系のルールを指定した場合はPrettierが存在しないというエラーが発生します。
以降の手順でPrettierをインストールするのでエラーは無視します。

Prettier

やってくれること

インデントなどが統一されていない、こんなコードを

このように整形してくれます。

インストールと設定

VS Code Prettier extensionを開き、Installをクリックしてインストールします。

先ほどと同じフォルダ上で以下のコマンドを実行します。

> npm install --save-dev prettier

Visual Studio Codeの設定ファイル（settings.json）のjavascript項目にeditor.defaultFormatterを追加します。また、settings.jsonなど、jsonファイルもフォーマットできたほうが良いのでjsonとjsonc項目を追加します。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.codeActionsOnSave": {
    //   "source.fixAll": true
    // }
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.codeActionsOnSave": {
    //   "source.fixAll": true
    // }
    "editor.formatOnSave": true
  }
}

jsonとjsoncではeditor.codeActionsOnSaveが機能しなかったのでeditor.formatOnSaveを利用しています。

settings.jsonファイルはjsonc項目に該当するので、2回保存すれば整形されるはずです。（1回目の保存では設定がまだ有効ではないので2回保存が必要です）

ここまでの作業を確認

ここまでの作業を確認するためにindex.jsを作成します。以下の内容を貼り付けるとインデントなどがおかしいことを警告してくれるはずです。

( function () {
  "use strict";


    kintone.events.on("app.record.index.show", function    (event) {
      //
      });
  })();

保存すると以下のように整形されるはずです。

(function () {
  "use strict";

  kintone.events.on("app.record.index.show", function (event) {
    //
  });
})();

これで最低限のコーディング環境が整いました。次はカスタマイズ適用を楽にしましょう。

その2に続く

kintoneのカスタマイズ効率をあげよう2 – 自動適用

Visual Studio Code カスタマイズ効率シリーズ

この記事を書いた人

potara

記事一覧