はじめに

こんにちは。SHIFTのテスト自動化アーキテクトの牧野です。

今回はチームメンバーに向けてツールを作られているプログラマーの皆さんへ スプレッドシートコピペインターフェース と呼んでいる開発手法の提案をさせていただきます。

チームのためのツールとなるとGUI、用意したくなりますよね。
しかしどういったインターフェースにするか毎回悩む…。

GUI用意するとMVCっぽくロジックを分けたいが、いざ実現しようとするとDA層などが大げさになりがちで、シンプルなプロジェクト構造にしたい…。

パッと開発できるUIデザインとプロジェクト構造にしたい…そんな時私はスプレッドシートからコピペする スプレッドシートコピペインターフェース を愛用しています。

データをスプレッドシートからのコピペにすることでネットワーク接続などのDA層を削除ないし最小限にしつつ、簡易かつ省機能なUIを実現します。

今回はメジャープログラミング言語の「Typescript」と、スタンドアロンのGUI作成フレームワークの「Electron」を利用した例で スプレッドシートコピペインターフェース を紹介いたします。

スプレッドシートコピペインターフェースとは

入力をエクセルやGoogle Spread Sheetからの全コピペを前提にしたUIです。

出力もタブ区切りにすれば、スプレッドシートに向かってコピペすることで相互連携ができてとても便利。

具体的にはテキストエリアをべたっと用意して、そこに貼り付けてもらってボタン押して実行！

シンプルですね！評判もいいです！

スプレッドシートコピペインターフェースの魅力

• スプレッドシートは結構な人がそれなりに使える！

• UIはコピペ用のテキストエリアでOK！

• コードの構造がロジックとデータで自然に分かれる！

• 既存資産を転用しやすい！

• データ連携がかんたん！

上にあげたそれぞれの魅力の掘り下げにより、 スプレッドシートコピペインターフェース を説明します。

スプレッドシートは結構な人がそれなりに使える！

教育コストが驚くほど低いです。

「この形のシートで、全コピペしてください」「この列の場所を変えなければ、あとは好きにメモして大丈夫ですよ」

このメッセージで割と説明できてしまいます。

自分で補助用のスプレッドシートを作って便利に使ってくれたり、ユーザーの自由度を広げられるのもいいですね。

UIはコピペ用のテキストエリアでOK！

スプレッドシートコピペインターフェース の良いところは、画面がとてもシンプルになることです。

<textarea id="input"></textarea>
<button>run</button>
<textarea id="output"></textarea>

スプレッドシートを見やすくしたい！と言われたら、貼り付け先のスプレッドシートのレイアウトを表計算ソフトの力で修飾すれば良いのです

なんなら、ユーザーの方が自身で素晴らしいデザインを作ってくれます

デザインに悩むことはもうありません。これからはtextarea2個から始めましょう

コードの構造がロジックとデータで自然に分かれる！

スプレッドシートからコピペした内容は、tsvです。

tsvはロジックで扱いにくいため、ドメインオブジェクトに変換します。

変換を担うオブジェクトが必要になりますね。Conveter としましょう。

ドメインオブジェクトのユーザー表現は、スプレッドシートにコピペできる形で出力して、そちらで再利用できるようにすると経験上良いです。
conveterは Sheet → Object、Object → Sheetの2種類を用意しましょう。

このconverterでtsvをドメインオブジェクトにして、ロジックに渡す… Controller というものを用意してその責務を担当してもらいましょう。

プロジェクトは自然に以下の形になります。

EXCEL-COPIPE-INTERFACE\src
│  controller.ts
├─ui(省略)
│
├─converter
│      spreadsheetToSugoiObjConveter.ts
│      sugoiObjToSpreadSheetConverter.ts
│
└─logic
        sugoibuilder.ts
        sugoiObj.ts

見ただけでそれぞれのUTが簡単に作れそうで、規模もいい感じになりそうと思いませんか？

名前や層の数は好みでもちろん好みで変更することもあるでしょうが、tsvをそのまま扱うのは辛すぎるため自然にオブジェクトに変換するようになり、その受け渡し・操作といった単位で設計していると、自然に責務が分かれます。

既存資産を転用しやすい！

スプレッドシートは多くの職場で活躍し、たくさんの資産が存在しています。

既存のスプレッドシートをドメインオブジェクトに変換するConveterを用意するだけで、たくさんの資産へのサポートツールが用意できます。

使い方の説明はまず「全コピペしてください」から説明できるでしょう。

データ連携がかんたん！

テキストの扱いやすさはCLIに熟練されたプログラマーの皆さんに語るまでも無いでしょう。

Conveterを増やしてそれぞれのフォーマットへのコピペ対応さえしておけば、皆さんお気に入りのツールで自由に扱ってくれます。

いかがでしょうか

スプレッドシートの力が凄まじいのでUIをそちらに丸投げすることで、ロジックに集中することができるのも無視できません。

チームの生産性を上げるGUIツールを用意したいとお悩みの方は、この スプレッドシートコピペインターフェース をお試しいただくのはいかがでしょうか。

【この公式ブロガーのおすすめ記事】

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのAlex wong