「Ruby on Railsでアプリを作ってみたいけど、何から始めたらいいかわからない…」
という方に向けて、Railsアプリを作成する時の手順を5ステップで解説します。
全体像を掴んでおくことはとても大切ですのでわからなくても読み進めてぜひイメージをつけていってください。
- Railsアプリ開発に必要なツールとサービス： VSCodeと仮想化技術
- Railsアプリ開発の前に作成する設計書： 「README」「画面遷移図」「ER図」
- Railsアプリの実装・公開に必要なツールとサービス： 「Git」「GitHub」「PaaS」
を初心者向けにわかりやすく解説しております。
ステップ①：エディターを用意する(VSCode)
RailsでWebアプリを開発するには、コードを書くエディターが必要です。
なんでもいいのですが初心者の方には操作がわかりやすく、たくさんのプログラミング言語に対応している「VSCode（Visual Studio Code）」をおすすめします。
VSCodeをインストールして日本語表示する手順をまとめた記事を用意しておりますので、はじめてVSCodeをインストールされる方は参考にしてください。
ステップ②：Railsアプリの設計をする（README・画面遷移図・ER図）
README：アプリの仕様書
READMEとは
簡単に言うと「誰のためにどんなアプリをどうやって作るのか」をまとめた書類です。
READMEに記録する内容
READMEには主に以下のことを記録します。
- 作るもの（例：日記投稿アプリ）
- 想定ユーザー（例：日記を他者と共有したい人）
- ユーザーの導線 (ユーザー登録 → 日記を書く → 編集・削除)
- 使用技術（例 : Ruby, Rails, PostgreSQLなど）
- 開発環境（例 : Windows + WSL2 + Ubuntu）
画面遷移図：ユーザーが操作する流れを視覚化した設計資料
画面遷移図とは
簡単に言うと「ユーザーがどのページから来て、どのページに移動するか」を表した図です。
画面遷移図に記録する内容
ユーザーの導線を図で表現します。
例 ) 日記投稿アプリの場合
トップページからきたユーザーが投稿ボタンを押して投稿ページに来て投稿する。
その後、編集ページで自身の投稿した日記を再編集する。
といったユーザーの導線を図で表現します。
ER図（Entity-Relationship Diagram）：データの設計図
ER図とは
簡単に言うとデータ同士の関係を表した図です。
ER図に記録する内容
例 ) 日記投稿アプリの場合
ユーザー(user)はユーザー登録の際に
- ID
- 名前
- メールアドレス
- パスワード
という情報が組み込まれます。
そしてユーザーが日記を投稿したした時、投稿された日記(post)には
- ID
- タイトル
- 本文
- 誰が日記を投稿したか(user_id)
という情報が組み込まれます。
「私はユーザーであり、自分のIDを持っています。私が投稿した日記には、『これは私の投稿ですよ』という印として、私のユーザーID（user_id）がセットで書き込まれます。 このIDの受け渡しによって、バラバラなデータが『誰の投稿か』を判別できるようになる。その繋がりを図にしたのがER図です。」
ステップ③：開発環境を構築する（WSL + Ubuntu）
Windowsの中にLinux(Ubuntu)を導入する
どうしてLinuxを導入するの？Windowsじゃだめなの？
Webアプリケーションが動くサーバーの多くは、Linux上で動いており、Windowsで開発を進めると一部のプログラムがLinux環境と異なる動きをしたり、本番環境（実際にインターネットに公開された環境）で予期せぬトラブルが発生したりすることがあるためです。
Windowsの中にLinux(Ubuntu)を導入する手順をまとめた記事も用意しておりますので実際に環境構築に挑戦する時はぜひ参考にしてください。
ステップ④：Railsアプリを生み出し実装する
最初にRailsアプリを生み出すコマンドを入力する
まずはターミナルで以下のようなRailsアプリを生み出すコマンドを打ち込みRailsアプリのひな型を作ります。
例 : rails new testapp -d postgresql
testappという「Railsアプリケーションをpostgresqlというデータベースと組み合わせて作ります」
という意味のコマンドです。
※PostgreSQLは、データを保存しておくための「倉庫（データベース）」の一種です。
Railsと相性が良いため、今回はこれを選んでいます。
rails new + アプリ名 + データベースは何にするかなどのオプションを入力してRailsアプリのひな型を作ります。
「もう戻せない」を防止する保険をGitでかける
開発を進めていく中で、「さっきまで動いていたのに今は動かない」「原因を探して修正するよりやり直した方が早い」
というシーンが高確率で訪れます。
そんなときのためにGitというバージョン管理ツールを使って、ファイルの変更履歴を細かく記録しながら開発をすすめていきます。
これにより「間違えてコードを消してしまった！」という場合でも、簡単に元の状態に戻してくれる最強の味方です。
開発のコツ | 一つづつ動作を確認をしながら実装する
1つ機能を実装したら動作を確認をしましょう。
複数の機能を実装してから確認するやり方だと不具合が起きた時、原因が追えなくなってしまいます。
私も初心者のころ何度もやらかしました。
ステップ⑤：インターネット上にRailsアプリを公開する
完成したRailsアプリをGitHubやrender.comなどのクラウドサービス(PaaS)と組み合わせたりしてインターネット上に公開します。
まとめ：Webアプリ開発の流れ
- エディターを用意する (VSCodeなど)
- 仕様書・設計図を作成する (README・画面遷移図・ER図)
- 開発環境を作る (WSL + Linuxなど)
- 戻せなくなるリスクを回避する対策を取る (Git)
- インターネット上にアプリを公開する (GitHubとrender.com、Herokuなど)
最後までお読みいただきありがとうございました。
補足 | 本格的にプログラミングを学びたい方へ
「プログラミングスクールを検討しているけど、どこがいいのかわからない」という方には「習得できる技術の総量が圧倒的に多く挫折防止に力を入れている」RUNTEQをおすすめします。
近年はプログラミングスクールが乱立しており、残念ながらカリキュラムの内容と価格が見合っていない（高額すぎる）ところが少なくありません。
私はプログラミングスクールを2社受講・卒業しておりますが上記に理由からRUNTEQをおすすめしております。
RUNTEQをやりきるとこんなものが作れるようになります
私が「空いた時間で手軽に英語学習ができたらいいな」と思い作った英会話練習アプリです。
維持費の関係からシンプルな構成にしてありますがRUNTEQを卒業するころにはこのくらいのアプリは問題なく作れるようになります。
▷ 関連記事はこちらもおすすめ
