RailsをWebとして表示させる

いよいよ自分でかいたRubyをwebとして表示させることに進みたいと思う。いままでは概要的なところや必要な知識だけであったがこれから表示させるためのコーディングの技術やどのように行えば可視的にできるのかを学んでいきたいと思う。
たのしみたい！

Railsプロジェクト作成

webapplicationの作成の第一歩として、Railsプロジェクトを作成していく。
rails newは新しいRailsプロジェクトを作成するコマンド
$ rails new “AppName”
これでRailsプロジェクトの作成は完了

ファイルの概要

プロジェクトに作成された全てのファイルについて理解する必要はないが、概要だけはおさえておく
・app/* モデル、ビュー、コントローラ、ヘルパーなどを含む主要なディレクトリです。最もよく使用します。
・app/assets/* アプリケーションで使うCSS 、JavaScriptファイル、画像などの画面の見た目を構成するファイル群を用意するディレクトリ
・bin/* バイナリ実行可能ファイル
・config/* アプリケーションの設定ファイル
・db/* データベース関連のファイル
・doc/* マニュアルなど、アプリケーションのドキュメント
・lib/* ライブラリファイル
・lib/assets/* ライブラリで使うファイル群
・log/* ログファイル
・public/* Webアプリケーションを介さず直接公開するデータ(固定のエラーページなど)
・bin/rails* プログラムコード生成、コンソールの起動、ローカルのWebサーバの立ち上げなどで使うRailsスクリプト
・test/* Webアプリケーションのテスト用コードを保存
・tmp/* 一時ファイル
・README.md* アプリケーションの簡単な説明(一般的には前提として必要な情報やバージョン、ライセンスなどを記載)
・Rakefile* rakeコマンドで使えるタスク
・Gemfile* Gemの定義ファイル
・Gemfile.lock* gemのバージョンを確認するためのリスト

Railsサーバの起動

pictgramディレクトリに移動して、rails db:createコマンドをタイプし、データベースにpictgram用のテーブルを作成
その後、続いてrails serverコマンドをタイプ
なお、rails serverコマンドは省略してrails sとタイプしてもOK
このhttp://localhost:3000/URLを表示させて画面が表示されればOK

Bundlerを使って、今回の開発で使用するGemを追加でインストール

rails newコマンドで、プロジェクト直下にあるGemfileというファイルが作成Gemfileの真ん中あたりにある以下の箇所に、Gemを4つ追記
Gemfile
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
# ここから下が追加分
gem 'pry-rails'
gem 'pry-doc'
gem 'pry-byebug'
gem 'pry-stack_explorer'
gem 'pry-stack_explorer'
end

$ bundle install
とタイプすると、先ほど追加したGemがインストールされる
　Fetching pry 0.12.2
　Installing pry 0.12.2
が表示される
Gemを追加するときは、今回のように
　　Gemfileに追記
　　bundle install
の順番でGemを追記させる

MVCモデル

Railsの全体像をつかむために、Railsアプリケーションの構造について説明
Google Chrome等のブラウザがWebアプリにHTTPリクエストを送ると、まずサーバーではコントローラが動く
コントローラは必要があればデータベースと通信する役割を持つModelにアクセスし、データベースからデータを取り出す
そのデータをViewに引き渡し、ブラウザに表示するためのHTTPレスポンス(コンテンツ)を返す
コントローラとブラウザの間にはルーティングという機構が存在
・MVCの処理の流れ
1.ブラウザからのリクエストをWebサーバーが受け取る
2.Webサーバーは、URLとHTTPメソッドを元に、ルーティングを探してマッチするコント ローラーに処理を振り分ける
3.コントローラのアクション(処理)の中にモデルに関係する記述があれば、モデルに命令を出す
4.モデルはデータベースにデータ操作の命令を出す
5.データベースは該当するデータをモデルに返す
6.モデルはデータベースから受け取ったデータをコントローラに返す
7.コントローラは得られた結果をViewに渡す
8.ViewはHTMLを生成し、コントローラに戻す
9.コントローラはHTMLをHTTPレスポンスとしてブラウザに返す
10.ブラウザはサーバーから受け取ったレスポンスを実際に表示する

ルーティングの設定はconfig/routes.rbファイルに記述

今回はhttp://localhost:3000 にアクセスするとpages#indexアクションにリクエストが振り分けられるように編集
 config/routes.rb
Rails.application.routes.draw do
root 'pages#index'
end

Controller、Viewの作成

ブラウザから送られてくるリクエストを受け取る役目となるコントローラを作る
コントローラはrails g controllerコマンドで作成する
$ rails g controller コントローラー名 アクション名
とタイプすることで、コントローラーを作成／定義
１つ注意点があり、Railsの慣習で生成するコントローラの名前は、複数形にするように
実際に、http://localhost:3000 にアクセス
Pages#index
Find me in app/views/pages/index.html.erb
ページに以上の内容が表記される
pages_controllerのindexアクションならapp/views/pages/index.html.erbとなる
users_controllerのnewアクションならapp/views/users/new.html.erbを使用してレンダリングされる
このようにroutes => controller => viewの流れ
pages_controler.rbにhelpアクションを追加する
app/controllers/pages_controler.rb
class PagesController < ApplicationController
def index
end
def help
end
end
app/views/pages/help.html.erbを作成
<h1>ヘルプページ</h1>
最後にroutesを設定
config/routes.rb
Rails.application.routes.draw do
root 'pages#index'
get 'pages/help'
end
getは、HTTP（後述）レスポンスのGETメソッドで、HTTPリクエスト(HTTPヘッダ)で渡したurlとコントローラを紐付けるアクセス方式です。
これによりpages/helpというurlとpages#helpというアクションが紐付く
http://localhost:3000/pages/helpにアクセスするとヘルプページが開かれる

HTTPメソッドについて

HTTP(Hypertext Transfer Protocol)は、Webブラウザ（Chromeなど）とWebサーバ（Railsが動いているサーバー）との間の通信ルール
HTTPは、その操作によって通信方法が違い、先ほど使用したgetはそのHTTPメソッドの１つ全部で5つのHTTPメソッドが存在
・GETページを取得するときに使う通信方法一番使用頻度の高いメソッド
・POSTデータを作成するときに使う通信方法
・PUTデータを置換するときに使う通信方法既存のデータを新規作成したり置換するときなど、データを入れ替える時に使用
・PATCHデータを部分的に更新するときに使う通信方法で
・DELETEデータを削除するときに使う通信方法

コントローラーとアクション

コントローラの中でViewと紐付いているメソッドのことをアクションと呼ぶ
今回PagesControllerというコントローラーを作成しましたがPagesControllerの中に、indexというメソッドが定義されており、index.html.erbというViewと紐付いている
この時PagesControllerの中のindexメソッドをindexアクションという
class PagesController < ApplicationController
def index
end
end
このindexのこと

HTTPのメソッドで自分が作成したものが Chromeのところに表示ができるようになった。これから作成したものが見えるようになるので、すごく楽しみである。まだ、ViewやControllerはちゃんと理解できないが動かしながら覚えていこうと思う。