「Ruby on Railsでアプリを作ってみたいけど、何から始めたらいいかわからない…」
という方に向けて、Railsアプリを自分のパソコンで作り、インターネットに公開するまでの手順を5ステップで解説します。
全体像を掴んでおくことはとても大切ですのでぜひイメージをつけていってください。
- Railsアプリを作るために必要な準備
- 設計から実装、公開（デプロイ）までの流れ
- 初心者がつまずきやすいポイントの回避方法
ステップ①：エディターを用意する(VSCode)
Railsで開発するには、まずコードを書くエディターが必要です。
おすすめは「Visual Studio Code（VSCode）」です。
下記にVSCodeのインストール手順をまとめてありますので、初めてVSCodeをインストールされる方は参考にしてください。
ステップ②：アプリの設計をする（README・画面遷移図・ER図）
いきなりコードを書かず、まずはアプリの設計をしましょう。
README・画面遷移図・ER図と呼ばれる3つの設計図を作成します。
README：アプリの概要説明書
アプリの概要をまとめた説明書
- 何を作るのか？（例：日記投稿アプリ）
- 誰がどう使う？（例：ユーザー登録 → 日記を書く → 編集・削除）
- 使用技術（例 : Ruby, Rails, PostgreSQLなど）
- 開発環境（例 : Windows + WSL2 + Ubuntu）
画面遷移図：ユーザーの流れを視覚化
どの画面からどの画面へ遷移するかを表した図。（例：トップページ → 投稿一覧 → 投稿詳細 → 編集 ）
アプリの操作の流れを整理し、使いやすいインターフェースにするために作ります。
draw.ioやFigmaといったデザインツール
ER図（Entity-Relationship Diagram）：データの設計図
アプリに出てくるデータとその関係を表した図。
データベースの設計図となるもの。
- ユーザー(名前・メールアドレス・パスワード)
- 日記(タイトル・本文・投稿日)
- 関係 : 1人のユーザーは複数の日記を持つ（1対多）
draw.ioやFigmaといったデザインツール
私は画面遷移図はFigma、ER図はdraw.ioを使って作成することが多いです。
ステップ③：開発環境を構築する（WSL + Ubuntu）
Windowsの中にLinux(Ubuntu)を導入する
Webアプリケーションが動くサーバーの多くは、Linux上で動いており、Windowsで開発を進めると一部のプログラムがLinux環境と異なる動きをしたり、本番環境（実際にインターネットに公開された環境）で予期せぬトラブルが発生したりすることがあるためです。
具体的にはWindowsパソコンにWSL（Windows Subsystem for Linux）というツールを導入し、その中にUbuntu環境を構築します。
具体的な手順をまとめたチュートリアル記事も用意しておりますのでぜひ参考にしてください。
ステップ④：実装
アプリのひな型をつくる
まずはRailsコマンドを使ってアプリのひな型を作ります。
例 : rails new testapp -d postgresql
testappというrailsアプリケーションをpostgresqlというデータベースと組み合わせて作ります
という意味のコマンドです。
変更履歴を記録しながら開発をすすめる（Git）
アプリのひな型を作ったら実装を行っていくのですが、開発を進めていく中で、プログラムは何度も変更されます。
「しまった。元にもどしたい」というときのためにGitというバージョン管理ツールを使って、ファイルの変更履歴を細かく記録しながら開発をすすめていきます。
「間違えてコードを消してしまった！」という場合でも、簡単に元の状態に戻すことができる
動作確認をしながら進める
※最重要
1つ機能を作ったら必ず動作確認をしましょう。あとからまとめて確認すると不具合が起きた時、原因が追えなくなります。
ドラマや動画などで天才プログラマーが一気に実装していくシーンがあったりしますが、あんなことする人ほんとにいるのかなと思っています。それらがきっかけでプログラミングにあこがれて今があるので個人的には感謝していますが一気に実装する方法はおすすめしません。
ステップ④：デプロイ
デプロイについて
アプリが完成したら、インターネット上に公開します。(この作業をデプロイといいます)
実際には環境構築後、最低限の機能を実装してデプロイ。また少し実装してデプロイといった手順を取ることが多いですがここではイメージをつけてもらうため実装完了後にデプロイします。
少しずつデプロイする理由は実装と同じく細かく動作確認することで、不具合が出た際の原因を特定しやすくするためです。
デプロイの手順
例 : render.comにデプロイする
- GitHubにアプリをアップロード
- render.comにサインアップ
- GitHubと連携し、デプロイ設定
- アプリが自動的に公開される
インターネット上でプログラムのコードを保管・管理・共有するためのプラットフォーム
ローカル(自分のパソコン)で作成したコードをここに保管することができます。
アプリケーションをデプロイするためのサービス
作ったアプリケーションをGitHubにアップロードする
GitHubにアップロードしたアプリケーションとrender.comを紐づけるとデプロイできる
というイメージです。
デプロイのチュートリアル記事も用意しておりますのでぜひ参考にしてください。
まとめ：Webアプリ開発の流れ
- VSCodeなど開発に必要なエディターを用意する
- README・画面遷移図・ER図を作成する(設計)
- 開発環境を作る(WSL + Linuxなど)
- Gitで細かくバージョン管理しながら実装する
- GitHubとrender.comなどのデプロイできるサービスを使ってアプリケーションを公開する
最後までお読みいただきありがとうございました。
簡単なアプリを実際に作成する記事も作成しましたので興味のある方はぜひ実際に試して力をつけていってください。
それではお互い頑張りましょうね！
