簡易表アプリについて（スプレッドシートとjquery datatables）
この記事は「corp-engr 情シスSlack（コーポレートエンジニア x 情シス）#2 Advent Calendar 2021」の12/9 担当となります。
中小企業のデータ共有の課題
アナログ的な中小企業では、社内データをエクセルや紙で管理していることが多いと思います。
情報の透明化・業務効率化という観点から、そういったデータをいかに共有するかが課題です。一方、中小企業では制約として、解決する際に労力(工数)をあまりかけられないという現実があるでしょう。
この観点から、簡易的な表アプリの需要があります。
グーグルのスプレッドシート・datatables
そこで強力な味方となるのが、グーグルのスプレッドシートと、オープンソースのdatatablesです。
スプレッドシートは言わずと知れたグーグル製のエクセルのようなもので、共同編集が簡単にでき、様々なカスタマイズが可能です。
一方datatablesは、javascriptのライブラリーで、比較的容易にSPA風のデータアプリが作れるものです。あくまで自分でプログラムを書かなければなりませんが、とても使いやすい表アプリケーションが比較的簡単に作成できます。（※今回使用するdatatablesは有料版ではなく無料版（MITライセンス）です）
最近半年ほど、スプレッドシートとdatatablesでデータ共有を試みていましたので、使い分け・TIPS等を報告します。
なお、今回のデモはこちらからどうぞ。
まずは似たような機能を持たせたスプレッドシートとdatatablesアプリの実例をご覧ください。
サンプル
共有すべきデータは、新聞記事の工程管理データとします。
用途は、データを編集したり、フィルター（絞込み）をかけたりという一般的な用途です。
スプレッドシート・datatablesの用途と使い分け
基本的なデータ共有アプリの用途(要件)は下記です。
①データを複数人で編集できる
②データをリアルタイム同期できる
③簡単にフィルタリング（検索）できる
データが単純な場合や、エクセル的な機能（関数やグラフ）を使いたい場合はスプレッドシートで行うのが良いでしょう。
一方、データが複雑だったり（いくつものテーブルをjoinしてデータを扱うような場合）や、非エクセル的な機能をつけたい場合は、Ajaxありのdatatablesでアプリを作成するのが良いと思います。
また、スプレッドシートは、複雑なデータ参照や、機能追加（GASを用いたプログラム）も可能ですが、実行速度に難があります。下手をすると十秒以上かかることもあります。
それと、忘れてはいけないのが、datatablesはスプレッドシートに比べると、はるかに開発に労力がかかることです。
まとめると次のようになります。
スプレッドシートを選択する場合
・基本機能（データ編集・データ同期・フィルタリング（検索））
・データ構造が比較的単純な場合
・エクセルとほぼ同様の機能で良い場合や、デフォルトのカスタマイズで事足りる場合
・もしGAS等で機能追加する場合、実行速度が遅くても良い場合
（比較的マイペースに処理して良い業務）
・開発労力をかけれない場合
（スプレッドシートの工数を1とすると、Ajaxありのdatatablesの工数は体感30くらいです）
Ajaxありのdatatables(jquery)でのアプリ作成を選択する場合
・基本機能（データ編集・データ同期・フィルタリング（検索））
・複雑なデータ構造（いくつものテーブルをjoinしたり、データ取得結果を加工して表示する場合など）
・実行速度が早いことが必要な場合（一分一秒を争う業務）
・開発労力をかけてもペイできる場合
上記の違いを考慮して、私はスプレッドシートでデータ共有してもらうか、datatablesアプリを作るかを決めています。
なお、Ajaxなしのdatatablesアプリの場合、データの編集やリアルタイム同期ができませんが、さくっとデータベース閲覧アプリを作れるので、これはこれでおすすめです。
なお労力(工数)の目安は、体感的に
スプレッドシート：1 ＜＜＜datatables Ajaxなし：10 ＜＜＜＜datatables Ajaxあり：30
くらいです。（datatablesアプリは一度作るとプログラムの使い回しはできますが）
おすすめカスタマイズ
スプレッドシート
基本的なところでは、
・交差色の設定
・入力規則の活用（チェックボックス、選択肢、日付カレンダー等）
・承認が必要な項目がOKになったら行の色を変える
・承認が必要な項目は、チェックボックス＆範囲の保護を活用する
等を設定すると使いやすいです。
特に、範囲の保護を活用すると、権限のある人だけ編集したりチェックつけたりできるので、他ユーザーの操作ミスが生じず大変便利です。
Ajaxありのdatatables
・検索条件（フィルター）のオブジェクト化＆多重フィルタリング（↑のデモで実演しています）
datatablesはフィルターという絞込み機能が非常に有用です。かつ、多重フィルタリングできます。
フィルター条件をオブジェクト化（ボタン化）することで、絞り込みが非常に使いやすくなります。
・hidden行の不可視の列データを利用して、並び順を設定する。
datatablesでは列データの可視不可視を設定できます。そして、ある列の並び替えを、別の列を用いて行えます。
具体的には今回作成したアプリでは、「面（１面・くらしなど）」の列と、不可視の「面id」列を作り、「面」を並び替える際には「面id」で並び替えしています。
（１面＞id:1、経済＞id:2、くらし＞id:3、文化＞id:4、農業＞id:5）。
詳しくは datatablesアプリのソース や公式サイトの説明から。
終わりに
この半年ほど、このような感じでスプレッドシートとdatatablesを使って、社内のデータ共有に取り組んでいました。
ここでは紹介できなかったtips等もたくさんあるので、色々使ってみると面白いと思います！
（datatablesの他のtipsだと、例えば、Row groupingしたときに、Row groupingヘッダのクラスにposition: sticky;を設定すると、スクロール時にヘッダが止まって便利です）
偉大なる先人様&参考元
datatablesの基本的な使い方
デモサイト流用元（偉大なる先人様。ほぼ丸パクリ）
datatables無料版でのボタン実装
ご拝読ありがとうございました。
