副業で不労所得を増やそうと画策している管理人の「ヒロユキ」と申します。所得については、Webサービスに人を集客し、アドセンスで収入を上げることを考えています。
今回は、Webサービス作成の第２弾としてフロントエンド用のテストツールをできる限り短期間で作成したため、感想などを記載したいと思います。
記事の前半は、作成したサイトの紹介。後半にサクッとWebサービスを作るために工夫したことを記載したいと思います。
どんなサイトなの？
任意のレスポンスを返却するAPIを作成できるサービスを作りました。
バックエンドができていない状態でフロントエンドだけを先行して作成したい場合、通信部は当然テストできないため…
// ToDo:バックエンドができたらコメントアウトを外す
//$.post("http://localhost/hoge.php",
// {"hoge":"huga", "piyo":"poyo"},
//function(dt){
// response = dt;
//}
//);
// ToDo:バックエンドができたら削除
response = {name : "Taro Tanaka", age : 10};みたいな感じにして、一旦通信部をコメントアウトして固定のデータで動作確認を進めるみたいなことが行われがちです。
その場合のデメリットとしては、
- テストデータを変更したい場合にソースの修正が多めになってしまう
- 異常系のテストが実施されないまま製造が進みがち
ということが考えられます。異常系がテストされないのは、固定値の返却値で作成を進めているためです。
当然、結合テストで不具合が発見されるなどのリスクを持ったままの進行となってしまいます。
今回作成した「MockMan」では、任意のステータスコードや異常データも戻せるため、通常は対処しにくい500エラーが発生したケースなどもしっかりテストすることができます。
またバックエンドの開発において、連携する関連システムが遅れているなどという時にも当然使用することが可能です。
作成した動機
Webサービスを 個人（1人）でフロントとバックに分けて作成する場合、フロントを先に作成したほうが手戻りは少ないです。
システムに仕様追加をする場合は…
「やっぱり画面にこの項目がほしい」
「画面を修正したぞ」
「画面に項目を追加したら、DB登録処理も修正しないとな…」
など、UIを実際にユーザーが使用することを想定した時に発生することが多いです。バックエンドは、あくまでUIが必要とする処理を提供するのですから、仕様変更の起点はいつもUI側です。
ただ、しっかりと設計をしていればフロントから作ろうがバックから作ろうがどちらでも良いと思います。
しかし、1人で最速でサービスを作る場合は、設計などせずに作りながら考えるので、手戻りのリスクを考えればまずフロントから作るのが望ましいです。
バックエンドをテストするツールは、PostManを始め色々と用意されているのですが、フロントエンドのテストツールはあまり見当たらなかったので、今回作成した次第です。
名前は、もちろん PostMan を真似ましたｗ
面倒な事は後から考えてとにかくスタートする
今回、最も重視したのは作成スピードです。
前回作成したRSSカスタマイズサービスは、react+djangoを勉強しながら作成したので着手からリリースまで1ヶ月かかりました。
それ以外にも、説明ページを作成したり、ログイン機能を作成したり、データ更新機能を作成したりしました。
しかし、実際に蓋を開けてみるとサービスはほとんど利用されていませんでした…
初めての言語ということでスキル面で習得したものは多かったですが、集客という意味だと無意味な1ヶ月を過ごしてしまいました。
そこで、まずは最低限の機能でリリースを行い、様子を見て機能を追加する方式にしました。
この場合のメリットとしては、上記のように無駄なサービス作成に時間をかけてしまうことが少ないという点が挙げられます。
デメリットとしては、最低限の機能だと見すぼらしいのでWebサービスの紹介サイトになどに掲載依頼しにくいことですね。
しかし、マーケティング能力な皆無な現状でデカいサイトを勝負で立ち上げるにはリスクがありすぎるので、この方法で今後も進めていきたいと思います。
早く作るコツは「機能使いまわし＋登録機能のみ」
とにかく爆速で作成するために行ったことは、 前述のとおり 「設計を一切せずに作りながら考える」です。
サイトのコンセプトを決めたら、最低限必要なことだけ頭で考えて、後は作りながら「これも必要だな」という感じで追加していきます。
あとは、以前作成したWebサービスのUIや関数を完全に使いまわしました。これをやるとスキル的な成長はないですが、当然のことながら早いです。
スキル習得と作成速度のどちらかを優先することになりますが、私は作成速度を優先させました。副業で収益を上げるところまで、まずはたどり着きたいからです。
また、公開されているソースで利用できるところはどんどん利用させてもらっています。今回の動的テーブルの作成は、以下のサイトをほぼ利用させてもらいました。
https://codeforfun.jp/add-remove-sort-table-rows-dynamically-using-jquery/
重要なのは、そもそも最低限の機能以外を実装しないという点です。
今回は「新規登録機能以外作成しない」という方針にしました。更新処理を入れる場合、どうしても過去に作成した機能の呼び出しが必要になります。
そして過去に作成した機能を呼び出す場合は、ログイン機能が必要になり作成工数がかなり増えます。
作成したMockManにもテストデータの保存、更新機能は欲しい機能になりますが、思い切って登録のみのサービスとしました。それなりに手応えを感じたら機能を追加していけばよいだけです。
言語はjQuery + djangoはいい感じ
前回は、React + djangoという組み合わせで作りましたが、単純なアプリケーションの場合は、フロントはjqueryで作るのが早い気がしました。
JSXで書くこと自体は保守性が良い気がしましたが、作成時のお手軽さがないです。リアクティブなサイトを作ることもなさそうだし…
バックエンドはJavaやScalaの経験がありますが、やはりコンパイル言語よりPHPやPythonみたいなスクリプト言語のほうが早く開発できますね。
Django(Python)がPHPと比較して良いのは、非SQLに対応している点で、複雑なことをやらなければ、こちらのほうが早そうです。（ Cakeとかでもできるのかもしれませんが）
この辺は、自分の浅いプログラミング経験に基づく話なので、かなり内容も薄いです。もっと色々試してみて、「この機能を作成するならこの言語が良いな」といった感じで取捨選択できるようになりたいですね。
ただ、やはりコンパイル言語はしっかり作れる代わりに時間を取られそうなので流行りのGolangあたりよりは、RubyOnRailsを学習してみようかと思います。