【進捗】Ruby on Rails チュートリアル 第三章ほぼ静的なページの作成【自分用】

はじめに

三日坊主にはならないぞ・・・!
今日はほぼ性的なページの作成をします!!!!!!!!!!!

教材

チュートリアルの三章やります。
railstutorial.jp

進捗

・演習

BitbucketがMarkdown記法のREADME (リスト 3.3) をHTMLとして正しく描画しているか、確認してみてください。

→HTML表示
f:id:rhutaba:20170505141827p:plain

本番環境 (Heroku) のルートURLにアクセスして、デプロイが成功したかどうか確かめてみてください。

→成功。ただしherokuの無料5枠を消化していたため、前回までのデプロイ分の削除作業を挟んだ。


・演習

サンプルアプリケーションにContact (問い合わせ先) ページを作成してください16 (ヒント: まずはリスト 3.15を参考にして、/static_pages/contactというURLのページに「Contact | Ruby on Rails Tutorial Sample App」というタイトルが存在するかどうかを確認するテストを最初に作成しましょう。次に、3.3.3でAboutページを作ったときのと同じように、Contactページにもリスト 3.40のコンテンツを表示してみましょう。)。

→問合せページを作成してテストを実施した結果、以下の結果が返ってきた。「4 runs, 8 assertions, 0 failures, 0 errors, 0 skips」成功。



・演習

リスト 3.41にrootルーティングを追加したことで、root_urlというRailsヘルパーが使えるようになりました (以前、static_pages_home_urlが使えるようになったときと同じです)。リスト 3.42のFILL_INと記された部分を置き換えて、rootルーティングのテストを書いてみてください。

→root_urlを取得し、成功する。「5 runs, 9 assertions, 0 failures, 0 errors, 0 skips」

実はリスト 3.41のコードを書いていたので、先ほどの課題のテストは既に green になっているはずです。このような場合、テストを変更する前から成功していたのか、変更した後に成功するようになったのか、判断が難しいです。リスト 3.41のコードがテスト結果に影響を与えていることを確認するため、リスト 3.43のようにrootルーティングをコメントアウトして見て、 red になるかどうか確かめてみましょう (なおRubyのコメント機能については4.2.1で説明します)。最後に、コメントアウトした箇所を元に戻し (すなわちリスト 3.41に戻し)、テストが green になることを確認してみましょう。

→「5 runs, 8 assertions, 0 failures, 1 errors, 0 skips」

最後にやってみた感想

第三章の「本章のまとめ」に書いて有ることをやった。有料コンテンツの解説は流し読み程度。第一章で利用していたサービスやジェネレートコマンドもなんとなくだけど理解できるようになった。また全体の定義、関連がrailsフレームワーク内でまとめられていることに感心。作った人天才かよ。MVCモデルとルートページの関連、あとはhtmle.erbをDRYの思想で実装させているチュートリアルは、ご作法も同時に教えてくれていて良いコンテンツだなーと感じた。導入には気合が要るが、環境と操作になれていくに従ってやってることが見えてきたので自分にはあっている教材かもしれない。大したことを書いていないけども、あとはもうすこしコードのご作法を教えてほしいなー。次章からかな?(ダラダラと記載したけどこんな感じ)

【進捗】Ruby on Rails チュートリアル 第ニ章Toyアプリケーション 【自分用】

はじめに

前日の第一章のチュートリアルは深夜に及ぶ作業となり、第二章を進めるはずの本日は昼過ぎの起床となった。
飲み会があったのだがドタキャン入れてチュートリアルに専念することにした。

教材

チュートリアルのニ章やります。
railstutorial.jp

進捗

細かい内容は省略して、演習問題を載せることにしました。

・演習

CSSを知っている読者へ: 新しいユーザーを作成し、ブラウザのHTMLインスペクター機能を使って「User was successfully created.」の箇所を調べてみてください。ブラウザをリロードすると、その箇所はどうなるでしょうか?

CSSでgreen定義されていたスタイルを、blue定義に変更すると文字色が変わる。ブラウザの更新ボタンを押すとメッセージ表示が消える。

emailを入力せず、名前だけを入力しようとした場合、どうなるでしょうか?

→そのまま登録できてしまう。

「@example.com」のような間違ったメールアドレスを入力して更新しようとした場合、どうなるでしょうか?

→そのまま登録できてしまう。

全体感
f:id:rhutaba:20170503182846p:plain

上記の演習で作成したユーザーを削除してみてください。ユーザーを削除したとき、Railsはどんなメッセージを表示するでしょうか?

「Are you sure?」のメッセージボックスが表示され、了承するとユーザが削除される。
f:id:rhutaba:20170503183017p:plain



・演習

図 2.11を参考にしながら、/users/1/edit というURLにアクセスしたときの振る舞いについて図を書いてみてください。

→基本的には同じ流れなはず。
1.ブラウザから「GET /users/n/edit」というURLのリクエストをRailsサーバーに送信する。
2.「/users/n/edit」リクエストは、Railsのルーティング機構 (ルーター) によってUsersコントローラ内のeditアクションに割り当てられる
3.editアクションが実行され、そこからUserモデルに、「ユーザーnを取り出せ」と問い合わせる。
4.Userモデルは問い合わせを受け、ユーザーnをデータベースから取り出す。
5.データベースから取り出したユーザーnをUserモデルからコントローラに返す。
6.Usersコントローラは、ユーザーの一覧を@user変数に保存し、editビューに渡す。
7.editビューが起動し、「edit.html.erb」を実行、「_from.html.erb」を実行して HTMLを生成 (レンダリング) する。
8.コントローラは、ビューで生成されたHTMLを受け取り、ブラウザに返す

図示した振る舞いを見ながら、Scaffoldで生成されたコードの中でデータベースからユーザー情報を取得しているコードを探してみてください。

ログから取得したSELECT文がどこから発行されているのか不明。indexと同様ならApplicationRecordだと思うけど・・・。
SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 5], ["LIMIT", 1]]

ここはどうしても分からなかったので、先人の回答例を見ました。飛ばして進めたけど、結局ここがわからないと先に進めなかったので。
private
# Use callbacks to share common setup or constraints between actions.
def set_user
@user = User.find(params[:id])
end

ユーザーの情報を編集するページのファイル名は何でしょうか?

→「edit.html.erb」



・演習

CSSを知っている読者へ: 新しいマイクロポストを作成し、ブラウザのHTMLインスペクター機能を使って「Micropost was successfully created.」の箇所を調べてみてください。ブラウザをリロードすると、その箇所はどうなるでしょうか?

CSSでgreen定義されていたスタイルを、blue定義に変更すると文字色が変わる。ブラウザの更新ボタンを押すとメッセージ表示が消える。

マイクロポストの作成画面で、ContentもUserも空にして作成しようとするどうなるでしょうか?

→作成できる。なお、二度全く同一のポストも受け付ける。

141文字以上の文字列をContentに入力した状態で、マイクロポストを作成しようとするとどうなるでしょうか? (ヒント: WikipediaRubyの記事にある1段落目がちょうど150文字程度ですが、どうなりますか?)

→すべての文字列が登録される。

上記の演習で作成したマイクロポストを削除してみましょう。

→削除可能。

f:id:rhutaba:20170503233521p:plain



・演習

先ほど2.3.1.1の演習でやったように、もう一度Contentに141文字以上を入力してみましょう。どのように振る舞いが変わったでしょうか?

f:id:rhutaba:20170503234222p:plain


CSSを知っている読者へ: ブラウザのHTMLインスペクター機能を使って、表示されたエラーメッセージを調べてみてください。

→「#error_explanation」のidを持つスタイルが出力されている。


・演習

ユーザーのshowページを編集し、ユーザーの最初のマイクロポストを表示してみましょう。同ファイル内の他のコードから文法を推測してみてください (コラム 1.1で紹介した技術の出番です)。うまく表示できたかどうか、/users/1 にアクセスして確認してみましょう。

→結局わからずにできなかった。他人の回答例を見てみたけどよくわからなかったので飛ばして進める。

リスト 2.16は、マイクロポストのContentが存在しているかどうかを検証するバリデーションです。マイクロポストが空でないことを検証できているかどうか、実際に試してみましょう (図 2.16のようになっていると成功です)。

→図の通りに表示された。

リスト 2.17のFILL_INとなっている箇所を書き換えて、Userモデルのnameとemailが存在していることを検証してみてください (図 2.17)。

→「:name」と「:email」に書き換えてみたけど検証の仕方がよくわからない。
 データの消し方が悪かったのか、データの整合が取れていない状態で制限を掛けてしまった模様。



・演習

Applicationコントローラのファイルを開き、ApplicationControllerがActionController::Baseを継承している部分のコードを探してみてください。

→「app/controllers/application_controller.rb」

ApplicationRecordがActiveRecord::Baseを継承しているコードはどこにあるでしょうか? 先ほどの演習を参考に、探してみてください。ヒント: コントローラと本質的には同じ仕組みなので、app/modelsディレクトリ内にあるファイルを調べてみると...?)

→「app/models/application_record.rb」


・演習

本番環境で2〜3人のユーザーを作成してみましょう。

→ユーザの作成はできた。ただし「New User」での登録後、完了ページが表示されない。トップページに戻ると「User was successfully created.」が表示される。何か誤操作してしまったか・・・。
f:id:rhutaba:20170504005119p:plain
f:id:rhutaba:20170504005145p:plain
f:id:rhutaba:20170504005208p:plain

本番環境で最初のユーザーのマイクロポストを作ってみましょう

→マイクロポストの作成に成功。
f:id:rhutaba:20170504005411p:plain
f:id:rhutaba:20170504005424p:plain
f:id:rhutaba:20170504005432p:plain

マイクロポストのContentに141文字以上を入力した状態で、マイクロポストを作成してみましょう。リスト 2.13で加えたバリデーションが本番環境でもうまく動くかどうか、確認してみてください。

→文字列が多すぎると怒られる。
f:id:rhutaba:20170504005513p:plain


最後にやってみた感想

これは有識者にアドバイスして貰いながらのほうが進捗や理解が進む気がする。ずぶの素人が一度で理解できるかというと難しい気がする。GW中に集中講座があったらしいが、最短でマスターするなら金銭を払って解説してもらったほうが良かったのかもしれない。できるところまでやったら二周目はセミナー参加して理解度を醸造した方がいいかもしれない。

当面は自力で進めてみて、どうしてもわからない所があれば先人の正解をちら見しながら進めていくようにしたい。

【進捗】Ruby on Rails チュートリアル 第一章 ゼロからデプロイまで 【自分用】

はじめに

2017年02月に転職をキメたが、引越しや前職SIのプロジェクトがなかなか落ち着かずいたため、次の仕事の準備を今更初めた。次の仕事ではRuby on Rails使うらしいので「Railsチュートリアル」を進めることが準備につながると考えている。Web初心者なので1週間で100%消化は無理だと思っているけど、毎日少しずつ進めて行きたいと思う。とりあえずこれやっとけば入門できるよ!を信じて進める。Believe。

目下、試用期間で切られないことを目標に頑張っていきたい。


教材

上記にも書いたとおり。

Ruby on Rails チュートリアル Michael Hartl (マイケル・ハートル) 第4版
実例を使ってRailsを学ぼうrailstutorial.jp


進捗(やったこと、所感)


・1.2.1 開発環境の構築
MacBookProを購入するも、環境の巻き戻しや極力チュートリアルに沿うことを考慮して、Cloud9に登録。まだ走り始めだけど正直な感想はめっちゃ便利。


・1.2.2 Railsをインストール
「$ gem install rails -v 5.0.0.1」でRials環境を構築。


・1.3 最初のアプリケーション
rails newコマンドのバージョン指定を覚えた


・1.3.1 Bundler
Gemfilesで利用するGemの指定を行いRails環境を固定させることができると理解。ただ実際に「$ bundle install」 を実行すると、異なる(古い?)バージョンのGemはインストールできないとエラーで怒られたので「$ gem install rails -v 5.0.0.1」したバージョンでチュートリアルを進めることにした。有識者に聞けば解決するんだろうけど、とりあえず進めることが大事だと思い先を急ぐことにする。現状のgem listをまとめると以下の通りになる。チュートリアルで躓く場合はおそらく以下のバージョン差異が起因するだろうなぁ。デフォルトのgemfileの内容では無事インストール成功。

  • rails (5.0.2, 5.0.0.1)
  • rails-dom-testing (2.0.2)
  • rails-html-sanitizer (1.0.3)
  • sprockets-rails (3.2.0)
  • puma (3.8.2)
  • sass-rails (5.0.6)
  • uglifier (3.2.0)
  • coffee-rails (4.2.1)
  • jquery-rails (4.3.1)
  • turbolinks (5.0.1)
  • turbolinks-source (5.0.0)
  • jbuilder (2.6.3)
  • sqlite3 (1.3.13)
  • byebug (9.0.6)
  • web-console (3.5.0)
  • listen (3.0.8)
  • spring (2.0.1)
  • spring-watcher-listen (2.0.1)

Rails Tutorialのgemfileとインストールを試みた際のエラーログを記載。単純に操作ミスでは無いはずだけど・・・

リスト 1.5: Ruby gemごとにバージョンを明示的に指定したGemfile
source 'https://rubygems.org'

gem 'rails', '5.0.0.1'
gem 'puma', '3.4.0'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.4.1'

group :development, :test do
gem 'sqlite3', '1.3.11'
gem 'byebug', '9.0.0', platform: :mri
end

group :development do
gem 'web-console', '3.1.1'
gem 'listen', '3.0.8'
gem 'spring', '1.7.2'
gem 'spring-watcher-listen', '2.0.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: sqlite3 (>= 0) and sqlite3 (= 1.3.11). Bundler cannot continue.


・1.3.2 rails server
「$ rails new」でhello appのWebサーバを起動。成功。

f:id:rhutaba:20170502200457p:plain

・演習

デフォルトのRailsページに表示されているものと比べて、今の自分のコンピュータにあるRubyのバージョンはいくつになっていますか? コマンドラインruby -vを実行することで簡単に確認できます。

→デフォルトをそのまま使用しているのでRuby versionは2.3.0で差異はない。

同様にして、Railsのバージョンも調べてみましょう。調べたバージョンはリスト 1.1でインストールしたバージョンと一致しているでしょうか?

→上記1.3.1 Bundlerで記載。


・1.3.3 Model-View-Controller (MVC)
所感なし


・1.3.4 Hello, world!
emcasで書き換えてhello world!の表示に成功。
f:id:rhutaba:20170502202620p:plain


・演習

リスト 1.8のhelloアクションを書き換え、「hello, world!」の代わりに「hola, mundo!」と表示されるようにしてみましょう。

→文字列の書き換え。成功。

Railsでは「非ASCII文字」もサポートされています。「¡Hola, mundo!」にはスペイン語特有の逆さ感嘆符「¡」が含まれています (図 1.13)17。「¡」文字をMacで表示するには、Optionキーを押しながら1キーを押します。この文字をコピーして自分のエディタに貼り付ける方が早いかもしれません。

→文字列の書き換え。成功。

リスト 1.8のhelloアクションを参考にして、2つ目のアクションgoodbyeを追加しましょう。このアクションは、「goodbye, world!」というテキストを表示します。リスト 1.10のルーティングを編集して、ルートルーティングの割り当て先をhelloアクションからgoodbyeアクションに変更します

→「ApplicationController」に「goodbye」を追加で定義し、ルートに「goodbye」を参照するように記載を変更。


・1.4 Gitによるバージョン管理
Bitbucketに公開鍵を設定するにあたって、BitbucketのUIがチュートリアルから乖離があったので戸惑った。が、サービスの内容を舐めたら見つかった。リモートリポジトリへのコミット完了。


・1.5 デプロイする
Herokuのサービスを登録させられる。大変便利らしい。チュートリアルの記載が薄いので戸惑った。デプロイ後のURLがチュートリアル記載の「$ heroku create」と違っていた。正しいリンクは「$ git push heroku master」でLunchされたURLだった。

remote: -----> Launching...
remote: Released v5
remote: https://gentle-plateau-11854.herokuapp.com/ deployed to Heroku


・演習

1.3.4.1と同じ変更を行い、本番アプリでも「hola, mundo!」を表示できるようにしてください。

→省略

1.3.4.1と同様、ルートへのルーティングを変更してgoodbyeアクションの結果が表示されるようにしてください。またデプロイ時には、Git pushのmasterをあえて省略し、git push herokuでデプロイできることを確認してみてください。

→こんな感じ。
f:id:rhutaba:20170503020748p:plain


最後にやってみた感想

知らないサービスを薄い記載で平然と載せてくるチュートリアルさんにたじろぎつつも、とりあえず1章はできた。概念は理解できた。理論とサービスの仕様、御作法は習得に時間が掛かるので仕事しながらいろいろと吸収していく形になるのかな。当然だけど、まだ全体像がまだもやもやしているので、手を動かし自分なりに咀嚼しながらRailsについて把握していきたい。

2章以降も1日1章できるかな?重い章、軽い章あるだろうけど、できるだけ先に進めるように時間を割きたいと思う。
はてな記法での書き方も考えないとなぁ。