「俺が考えた最強のSOQL実行ツールを作りました」はひさしぶりにいっぱいいいねをもらえました。ありがとうございます
驚いたことにSalesforce界隈外の人にもいいねをいっぱいもらえているようです。ありがとうございます。どこが受けたのかなーと思っていたのですが、きっと「リリースまで持ってってがんばったな」や「私も個人開発したいな」みたいな気持ちでLGTMを押してもらえたのではないかと勝手に想像しました。
そうだとすると、特に後者の個人開発したいよって人にはどう考えて作ったかというのも公開すると喜んでもらえるのかなと思い、仕様メモを含めた開発の流れを公開してみようかと思います。実際できたものと最初の画面仕様メモを見比べるのもおもしろいかもしれません。参考になれば幸いです。
想定読者は個人開発したことなくてしてみたいなと思っているプログラマです。すごくできるプログラマの方々は恥ずかしいのでここで止まっていただければと思います
開発の流れ
- 作りたいものを妄想する
- 画面仕様を考える
- 必要そうな技術を調べる
- タスクを洗い出す
- 実装する（3,4は並行しながら）
作りたいものを妄想する
社内ハッカソンだったのでネタ出しですね。日々考えて、どっかに書いていきます。僕の場合は社内Slackに思いついたネタを投稿していました。しかし、最初に思いついたこのツールが一番欲しかったので、そのままこれを作りました。
ちなみに今回の社内ハッカソンのテーマは「できるだけ費用をかけないWebサービスをリリースまで持っていく」でした。ハッカソンと言っても一般的なハッカソンと違って期間は2ヶ月でした。最初ハッカソンと呼んでしまってずるずるとそのまま社内ハッカソンと呼ばれていました。
画面仕様を考える
次は仕様を考えます。個人開発の場合は自分がわかればいいのです。簡単なものなら文書に起こさず頭の中に仕様を思い浮かべながらいきなり実装を始めても構いません。今回はちょいと複雑なので画面仕様メモを先に作りました。
今回は自分が欲しいものを作るだけなのでより簡単です。欲しい機能を並べて、それを自分が使いやすいと思う画面に落とし込むだけです。
最初に個人開発で作るものは自分が欲しいものがおすすめですね。悩みが一つなくなります。ターゲットユーザとかバズるのとか考えると迷走が始まりますので、何かサービスを作りたいけどなかなか手が付かないって人は自分が欲しいものを作るといいと思います。
今回は画面とその画面の動作仕様を書いているだけです。
通常は画面仕様に加えて簡単なER図を書くことも多いですが、今回はDBを使わないシステムなのでDB設計は不要でした。
画面案は適当にFigmaで作成しています。FigmaはSketch用のUIコンポーネントとかを読み込めるけど、そういうのを使うとデザインが気になってくるので（あと面倒なので）、潔く四角とテキストしか使っていません。カンプの時点でかっこよくできるスキルはないので、これでいいんです。面倒なところは書かなくても構いません。自分がわかればいいのです。実際の画面案を見ていただくと僕も出力結果を表示するところは面倒だったので「テーブル」とだけ書いてます。ちなみに手描きでもなんら問題ありません。昔はよくスケッチブックに手描きしていました。
仕様メモは僕はQuipに書いていました。社内ハッカソンなので社内に共有するために社内ツールに書きました。使うツールはGoogle DocsでもGithub WikiでもWorkflowyでも好きなのをお使いください。以下はQuipの履歴から引っ張ってきました最初に書いた仕様メモの部分です。
この仕様メモの全文を以下にそのまま貼ります。結局実装していない機能もあります。
オブジェクト選択
- オブジェクト一覧を表示する。（オートコンプリートのためツリーにはしていない。オブジェクトを確定したい。）
- オブジェクト名（ラベルも）で絞り込める。
- 項目名も含めて検索できる。（結果はオブジェクト一覧なところが微妙だが、オートコンプリートのため仕方ないか）
- オブジェクトを選択すると、エディタに「SOQL Id FROM <選択オブジェクト>」と入力する。（全項目がいいかもしれん）
- 左上はObjectsじゃなくてSObjectsかな。
項目選択
- 項目名と子リレーション名（そのオブジェクト名）で絞り込める。
- 項目をクリックするとSELECT文に追加。もう一度クリックするとSELECT文から削除。
- Select Allで項目を全選択。Deselect Allで全解除。
- 子リレーション名をクリックするとSELECT文にサブクエリを追加。Idのみか全項目は要検討。
- 項目と子リレーションは6:4くらいの高さの割合かな。中でスクロール。それかアコーディオン。
- ※WHERE句には何もしない。
SOQLエディタ
- 「Execute SOQL」でクエリ実行し、結果テーブルに出力する。
- オートコンプリートで項目名を補完できる。
- 子リレーションのサブクエリの括弧内では子リレーションのオブジェクトの項目が補完できる。
- FROM句を変更した場合どうするか要検討
SOQL履歴
- Execute SOQLの横に保存ボタン。
- SOQLエディタの右に表示。
- Saved QueryはSOQLを名前を付けて保存。
- Query Historyは実行履歴が時系列で。最新10件とか。
- クエリをクリックするとエディタが置き換わる。現在選択されているオブジェクトや項目も切り替わる。エディタ部分をタブにするという案もあるが、タブはあまり使いやすい気がしない。要検討。
出力結果テーブル
- 普通にテーブル表示する。
- Export CSVでCSV出力する。
- 子リレーションは「Contacts(3)」のように表示し、クリックすると下にさらにテーブル表示。
- 子リレーションはCSVに含まない？？要検討
- インライン編集やレコード削除は俺の中で優先度低い。
ヘッダー
- 画面案に書くの忘れた。
- ロゴを左上、APIコール数の「<現在の使用数>/MAX」を右上に表示
その他要検討
- エラー表示スペース
あるとうれしい機能
- 項目の詳細な一覧（データ型、デフォルト値など）見れるとうれしい。しかも変更できたらなおうれしい。
- :recordIdみたいにApexでの変数記法が使えたら便利かなあと少し思ったが、使うかどうかわからない。
- SOQLをパラメータで渡し、特定のクエリを実行するURLを共有する。
- デスクトップアプリ化してCORS設定を不要に。
- クエリの保存
必要そうな技術を調べる
この時点でだいたい必要そうな技術は想像できていると思うので、あらかじめ必要そうでよく知らない技術は調べたりもしていました。これは画面仕様メモを考えているのと並行だったり、その後のタスク洗い出しや実装とも並行して行います。なんでこう実装したかとかもすぐ忘れちゃうので実装しながらもメモしておきます。前の記事の参考リンク集はこの開発メモから取ってきています。
以下が最初の頃の開発メモ部分。なお、Quipの１文書に画面仕様メモもこの開発メモもタスクも全部書いてます。
タスクを洗い出す
続いてタスクを洗い出します。最初はだいたい機能一覧を書くだけです。以下のようにQuipでチェックリストを作りました。一人でやるなら別にGithub issueなんて使わなくていいと思います。Quipの履歴から引っ張ってきましたが、最初のタスクは以下のようにほぼほぼ機能一覧です。
実装する（3,4は並行しながら）
その後は着々と実装します。が、特に個人開発だとだいたいのことは作りながら考えるので、開発メモもタスクもめっちゃ増えながら作ります。
この文書の最新の4/29版だと以下のようになっており、タスクはめっちゃ増えてます。元々のタスクもこの下にあるけど、もはや見えない。
あとは実装/タスク/開発メモを増やしながら適当に自分で決めたゴールまで実装を進めていきます。どこまで実装するかも進めながら決めます。なのでここまで実装するぜって挙げた最初の機能も実装していなかったり、逆に途中で機能が増えてたりします。
今回は特に自分が欲しい物を作るので、作っているうちにいろいろ考えも変わるものです。あと今回は４月中リリースという期限もありましたし、その辺で妥協もありました。
終わりに
だいたいこんな流れで作りました。めっちゃシンプルだし普通なので参考になるのかわかりませんが、自分が普通と思っていることが意外と人の役に立つこともあるので、公開してみます。他の方々が個人開発のときにどういう流れで作っているか知らないので、これが普通かどうかはわからないのですが、実際ちゃんとツールを作ったときの一つの例ということで参考にしていただければ幸いです。