はじめに
この記事は、前に書いた「年末年始の４日間でサブスク管理がサクッとできるSaaSを作りました」の続編で、前回はアプリ自体にフォーカスした内容でしたが、今回はいち開発者として取り組んだことや流れなどをまとめていきます。
あまり堅苦しく書くつもりはないのでゆるく読んでください。
Webアプリに興味がある方や自分で作ってみたい方、プログラミング初級者などを対象に書いていきます。
また、始めに断っておりますが”4日間で開発”というのは盛っちゃってます。
設計から一通りの機能開発までは完了しましたが、そこでタイムアップ。纏まった時間を割くことができた休みが終わってしまいました。その後普段の日常常務の傍ら、細かいバリデーションやバグ取りなんかを一日１時間ほどコツコツ進め、トータルでは一週間くらいかかってます。
勢い重視だったのでまだバグが眠ってるとは思います(^^;)メッセージ等で教えてください。お手伝いしてくれる方も大歓迎です。
以下から、個人開発をするときの自分なりの考え方や進め方などを書いていきます。
開発を開始するまでの流れ
どんなサービスを作るか
目的によっては、そのプロジェクトのビジネス戦略だったりマーケティングだったりを考えなくてはいけませんが、そちらは畑違いなので、私はただ作りたいものを作ります。リードの獲得？ゼロです。自分が使えて、どこかの誰かが使ってくれれば良いくらいの気持ちです。
個人開発で重要だと思うのはスピード感。
だから先に書いたいろいろを考えてたら熱も冷めるしなかなか手が動きません。
作って、ダメなら壊す。んでまた作る。
プログラミング初心者の方がアプリケーションを１から１０まで作ることはとてもためになると思います。
そんな勢い重視のアプリ制作でも、競合だけは確認します。
理由はひとつ。同じサービスで質の高いものがあったらそっち使うやんってだけ。夜中ふとんの中で閃く程度のものなんてだいたい既にあるんですけどね。世の中に。
だから全く同じものがないのは難しいとして、英語版のみしかない。あるけどなんか勝てそう。っていう競合ならセーフにしてます。
作りたいサービスが決まったら
頭の中に設計書はあるから、基本設計、詳細設計なんて書きません(設計書の勉強をしたい方は敢えてここをしっかりやるのもいいと思いますが)。
機能の洗い出しもやりません。寝ながら頭で考えておきます。
ただ私の場合DB設計だけはします。
先述したように個人開発で重要なのはスピード感です。
思いついた全ての機能を盛り込んで短期間で開発するというよりは、段階的に拡張していけるように作って行った方が効率が良いです。
そのため、あとでこの機能を追加するからこのテーブルにこのカラムを持たせておこうか～とかは先に考えておきます。
言語の選定とパッケージの選定
構成がまとまったら早速プログラミングを開始しますが、その前にプロジェクトの構成を決めます。
この辺の選択肢は無数にあるので、これでやりましょうというのはないです。
自分がアサインしているプロジェクトへの理解を深めたかったらそれと似た構成で作ってみてもいいし、全く触ったことのない構成で勉強がてらやってみるのももちろんありだと思います。
今回はスピード重視だったので、自分の土俵であるフロントエンドにreact、バックエンドにnode ExpressのAPIサーバーの構成にしました。
reactのパッケージはbootstrap4をベースにしたcoreUIを使い、Expressは認証系をjson web token,ORMにSequerizeです。
ひと昔前はORMの記法に慣れずに「いやいやSQL書いたほうが楽なんだけど」って思ってましたがやっぱ普通に早いですね。
coreUIは初めて触ってみましたがこれも良かったです。プログラミング初心者の方にお勧めかも。state管理はクラスコンポーネントではなくHooksを使った関数コンポーネントで綺麗に書かれているし、プロジェクトのディレクトリ構成やルーティングの記載なんかも綺麗なので(大規模なテンプレ―ドなので当然ですが…)参考にできると思います。
bootstrapをそのまま使えるしアイコンも充実してる。ウィジェットのテンプレートがたくさんある点も良いです。
とにかく便利そうなものは使ってみよう。というのが個人開発ならできるので、積極的に使ってみるのがオススメです。
プログラミングを開始しよう
好みもあるかと思いますが、私はサーバーサイドを先に作ります。
POSTMANでリクエストを送って、望む形のJSONを返すAPIをせっせと作ります。
８割方できたら、フロントエンドに入ります。
なぜ最後までやらないかというと、なんせ設計フェーズをすっ飛ばしているので漏れはあるんですよね。漏れがあるのは仕方ないとして、大きな手戻りになる前に気づくことができるように、私はまんべんなく作ることで回避してます。
組立式の家具なんかが良い例だと思います。
４本のネジを１本ずつギュ！ギュ！と絞めるのではなく、まず全てのネジを仮止めしてから最後に締めましょうみたいな。
ある程度出来上がったらPOSTMANで叩いていたAPIを今度はフロントから叩き、返ってきたデータを整形してビューを作っていきます。
今回デザインは素敵なUIのcoreUIに丸投げしてます。
結構エンジニアの方って動けば良い思考の方は多いですが、エンドユーザーは見た目から入る場合が圧倒的に多いと思うんですよね。
ただUIに凝りだすとやっぱ時間かかっちゃうので、こういうのは助かります。
認証系は自分で作るとそれだけで結構時間かかっちゃうので、Firebaseとか使うと楽ですね。自分はEメール認証あたりをしっかり作りたかったので自前で実装しました。
ネジを締めていく
全体的にアプリが出来上がりました。ここまでで４日。
バリデーションだとかレスポンシブデザインの調整だとか例外的なエラーの考慮だとかをしていきます。
平日仕事が終わった後にコツコツと２日間かけて進めました。
フロントエンドのバリデーションはhtml5のフォームバリデーションを使って楽をしようと思っていたのですが、考えてみたらreactで作っててsubmitしないし使えないと気づきました(^^;
便利そうなパッケージもいくつかありましたが、リアクティブにバリデーションをかけられてかつ引っかかる場合はボタンを非活性にするという動作にしたかったので、簡単な関数を用意して制御することにしました。reactだとこういうのが自前でも簡単なのが便利ですね。
リリースする
もし既にアプリケーションをリリースした経験がない場合であれば、このフェーズでもなかなかの時間がかかってしまうと思います。
やることを箇条書きにするとこんな感じです。
ドメインを取得する
サーバーを契約する
契約したサーバーでの環境構築を行う。
１．nginx or apache2を入れる
２．databaseを入れる(ユーザー作成や権限周りを設定する)
３．アプリの環境を整える
４．フロントサイド、サーバー２つのアプリを動かすためマルチホストの設定をする(サブドメインを作ってサーバー側はリバースプロキシでexpressへ)
５．SSLの設定をする(Let’s encryptを使用)
６．pm2等の永続化できるパッケージを使ってアプリを起動する
VPSで予めいろいろ整っているやつを使ったり、dockerを使うのが楽な方法だと思います。aws未契約なら１年間はEC2が無料で使えるのでそれもおすすめ(ただ1年間を過ぎてからは割高なので、継続して公開する予定の場合は注意)。
でも時間がある場合はまっさらなLinuxを使ってやってみるとかなり勉強になると思います。
あとがき
限られた時間でなんとか形にはなりましたが、まだ考慮が足りない部分や追加したい機能などが残っているので、今後はペースを落として進めていきたいと思います。
出来上がったサブスク管理のWebアプリはこちら
https://subscline.work/#/login
最後まで読んでいただきありがとうございました。
