はじめに

初めまして。yamaguchiです。
IT系企業に入社して20余年のエンジニアです。
記事を書いた切っ掛けは、社会人となってから世の中の状況が大きく変わり、また業務における開発環境も様変わりしたことを実感して、その節目でどのように感じたのかを残しておきたいと考えたからです。
今回は、その節目の１つで「Kendo UI for jQuery」を利用した開発手法と出会った頃にフォーカスを当てたいと思います。

１．「Kendo UI for jQuery」って何ですか？

Kendo UI は、HTML5とJavaScriptを使用して、Webソリューション開発を実現させるためのビジネス向けUIライブラリです。
当時すでに jQuery-UI が存在していましたが、よりモダンなレイアウトの提供をコンセプトとしたUIライブラリの１つとなっています。
jQuery の拡張をベースとした同コンセプトのフレームワーク群とは異なり、Kendo UIはJavaScriptを用いて速度を意識してゼロ構築されており、様々なデバイスで開発する上での強みともなっています。
「Kendo UI for jQuery」は、Kendo UI 製品の１つでjQueryを用いた開発をターゲットとしたコンポーネントセットになります。
提供元 telerik の「Kendo UI for jQuery」紹介サイトTop

Kendo UI では、「Kendo UI Core」パッケージとして一部がオープンソース化されています。
「Grid」や「Editer」、「Stok Charts」などは商用ライセンスの下に置かれていますが、オープンソース化の割合は全機能の70%以上とも言われています。
提供元 telerik の「Kendo UI Core」パッケージDLサイト

２．「Kendo UI for jQuery」で何ができますか。

「Kendo UI for jQuery」には、現時点で100を超えるコンポーネントが含まれており、提供元紹介サイトでも「Grid」、「Scheduler」、「Chart」などを大きく紹介しています。
これら多くの利便性の高いコンポーネントを使用することにより、よりモダンで高速、そして効率のよいWeb開発の実現に大きな力となります。

例えば、「Grid」では、簡易なプロパティ設定で多機能な一覧表示が可能です。

※提供元 telerik の Progress Kendo UI Dojo にてサンプル表示

以下は、2021/09/01時点で、提供元の telerik が公開している「Kendo UI for jQuery」紹介サイトの一部をクローズアップしたものです。

提供元 telerik の「Kendo UI for jQuery」デモ紹介サイト

３．「Kendo UI for jQuery」をどのように用い、それまでと何が変わりましたか？

一番多用したのは、やはり「Grid」コンポーネントになります。
それ以外にも「TreeView」、「DatePicker」、「DropDownList」などのコンポーネントを利用させてもらいました。

使ってみた感想ですが、以前の JQuery ui などを使用した業務との比較になりますが、実際のところ業務では生産性がだいぶ違っていたと思います。
「Grid」コンポーネントを例に挙げると、表を一覧表示するためのレイアウト生成やサーバから取得した表示データとのバインドが、プロパティ設定だけで済み、実際にサーバとのMVVMモデルでの連携部分や、業務要件によるレイアウトのカスタマイズなどに注力できたためです。

コンポーネントを使用する際に欲しいと感じる機能の多くはプロパティ設定で対応できるのが大きな強みとなっています。
「Grid」コンポーネントだと、ソートやデータのフィルタ、表示行の選択、位置変更、そしてセルでの内容編集などです。他にも多くの機能がプロパティ設定で対応可能です。

※提供元 telerik の Progress Kendo UI Dojo にてソートのサンプル表示

※提供元 telerik の Progress Kendo UI Dojo にてフィルタのサンプル表示

※提供元 telerik の Progress Kendo UI Dojo にて表示行選択のサンプル表示

※提供元 telerik の Progress Kendo UI Dojo にてセル編集のサンプル表示

多くの機能がプロパティ設定で対応可能ですが、一覧のヘッダやデータ行のセルなど色々な機能でテンプレートを設定することもでき、より柔軟に業務へ適用させることもできます。
例えば、データ行のセル編集で、行の内容から最適な内容をプルダウン選択させるといったこともテンプレートを用いて可能です。
例え始めればキリがないくらい多機能な「Kendo UI for jQuery」でありますが、提供元 telerik の非常に強力な支援の１つに Progress Kendo UI Dojo があります。

これは「Kendo UI for jQuery」のソースを貼り付けて動作を確認できるサイトですが、提供元 telerik が公開している「Kendo UI for jQuery」のAPI Referenceでもそのサンプルコードと紐づけられてあり、実際に telerik のサイト上でAPI Referenceの動作を確認できます。
サンプルコードを編集して動作の変化を見るなどといったことも可能なのです。
既に「Kendo UI for jQuery」を利用している技術者だけでなく、「Kendo UI for jQuery」初心者や導入を検討している技術者達にも非常に強力な支援といえます。

従来の業務において、要件の実現性を確認する際には、環境を作りサンプルを作りと多大な労力を要することも少なくありませんでした。
それが、お手軽にしかも詳細に確認できるため、「Kendo UI for jQuery」の多機能さと相乗して生産性の向上に大きく寄与しています。
実際の業務でも、レイアウト的な確認を含む「Kendo UI for jQuery」での実現性の検証作業が発生したとしたら、まずAPI ReferenceとProgress Kendo UI Dojo で確認を行っており、大変お世話になっていました。

４．「Kendo UI for jQuery」を使ってみて、不便に感じた点などはありますか？

実際に JQuery UI ベースの開発から移行してみると、あまり不満など出る余地がなさげだったのですが、細かいところをあえてあげてみると、ページ単位のスコープでscssなどを利用している場合でも「Kendo UI for jQuery」の「Grid」などが動的生成するタグには、スコープが設定されないので、全体へ適用されるscssに記載する必要がありました。
何か方法はあったのかもしれませんが、当時は結局業務終了まで解決できませんでした。「Kendo UI for jQuery」の問題というより組み合わせるライブラリ間での相性の問題ですね。
私の使い方が熟練できていなかっただけのかもしれませんが。

５．まとめ

実際に業務で使用してきて「Kendo UI for jQuery」は、非常に強力なビジネス向けUIライブラリであると考えます。
特に日々、対応／更新されておりどんどん新しいことができるようになるのは素晴らしいの一言です。
私の業務の歴史で、「Kendo UI for jQuery」は、業務の作業手法に変化を起こして１つの節目としたことは間違いありません。
導入の相談を受ければ自信をもって紹介できる製品と感じています。
今後もまた使用する機会があるはずで、その際にはまた新しい驚きを提供してくれることを期待しています。