その4から続きます。

21：リファクタリング

app/views/questions/new.html.erbとapp/views/questions/edit.html.erb
の大部分が同じ記述なのでDry原則を破っている
ではどうするか？共通化します。
app/questionsに新規ファイル
_form.html.erbを作成してカットペースト↓
※共通化して呼び出すファイルには_をつけるのがルール

<%= form_with model: @question, local: true do |f| %>
  <div class="form-group">
    <label>Name</label>
<!--テキストフィールドをつける-->
     <%= f.text_field :name, class: "form-control" %>
  </div>
<!--テキストフィールドをつける-->
  <div class="form-group">
    <label>Title</label>
     <%= f.text_field :title, class: "form-control" %>
  </div>
<!--テキストフィールドをつける-->
  <div class="form-group">
    <label>Content</label>
     <%= f.text_area :content, class: "form-control" %>
  </div>
<!--saveボタンを付ける-->
  <div class="text-center">
    <%= f.submit "Save", class: "btn btn-primary" %>
  </div>
<% end %>

app/views/questions/new.html.erbを↓のように編集します。

<div>
  <div class="col-md-4 offset-md-4">
<!--中央に寄せる設定-->
    <h2 class="text-center">New question</h2>
   <%= render 'form' %>
  </div>
 </div>

app/views/questions/_form.html.erb以下の記述にします。

<form action="/questions" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="aAhSPGiLYkFNeq6FyqkvGFyLFpLooxLsNyIdR4+/e+zq8FgqYyMlmNlWgruyu34AHg22g315u/gbC3GMDw63bw==" />
  <div class="form-group">
    <label>Name</label>
<!--テキストフィールドをつける-->
    <input class="form-control" type="text" name="question[name]" id="question_name" />
  </div>
<!--テキストフィールドをつける-->
  <div class="form-group">
    <label>Title</label>
     <input class="form-control" type="text" name="question[title]" id="question_title" />
  </div>
<!--テキストフィールドをつける-->
  <div class="form-group">
    <label>Content</label>
     <textarea class="form-control" name="question[content]" id="question_content">
     </textarea>
  </div>
<!--saveボタンを付ける-->
  <div class="text-center">
    <input type="submit" name="commit" value="Save" class="btn btn-primary" data-disable-with="Save" />
  </div>
</form>

続きを読む →

その３から続きます

11：新規質問機能の投稿View

app/views/questions/new.html.erbを↓のように記述

<div class="col-md-4 offset-md-4">
  <!--中央に寄せる設定-->
    <h2 class="text-center">New question</h2>
  <%= form_with model: @question, local: true do |f| %>
    <div class="form-group">
      <label>Name</label>
  <!--テキストフィールドをつける-->
  <%= f.text_field :name, class: "form-control" %>
    </div>
  <!--テキストフィールドをつける-->
    <div class="form-group">
      <label>Title</label>
   <%= f.text_field :title, class: "form-control" %>
    </div>
  <!--テキストフィールドをつける-->
   <div class="form-group">
     <label>Content</label>
   <%= f.text_field :Content, class: "form-control" %>
     </div>
  <!--saveボタンを付ける-->
     <div class="text-center">
   <%= f.submit "Save", class: "btn btn-primary" %>
     </div>
   <% end %>
</div>

form_with,text_field,submitなどのメソッドはフォームヘルパーと呼ばれフォームに関するhtmlを自動的に生成してくれます。

form_with,はrails5.1になってからでてform_forなどは非推奨になったので移行しましょう。
model: @question
コントローラから渡されたクエスチョンモデルのモデルオブジェクトを設定
local: true　非同期通信を使ったフォームを無効にしている

次に動作確認をしたいのでコントローラからビューに
Questionモデルのインスタンスを渡す機能の実装

app/controllers/questions_controller.rbに↓のように記述

def new
  @question = Question.new
end

Questionモデルの新規インスタンスを生成して@questionに代入して
app/views/questions/new.html.erbに渡してform_withで利用しています。

form_withタグによって↓生成された
<form action=”/questions” accept-charset=”UTF-8″ method=”post”>
慣れるまではフォームヘルパーによってどんなHTMLタグができるか確認しましょう！
続きを読む →

その2から続く

ミニQ&Aアプリを作ろう！

開発環境はCloud9で行う

0:ソフトウェアのアップデートをします。

sudo yum update

Rubyのバージョン確認

rvm -v
rvm install 2.5.1
rvm install 2.6.4
rvm list

ruby2.5.1を使う

rvm use 2.5.1

バージョン確認

ruby -v

2.5.1をデフォで使いたいとき

rvm --default use 2.5.1

rvm list

1：まず新規プロジェクトの作成

cd ~/environment/rails_projects
ls
rails -v
ruby -v
rails _5.2.1_ new qa

エラーを回避するためにgemfileのsqlite3の部分を追加↓

gem 'sqlite3', '~> 1.3.6'

# ~/environment/rails_projects/helloにいることを確認しsqlite3をアプデ

bundle update

2：データベースを作成する

rails db:create

レイルズサーバー起動
rails s

localhostで↓のようなものが確認できればOK

続きを読む →

1から続く

RailsでHelloWorldを表示させよう！

Rubyのバージョンチェックをする
ruby -v

#Rubyをインストールする
rvm install 2.5.1
rvm install 2.6.4
rvm list

#任意のバージョンを選ぶときは(今回は2.5.1を使う)

rvm use 2.5.1

#バージョンを確認
ruby -v

#2.5.1をデフォで使いたいとき

rvm --default use 2.5.1

#Railsがインストールされているか確認
rails -v
#Gemの確認
gem -v
#Railsをインストール
gem install rails --version="5.2.3" --no-document

バージョンチェック
rails -v

ディレクトリを作成する(rails_projects)

#まずは移動する
cd environment/

mkdir rails_projects

cd rails_projects/

#rails newで作成
rails _5.2.1_ new hello
cd hello/

データベースとしてパブリックドメインの軽量なものをインストール(sqlite)

#バージョン確認
sqlite3 --version

Gemfileに以下の記述を追加

'sqlite3', '~> 1.3.6'

Gemをインストールする

bundle install
bundle update

データベースを作成する

rails db:create

pumaというwebサーバが含まれている。

railsサーバを起動する。

rails s

このような表示がされているのを確認しよう

続きを読む →

①Ruby on Railsとは？

Rubyで書かれたオープンソースのウェブアプリケーションフレームワーク

フレームワークにはウェブアプリケーション開発に必要な基本的な機能が予め用意されている。

ある程度コードを書く際のルールが決まっている。

幅広いライブラリがGemと言う形式で公開されている。

主に使われているサイト

Airbnb：民泊サイト

GitHub：ソースコードバージョン管理

Square：決済

クックパッド：料理のレシピ共有サイト

freee:　会計ソフト

追記：他にも無数にあります

②Railsの基本理念

DRY原則(同じことを繰り返さない)

Don’t Repeat Yourself:DRY

設定より規約が優先される

クラスやデータベースの名付け方などのルールを守る

③MVCアーキテクチャーとは

M:Model(主にデータベース関連を担当する)

データの管理やビジネスロジックでデータの処理を行うコードを記載する。

ECサイトの例で話すと

商品が1つ売れたら在庫を1つ減らして、

購入履歴を保存するといったような処理はモデルに書くことになる。

静的なウェブページを表示するようなケースでは、モデルは必ずしも必要ではない。

静的なウェブページとは何度見ても誰が見ても同じコンテンツを返すだけの動きのないウェブページのこと。

動的なページはその逆で、ユーザーごとに見せるページが変わったりする。

例：Youtubeなど

V:View(主にHTMLを担当)

主にHTMLを作成する部分を担当する。

Webアプリケーションなので単純なHTMLではなく、

コントローラーを経由して渡されたデータを、HTMLに埋め込んでユーザのリクエストに応じて表示内容を変えて返すことになる。

RailsではデフォルトでERBと言う形式のテンプレートを使ってHTMLを書いていく。

このテンプレートを使うことによってHTMLの中にRubyのコードを埋め込むことができる。

追記:<%%><%=%>などを埋め込めるよ！

C:Controller(モデルとビューの仲介役)

ユーザからのリクエストを受けモデルとビューの仲介役をし、

最終的にユーザにページのコンテンツを返す役割を担っている。

追記：モデルからデータをもらいビューに使うよ！

２に続く