SOUM/misc

Tree-sitter について

2021-07-21T01:00:00Z

Vim 使いの「ブイ」(仮名)です。Vim のすゝめ改では、現代のテキストエディタについてのあらゆる話題をテーマに Vim の視点から見た話を行います。

今回のテーマは「Tree-sitter」です。

1 Tree-sitter とは？

https://tree-sitter.github.io/tree-sitter/

Tree-sitter は Atom のシンタックスハイライトとしても使用されている技術であり、最近になって neovim にも Tree-sitter によるシンタックスハイライトが導入されました。

https://github.blog/2018-10-31-atoms-new-parsing-system/

https://github.com/neovim/neovim/pull/11113

従来、テキストエディタの汎用的なシンタックスハイライトには正規表現が使われることが多くありました。しかし正規表現は記述が難しい上に遅い、表現が限られるので正確なパースができないといった問題点が存在していました。詳しくは以前の SOUM/miscを参照してください。

Tree-sitter はシンタックスハイライトに特化していて、ソースファイルが更新されたときに即座に結果を返すことができ高速です。これは漸進的分析(Incremental Parsing)といい、テキストエディタで使用することが意図された解析パーサーだからだそうです。

Tree-sitter を用いた解析は簡単で、ソースコードをTree-sitter に与えると解析結果が返るのであとはテキストエディタが適切に色付けをすればよいです。

Tree-sitter はハイライト以外にも使用することができ、Tree-sitter の構文解析結果を用いて、特定の識別子を選択することも可能です。これは Vim でいうテキストオブジェクトに相当します。

Tree-sitter での構文解析処理は npm で実装されており、つまり JavaScript です。高速化のため、JavaScriptは C 言語のソースコードに変換されるようです。

Tree-sitter が対応している言語については、以下を参照してください。C, C++, C#, Rust, Go, Lua 等メジャーな言語には対応しています。

https://tree-sitter.github.io/tree-sitter/#available-parsers

Tree-sitter と LSP との違いとしては、LSP は IDE の処理をほとんど全て行う必要があるので、より処理が複雑であり時間がかかります。LSP の設定も大変です。 Tree-sitter はやることが限られていて明快なので適用できる領域は少ないものの、高速に単純に使うことができます。個人的には Tree-sitter と LSP の両方を併用するのがよいと考えます。

実は、Tree-sitter 以前にも似たようなコンセプトの Vim プラグインが存在していました。ruby_hl_lvar.vim です。

https://github.com/todesking/ruby_hl_lvar.vim

このプラグインは独自に Ruby の構文を解析し、ローカル変数をハイライトします。Vim のハイライトは構文解析を行わないのでローカル変数をハイライトするといったことが行えません。この問題を解消するためのプラグインです。

Tree-sitter はこのような「ソースコードの構文を解析してテキストエディタのハイライト等に利用する」ことを汎用的インタフェースに落としこんだものと言えるでしょう。

2 neovim における Tree-sitter の利用

neovim で Tree-sitter を使うには nvim-treesitter というプラグインをインストールする必要があります。

https://github.com/nvim-treesitter/nvim-treesitter

neovim 本体に Tree-sitter 用の基本機能は入っていますが、ユーザーにとって使いやすいようにはまとまっていません。neovim LSP と nvim-lspconfig の関係のように高レベルな機能やファイルタイプ毎の細かな設定については本体とは別になっているようです。

nvim-treesitter のインストール方法は公式のドキュメントを参照してください。

https://github.com/nvim-treesitter/nvim-treesitter#installation

nvim-treesitter をインストールした後は簡単な設定を vimrc に記述する必要があります。nvim-treesitter は Lua で書かれているので vimrc に Lua のコードを埋め込むことで設定を行います。

https://github.com/nvim-treesitter/nvim-treesitter#setup

lua <



nvim-treesitter を有効にした場合、通常のハイライトプラグインの代わりに Tree-sitter を用いてハイライトが行われるようになります。

ちなみに Tree-sitter の構文情報を用いて補完を行う completion-treesitter というプラグインも存在しているようです。

https://github.com/nvim-treesitter/completion-treesitter

3 neovim における Tree-sitter の補足事項

余談ですが、外部パッケージへの依存を嫌う Vim では Tree-sitter 対応のような機能は取り込まれないだろうと思われます。本体はシンプルに、ただし使える外部ライブラリはどんどん使う方針の neovim だからこそ取り込みが実現したのでしょう。

自分は実際に Tree-sitter を使ってコードを記述しています。強力なシンタックスハイライトにより文法エラーが一発で分かるのでかなり開発効率の向上に役立っていると言えます。一度この強力なハイライトに慣れてしまうと戻ることが困難です。特に、Typescript + JSX のように複雑な解析が必要なハイライトで効力を発揮します。

Tree-sitter の欠点としては時々内部エラーが発生してシンタックスハイライトが消えたりすることです。毎日のように nvim-treesitter に更新がある開発中のプロダクトなのでそこは仕方がありません。Tree-sitter のパーサーが特定のシンタックス解析に対応してないということもあるようです。

それでも、Tree-sitter の機能はどんどん改善され使いやすくなっているので neovim を使用しているのなら使う価値はあると思います。

This article is made by Vim.



neovim への Pull Request 紹介
2021-07-07T00:10:00Z
Vim 使いの「ブイ」(仮名)です。Vim のすゝめ改では、現代のテキストエディタについ
てのあらゆる話題をテーマに Vim の視点から見た話を行います。

今回のテーマは「neovim への Pull Request 紹介」です。

前回は Vim への Pull Request を眺めましたが、それの neovim 版です。
neovim は Vim よりも Pull Request が活用されており、巨大な Pull Request のまま
開発が進むことが多くあります。
neovim の LSP Client 機能も、もとは Pull Request から始まったのです。
neovim HEAD を追い掛けるのに物足りなさを感じた場合は neovim の今後の方向性に思
いを馳せるのもよいのではないでしょうか。

1 --server, --remote-{subcommand} 機能

https://github.com/neovim/neovim/pull/11326

Vim にはリモート編集機能と呼ばれるものがあり、外部から特定のコマンドを実行する
ことで現在実行中の Vim に任意のファイルを編集するようにすることができます。
この機能は neovim になってなくなってしまったのですが、上記の Pull Request で実
装されるようです。作業が止まってしまっているのが気がかりです。

2 tree sitter

https://github.com/neovim/neovim/pull/11113

tree sitter によるハイライトを実
装する Pull Request です。tree sitter とはコードの解析を行う解析器であり、Atom
エディタにも使用されているようです。現在 Vim や neovim は正規表現を用いてハイラ
イトを行っているのでハイライトが遅いという問題を抱えています。
tree sitter により、この問題を根本的に解決することができるかもしれません。
この機能は既に neovim にマージされており、次回の「Vim のすゝめ改」にて解説予定
です。

3 UIEnter/UILeave

https://github.com/neovim/neovim/pull/11263

neovim の GUI の起動・終了に hook するための autocmd 実装です。GVim でいう
GUIEnter に相当します。従来の neovim はこの hook がなかったので、GUI クライアン
トに依存した処理を書きにくいという問題がありました。

4 Context and Multiprocessing

https://github.com/neovim/neovim/pull/10843

外部コマンドをバックグラウンドで実行するコマンドの追加です。
バックグラウンドでコマンドを起動するために、従来は複雑な Vim script を記述しな
ければならず、プラグインを用いなければ困難でした。
このパッチがマージされれば、Vim script を記述しなくても手軽にバックグラウンド実
行が行えるはずです。

例えば、

:&:vimgrep {pattern} {file} ...


でバックグラウンドによる grep が実行できます。

他にも call_async(), call_parallel(), call_wait() といった API が追加され
ています。

巨大なパッチなので取り込まれるのには時間がかかりそうだが、夢がある新機能ですね。
余談ですが、このプロジェクトは元々GSoC 2019 だったそうです。

https://github.com/neovim/neovim/pull/9943

This article is made by Vim.



プルダウン後に処理を行う(cellEdited コールバック)
2020-07-29T00:25:00Z
今回は editor:"select"で定義したプルダウンから選択した値により
処理を行う方法について記述します。

プルダウン後に処理を行うには、cellEdited コールバックを用います。


Tabulatorドキュメント「Cell Callbaks ページ」 
の Cell Edited パラグラフより抜粋

cellEdited コールバックはセルのデータが変更されたときに呼び出されます。

var table = new Tabulator("#example-table", {
    cellEdited:function(cell){
        //cell - セルデータ
    },
});




cellEdited 処理は 
「第14回 グループ分け、表示制限」 
でプログラムしています。


#table のテーブルでプルダウンを定義。
#filter のテーブルを保存した変数 table でデータを table.setGroupBy() で操作。


処理コード

cellEdited: function(cell){
    var val = cell.getValue();
    if(val === "日付でグループ分け"){
        if(table)table.setGroupBy('date');
    }
    else if (val === "日付(英)でグループ分け"){
        if(table)table.setGroupBy('dateE');
    }
    else if (val === "月でグループ分け"){
        if(table)table.setGroupBy('month');
    }
    else if(val === "Marのみ表示") {
        if(table)table.setFilter("month","=","Mar");
    }
    else if (val === "日が１０日以上を表示") {
        if(table)table.setFilter("date",">=",10);
    }
    else if (val === "制限解除"){
        if(table)table.clearFilter();
    }

}


以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{ title:"日付",     field:"date" },
{ title:"日付(英)", field:"dateE" },
{ title:"月",       field:"month" },
{ title:"日",       field:"date" }


データ定義

{ dateE : "Nov 1", date:"11/1" , month: "Nov", date:1},
{ dateE : "Aug 5", date:"8/5"  , month: "Aug", date:5},
{ dateE : "Mar 30",date:"5/9" ,  month: "Mar", date:9},
{ dateE : "Mar 30",date:"5/3"  , month: "Mar", date:3},
{ dateE : "Mar 30",date:"5/5"  , month: "Mar", date:5},
{ dateE : "Mar 30",date:"5/15" , month: "Mar", date:15},
{ dateE : "Mar 30",date:"5/30" , month: "Mar", date:30},
{ dateE : "Aug 10",date:"8/10" , month: "Aug", date:10},
{ dateE : "Jan 10",date:"1/10" , month: "Jan", date:10},


実行結果







サンプルコード









 プルダウン後に処理を行う(cellEdited コールバック) 
















任意の文字列をソートする
2020-07-22T00:10:00Z
ソートは「第11回 sorter で 日付をソートする」
を記述しましたが、少しわかりにくかったので簡単な例を記述します。

任意の文字列をソートするにはソートしたい文字列の順番を配列で定義します。

サンプルコードでは文字列の順番を以下のように定義しました。

const list = [ "apple", "orange", "banana", "pineapple" ];


ソート処理は indexOf 関数により配列のインデックス番号を取得して、行います。

sorter:function(a,b){
    // a、b-比較される2つの値
    return list.indexOf(a)-list.indexOf(b)
}


アロー関数を用いると return を省略できるので 一行で書くことができます。

sorter:(a,b)=>list.indexOf(a)-list.indexOf(b)


以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{
    title:"item",
    field:"item",
    sorter:(a,b)=>list.indexOf(a)-list.indexOf(b)
}


データ定義

data: [
    { item: "banana" },
    { item: "apple" },
    { item: "orange" },
    { item: "pineapple" }
],


実行結果







サンプルコード









 任意の文字列をソートする 














ajaxでjsonデータ読み込み後、データ修正
2020-07-15T00:08:00Z
今回は、ajax で json データを読み込み後、データ修正を行います。

ajax で json データを読み込み後、データ修正は ajaxResponse コールバックに
指定した関数で操作を行います。




  Tabulatorドキュメント「Ajax Response」より抜粋

ajaxResponse コールバックは、ajax リクエストが成功した時に呼び出されます。
このコールバックでデータを変更することができます。
データは return する必要があります。
return しない場合、データは表示されません。




ajaxURL 属性で読み込む json ファイルを指定します。
サンプルコードを実行する場合は、データ定義の内容を ajax.json というファイルに保存して、サンプルコードと同じディレクトリに置いてください。

ajaxURL: "ajax.json"


ajaxResponse コールバックで、
name_date フィールド(タイトル:"日付(名称)")
に値を設定する処理を行います。

ajaxResponse:function(url,params,response){
    //url - リクエストURL
    //params - リクエストで渡されるパラメーター
    //response - ajax から渡されたJSONオブジェクト
    response.forEach(item=>{
        item.name_date = `${item.date}(${item.name})`;
    });
    // 修正したデータを返す
    return response;
},


以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

let columns=[
      {title:"名称", field:"name"},
      {title:"日付", field:"date"},
      {title:"日付(名称)", field:"name_date"},
  ];


データ定義

[
  {
    "name": "May",
    "date": "2019/5"
  },
  {
    "name": "April",
    "date": "2019/4"
  }
]


実行結果







サンプルコード









ajaxでjsonデータ読み込み後、データ修正













横スクロール表示(scrollToColumns)
2020-07-08T01:50:00Z
今回は
scrollToColumns() を使用して、
横に長いデータの途中から表示する方法について記述します。

scrollToColumns()の仕様は以下の通りです。




  Tabulatorドキュメント「Scroll To Columns」 


table.scrollToColumn("age", "middle", false); // ageフィールドが表示されていない場合は、フィールドを中央にスクロール



  最初の引数はスクロールする列の標準列コンポーネント検索オプションのいずれかである必要があります。

2番目の引数はオプション。列の位置を設定するために使用されます。
値は"left", "middle", "right" 。
省略した場合、
デフォルトのscrollToColumnPositionオプションの値("left")に設定されます。

3番目の引数はオプション。列がすでに表示されている場合にテーブルをスクロールするかどうかを設定する。スクロールする場合はtrue、スクロールしない場合はfalse、省略した場合は
デフォルトのscrollToColumnIfVisibleオプションの値("true")に設定されます。




以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

const get_columns=()=>{
    let col = [];
    for(let i=0;i<50;i++){
        col.push({ title:`a${i}`, field:`a${i}`});
    }
    return col;
}


データ定義

const get_data=()=>{
    let data = {};
    for(let i=0;i<50;i++){
        data[`a${i}`] = i;
    }
    return [data,data,data];
}


実行結果







サンプルコード









横スクロール表示(scrollToColumns) 















チェックボックス
2020-07-01T00:55:00Z
今回はチェックボックスです。
formatter:"tickCross"を指定することでチェックボックスを表示します。

チェックボックスの表示は以下になります。


true: 緑のチェック表示
false: 赤のxマーク表示


上記以外の表示にしたい場合は、formatterParamsの設定で変更します。

formatterParams:{
    tickElement:"check", // true の時の表示
    crossElement:"not check", // false の時の表示
}}


カラム定義 editor の設定により、操作可、不可になります。


editor: true の場合、セルのチェック操作が可能
editor: false, 設定しない場合、表示のみ


※ このページの「実行結果」を操作すると、チェック表示がずれます。
これは、このページの css 設定が影響しているようです。
サンプルコードを実行した場合、チェック表示は特にずれることはないようです。

以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

columns: [
{title:"操作可能1",field:"canEdit1",formatter:"tickCross",
    editor:true},
{title:"操作可能2",field:"canEdit2",formatter:"tickCross",
    editor:true, 
    formatterParams:{
        tickElement: "check",
        crossElement:"not check"
    }
},
{title:"表示のみ1",field:"cantEdit1",formatter:"tickCross"},
{title:"表示のみ2",field:"cantEdit2",formatter:"tickCross"},
],


データ定義

data:[
    {canEdit1:true, canEdit2:true, cantEdit1:true, cantEdit2:false}
]


実行結果







サンプルコード










チェックボックス













列の値を折れ線グラフ表示
2020-06-24T00:05:00Z
前回は行の値を折れ線グラフにしましたが、今回は bottomCalc に列の値を折れ線グラフ表示します。

主な処理は以下の通り、


列の値の配列(values)を bottomCalc のカスタム関数 saveCellData() で保存する。
bottomCalcFormatter のカスタム関数 lineFormatter()で保存した列の値の配列(values)を参照して折れ線グラフを描画する。


sparkline, jquery は 以下の cdn を使用します。





以下が折れ線グラフを描画する関数です。

「第29回 行の値を折れ線グラフ表示」
と異なるのは、表示する値を bottomCalc で保存している点です。

// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
const lineFormatter=(cell,formatterParams,onRendered)=>{
    // 保存した列の値の配列を参照して折れ線グラフを描画する。
    let values = cell.getValue();
    onRendered(()=>$(cell.getElement())
                    .sparkline(values,{width:"100%",type:"line"})
    );
}
// 列の値の配列を保存する。
const saveCellData=values=>{
    return values;
}


以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

const get_column=()=>{
    return [
    {title:"aa1",field:"aa1",align:"right",
        bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
    {title:"aa2",field:"aa2",align:"right",
        bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter},
    {title:"aa3",field:"aa3",align:"right",
        bottomCalc:saveCellData, bottomCalcFormatter: lineFormatter}
    ];
};


データ定義

const get_data=()=>{
    return [
        {"aa1":100, "aa2":200, "aa3":300 },
        {"aa1":120, "aa2":150, "aa3":100 },
        {"aa1":150, "aa2":300, "aa3": 50 }
    ];
}


実行結果







サンプルコード











列の値を折れ線グラフ表示















行の値を折れ線グラフ表示
2020-06-17T00:30:00Z
今回は行の値を折れ線グラフ表示します。

主な処理は以下の通り、


aa1,aa2,aa3のセル値を line のセルで折れ線グラフ表示にする。
aa1,aa2,aa3のセルの合計値(bottomCalc)を line のセルで折れ線グラフ表示にする。
formatter属性, bottomCalcFormatter属性で折れ線表示用の関数(lineFormatter)を指定する。formatter, bottomCalcFormatter で折れ線グラフを表示する関数(lineFormatter)は同じものです。


なお、tabulator 4.4.3 の場合、bottomCalcFormatter で指定した関数内で 
onRendered(formatterがレンダリングされたときに呼び出す関数)が呼び出されず
折れ線グラフ表示処理が動作しないため、tabulator4.5.3 以上を使用する必要があります。

今回は tabulator4.5.3 を使用します。
sparkline, jquery は 以下の cdn を使用します。







以下が折れ線グラフを描画する関数です。

// cell-セルデータ
// formatterParams-列に設定されたパラメーター
// onRendered-formatterがレンダリングされたときに呼び出す関数
const lineFormatter=(cell,formatterParams,onRendered)=>{
    let ar = [];
    let data = cell.getData();
    for(let i in data){
        if(i.match(/^aa/)){
            // 'aa1,aa2,aa3' のデータを保存
            ar.push(data[i]);
        }
    }
    onRendered(()=>$(cell.getElement())
                    .sparkline(ar,{width:"100%",type:"line"})
    );
}


以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

const get_column=()=>{
    return [
    {title:"aa1",field:"aa1",align:"right",bottomCalc:"sum"},
    {title:"aa2",field:"aa2",align:"right",bottomCalc:"sum"},
    {title:"aa3",field:"aa3",align:"right",bottomCalc:"sum"},
    {title:"line",field:"line",width:100,
        formatter:lineFormatter, bottomCalcFormatter:lineFormatter},
    ];
};


データ定義

const get_data=()=>{
    return [
        {"aa1":100, "aa2":200, "aa3":300 },
        {"aa1":120, "aa2":150, "aa3":100 },
        {"aa1":150, "aa2":300, "aa3": 50 }
    ];
}


実行結果







サンプルコード











行の値を折れ線グラフ表示















HTML テーブルを Tabulator で表示
2020-06-10T01:17:00Z
Tabulator は HTMLテーブルの id を指定することでテーブルのデータ
を読み込み、表示することができます。




  TabulatorドキュメントLoad Data from HTML Table
より抜粋

HTMLテーブル要素から直接Tabulatorテーブルを作成できます。 columnsオプションを使用して通常の方法で列を定義するか、テーブルのtheadのth要素として列を設定できます。
テーブルのtbodyにあるデータの行はすべて、結果のテーブルに表示されるtabulatorデータに自動的に変換されます。
テーブルヘッダーセルでwidth属性を定義する場合、これを使用してTabulatorの列の幅を設定します。






    ヘッダー1 ヘッダー2


       1000 2000
       1500 30000



テーブルヘッダーの文字列を指定して、カラム定義をすることができます。

var t = new Tabulator("#table",{
  columns: [
    {title:"ヘッダー1",align:"right",bottomCalc:"sum"},
    {title:"ヘッダー2",align:"center",formatter:"money",width:200} 
  ]
})


HTMLのテーブルになれているならテーブルでデータを記述して、
Tabulator でカラム定義するほうが、簡単かもしれません。
また、既存の HTMLテーブルを Tabulator フォーマットで
表示するのに便利です。

データ定義



    ヘッダー1 ヘッダー2


       1000 2000
       1500 30000




サンプルコード









HTML テーブルを Tabulator で表示



    ヘッダー1 ヘッダー2


       1000 2000
       1500 30000

















データの途中から表示する(scrollToRow)
2020-06-03T05:45:00Z
今回は
scrollToRow() を使用して、指定した行を表示する方法
について記述します。
Tabulatorドキュメント「Scroll To Row」 

table.scrollToRow(23, "center", false);


scrollToRow()の1番目の引数は以下を指定する。

- Row コンポーネント
- Row のid
- Row のDOMノード


2番目の引数はオプションであり、行の位置(top,center,bottom,nearest)を設定します。省略された場合、scrollToRowPositionオプションの値に設定されます。
デフォルト値は"top"

3番目の引数はオプションであり、
行が既に表示されている場合にテーブルをスクロールするかどうかを設定する。
スクロールする場合はtrue、スクロールしない場合はfalse、省略した場合はscrollToRowIfVisibleオプションの値に設定されます。デフォルトはtrue。

// id23の行を中央に表示する。
// id のデータがない場合は動作しない。
table.scrollToRow(23, "center", false); 


// 条件からrowコンポーネントを取得して指定する。
let row = table.searchRows("val","=","x50");
table.scrollToRow(row[0],"center");

// scroll rowコンポーネント
table.scrollToRow(cell.getRow());

// scroll DOMノード
table.scrollToRow(cell.getRow().getElement());


id:23を中央にスクロール



値が"x50"の行をトップにスクロール



カラム定義

{
    title:"id",
    field:"id",
},
{
    title:"値",
    field:"val",
},


データ定義

var tdata = [];
for(let i=0;i<100; i++){
    tdata.push({ id: i, val: 'x'+i });
}


サンプルコード









 データの途中から表示する(scrollToRow) 


















formatterで他のセルのデータを参照する
2020-05-27T00:10:00Z
今回は
formatter 処理で他のセルのデータを参照する方法
について記述します。

formatter 関数において cell.getData() によりそのセルがあるカラムデータを取得します。
取得したデータからフィールド名を指定すれば、他のセルデータを参照できます。

// 他のセルのデータ参照
let data = cell.getData();
let price = data.price;




カラム定義

{
    title:"価格",
    field:"price",
    align: "right",
    formatter: "money",
    formatterParams:{precision:0}, 
},
{
    title:"税率",
    field:"ritsu",
    align: "right",
    formatter: function(cell){
        let val = cell.getValue();
        if(val) return val+"%"
    }
},
{
    title:"税込み",
    field:"komi",
    align: "right",
    formatter: disp_zeikomi,
},


データ定義

{ price: 1000, ritsu: 8 },
{ price: 5000, ritsu: 10 },
{ price: 8000, ritsu: 8 },


サンプルコード









 formatterで他のセルのデータを参照する 

















max,min属性による開始、終了日制限付日付エディター
2020-05-20T00:35:00Z
今回は、
html の date エレメントの max,min 属性を使用して
開始日、終了日の入力制限を行います。



日付入力用のエディターは前回作成した関数dateEdit を流用しています。

日付の入力制限は date エレメントの max, min 属性で行います。
日付の入力制限を date エレメントの max,min 属性で行うため、
validate_start(), validate_end() の入力チェックは入力項目の未入力チェックだけとなります。

開始日、終了日の入力条件は以下の通りです。


max,min属性で制御


開始日は終了日より古い日付を入力
終了日は開始日より新しい日付を入力
終了日が未入力の場合、開始日は任意の日付入力OK

validate_start() 入力チェック


開始日は入力があれば OK
終了日時が入力済の場合、開始日未入力は NG
開始日、終了日ともに未入力は OK

validate_end() 入力チェック


終了日未入力は OK
開始日未入力の場合、終了日の入力は NG



以下は入力チェック関数です。

// 開始日チェック
const validate_start=(cell,value)=>{
    // 開始日入力がある場合は、OK(true)
    if(value) return true;

    // 以下、開始日未入力の処理。 
    // 終了日時が未入力の場合、  OK(true)
    // 終了日時が入力済みの場合、NG(false)
    return (!cell.getData().end)?true:false;
}
// 終了日チェック
const validate_end=(cell,value)=>{
    // 終了日は入力なくても OK(true)
    if(!value) return true;

    // 開始日時がない場合、NG(false)
    return (!cell.getData().start)? false: true;
}


moment.js は以下のCDN を使用します。




カラム定義の width:120 により、日付入力時、日付入力クリア用の
xマークがカラムに隠れないように幅を確保しています。

カラム定義

{title:"開始日",field:"start", width:120,
          editor:dateEdit, validator:{type:validate_start}},
{title:"終了日",field:"end", width:120, 
          editor:dateEdit, validator:{type:validate_end}}


サンプルコード











max,min属性による開始、終了日制限付日付エディター

















入力チェック付日付入力用エディター
2020-05-13T02:30:00Z
今回は、日付の入力チェックを行う関数を作成します。

入力チェックは以下の通りです。


開始日、終了日は必須とします。
開始日が終了日より古い場合はエラーとします。
エラーがあった時、メッセージのセルにエラー内容を表示します。
入力が正常の時、メッセージのセルにOKを表示します。




以下は開始日のチェック関数です。

/* 開始日 - 検証関数 */
var validate_start=function(cell,value){
    clear_message(cell);
    if(!value){
        update_message(cell,'開始日は必須です。');
        return false;
    }
    var data = cell.getData();
    if(!data.end) {
        update_message(cell,'終了日は必須です。');
        return false;
    }
    var start = moment(value, "YYYY/MM/DD");
    var end   = moment(data.end, "YYYY/MM/DD");
    if(start.isAfter(end)){
      update_message(cell,'開始日が終了日より遅い日付です。');
      return false;
    }
    return true;
}


日付入力用のエディターは前回作成した関数dateEdit を流用しています。
違いは、入力チェックが正常の時、
メッセージのセルにOKを表示する処理を追加した部分です。
Tabulator のバージョンが、4.4.3 以降でないと success() が返り値を返さないので 4.4.3 以降のバージョンを使用してください。

var successFunc = function() {
    ...
    if(success(val)){ // 値が正常ならOK表示
        update_message(cell,'OK');
    }
}


moment.js は以下のCDN を使用します。




カラム定義

{title:"開始日",field:"start",editor:dateEdit,validator:{type:validate_start},width:150},
{title:"終了日",field:"end",editor:dateEdit,validator:{type:validate_end},width:150},
{title:"メッセージ",field:"msg", width:300},


データ定義

{start:"2019/5/1",end:"2019/5/2", msg:""},


サンプルコード










入力チェック付日付入力用エディター

















日付入力用エディター
2020-04-28T00:40:00Z
今回は日付入力用エディターを作成します。




  TabulatorドキュメントCustom Editorsより抜粋

別のタイプのエディターが必要な場合は、カスタムエディター機能をeditor オプションに渡すことができます。
 この関数は5つの引数を取ります。


編集中のセルの CellComponent。
セルがレンダリングされたときに呼び出す関数(要素が表示された後にフォーカスを設定したり、ディスプレイを整頓するために使用できる)。
ユーザーがセルに新しいデータを正常に入力したときに新しい値を返すために呼び出す関数。
ユーザーが編集を中止した場合に呼び出す関数。
editorParams 列定義プロパティから渡されるパラメータ。


カスタムエディター関数は、セルに挿入されるエディターのDOMノードを返す必要があります。また、編集を中止する場合はfalseの値を返す必要があります。




入力用エディターのカスタム関数は 
TabulatorドキュメントCustom Editors 
にあるサンプルプログラムを使用します。
サンプルプログラムに行ったの修正は以下の通りです。


セルの日付表示を YYYY/MM/DD に変更。
successFunc に空白チェックを追加。
(moment が Invalid date を返すためエラーチェック)
style の指定を削除。
コメントを日本語にした。


セルを２度クリックすると入力カレンダーが表示されます。
動作しないときは画面のセル以外の部分をクリックしてから、セルをクリックし直すと動作するようになると思います。



日付入力用のカスタム関数は以下のようになります。

var dateEdit = function(cell, onRendered, success, cancel, editorParams){
    // cell-編集可能なセルのセルコンポーネント
    // onRendered-エディターがレンダリングされたときに呼び出す関数
    // success-正常に更新された値をTabulatorに渡すために呼び出す関数
    // cancel-編集を中止して通常のセルに戻るために呼び出す関数
    // editorParams-editorParams列定義プロパティに渡されるparamsオブジェクト

    // 日付入力用エディターを作成
    var editor = document.createElement("input");
    editor.setAttribute("type","date");

    // エディターの値をセルの現在の値に設定します
    editor.value = moment(cell.getValue(), "YYYY/MM/DD").format("YYYY-MM-DD");

    //エディターが選択されたときに選択ボックスにフォーカスを設定します
    // （タイムアウトによりエディターをDOMに追加できます）
    onRendered(function(){editor.focus()});

    //値が設定されたら、更新するセルをトリガーします
    var successFunc = function() {
        var val = "";
        if(editor.value) // 空白チェック
            val=moment(editor.value,"YYYY-MM-DD").format("YYYY/MM/DD");
        success(val);
    }
    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};


moment.js  を使用するので以下のCDN を読み込みます。




カラム定義

{ title:"日付", field:"date", editor:dateEdit, width:150 },


データ定義

{ date: "2019/5/1"},


サンプルコード










日付入力用エディター