自作Webアプリを作る!その1 - 全体の流れ

アイキャッチ システム開発

こんにちは、いちのです!
今、スマホが普及して便利なアプリがたくさんありますよね。でも自分の欲しい機能がそろったアプリって意外と見つからないこと、ありませんか?

私もずっとほしいと思ってたアプリがあるんですが、なかなか思い通りのものって見つかりません。使い方でカバーすることもできるけど、でもやっぱりほしいものはほしい。。。

うーーーーん。。。。。。

よし、作っちゃおう!

はじめに

私は仕事でWebアプリケーションを扱っているので、それなりに開発の経験があります。

完全な初心者の方に向けた分かりやすい解説!という内容にはならないと思いますので、そういうものをお求めの方は申し訳ないですが別のサイトをお探しください。

わかりやすい解説サイトはたっくさんあります!

そして、まずは自分のために作るアプリです。細かい部分かなりすっ飛ばしたり適当になる部分もあるかと思います。その辺ご理解の上見て頂けると助かります。

まずは全体の流れを考える

なんでも見切り発車気味な私、いつもならいきなり環境を整えて作り始めちゃったりするのですが、それだとやっぱり後々になって色々不都合が多いものです。

  • あれ、DBにこんなテーブルも必要じゃん。カラムもこれじゃ足りない!
  • あー、画面によって配置がバラバラ。。。あとで揃えるの面倒だなぁ
  • この機能あっちでもあったような?共通クラスに作ればよかったか?

こんなことに後から気づくとモチベーションも落ちやすく、効率も悪いですよね。

ざっくりとでも全体の流れを考えて、それなりの手順を踏んでやった方が、きっと効率よくできるはず!

ということで、どういう流れで開発していけば良いか考えていきましょう!

開発手順

まずはざっくりと。

  1. 要件定義
  2. 画面仕様を考える
  3. DB設計
  4. 言語やフレームワークの選定
  5. 開発環境構築
  6. 開発順番を考える
  7. 開発スタート

えっ、意外と工程多くない?もうちょっとすっきりできるかと。。。まあいいか。

では1つ1つについてみていきましょう!

①要件定義

どんなアプリケーションを作りたいのか。どんな機能が必要なのか

ということをどんどん書き出します。

仕事でお客様のために作る場合は細かいところまですり合わせが必要ですが、今回は自分で自分のために作るのでここではそんなに細かいことは気にしません。

②画面仕様を考える

どんな画面が必要か、どの画面からどの画面に移動できるかをまずフロー?的なかんじで書き出します。

紙でもなんでもいいです。簡単にでもいいです。

それから各画面に何を表示するかと、それぞれの簡単な配置図を考えます。

③DB設計

アプリ内のデータを保存するのがDB(データベース)です。

この世界に足を踏み入れて初めて知りましたが、「でーびー」と読みます。多分突然「でぃーびー」と言われてもピンとこないくらいにはシステム開発の世界では「でーびー」です。

例えば、会員登録・ログインが必要なアプリなら会員情報を保存するのもDB。

会員がログインして自分用の情報を入力したら、それを保存するのもDBです。

それぞれの情報をどのテーブルにどう保存するか、入れ物の構成を考えます。

何のテーブルとカラムが必要か。キーは?外部キーは?制約は?というところまで考えられるとなおよし(仕事なら当然必須)

④言語やフレームワークの選定

今回はWebアプリケーションです。必須なのはHTML、CSS、Javascriptの知識。

決めるのはバックエンドプログラムに使う言語です。

慣れた言語でやりたいのか、勉強のため新しい言語に挑戦したいのかで決めてもよし。

作る内容によって言語の向き不向きもあるかもしれません。そのあたりを調べて決めるのも良いと思います。

私の場合は勉強のためもあっての開発なので、まだ触ったことのない言語にしようと思っています。PHPか、Rubyかなぁ(えっ仕事でやっててそれ使ったことないの!?)

言語を決めたらフレームワークを決めます。私はあまり最近の流行りに詳しくないので、ググって一番ナウい(死語)かんじのフレームワークを選ぼうと思っています。

もちろん、フレームワークから決めるのもアリだと思いますよ!

⑤開発環境構築

開発に使うIDE(統合開発環境)をインストールしたり、言語をインストールしたりします。ネットで調べるとわかりやすく解説してくれているありがたーいサイトがたくさんあります!いつもお世話になってます!

場合によっては一番大変で躓いたりすることもある工程ですが、これがなければ始まりません。最近はかなりすっきり簡単にインストールできるようになっているものが多いので、多分大丈夫。。。多分。。

⑥開発順番を考える

どの画面から作るか、どの機能から作るか、というのを決めておくと開発に手が付けやすいかと思います。

DBは最初に作っておこう!とか、色んな画面で使うことになりそうな機能を先に作っておくとか、まずはログイン画面作らないと始まらないでしょ!とかそういうかんじで決めます。簡単に、ざっくり決めておけば良いと思います。自分用個人開発なら

⑦開発スタート!

もうあとはゴリゴリ作っていきましょう。

画面の細かいデザインは私は後でも良いと思っています。

後で色とか変えるのが楽なように、各要素のクラス名とかはそれなりに決めておいて、クラス名だけはつけながら作るとかだと後々楽かと思います。

とにかくちょっとくらいバグがあっても、デザインがちゃんとできてなくても、いったん完成させた方が勉強にもなるしモチベーションも持つ!と私は思っています。人によっては見た目がちゃんとしないとモチベ維持できないという方もいらっしゃるかもしれません。そのへんは各自、自分のやる気と相談しながら進めていきましょう

やるぞー!

次からは実際に私の作りたいアプリケーションで例を示しながら各工程について記事にしていこうと思います。

自分のためにゆるーくやっていきます。それがもしどなたかのためになれば幸せです。

是非見てみてね!