「Programming note」カテゴリーアーカイブ

4章Rails風味のRuby

4.1.1 組み込みヘルパー

サンプルアプリケーションのレイアウト

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
        'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
        'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

stylesheet_link_tag (詳細はRails API参照) を使って、application.cssをすべてのメディアタイプで使えるようにしています

4.1.2 カスタムヘルパー

新しく作ったメソッドはカスタムヘルパー

<%= yield(:title) %> | Ruby on Rails Tutorial Sample App

<% provide(:title, "Home") %>
<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

full_titleというヘルパーを作成することにします。

full_titleヘルパーを定義するapp/helpers/application_helper.rb

module ApplicationHelper

  # ページごとの完全なタイトルを返します。
  def full_title(page_title = '')
    base_title = "Ruby on Rails Tutorial Sample App"
    if page_title.empty?
      base_title
    else
      page_title + " | " + base_title
    end
  end
end

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
<title><%= full_title(yield(:title)) %></title>

続きを読む →

Rails-tutorial自分用まとめ(第3章主に演習)

コメントを残す

その2から続く

3章ほぼ静的なページの作成

3.1 セットアップ

サンプルアプリケーションを作る

cd ~/environment
rails _5.1.6_ new sample_app
cd sample_app/

#Gemfileを編集する。
source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest',                 '5.10.3'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.16.2'
  gem 'guard-minitest',           '2.4.4'
end

group :production do
  gem 'pg', '0.20.0'
end

bundle install --without production
bundle update

helloアクションをApplicationコントローラーに追加するapp/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

続きを読む →

Rails-tutorial自分用まとめ(2章主に演習)

コメントを残す

1から続きます

2章：Toyアプリを作ろう！

cd ~/environment
rails _5.1.6_ new toy_app
cd toy_app/

Gemfileを編集していく

source 'https://rubygems.org'

gem 'rails', '5.1.6'
gem 'puma', '3.9.1'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console', '3.5.1'
  gem 'listen', '3.1.5'
  gem 'spring', '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :production do
  gem 'pg', '0.20.0'
end

Gemのインストールをする↓以下をコマンド

bundle update
bundle install --without production
git init
git add -A
git commit -m "Initialize repository"
git remote add origin git@bitbucket.org:<username>/toy_app.git
git push -u origin --all

2.2 Usersリソース

Railsのscaffoldは、rails generateスクリプトにscaffoldコマンドを渡すことで生成されます。

rails generate scaffold User name:string email:string
rails db:migrate

2.2.2 MVCの挙動

続きを読む →

Rails-tutorialの自分用まとめ1(主に演習が基本)

コメントを残す

Rails チュートリアル要点だけまとめようあとは演習について

1章でhelloアプリ
2章でtoyアプリ scaffoldを使う
3章からテスト駆動開発、統合テスト

演習：現時点でのRailsの最新バージョンはいくつですか？

v7.0.1

1.2.2 Railsをインストールする

printf "install: --no-document \nupdate: --no-document\n" >> ~/.gemrc

gem install rails -v 5.1.6

cd
mkdir environment
cd environment/
rails _5.1.6_ new hello_app

(app/assetsディレクトリについて、アセットパイプラインによって、
CSSやJavaScriptファイルなどのアセット (資産)を簡単に編成したりデ
プロイすることができる。

app/          モデル、ビュー、コントローラ、ヘルパーなどを含む主要なアプリケーションコード
app/assets    アプリケーションで使うCSS (Cascading Style Sheet)
、JavaScriptファイル、画像などのアセット
bin/          バイナリ実行可能ファイル
config/       アプリケーションの設定
db/           データベース関連のファイル
doc/          マニュアルなど、アプリケーションのドキュメント
lib/          ライブラリモジュール
lib/assets    ライブラリで使うCSS (Cascading Style Sheet)、JavaScriptファイル、画像などのアセット
log/          アプリケーションのログファイル
public/       エラーペ-ジなど、一般(Webブラウザなど)に直接公開する
データ
bin/rails     コード生成、コンソールの起動、ローカルのWebサーバ
の立ち上げなどで使うRailsスクリプト
test/         アプリケーションのテスト
tmp/          一時ファイル
vendor/       サードパーティのプラグインやgemなど
vendor/assets サードパーティのプラグインやgemで使うCSS、
JavaScriptファイル、画像などのアセット
README.md     アプリケーションの簡単な説明
Rakefile      rakeコマンドで使えるタスク
Gemfile       このアプリケーションに必要なGemの定義ファイル
Gemfile.lock  アプリケーションで使われるgemのバージョンを
確認するためのリスト
config.ru     Rackミドルウェア用の設定ファイル
.gitignore    Gitに取り込みたくないファイルを指定するためのパターン

Gemfileを書き換える表を参照しよう！

Gemfile

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

Gemのインストール

cd hello_app/
bundle install
rails s

HelloWorld!を表示させる

app/controllers/application_controller.rbで以下のような記述

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

config/routes.rbに以下のような記述をする

Rails.application.routes.draw do
  root 'application#hello'
end

続きを読む →

Railsのまとめ8(ToDoリストの作成2)

コメントを残す

7から続きます

11:編集機能を追加する

app/views/tasks/new.html.erbで以下の記述を追加する

<h1>TODOアプリ</h1>
 <ul>
   <% @tasks.each do |task| %>
  <li>
   <%= check_box_tag '', '' %>
   <%= task.title %>
   <%= link_to '[編集]', edit_task_path(task.id)%>
  </li>
 <% end %>
 </ul>

edit_task_pathなのは↓のPrefixでtasks#editと関連しているため

(task.id)は/tasks/:idに埋め込まれる

Prefix    Verb    URI Pattern           Controller#Action
tasks     GET    /tasks(.:format)          tasks#index
          POST   /tasks(.:format)          tasks#create
new_task  GET    /tasks/new(.:format)      tasks#new
edit_task GET    /tasks/:id/edit(.:format) tasks#edit
task      GET    /tasks/:id(.:format)      tasks#show
          PATCH  /tasks/:id(.:format)      tasks#update
          PUT    /tasks/:id(.:format)      tasks#update
          DELETE /tasks/:id(.:format)      tasks#destroy
root      GET    /                         tasks#index

12:編集画面の開発

app/views/tasks/new.html.erbを複製してedit.html.erbを作成し

app/views/tasks/edit.html.erbで以下の記述を追加

<h1>編集画面</h1>
 <%= form_for @task do |f| %>
 <p>
   <%= f.label :title %>
 <br>
   <%= f.text_field :title %>
 </p>
 <p><%= f.submit %></p>
<% end %>

13:編集機能の開発

tasks_controllerに以下の記述を追加
続きを読む →

Railsのまとめ7(ToDoアプリ作成1)

コメントを残す

TODOアプリを作ろう!

0:機能はなにがある？

新規追加機能が付いている

それぞれに編集機能と削除機能がついている

空文字を認めない(ストロングパラメーター)

5文字以上じゃないとタイトルを入力してくださいと言う文字列を返す

チェックボックスを押すと更新しなくてもサーバーと通信をして動的処理を行うAjax機能を付ける

cloud9で開発する

1:環境構築

ターミナルで以下をコマンド

ジェムをインストール(rails)
gem install rails --version="5.1.4" --no-document

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

touch rails_projects

cd /home/ec2-user/environment/rails_projects/

プロジェクトの作成するよ！
rails new todo
cd todo

コントローラー作成するよ！
rails g controller Tasks

2:モデル名「Task」を作成

大文字で単数であることに注目

rails g model Task title:string done:boolean

後ろはデータベースの構造を指定している
タイトルはカラム名でStringはデータの型を指定している、
doneはタスクの完了の状態を保持するカラム、
真偽値をとるためbooleanを型としている。

db/migrate/2021***********.rbにcreate_tasksが生成される

t.boolean :done, default: false #追加

3:DBスキーマ(DBの構造)をDBに反映させる

rake db:migrate

データベースを見るとき

rails db

sqlite> .schema
CREATE TABLE "schema_migrations" ("version" varchar NOT NULL PRIMARY KEY);
CREATE TABLE "ar_internal_metadata" ("key" varchar NOT NULL PRIMARY KEY, "value" varchar, "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);
CREATE TABLE "tasks" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, "title" varchar, "done" boolean DEFAULT 'f', "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);

↑で設定がわかる
.exitでsqliteから出る
続きを読む →

railsのまとめ6(ミニQ&Aサイトを作るその4)

コメントを残す

５から続きます。

31：Postを押した時の保存処理の開発

rails routes #保存する際に必要な情報を見る
POST /questions/:question_id/answers(.:format) answers#create

app/controllers/answers_controller.rb

×だめな例
class AnswersController < ApplicationController

  def create
    @question = Question.find(params[:question_id])
    @answer = Answer.new
     if @answer.save
       redirect_to root_path, notice: 'Success!'
     else
       flash[:alert] = 'Save error!'
     render :show
   end
  end

   def edit
   end
end

viewに値を渡す必要がある変数の場合は、@を付ける。
逆に、viewに値を渡す必要がある変数の場合は@を付けない（付けても動作する）。
状況に応じて、使い分けをしているため、
やりたい処理によって付けたり付けなかったりする。
◯良い例

class AnswersController < ApplicationController

def create
  @question = Question.find(params[:question_id])
  @answer = Answer.new
    if @answer.update(answer_params)
      redirect_to question_path(@question), notice: 'Success!'
    else
      redirect_to question_path(@question), notice: 'Invalid!'
  end
end

  def edit
  end

private
  def answer_params
    params.require(:answer).permit(:content, :name, :question_id)
  end
end

ストロングパラメーター↑を作成しています。

32:Answerモデルのバリデーション

フォームに空で保存するのを禁止します。
app/models/answer.rbに記述↓

class Answer < ApplicationRecord
  belongs_to :question
    validates :content, presence: true
    validates :name, presence: true
end

33：回答一覧表示

app/views/answers/show.html.erbで記述を追加します。
<hr>

<div>
<h3>Answers</h3>
  <table class="table table-striped">
    <% if @question.answers.any? %>
      <thead class="thead-light">
        <tr>
          <td>Answer</td>
          <td>Name</td>
           <td>Menu</td>
        </tr>
      </thead>
   <tbody>
     <% @question.answers.each do |answer| %>
      <tr>
       <td><%= answer.content %></td>
       <td><%= answer.name %></td>
       <td>[edit] [Delete]</td>
      </tr>
    <% end %>
   </tbody>
  <% else %>
   <p>No answer yet.</p>
 <% end %>
</table>
</div>

@question = Question.find
#Quesutionsテーブルからfindしかしていないが

class Question < ApplicationRecord
  has_many :answers

回答一覧が表示されたらOKです。

続きを読む →

railsのまとめ5(ミニQ&Aサイトを作るその3)

コメントを残す

その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>

続きを読む →

railsのまとめ4(ミニQ&Aサイトを作るその2)

コメントを残す

その３から続きます

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タグができるか確認しましょう！
続きを読む →

Railsのまとめ3(ミニQ&Aサイトを作るその１)

コメントを残す

その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	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28

4章Rails風味のRuby

4.1.1 組み込みヘルパー

4.1.2 カスタムヘルパー

3章ほぼ静的なページの作成

3.1 セットアップ

2章：Toyアプリを作ろう！

Gemfileを編集していく

Gemのインストールをする↓以下をコマンド

2.2 Usersリソース

2.2.2 MVCの挙動

Rails チュートリアル 要点だけまとめようあとは演習について

演習：現時点でのRailsの最新バージョンはいくつですか？

1.2.2 Railsをインストールする

Gemfile

HelloWorld!を表示させる

config/routes.rbに以下のような記述をする

11:編集機能を追加する

12:編集画面の開発

13:編集機能の開発

TODOアプリを作ろう!

0:機能はなにがある？

1:環境構築

2:モデル名「Task」を作成

3:DBスキーマ(DBの構造)をDBに反映させる

31：Postを押した時の保存処理の開発

32:Answerモデルのバリデーション

33：回答一覧表示

21：リファクタリング

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

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

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

Rubyのバージョン確認

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

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

Rails チュートリアル要点だけまとめようあとは演習について