自作Webアプリを作る!その7 - 開発順番を考える

システム開発

こんにちは、いちのです!
前回から軽く1ヶ月放置してしまいましたがしれっと続きいきます。

前回までで、開発環境が整いました。もう1ヶ月経ってるのでよく覚えてないけど・・・

開発環境ができあがったところで、開発に手を付ける前にまずはどこから作るかを考えていきます。

私が何を基準に考えてるか、今回例として作っているタスクアプリで大公開します!

1.DBを作る

まずはアプリで使うDBを作ります。

テーブルもまだ良いのでとにかくDBを。

アクセスできるアカウント情報もちゃんとメモって(←よくわからなくなるダメな人)

フレームワークとかこの後の手順によってはここでテーブルも作って良いと思います。

2.まずはログイン画面

今回まず最初に作る予定でいるのは、ズバリログイン画面です!

私は本当は、ログイン画面は後から作りたい派です。
動作確認の度にログインしたり、それを避けるために各画面の認証を後回しにしたり、
色々地味に面倒なことがあるので・・・。

でも何故今回ログイン画面を先に作るかというと、
いくつかコマンドを入力するだけでLaravelが勝手に作ってくれるから!

Ω ΩΩ< な、なんだってー!!

ログイン機能って自分で作ったことなかったので不安でググったら、出てきた情報にとても驚きました。時代は変わったものだ・・・。
確かに、どんなものを作ってもログインに必要な機能って大体同じです。
自動化されて当然な部分だったかもしれませんね。

因みにLaravelが作ってくれるログイン機能、ちゃんとパスワードの暗号化までしてくれて、
ログイン後のダッシュボード画面まで用意されてます。しゅごい。。。

というわけで、Laravelさんにログイン画面を作ってもらって、
デザインを変えつつ出来上がったダッシュボード画面とかを編集したりしながら作っていくことにします!
後からこのログイン画面作ったらヘッダ部分ダブっちゃったりして面倒なことになりそうなので。

3.DBにテーブルを作る

ここで自分で使いたいテーブルを作っていきます。

今回で言うと、ユーザーテーブルはもうLaravelさんが作ってくれてある予定なので、
タスクテーブルやった日テーブルの2つを作ります。

ここから作っていくものの動作確認のために、
簡単にテスト用のデータを数件insertしておくと良いと思います。

4.ざっくりメイン画面

ログイン画面ができたら、メインの画面をまずはざっくりと作ります。

今回のタスクアプリで言えば、タスク一覧画面。
手始めに、タスクテーブルから取得したタスク一覧をどんな形でも良いので表示させます。

もっと機能の多いアプリケーションを作っている場合も、何かしらの一覧画面が必要であることが多いと思います。ログイン後のメイン画面がその一覧画面でないにしろ、メイン画面を他の画面に差し替えるのはそう大変なことではないので、開発環境に慣れるためにも適当に一覧を表示するところから始めることが私の場合は多いです。

5.適当にタスク登録画面

メイン画面に一覧が表示できたら、今度は登録ボタンを配置して登録画面への遷移を作ります。

遷移ができたら登録機能も簡単に。
まずは全部テキストボックスで、登録ボタンを押したら登録できることを確認してから、各項目の入力形式を変えていくようなかんじで、少しずつステップを踏みながらやります。

それから登録キャンセルボタン(一覧に戻る)を配置し、
更新のときの表示分岐を作り。。。

デザインはまだ二の次です。まず機能をガシガシ作っていきます。

6.最後にデザイン

タスク登録画面の機能ができて、メインの一覧画面に更新ボタンや削除ボタンができたら、
最後にデザインを整えていきます

CSSを使って、場合によってはアイコン等の画像を使い、
可能な限り各画面で共有できるクラスも作りながらきれいに整えます。

もちろん、スマホから見た時もそれ用のサイズでキレイに表示されるように調整していきます。
いちいちPCから見てたらタスクアプリとして実用的ではないので。

私はこのデザインがいちばん苦手です。

よくあることですが、開発する人はデザイン苦手なことが多いです。
言語はわかるから見本があればその通りのデザインにはできるんですけどね。
誰かカッコかわいいデザインお願いします(土下座)

おしまい

今回のタスクアプリは今のところたったこれだけの簡単なものなので、あまり参考にはならないかもしれないですね・・;

もっと色んな画面・機能がある場合、あちこちで使うことになる定数や便利な共通関数も考えておければ、その方が開発は楽に、トラブルも少なく進められると思います。

このステップ記事にする必要あったかな・・・?
と今更疑問ですが、どなたかの参考になれば幸せです。