Railsガールズ・ガイドへのご案内です！

Created by H Salmon to accompany the app guide. 翻訳者: Mai Muta, @maimux2x

このガイドは、最初のRailsアプリケーションを構築するために使用するRails Girls Guideを補足するものです。 このガイドの目的は、Railsアプリケーションの構造、Railsの用語、コマンドに関する背景情報を提供し、Rails Girls Guideのコードを実装するときに何が起こっているかを理解できるようにすることです。このガイドが、このワークショップで学んだことを定着させ、Rails開発への興味を維持するための一助となれば幸いです。ようこそ！

1. アプリケーションの作成

知っておくべきコマンド

2. Idea の scaffold を作る

scaffold、モデル、マイグレーション

3. デザイン

デザインレイヤー（HTML、CSS、ERB） MVCアーキテクチャ

4. 画像アップロード機能の追加

ライブラリ、gems、オープンソース

5. routesの調整

routes, HTTPメソッド： GET、POST、PUT、DELETE

1. アプリケーションの作成

mkdir projects - 現在いるフォルダ（おそらくホームフォルダ）に「projects」というディレクトリ（フォルダ）を作成します。 mkdir = make directory.

cd projects - あなたが作成した「projects」フォルダに移動します。 cd = change directory.

rails new railsgirls - 作業ディレクトリ（現在作業しているフォルダ）に、自動生成された様々なフォルダを含むrailsgirlsという新しいRuby on Railsアプリケーションを作成します。

cd railsgirls - 「railsgirls」フォルダに移動します。

ruby script\rails server - あなたのコンピュータ上でローカルWebサーバーを起動します。このWebサーバーは、Webアドレスhttp://localhost:3000からアクセスできます。

「Localhost」は具体的にはあなたのコンピュータ（「ローカルホスト」と呼ばれる）を指し、そこからサーバーが起動されます。ローカルホストは、開発者がアプリケーションをブラウザで確認し、開発中に機能をテストする手段を提供します。

2. Idea の scaffold を作る

Railsのscaffoldとは何でしょうか？

すべてのウェブアプリケーションは多くの異なる概念やリソース（例: “users”、”ideas”、”posts”、”comments”など）から構成されています。 Railsのscaffoldは、アプリケーションに新しいリソースを導入するためのコマンド（rails generate scaffold）です。これにより、このリソースを表現し、それとやり取りするために必要なすべてのコードファイルが生成されます。

モデルとは何でしょうか？

Railsでは、モデルはアプリケーション内のリソースの定義を表し、そのリソースがアプリケーションの他の部分とどのようにやりとりすべきかを表します。ウェブサイトの性質に応じて、これらのリソースはusers、posts、groupsなどになります。モデルが生成されると、対応するデータベーステーブルが作成されます。このデータベーステーブルには、モデルの指定された属性を表す情報が含まれています。例えば、Userモデルの場合、「name」というカラムや「email」というカラムがあるかもしれません。そして、ユーザーが作成されるたびに、これらはレコードになります。あなたが作成しようとしているアプリケーションでは、ideasがリソースに、「Idea」がモデルに当てはまります。

rails generate scaffold idea name:string description:text picture:string

Ideaモデルを作成するために、単数系のモデル名（idea）と、モデルの属性に関するパラメータ（仕様）を引数に指定して、scaffoldコマンドを使います。これはideaモデルが、コマンドで指定した属性(name、description、およびpicture)の列/カラムを持つテーブルに対応することを意味します。また、scaffoldコマンドはprimary keyと呼ばれるid属性も自動生成します。この属性はデータベーステーブル間の関連付けをするために使用されます。

rails generate scaffold - これはscaffoldコマンドを呼び出します。

idea - scaffoldコマンドに対して、モデルの名前をどう呼びたいかを指定します。

name:string description:text picture:string - モデル（およびそれに関連するデータベーステーブル）が持つ属性のリストを提供します。 引数の中のstringとtextの部分は、各属性の性質を決定します。つまり、descriptionは「text」である必要があり、例えば「integer」（または他の任意の情報の型）であってはいけません。

ideasテーブル

命名規則

Active Record

Railsでは、アプリケーションのデータベースとやり取りするためのデフォルトのシステムはActive Recordと呼ばれ、データを作成、保存、および検索するためのさまざまなメソッドを提供しています。データベースから情報を取得するにあたり、Active Recordは異なるアプリケーションの部分間に関連付けするために命名規則を使用します。

• テーブル名はすべて小文字で、単語間はアンダースコアで区切ります。例： “ideas”, “invoice_items”
• モデルは、MixedCase(各単語の先頭が大文字で表記される)の規約を使用して命名され、常にテーブル名の単数形です。たとえば、テーブル名が「invoice_items」の場合、モデル名は「InvoiceItem」になります。したがって、今回の場合、テーブル名は 「ideas」であり、モデルは「Idea」となります。

モデルの属性とタイプ

既に説明したように、モデルは対応するデータベーステーブルのカラムで表される属性（プロパティ）を持つことができます。 Active Recordシステムでサポートを受けるためには、これらの属性は適切な型のリストに従っている必要があります。

• :binary - 画像、音声ファイル、動画などのデータを格納します。

• :boolean - 真偽値を格納します（特定のユーザーがアプリケーションの管理者であるかどうかなど）。

• :date - 日付（年、月、日）のみを格納します。

• :datetime - 日付と時刻の両方を格納します。

• :decimal - 仕様に応じて変動する精度で10進数を格納します。

• :float - 固定された精度で小数点を格納します。つまり、精度を指定することはできません（:decimalは精度が必要な数学演算に適していますが、:floatのほうが処理が早いです。このため、正確さよりも速度が優先される場合に適しています）。

• :integer - 整数を格納します。

• :primary_key - テーブルの主キーは、通常、idとされます。

• :string - 255文字のテキスト情報を格納し、例えば、短いテキストフィールド（名前、メールアドレスなど）に使用されます。

• :text - 文字数制限のないテキスト情報を格納します（コメントやブログ記事などに使用します）。

• :time - 時刻のみを格納します。

• :timestamp - 時刻と日付の両方を格納します。:timestampは:datetimeとは異なり、別の目的に役立ちますが、ここでは必要がないため詳しくは説明しません。

マイグレーションとは何で、なぜ必要なのでしょうか？

マイグレーションはデータベースの状態を変更します。scaffoldコマンドを実行すると、コマンドに関連するデータベーステーブルへの指示が含まれたマイグレーションファイルが、アプリケーションのdb/migrateフォルダに追加されます。例えば、rails generate scaffoldコマンドを実行すると、ideasテーブルへの指示を含むマイグレーションファイルが作成されます。rails generate model コマンドや rails generate migration コマンドなどのマイグレーションファイルを生成するコマンドが他にもあります。

rake db:migrate コマンドはマイグレーションファイルの仕様に従ってデータベースを更新します。このコマンドは 「migrating up」として知られており、あなたのIdeaモデルがデータベースに追加されることを保証します。コマンド rake db:rollback を使えば、マイグレーションを取り消す（「migrating down」）こともできます。

3. デザイン

Ruby on Railsアプリケーションでは、Webサイトを訪れるユーザーが見ることになるユーザーインターフェースは、通常、HTMLと埋め込みRuby（ERB）コードで書かれることが多いです。このコードは、Railsアプリケーションディレクトリ内のappフォルダにある特定のディレクトリである「views」に含まれています。

HTML

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（HyperText Markup Language）の略で、Webブラウザで表示できるWebページやその他の情報を作成するための主要な言語です。HTMLはタグを使って記述され、山括弧はテキストベースのコンテンツを囲む2つのタグ（開始タグと終了タグ）で構成されることが多いです。対になるタグでは、開始タグと区別するために、終了タグは開始山括弧の後にスラッシュも付けます。段落（HTMLではpで表される）は<p>のような開始タグおよび</p>のような終了タグを使って、表示するテキストを囲みます。開始しているけれど閉じる必要のないタグ（例：単一の改行を定義する<br>など）は、「空要素」として知られています。WebブラウザはHTMLタグを使用して、コンテンツの表示方法を解釈します。

ERB: 埋め込みRuby

ERBは、Rubyが提供するシステムで、JavascriptやHTMLなど他の言語で書かれたファイルに純粋なRubyコードを挿入することができます。Rubyコードは特定の山括弧（<%および%>）内に含まれており、システムにその内容を実行するように指示します。山括弧に=記号が付いている場合（<%=および%>）、山括弧に囲まれた内容が実行され、ページに表示されます。

例えば、アプリケーションに25のアクティブなアイディアがあった場合、コードは次のようになります。 There are currently <%= Idea.count %> active ideas そして次のようにレンダリングされます。

There are currently 25 active ideas

MVCアーキテクチャ

標準的なRailsアプリケーション（今回あなたが生成したようなもの）は、アプリケーションのapp/フォルダは3つのフォルダ（ディレクトリ）で構成されます。「models」（既に説明しましたね）、「controllers」「views」です。これらのディレクトリ間の関係は、アプリケーションおよびRails開発の基盤で、MVCアーキテクチャとして知られています。

rails generate scaffoldコマンドを実行するとideaモデルの作成に加えて、対応するideasコントローラー (ideas_controller.rb)も作成されます。このファイルはcontrollersフォルダにあります。さらにideasのviewsフォルダも作成され、そこには動的なアプリケーションを作成するために使用するいくつかのファイルが含まれています。

RailsのWebサイトを表示しようとすると、Webブラウザはサーバーを介してリクエストを送信し、最終的にRailsのコントローラーに到達します。コントローラーはビューとモデルの仲介役として機能します。コントローラーが情報を受け取ると、アプリケーションのリソースを表すモデルと通信し（今回の例では「idea」）、そこから順次データベースに問い合わせます。コントローラーはモデルから必要な情報を取得したら、Webページ全体をHTMLとしてブラウザに返すビューをレンダリングします。

CSSとレイアウト

CSS (Cascading Style Sheets)は「マークアップ言語」で書かれたページの体裁を記述するために利用される言語です。すなわち、テキストを処理し、定義し、タグのように決められた書式で表示するための言語でプレーンテキストとは区別されます。CSSは、HTMLと組み合わせて使われることが一般的です。

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

CSSの中で適用されたのは以下のとおりです。

body - この部分はセレクターです。スタイルを適用したいHTML要素を指定します。 { padding-top: 100px; } - この部分は宣言です。各宣言は、変更したいスタイル属性 (padding-top)と関連する値(100px)をプロパティとして持ちます。宣言は常にセミコロンで終わり、宣言グループは常に波括弧で囲われています。

各Railsアプリケーションには、viewsディレクトリのlayoutsフォルダにapplication.html.erbというデフォルトのレイアウトファイルがあります。このファイルを使用して、アプリケーション内のすべてページに対してデフォルトフォーマットを作成することができます。

<link rel="stylesheet" href="https://railsgirls.com/assets/bootstrap.css">

上記のコードでは、link rel(link relation)はhref(hypertext reference)属性がコンテンツを要求するURLの性質を定義しています。この引数は、要求された外部ソースがスタイルシートであり、Webブラウザがページを適切に表示するために、このファイルを取得する必要があることを示しています。

<%= stylesheet_link_tag "application" %>

このコードは指定されたソース、今回の場合「application」、つまりapplication.cssに対するスタイルシートリンクタグを返します。これは、application.css で実装したスタイルがアプリケーションのさまざまなページに適用されることを意味します。

<div class="container">
  <%= yield %>
</div>

このコードでは

• HTMLのdivタグはコードをパーツに分割します。
• containerクラスは、このdivタグ内の全ての要素にスタイリングを追加します。
• <%= yield %>引数は、各ページに対して固有のコンテンツをdivに挿入する役割を担います。つまり、ページごとにコンテンツが異なっていても、アプリケーション全体のレイアウトは一貫しているということです。

4. 画像アップロード機能の追加

ライブラリ

Rubyを含む多くのプログラミング言語は幅広いライブラリを使用しています。Rubyの場合、これらのライブラリのほとんどはgemと呼ばれる自己完結型パッケージの形でリリースされていて、そのパッケージにはライブラリをインストールして実装するために必要なすべての情報が含まれています。これらのgemはアプリケーションのGemfileに含まれていて、このファイルを見てみると、最初のRailsアプリケーションを作成した際にアプリケーションが正しく機能するようにgemがいくつか同梱されたことに気がつくでしょう。

Gemはソフトウェア開発の原則であるDRY (Don’t Repeat Yourself)に従って、開発者のコードを簡素化し、コードの重複を防ぐことに役立ちます。Gemは特定の問題を解決したり、特定の機能を追加したり、特定の要件に対処したりします。これは、他の開発者が同じようなシナリオに遭遇した際に、新たなコードを書く代わりに予め書かれたコードを含むGemをインストールすることができるということを意味します。例えば、Gemfileに追加した「CarrierWave」は、ファイルをアプリケーションに簡単にアップロードできるように設計されています。

「Bundler」はRubyがgemを追跡・管理するために使用するソフトウェアです。bundleコマンドはBundlerを実行し、Gemfileで指定されたgemをインストールします。Gemfileの先頭にsource 'https://rubygems.org'というコードがあります。Gemfileにgemを追加して、bundleコマンドを実行するとこのコードはアプリケーションにhttps://rubygems.orgからgemを取得するように指示をします。「RubyGems」はRuby固有のパッケージングシステムで、gemの作成、共有、インストールを簡単にすることを目的としています。

オープンソースソフトウェア

RailsフレームワークとRuby言語の両方は、オープンソースソフトウェアの一例です。オープンソースソフトウェアは誰もがアクセスできることを保証するライセンスのもとでリリースされていて、誰でもソフトウェアを変更、研究、配布する権利があります。ソースコードを公開することで、お互いの開発から恩恵を受けるプログラマーたちによる、多様で、思慮深く、協力的であり、その結果、進化し続ける双方向的なコミュニティを形成することができます。

その他のHTML

app/views/ideas/_form.html.erbファイルにはideasの編集と作成に使用されるフォーム(edit.html.erbとnew.html.erbビュー)の見た目を定めるHTMLコードが含まれています。パーシャルとは、複数の場所で再利用できるHTMLとRubyのコードのスニペットです。既存のideasを編集するフォームと新規にideasを作成するフォームはほぼ同じなため、両方のファイルで使用するフォームを一つにすることは理にかなっています。これらのファイルを見ると、カスタマイズされた見出し (例えば <h1>ideaの編集</h1>) があり、単に <%= render 'form' %> と書かれていて、Rails にパーシャルである _form.html.erb をレンダリングするように指示していることに気づくでしょう。

_form.html.erbファイルを見てみると、最初の行にform_forというコードがあるのが分かります。これはHTMLフォームを作成するために使用されるブロックです。このブロックを使用するとフォームに様々な入力フィールドを設けるメソッドにアクセスすることが可能です。

実装しているコード<%= f.file_field :picture %>は、Railsに対してフォームにファイル添付用の入力欄を作成し、送信された情報をideasデータベーステーブルの「idea」の「picture」属性に対応させるように指示しています。コードを<%= f.text_field :picture %>から<%= f.file_field :picture %>に変更したのは、file_fieldを使うとユーザーがアップロードしたい画像を選択しやすくなるからです。

コード<%= @idea.picture %>の中の@ideaはインスタンス変数です。インスタンス変数には先頭に@記号がつき、それらが参照されるビューに対応するコントローラーアクションで定義されます。今回実装しているコードでは@ideaはIdeasコントローラの「show」アクションで@idea = Idea.find(params[:id])のように定義されています。これにより、show.html.erbビューで使用できるようになります。異なるコントローラーのアクション（例えばindexやnew）では異なる定義が可能です。コード@idea = Idea.find(params[:id])は、Railsのfindメソッドを使ってデータベースから特定のideasを取得します。

@idea変数に続くコード(.picture)は、Railsに対してリソース（idea）の「picture」属性にアクセスするように指示しています。 コード<%= @idea.picture %>を<%= image_tag(@idea.picture_url...)に置き換えることによって、Rubyのimage_tagヘルパーを使用するようになります。これはHTMLの<img>タグ（HTMLで画像を定義するために使用される）に変換されます。ただし、デフォルトではアップロードされた画像が保存されているpublic/imagesフォルダから画像を取得します。また、image_tagヘルパーを使うと、特定のideaに関連する画像へのパスを作成するコードブロック（@idea.picture_url）を挿入することが可能です。

あなたが実装しているこのコードブロックの中で、各画像のデフォルト幅も設定できることにお気づきでしょう(:width => 600)。最後の行にあるif @idea.picture.present?コードは、関連するデータベースのテーブルをチェックしてこの下にあるコードををレンダリングする前に画像が存在するかを確認するようにRailsに指示をしています。

5. routesの調整

機能的なRailsアプリケーションでは、適切なレスポンスを返すためにブラウザから受信したリクエストを変換するシステムが組み込まれています。このシステムはルーティングと呼ばれます。ブラウザからのリクエストは特定のHTTPメソッドとして解釈されます。HTTP（ハイパーテキスト・トランスファー・プロトコル）とは、情報（通常、Webページや、ハイパーリンクを持つテキストで構成されたWebページ・コンポーネント、つまり「ハイパーテキスト」）がどのようにフォーマットされ、インターネット上で転送されるかを定義するプロトコルです。主なHTTPメソッドは4つあり、それぞれ特定のリソース（ユーザーや投稿など）に対して操作を実行するリクエストです。その4つのメソッドとはGET、POST、PUT、DELETEです。Railsに内蔵されたルーティングシステムは、コントローラーで定義された特定のアクション（index、show、new、edit、create、update、delete）に対応するルートを各リソースに対して自動的に生成します。このため、各モデルに対して、関連する7つのアクションがコントローラー(例えば ideas_controller.rb)で定義されることになります。これらのアクションは、対応するビュー（例：ideas/index.html.erb）をレンダリングするための適切なレスポンス（メソッド）を指定します。

ideas_controller.rbを見ると、これらのアクションと関連する振る舞い、および各アクションに対応するHTTPメソッドが確認できます。

def show
    @idea = Idea.find(params[:id])

    respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @idea }
    end
  end

  # GET /ideas/new
  # GET /ideas/new.json

show - コントローラーのアクション

respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @idea }

（このコードを今の段階で明確に深掘りするのは難しいですが、Railsを使い続けていれば時間の経過とともに理解が深まるでしょう。）

上記のshowアクションの定義では、Railsはrespond_toヘルパーメソッドを使って、それに続くブロックのコード(do...end構文で囲まれたコード)を実行するよう指示しています。このコードには、リクエストの性質に応じて2つの異なるフォーマットオプションが含まれています。ブラウザがHTMLを要求した場合は、このコントローラーアクションに対応するビュー (show.html.erb) に含まれるHTMLコードがレンダリングされます。jsonが要求された場合は、ビューは考慮されず、限られた情報が提供されます。

GET - この部分はどのHTTPメソッドが実行されているかを伝えるためのコメント行です。

このように、URLリクエストはHTTPメソッドに変換され、Railsにビューを返すよう伝えるコントローラーのアクションに関連づけられます。

root :to => redirect('/ideas')コードをconfig.rbに挿入すると、アプリケーションのデフォルトルートをhttp://localhost:3000/ideas にするよう Rails に指示します （このアプリケーションはまだ開発中なので、ドメインとして Localhost が使用されていることに注意してください。アプリケーションをローンチした場合、このドメインは異なるものになります）。 このURLにはideasコントローラーの「index」アクションに対応したパス(/ideas)がデフォルトで含まれており、関連するビュー(index.html.erb)がレンダリングされます。rm public/index.htmlは、以前のアプリケーションのデフォルトルートである「Welcome Aboard」コードが含まれているpublic/index.htmlファイルを削除(removeの略語 rm)します。