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