建築系チカトサBlog

建築、お笑い、書評、プログラミング、投資などについて書いていきます。

【Ruby on Railsアウトプット】アプリの作り方

どうもこんにちは。

 

建築系投資家のチカトサ(@5atochika)です。

 

 

今日は(自分用へのメモも含めて)Ruby on Rails を使ったアプリ開発の手順をザックリと書いていきたいと思います。

テックキャンプを卒業して既に3か月が経過しました。

プログラミング技術は常に手を動かしていないと忘れてしまいます。

 

細かいコードやメソッドを一つ一つ覚えておく必要はないのですが、大まかな流れや重要なポイントは覚えておいた方が良いですね。

 

 

 

アプリの開発手順

今回はRuby on Railsを使った開発手順を書いていきます。

ただGemDeviceは使わない、最小限のアプリケーションの開発を大まかにざっくりと書いていきます。

 

大がかりなアプリケーションは色んな肉付けがあるだけなので、基本の流れを理解しておくことが重要ですね。

 

 

アプリケーションの準備

アプリケーションを新規作成

まずはターミナル上で、

f:id:sat0chika:20201116152443p:plain

を行うことで、必要なファイルを生成してくれます。

 

アプリケーション名の後に、 -d mysqlといったオプションをつけることで、使用するデータベースを指定することができます。

 

生成されたファイルを編集していくことでアプリを開発します。

 

データベースを作成

次にデータベースを作成します。

データベースの位置づけはMVCの概念において、とても重要な役割を果たしているのですが、今回はそこの説明は省きます。

 

f:id:sat0chika:20201116152550p:plain

というコマンドで、データベースが作成できます。

 

この段階で、Rails sを実行して、ブラウザでlocalhost:3000にアクセスすると、以下のようなデフォルト画面が表示されます。

 

フロントサイドの実装

アプリケーションの準備ができたら、まずはフロントサイドの実装に入るのが吉です。

と言うのも、見た目に出てくる部分が出来上がってくると非常にモチベーションが上がりますね。

 

プログラミング学習や開発において、モチベーションを高く維持することはとても大事です。

実装をする順番に決まりはありませんが、フロントサイドから一気に進めましょう♪

 

ビュー編集

今回はcssは使わずにHTMLだけで実装していきます。

まずはディレクトリ名とファイル名に着目しましょう。

 

この後サーバーサイドの実装に入りますが、その際にpostsコントローラーを作成します。

そのため、postsコントローラーindexアクションに対応するビューになります。

 

なので、postsディレクトindex.html.erbというファイル名で作成します。

app/views/posts/index.html.erb

f:id:sat0chika:20201116204908p:plain

と入力します。

 

 

サーバーサイドの実装

サーバーサイドで実装する部分は大きく分けて、

  1. ルーティング
  2. コントローラー
  3. モデル
  4. マイグレーション

とあります。

 

自動生成されているファイルはルーティングのみであり、コントローラーとモデルは随時生成して編集していくカタチになります。

 

ルーティング編集

ルーティングとは簡単に言うと、このURLに来たらこの処理をして下さい、と言うURLと処理を紐づける役割を持ちます。

 

config内にあるroutes.rbというファイルを以下のように編集します。

config/routes.rb

f:id:sat0chika:20201116154326p:plain

ここでいくつかポイントを解説します。

 

  • getはHTTPメソッドを表しています。
  • 'posts'とすることでhttp://localhost:3000/postsへアクセスしたときのルーティングを設定できます。
  • "posts#index"は、postsコントローラーのindexアクションという意味です。
  • すなわち、http://localhost:3000/postsにアクセスすると、postsコントローラーのindexアクションへ導かれます。

 

コントローラー生成

次にコントローラーを作成して編集していきます。

f:id:sat0chika:20201116154812p:plain

を実行して、アプリケーションに必要なファイルを生成します。

gは英語で「生成する」を意味するgenerateの略です。

 

先ほどルーティングを編集した際に、postsコントローラーと指定したので今回は、

rails g posts controllerと実行します。

 

そうすると以下のように、app/controllers/posts_controller.rbが生成されています。

f:id:sat0chika:20201116155146p:plain

 

ちなみに名前等を間違えてコントローラーを生成してしまった際には、

f:id:sat0chika:20201116155309p:plain

を実行することでファイルを削除することができます。

dは英語で「破壊する」を意味するdestroyの略です。

くれぐれも右クリックでのファイル削除はしないで下さい!

 

postsコントローラーを以下のように編集します。

app/controllers/posts_controller.rb

f:id:sat0chika:20201116230938p:plain

 

モデル生成

次にモデルを作成して編集していきます。

モデルとは、データベースとのやりとりを行うクラスのことで、MVCのMにあたります。

 

ターミナルで以下を実行します。

f:id:sat0chika:20201116170247p:plain

モデルの命名規則は、単数形を使用することです。

コントローラーは複数形なので、混同しないようにしましょう。

rails gのggenerateの略で、生成するの意味があります。

 

今回はPostモデルを作成するため、rails g model postと入力します。

 

マイグレーション

続いてマイグレーションを実行します。

マイグレーションとは、データベースにおけるテーブルの設計図・仕様書のことです。

 

rails g modelコマンドでモデルを作成したとき、db/migrate/ディレクトリに20XXXXXXXXXXXX_create_posts.rbというファイルが生成されています。

f:id:sat0chika:20201116183959p:plain

このマイグレーションファイルの情報がデータベースのテーブルとして反映されます。

マイグレーション

 

今回は以下のように編集します。

db/migrate/20xxxxxx_create_posts.rb

f:id:sat0chika:20201116185030p:plain

マイグレーションファイルに、必要なカラム名の記述をします。

  • t.textでtext型のカラムを生成します。
  • 続けて:memoとすることで、memoという名前のカラムを生成します。

 

マイグレーションファイルを編集したらターミナル上で、

f:id:sat0chika:20201116185431p:plain

と実行します。

これによって先ほどの図のように、テーブルに情報が反映されます。

一度マイグレーションを実行すると、rollbackを実行しない限り編集することができません。

 

 

ここまでの成果物

これまで、ビューファイルを作成し、ルーティングを編集し、コントローラーとモデルを生成し、データベースを作成してきました。

 

ここでlocalhost:3000/posts/とブラウザで入力してみると、以下のような画面になるはずです。

https://tech-master.s3.amazonaws.com/uploads/curriculums//6ff5af4de1d1d21d0087b2a3d60abd37.png

 

MVCの流れはまた次回書きますが、ここで起こっていることは、ルーティングからコントローラーを経由して、ビューファイルを出力しているのです。

 

 

ここまで来て、もうお気づきかもしれませんが、モデルとデータベースは使っていません。笑

 

 

まとめ

今回は、「【アプリの作り方】Ruby on Railsアウトプット」について書いてきましたが、いかがでしたでしょうか。

ものすごく中途半端なところまでしか出来ませんでしたね笑”

 

ですがアプリ開発はその大半が、ビューファイル、ルーティング、コントローラー、モデル、データベースの編集なのです。

 

Webアプリケーションはとても奥が深く、難しく、大変なことですが、多くのアプリケーションは、これらに肉付けされた要素や機能があるだけなので、そこまでビビる必要はないですね。

 

というわけで、今回の記事は以上です。

 

ぜひ、また見に来てください♪

 

 

それでは今日はこの辺で^^