Help us understand the problem. What is going on with this article?

RailsでWebアプリケーション開発【入門】

はじめに

Railsを使ってWebアプリケーションを作成しようとしている人向けです。
環境構築や実装方法より、考え方や手順をざっくり記載しています。

アプリケーション開発の注意点

1. いきなり開発しない

経験が多くないエンジニアはすぐ開発しがちですよね、私も最初はそうでした。
まずはアーキテクチャを考えましょう。
以下のようなことを考えてみましょう。

  • どんなフレームワークやライブラリを採用する?
  • version管理は何でするの?
  • デプロイするサーバーは?
  • なんのデータベース使うの?
  • どんなGemが使えそう?

などなど

2. しっかり設計する

画面設計やデータモデル設計をしておくと開発が効率的
簡単にまとめると

  • 要件をしっかり確認する
  • 画面のイメージを考える
  • データモデルを設計する
  • ER図を書く
  • 画面の詳細を設計する
  • 機能の詳細を設計する

などなど

3. 事前に効率的な開発方法をいろいろ調べる

railsには様々な便利機能があります。
例えば

  • DeviceというGemを利用するとすぐに認証機能が作れたりします。
  • scaffoldというMVCを簡単に生成してくれる機能なんかもあります。
  • hamlを使うとViewの開発効率があがります。

などなど

4. WBSを作ろう

WBSとは(Work Breakdown Structure:作業分解構成図)
納期が決まっている場合はどの作業にどのくらいの時間が割けるのかをよく考えましょう。
闇雲に目の前の壁を突破しようとするより、事前にスケジュールをしっかり練るほうが良いです。
ちゃんと全体のスケジュールを理解し、作業時間を見積もることで無理なく開発することができます。

以降では「実際どのようにやるんだい?」ってとこを解説します。

設計

まずは設計します。開発は最後!

1. 要件をしっかり確認しよう

要件定義という言葉があるのですが、これはそんなに難しく考えずに要はシステムを作って欲しい人がどんなものを求めているのかをしっかり確認して認識をすり合わせるということです。

この要件定義がしっかりできていないと、後で「思ってたのと違うので作り直してほしい」といった出戻りがめちゃくちゃ増えます。

参考:要件定義について

2. サイトマップを考えてみよう

サイトマップ.png

サイトマップを作成する効果

  • 必要なページが洗い出せる
  • 画面間のつながりを視覚化できる

参考:サイトマップとワイヤーフレーム」自分のブログをデザインするまでの流れ

3. ワイヤーフレームを作ってみよう

ワイヤーフレーム.png
ワイヤーフレームイメージ

ワイヤーフレームを作成する効果

  • 頭の中にあることを形に出来る
  • 簡単に作成できる
  • 固まったデザインを見せるより、周りの人が意見を出しやすい
  • チーム内・クライアントとの共有
  • 仕様説明を記載

以上のような理由から開発効率があがります。

私の会社ではXDのようなプロトタイピングツールを積極的に採用しています。

XD公式
非常に参考になる動画

4. デザインをざっくり考えてみよう

ざっくりとしたデザインを考えてみましょう。
image.png

5. データモデルを設計しよう

参考(引用元):開発現場ですぐに通用する“今どきの”モデリングテクニック

ここが大事!
RDB(リレーショナルデータベース)を扱う時はデータモデリングは必須です。

データモデル設計は以下の効果があります

  • 必要なデータが洗い出せる
  • データのつながりが視覚化できる
  • チームの認識合わせ
  • 開発時のコスト削減

私はいつも画面設計したら、登場人物(データモデル)を洗い出します。
その際に登場人物の関係性もざっくり考えましょう。
論理モデルがある程度固まったら、ER図を作成しましょう。
私はだいたいMySQL Workbenchを使っています。

論理モデルイメージ

image.png

物理モデルイメージ

image.png

6. 機能設計をしよう

簡単にいうとコントローラの設計です。

image.png

例えば上の画面イメージのSign inボタンを押すとどんなコントローラーが呼び出されて、どんなデータがやりとりされるんだろうということを開発をする前に、考えて視覚化します。

上の例でいうと

  1. UserControllerが呼び出される
  2. 入力されたEmailとパスワードがUserテーブルに存在するかチェックする
  3. 存在すればTopページへ遷移、存在しなければSign upへ遷移

するといった処理の流れが予想できます。

インプットはEmailアドレスとパスワード
アウトプットは次の画面

という感じに扱うデータやViewの流れが見えてきます。
処理内容を事前に固めておくことで開発時に「なにすればいいんだっけ?」ということにならなくなります。

実装

設計で色々考えたはずなのであとは実装するだけです。

1. 準備

バージョン管理とても大事です。
必須です。
私はよくgitでバージョン管理しています。
バージョン管理なしで実装するのは命綱無しの綱渡りと一緒です。

効果

  • やり直せる
  • 履歴を確認できる
  • プロジェクト管理ができる
  • チーム開発が効率的になる

参考:Gitの基礎

2. ひな形を作る

scaffoldは簡単に言うと、雛形をサクッとつくってくれます。
一瞬で必要最低限のものを揃えてくれます。
詳しくは以下、またはググりましょう。

参考:覚えておくと超便利!Ruby on Railsのscaffoldの使い方【初心者向け】

3. ある程度viewを整える

scaffoldは必要最低限なのでデザイン性が皆無です。
英語オンリーです。

多言語化については以下
参考:i18nについて

例えばBootstrapを適用してそれっぽくするだけでも違います。
詳しくは以下

参考:Railsアプリで Bootstrap 4 を利用する

4. modelに必要なメソッドを作成する

railsは基本的なcrudはサポートしてるので簡単に以下のようなことができます。

User.find(1)
=> SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1

例えば管理者か判定したいなんて場合はどのようにしたら良いでしょう?

User.isAdmin(1)
=> SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 AND admin_flg = 1

例えば上記のように使えたらいいですよね。
その場合はmodelisAdminメソッドを実装してあげればいいんです。

user.rb
class User < ApplicationRecord

  def self.isAdmin? user_id
    return User.where('user_id = ? AND admin_flg = 1', user_id)
  end

end

みたいな感じでみんながよく使う機能は簡単に使えるようにModelにまとめておきましょう。

5. helperを駆使する

すごく便利な機能です。
あらかじめよく使う機能はhelperにまとめておくことで開発効率が段違いです。

使い方は以下を参考に

参考:Rails入門】helperの使い方まとめ

6. コントローラーを実装する

あとは事前に考えた設計通りにデータを操作したり、画面遷移を設定するだけ

7. Viewを綺麗にする

cssをガンガン適用しましょう!

 最後に

簡単に考え方や方法をまとめました。
設計や実装はこれが正しいやり方だというルールはありません。
ただ大切なことは、先人たちがいろいろ苦労して編み出した効率的な方法はたくさんあるということです。
それらを有効活用することで同じ轍は踏まないようにしていきましょう。
以上です。読んでいただきありがとうございました。

enzen
元CGクリエイター、元デザイナー、元AD、元バーテン、元営業、で今はフロントエンジニアで、サーバーサイドエンジニアでインフラやAIもちょっとできるなにかです。
http://enzen.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away