「Rails」カテゴリーアーカイブ

第5章レイアウトを作成する

5.1.1 ナビゲーション

RailsはデフォルトでHTML5を使います (<!DOCTYPE html>と書いてHTML5であることを宣言します)。ただHTML5は比較的新しく、一部のブラウザ (特に旧式のInternet Explorer) ではHTML5のサポートが不完全である場合があります。そのため、次のようなJavaScriptのコード (通称: HTML5 shim (or shiv))を使ってこの問題を回避します。

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

[if lt IE 9] は、Railsの一部ではありません。これは実は、条件付きコメントと呼ばれるもので、今回のような状況のためにInternet Explorerで特別にサポートされています。

リンクを生成するために、Railsヘルパーのlink_toを使います (アンカータグaが最終的に生成されます)。

yieldメソッドはWebサイトのレイアウトにページごとの内容を挿入します。

Railsのロゴ画像をダウンロードする

curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
演習
1:Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。コマンドを使って、ネコ画像をダウンロードしてきましょう
curl -OL cdn.learnenough.com/kitten.jpg
2:mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください
mv kitten.jpg ~/environment/sample_app/app/assets/images/
3:image_tagを使って、kitten.jpg画像を表示してみてください
<%= image_tag("kitten.jpg")%>
5.1.2 BootstrapとカスタムCSS

続きを読む →

Rails-tutorial自分用まとめ4.8(Ruby 演習)

コメントを残す

4.5から続く

4.4 Rubyにおけるクラス

Rubyではあらゆるものがオブジェクト

4.4.1 コンストラクタ

ダブルクォートを使って文字列のインスタンスを作成しましたが、
これは文字列のオブジェクトを暗黙で作成するリテラルコンストラクタ。

>> s = "foobar" # ダブルクォートは実は文字列のコンストラクタ
=> "foobar" >> s.class => String
>> f = 2 => 2 >> f.class => Integer
>> g = 1.1 => 1.1 >> g.class => Float

文字列がclassメソッドに応答しており、
その文字列が所属するクラスを単に返していることがわかります。
なお配列でも、文字列と同様にインスタンスを生成できます。

>> a = Array.new([1, 3, 2])
=> [1, 3, 2]

ハッシュの場合は若干異なります。配列のコンストラクタである
Array.new は配列の初期値を引数に取りますが、
Hash.new はハッシュのデフォルト値を引数に取ります。
これは、キーが存在しない場合のデフォルト値です。

>> h = Hash.new
=> {}
>> h[:foo] # 存在しないキー (:foo) の値にアクセスしてみる
=> nil
>> h = Hash.new(0) # 存在しないキーのデフォルト値をnilから0にする
=> {}
>> h[:foo]
=> 0

メソッドがクラス自身 (この場合はnew) に対して呼び出されるとき、
このメソッドをクラスメソッドと呼びます。
クラスのnewメソッドを呼び出した結果は、そのクラスのオブジェクトであり、
これはクラスのインスタンスとも呼ばれます。
lengthのように、インスタンスに対して呼び出すメソッドは
インスタンスメソッドと呼ばれます。

演習

1：1から10の範囲オブジェクトを生成するリテラルコンストラクタは何でしたか? (復習です)

a = 1..10
=> 1..10

2：今度はRangeクラスとnewメソッドを使って、1から10の範囲オブジェクト
を作ってみてください。ヒント: newメソッドに2つの引数を渡す必要があります

>> b = Range.new(1,10)
=> 1..10

3：比較演算子==を使って、上記２つの課題で作ったそれぞれのオブジェクトが
同じであることを確認してみてください。

a == b
=> true

superclassメソッドを使ってクラス階層を調べてみるとよくわかります。

>> s = String.new("foobar")
=> "foobar"
>> s.class # 変数sのクラスを調べる
=> String
>> s.class.superclass # Stringクラスの親クラスを調べる
=> Object
>> s.class.superclass.superclass # Ruby 1.9からBasicObjectが導入
=> BasicObject
>> s.class.superclass.superclass.superclass
=> nil

“Rubyではあらゆるものがオブジェクトである” ということの技術的な意味。

Wordクラスを作成し、その中にある単語を前からと後ろからのどちらから読んでも同じ (つまり回文になっている) ならばtrueを返すpalindrome?メソッドを作成してみましょう。

> class Word
>> def palindrome?(string)
>> string == string.reverse
>> end
>> end
=> :palindrome?

このクラスとメソッドは次のように使うことができます。

>> w = Word.new # Wordオブジェクトを作成する
=> #<Word:0x22d0b20>
>> w.palindrome?("foobar")
=> false
>> w.palindrome?("level")
=> true

続きを読む →

Rails-tutorial自分用まとめ(4.5 Rubyについて)

コメントを残す

その4から続きます

4.3.1 配列と範囲演算子

配列を理解することは、ハッシュやRailsのデータモデルを理解するための重要な基盤
splitメソッドを使うと、文字列を自然に変換した配列を得ることができます。

>> "foo bar baz".split
=> ["foo", "bar", "baz"]
>> "fooxbarxbaz".split('x')
=> ["foo", "bar", "baz"]

多くのコンピュータ言語の慣習と同様、Rubyの配列でもゼロオリジンを
採用しています。これは、配列の最初の要素のインデックスが0から始まり、
2番目は1…と続くことを意味します。添字のこと

a = [42, 8, 17]
>> a[-1] => 17 # 配列の添字はマイナスにもなれる!
>> a.last === a[-1]
=> true

配列の要素にアクセスするには角カッコ[]!
配列の内容を変更したい場合は、
そのメソッドに対応する「破壊的」メソッドを使います。

>> a
=> [42, 8, 17]
>> a.sort!
=> [8, 17, 42]
>> a
=> [8, 17, 42]

pushメソッド (または同等の<<演算子) を使って配列に要素を追加することもできます。

a.push(6)=>[42, 8, 17, 6]
>> a << "foo" << "bar" # 配列に連続して追加する
=> [42, 8, 17, 6, 7, "foo", "bar"]

Rubyでは異なる型が配列の中で共存できる(上の場合は整数と文字列)。
文字列を配列に変換するのにsplitを使いました。
joinメソッドはこれと逆の動作で文字を連結できます。

>> a
=> [8, 17, 42, 6, 7, "foo", "var"]
>> a.join
=> "8174267foovar"
>> a.join(',')
=> "8,17,42,6,7,foo,var"

範囲 (range) は、配列と密接に関係しています。to_aメソッドを使って
配列に変換すると理解しやすいです。

>> 0..9
=> 0..9
>> (0..9).to_a
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

>> a = %w[foo bar baz quux] # %wを使って文字列の配列に変換
=> ["foo", "bar", "baz", "quux"]
>> a[0..2]
=> ["foo", "bar", "baz"]

インデックスに-1という値を指定できるのは極めて便利。-1を使うと、
配列の長さを知らなくても配列の最後の要素を指定することができ、
これにより配列を特定の開始位置の要素から最後の要素までを一度に
選択することができる。

>> a = (0..9).to_a
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
>> a[2..(a.length-1)] # 明示的に配列の長さを使って選択
=> [2, 3, 4, 5, 6, 7, 8, 9]
>> a[2..-1] # 添字に-1を使って選択
=> [2, 3, 4, 5, 6, 7, 8, 9]

字列に対しても範囲オブジェクトが使える。

>> ('a'..'e').to_a
=> ["a", "b", "c", "d", "e"]

演習

1:文字列「A man, a plan, a canal, Panama」を “, ” で分割して
配列にし、変数aに代入してみて。

続きを読む →

Rails-tutorial自分用まとめ(4章 Ruby )

コメントを残す

その３から続く

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です。

続きを読む →

月	火	水	木	金	土	日
						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	29
30	31

第5章レイアウトを作成する

5.1.1 ナビゲーション

演習

1:Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。コマンドを使って、ネコ画像をダウンロードしてきましょう

2:mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください

3:image_tagを使って、kitten.jpg画像を表示してみてください

5.1.2 BootstrapとカスタムCSS

4.4 Rubyにおけるクラス

4.4.1 コンストラクタ

演習

1：1から10の範囲オブジェクトを生成するリテラルコンストラクタは何でしたか? (復習です)

2：今度はRangeクラスとnewメソッドを使って、1から10の範囲オブジェクト を作ってみてください。ヒント: newメソッドに2つの引数を渡す必要があります

3：比較演算子==を使って、上記２つの課題で作ったそれぞれのオブジェクトが 同じであることを確認してみてください。

4.3.1 配列と範囲演算子

演習

1:文字列「A man, a plan, a canal, Panama」を “, ” で分割して 配列にし、変数aに代入してみて。

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：回答一覧表示

2：今度はRangeクラスとnewメソッドを使って、1から10の範囲オブジェクト
を作ってみてください。ヒント: newメソッドに2つの引数を渡す必要があります

3：比較演算子==を使って、上記２つの課題で作ったそれぞれのオブジェクトが
同じであることを確認してみてください。

1:文字列「A man, a plan, a canal, Panama」を “, ” で分割して
配列にし、変数aに代入してみて。

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