Zenn
🦒

ド入門 Ruby on Rails 備忘録

2020/10/08に公開
Rails
Ruby
Scss
初心者
tech

ド入門 Ruby on Rails 備忘録

この記事は完成していないが公開している。
学習が進んでいくにつれて、本文を追記していく。

私による私のためのRails備忘録

ある日私はSNSを自分の手で作ってみたいという衝動に駆られ、
なんの気なしに流行っていると噂で聞いたRailsを手に取ろうとした。

しかしポンコツである私にはRailsチュートリアルは難度が高く、
入門者に優しいProgateにまずお世話になろうと思った。
これはそんな私のアウトプットであり学習の記録である。

進め方・目的

基本的にProgate課金プランの勉強資料に準じて進めていき、
2週したあとあたりから、Rails チュートリアルに触れていくような流れをイメージしている。

特に期限感などは設けていないのでダラダラと進めていく。
成果物をどうやってお金に変えるかなどは一切考慮していない。
純粋にRailsチュートリアル完遂が目的である。

本記事のターゲット

本文のターゲットは私のようなプログラミングはからっきしだが、
パソコンは少し触ったことがあるという私向けである。
筆者はネットワークインフラエンジニア寄りの学習しか行ってきていない(2018年度CCNA取得程度)。

この駄文から勉強できることはProgateで完全網羅出来るので、Progateをおとなしく課金してやったほうが時間効率が良い、手も動かせる、何よりやった気になれる。

Ruby on Railsとは

Railsの基本理念は「同じことを繰り返さない」

Ruby on Rails（ルビーオンレイルズ）は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller（MVC）アーキテクチャに基づいて構築されている。

実アプリケーションの開発を他のフレームワークより少ないコードで簡単に開発できるよう考慮し設計されている。Railsの公式なパッケージはRubyのライブラリやアプリケーションの流通ルートであるRubyGemsにより配布されている。引用元wiki

同じことはしたくない、楽になるなら一番いい
学習していくことで、短い文で実装を楽にしていけるのだろう
私は凄腕エンジニアとはかけ離れた存在なので補助込での実装が出来るのは嬉しい
あと日本人に人気なので日本語二次ソースが多く見受けられるのが高評価、good押しました。

Rails はMVCアーキテクチャフレームワークである

モデル/ビュー/コントローラは頭文字を取ってMVCアーキテクチャーと呼ばれるもので、アプリケーションをモデル(データを扱う部分)、ビュー(ユーザーに見える結果を作る部分)、コントローラ(ユーザーからの要求を処理し、モデルやビューと連携を行なう)に分割して作りあげるものです。
引用元

MVCアーキテクチャに基づいた設計により、
Railsアプリケーションであるなら誰が触ってもどこに何が設置されているのかわかりやすくなっているところが良いと思った。
ターミナル内一文でベース部分を生成出来るというので、手軽である。

routes.rbがリクエストに対しての次のアクションを決定するという部分が、
ルータがルーティングテーブルからネクストホップを決定するような感覚に似ているところからすこし親近感を感じた。

基本的なアプリケーションの作成方法

開発の最初

ターミナル上で以下コマンドを実施
rails new <アプリケーション名>

上記コマンド実行後、入力したアプリケーション名と同名のフォルダが作成される。
これで生成されたファイル群のなかで基本的に作業していく。

Rails 6.0.0_項3.2~フォルダ構造解説
Rails 6 もっと噛み砕いているやつ

サーバの起動

ターミナル上で以下コマンドを実施
rails server

サーバーを起動した後、ブラウザで「localhost:3000」というURLにアクセスすると、初期画面が表示されるようになります。(Progate本文引用)

top pageの作成

ターミナル上で以下コマンドを実施
rails generate controller <コントローラー名> <アクション名>

rails g controllerと省略できる。
viewsフォルダ配下に"<コントローラー名>/<アクション名>.html.erb"が生成される。
この"<アクション名>.html.erb"はトップページのガワとなる。
見た目を変えたいならここをいじったり、これに関連付けられたCSSをいじったりする必要がある。

これ以降、新規ページ(view)を追加したい場合などは自身で
・ルーティング(/config/routes.rb)　追記
・コントローラ(/app/<コントローラ名>controller.rb)　追記
・ビュー(/views/<アクション名>.html.erb)　新規作成
をする必要がある。

コントローラの作成

ターミナル上で以下コマンドを実施(前項と同一コマンド)
rails generate controller <コントローラー名> <アクション名>

"app/controllers/<コントローラ名>controller.rb"というコントローラのファイルが作成される。
中にはファイルの中に「<アクション名>メソッド」が追加される。
コントローラ内のメソッドを「アクション」と呼ばれる。

同名コントローラを生成しようとしても失敗する。

コントローラ内のアクションは、ブラウザに返すビューをviewsフォルダの中から見つけ出す役割を担っています。具体的には、アクションは、コントローラと同じ名前のビューフォルダから、アクションと同じ名前のHTMLファイルを探してブラウザに返します。(Progate本文引用)

ルーティングについて

ブラウザとコントローラを繋ぐ役割を担うのがルーティングである。
ブラウザからリクエストが発生してから、ルーティング→コントローラ→ビューの順序で処理が行われていく。
"config/routes.rb"内に設定が記述されている。
以下の形でdo文の中に
get "URL" => "<コントローラ名>#<アクション名>"

routes.rbに記述のないページには遷移することができないので、
新規にページを作成した際には、ここに追記する必要がある。

SCSSの編集(ページデザイン)

SCSSファイルは"app/assets/stylesheets"に格納する。
※SCSSとは
rails generate controller <コントローラー名> <アクション名>

上記コマンドを使用した際に
"app/assets/stylesheets/<コントローラー名>.scss"といった形で生成される。

Railsでは、「stylesheets」フォルダの中に保存されているCSSファイルに
コードを書けば、すべてのビューにCSSが適用されます。(Progate本文引用)

画像の表示

画像を(/public)に配置することで、
画像名を指定するだけでアプリケーション上に呼び出すことが出来る。
画像名の前にはきちんと「/(スラッシュ)」を入れる。

background-image: url("/画像名");
<img src="/画像名" >

デフォルトページを変更する(URL変更)

「localhost:3000」にアクセスすると、
「Yay! You're on Rails!」のページが表示されてしまうのを
"config/routes.rb"内の記述で変更する。

get "/" => "コントローラ名#アクション名"

viewファイル内でのRubyコード記述

.erb の形式のファイルでは、
<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することが出来る。

出力の際には<%= %>内に記述する。

「erb」とは「Embedded Ruby（埋め込みRuby）」の略である。

eachを使った表示

①それぞれの変数を1つの配列にまとめる
②配列の中身を each 文で1つずつ取り出す

ビューファイル内
<% <変数> = [<要素1>,<要素2>] %>
#変数に配列を入れる

<%
   <変数>.each do |<格納先変数>|
%>
#each doで配列の要素の数だけ繰り返し処理

<%= <格納先変数> %>
#格納先変数に入っている配列の要素を表示
#<%=%>でページ上に表示

<% end %>

Rails ではビューではなく、アクションで定義することが一般的である。
ここからはコントローラのアクション内で変数を定義してみよう。

アクションでの変数定義

Railsではアクションで一般的に変数定義を行う。

コントローラファイル内

 def index
  @<変数> = [
  "testてすとテスト",
  "テストてすとtest"
  ]
  
  #変数名を@から始めることで、ビューファイルからでも呼び出せるようになる。
  #ビュー用の変数は@を頭につけることを意識する。
  
 end

データベース作成

手始め

マイグレーションファイルと呼ぶデータベースに指示をするためのファイルを作成する。

例として、postsテーブルを作成するマイグレーションファイルは以下のコマンドで作成できる。

ターミナル上にて
$ rails g model Post content:text

#作成するテーブル名が複数形なのに対して、マイグレーションファイルは単数形にする。
#コマンド後列のカラム名:データ型部分で、どういったデータが入るのかをきめる。

上記コマンドが実行されると、db/migrateフォルダ配下にマイグレーションファイルが作成される。

データベースの変更反映

下記コマンドを実行することで、マイグレーションファイルに記述されている内容にそったテーブルを作成反映してくれる。
Railsでは、未反映のマイグレーションファイルが存在すると、ページにアクセスした際に、マイグレーションエラーが発生する。
マイグレーションファイルを作成したあとは必ず下記コマンドを実行する。

この際にマイグレーションファイル作成時に生成指定したカラム：データ型以外にデフォルトでid,create_at,update_atの３つのカラムが自動生成される。

ターミナル上で

$ rails db:migrate

モデルの確認

Railsで言うモデルとはテーブルを操作するための特殊なクラスである。

データベース作成の手始めに行ったマイグレーションファイル作成コマンドの実行タイミングで、app/modelsフォルダ配下に作成される。

ApplicationRecordクラスを継承したクラスをモデルと呼ぶ。

ターミナル上にて

$ rails g model Post content:text
#これの実行時にApplicationRecordクラスを継承するPostクラスが定義されたファイルが#生成される。

環境構築で躓いたところ

source.listのなかデフォルトの設定からを日本から近いミラーへ飛ぶように設定した

https://qiita.com/kujiraza/items/c02908e0aed1001b2470

無いやつを追っかけながら入れていった↓

https://qiita.com/kakukakupori/items/c02b7f51a2b316cc67e3

Webpackerなるものがないと言われたのでインストール

rails webpacker:install

bundle installが失敗する

Gemfile のpermissonが000だったのを755に変更した。

---------- 1 user user 1974 10月 21 16:21 Gemfile

下記コマンドを実行
~/enviroment/hello_app$ sudo chmod 755 Gemfile

次はbundle updateが通らない

user@@@@@:~/enviroment/hello_app$ bundle update
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching source index from https://rubygems.org/

Retrying fetcher due to error (2/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/

Retrying fetcher due to error (3/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/

Retrying fetcher due to error (4/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/

Discussion