月別アーカイブ: 2021年11月

Rails-tutorial自分用まとめ(第6章 ユーザーモデル作成 主に演習)

その5から続きます

6.1.1 データベースの移行

rails generate controller Users new

Userモデルを生成する

rails generate model User name:string email:string

Userモデルのマイグレーションdb/migrate/[timestamp]_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.timestamps
    end
  end
rails db:migrate

演習

1:Railsはdb/ディレクトリの中にあるschema.rbというファイルを使っています。
これはデータベースの構造 (スキーマ (schema) と呼びます) を追跡するために
使われます。さて、環境にあるdb/schema.rbの内容を調べ、その内容と
マイグレーションファイルの内容を比べてみてください。

schema.rb
ActiveRecord::Schema.define(version: 20170203234505) do

  create_table "users", force: :cascade do |t|
    t.string   "name"
    t.string   "email"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
end

 

20200203234505_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.timestamps
    end
  end
end

2:ほぼすべてのマイグレーションは、元に戻すことが可能です
元に戻すことを「ロールバック (rollback)と呼び、
Railsではdb:rollbackというコマンドで実現できます。
rails db:rollback上のコマンドを実行後、db/schema.rbの内容を調べてみて、
ロールバックが成功したかどうか確認してみてください。

Railsではdb:rollback

コマンドして、ロールバックの成功を確認

3:もう一度rails db:migrateコマンドを実行し、db/schema.rbの内容が元に戻ったことを確認してください。

rails db:migrate

schema.rb

ActiveRecord::Schema.define(version: 0) do

end

User.createでモデルの生成と保存を同時におこなう方法も提供されています。

User.createは、trueかfalseを返す代わりに、ユーザーオブジェクト自身を返す
ことに注目してください。
返されたユーザーオブジェクトは (上の2つ目のコマンドにあるfooのように) 変数に代入することもできます。

続きを読む

Rails-tutorial自分用まとめ(第5章レイアウト 主に演習)

その4から続きます

第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:比較演算子==を使って、上記2つの課題で作ったそれぞれのオブジェクトが
同じであることを確認してみてください。

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 )

その3から続く

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から出る
続きを読む