目的

Railsでサーバーサイド設計をしている僕が、Webデザイナーの方とチームを組んで1つのWebアプリを作ることになりました。
相手の方はWebデザイナーとして十分な実力を持っていますが、サーバーサイドエンジニアと一緒に仕事をするのは初めてということでしたので、Railで作成したWebアプリがどのようになっているのかをまとめたいと思います。

準備

実際に作業に入る前に、まずは一緒に仕事をする準備をしましょう。

Rails環境を構築する

RailsでWebアプリを動かす（ローカルサーバ上でアプリを走らせる）には、Rails環境が必要になります。
下記記事を参考に、rails sでローカルサーバを立ち上げられるようにしておいてください。
Ruby on Railsの環境構築をしてみよう！(Windows)

gitでプロジェクトを共有

まずはgitでプロジェクトを共有します。
こちらの記事を参考に、自分のレポジトリにプロジェクトフォルダを作成してください。
GitHub で他の人の Repository に参加する方法

プロジェクトフォルダの構成を理解する

Railsで作ったプロジェクトフォルダは、初めて見る方にとっては複雑に感じるかもしれません。
Webデザイナーの方がどのファイルを編集すれば良いのかを説明します。

routes.rbでサイト構成を確認

プロジェクトフォルダ内のconfigフォルダ内にroutes.rbというファイルがあります。
このファイルは「ルーティング」と呼ばれ、サイトの構成を示しています。
例えば今、下記のようなルーティングが設定されているとします。

routes.rb

# usersフォルダのlogin_form.html.erbファイルを表示
get "/" => "users#login_form"
# postから始まるルーティングはサイトの見た目と関係ないので無視
post "/login" =>"users#login"

# postsフォルダのindex.html.erbファイルを表示
get "/posts/index" => "posts#index"

ルーティング設定の構成は、
get "URL" => "表示するファイル"
となっています。
例えば3つめのルーティングは
/posts/indexにアクセスするとpostsフォルダのindex.html.erbファイルを表示するよ
という意味です。
Railsアプリでは、htmlファイルはhtml.erbファイルとなっています。
使用する言語自体はhtmlと変わらないので、そういうもんだと思って頂ければ幸いです。

2つめのルーティングのようにpostまたはpatchのような（それ以外にも色々ありますが）とにかくget以外のものはサーバーサイド設計の都合で作成したものですので、まずはシカトして頂いて結構です。

小まとめ

Railsアプリはhtml.erbファイルを使用する
ルーティングを見れば編集すべきhtml.erbファイルが分かる。

html.erbファイルの場所を確認

編集すべきhtml.erbファイルが分かったところで、そのファイルがある場所がどこなのかを見てみましょう。
ルーティングではファイル名（html.erbファイル）の他にフォルダ名も記載されています。
例として、
get "/" => "users#login_form"
について見てみましょう。
login_form.html.erbファイルはusersフォルダ内にあります。
では、usersフォルダがどこにあるかというと、app > views内にあります。
つまりlogin_form.html.erbファイルはapp > views > usersフォルダ内にあることがわかります。
同様にindex.html.erbファイルはapp > views > postsフォルダ内にあります。

ヘッダーファイルは別にある！

各ページを作成する際に、全てのhtml.erbファイルでヘッダーを作成する必要はありません。
ヘッダーのような共通するレイアウトはapp > views > layoutsフォルダ内のapplication.html.erbファイルを使用します。
このファイルを開くと、

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <!-- ここにコードを書く -->
    <%= yield %>
  </body>
</html>

となっています。
このファイルで一括して<title>タグやメタタグの設定などが行われている訳ですね。
実際にヘッダーを書く場合は、<body>タグ内の<%= yield %>の上に記載していきます。

小まとめ

html.erbファイルはapp > views > フォルダ名内に格納されている
ヘッダーなどの共通するレイアウトはapp > views > layouts > application.html.erbファイルを編集する

scssファイルの場所を確認

続いて、CSSファイルに値するscssファイルの場所を確認しましょう。
Railsアプリではstylesheetはscssファイルに記載していきます。
scssファイルを使用することで、bootstrapを使用することが可能です。
bootstrapを使用する方法は後ほど紹介します。

scssファイルは、フォルダごとに記載していきます。
今回の例だと、このアプリにはusers.scssとposts.scssが存在する訳です。
その場所は、app > assets > stylesheets > ファイル名となります。

共通レイアウト用のファイルは`application.css`

html.erbの項で紹介したapplication.html.erbファイル用のstylesheetもこのフォルダ内に格納されています。ファイル名はapplication.cssです。
そう、このファイルに限ってはscssではなくcssであることに注意が必要です。
そこで、新たにcustom.scssファイルを作成し、そこにレイアウトを記載してきます。

bootstrapを適用させる

さて、scssファイルを適用させるには、custom.scssファイルの冒頭に下記を記載します。

custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

もし上記を記載してもbootstrapが適応されない場合は、Railsプレイヤーに
bootstrap-sassのgemを追加して～！
と伝えましょう。
https://www.sejuku.net/blog/11043

小まとめ

Railsアプリでstylesheetはscssという拡張子が使用される
scssファイルはapp > assets > stylesheets > ファイル名に格納されている

html.erbコーディングのルール

ここからは、実際にhtml.erbファイルを編集していく際のルールを見ていきます。
ルールといっても身構える必要はなく、どこに<div>タグやclassをつけるのかという話です。

Rails特有の記載を理解する

Railsアプリのhtml.erbファイルを見ていると、下記のような書き方を見かけます。

index.html.erb

<% if ～～～ %>

<%= link_to("～～～","～～～") %>

html.erbファイル上でRuby言語を書くときは、<% %>や<%= %>で囲む必要があります。
<% %>はWebアプリ上に表示されない
<%= %>はWebアプリ上に表示される
と覚えておきましょう。
ちなみにこの部分を記載するのはRailsプレイヤーの仕事ですので、詳細を覚える必要はありません。
ただ、サーバー上で見た時に「この式はこの部分を示しているのかな？」と予測できるとスムーズにデザインできるかと思います。

ここからは、実際に<div>タグで囲んだりクラスを付けるときに意識することを記載していきます。

`<%= %>`は`<div>`で挟む

例えば

index.html.erb

<%= link_to("～～～","～～～") %>

にクラスを付けたい時は、

index.html.erb

<div class="link">
  <%= link_to("～～～","～～～") %>
</div>

とします。

タグ内の`<%= %>`はシカト

例えば

index.html.erb

<h3><%= @user.name %></h3>

に対してクラスを付けたいときは、<h3>タグの中身は無視して

index.html.erb

<h3 class="user-name"><%= @user.name %></h3>

とします。
<%= %>はただの文字列だと思ってください。

each文はそれ自体を`<div>`で囲む

Railsアプリには繰り返し表示させるeach文というものがあります。
例として

index.html.erb

<% @users.each do |user| %> <!-- これからeach文が始まるよ -->
  <%= user.name %> <!-- 繰り返し表示する内容 -->
<% end %> <!-- each文終わります -->

というコードがあり、
繰り返し表示するエリア自体にuser-name-areaクラスをつけ、
繰り返し表示する内容にuser-nameクラスをつけるとき、

index.html.erb

<div class="user-name-area">
  <% @users.each do |user| %> <!-- これからeach文が始まるよ -->
    <div class="user-name">
      <%= user.name %> <!-- 繰り返し表示する内容 -->
    </div>
  <% end %> <!-- each文終わります -->
</div>

とします。
user-nameクラスは繰り返し表示されるクラスとなります。

if文は条件によって表示されるかどうかで`<div>`で囲む範囲を変える

if文は、条件によって表示されるかどうかで<div>で囲む範囲を変えます。
例えば条件によって表示されないif文自体に枠を表示するクラスを与えてしまうと、表示されないときに枠だけが表示されてしまいます。

条件によって表示されるかどうかの1つの指標として<% else %>があるかどうかを確認するとよいでしょう。

条件によって表示されないif文はif文の中身を`<div>`で囲む

index.html.erb

<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
  <%= @user.name %> <!-- ユーザー名を表示 -->
<% end %> <!-- if文終わり -->
<!-- ログインユーザーがいない場合は何も表示しない -->

これにクラスを与えると、、、

index.html.erb

<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
  <div class="user-name">
    <%= @user.name %> <!-- ユーザー名を表示 -->
  </div>
<% end %> <!-- if文終わり -->

となります。
条件に当てはまる時はuser-nameクラスが表示され、
条件に当てはまらない場合は、何も表示されません。

常に表示されているif文はそれ自体を`<div>`で囲む

index.html.erb

<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
  <%= @user.name %> <!-- ユーザー名を表示 -->
<% else %> <!-- ログインユーザーがいない場合 -->
  <%= link_to("ログイン","～～") %> <!-- ログインページへのリンク -->
<% end %> <!-- if文終わり -->
<!-- ログインユーザーの有無に関わらず何かを表示している -->

これにクラスを与えると、、、

index.html.erb

<div class="user-area">
  <% if session[:user] %> <!-- ログインユーザーがいる場合 -->
    <div class="user-name">
      <%= @user.name %> <!-- ユーザー名を表示 -->
    </div>
  <% else %> <!-- ログインユーザーがいない場合 -->
    <div class="link">
      <%= link_to("ログイン","～～") %> <!-- ログインページへのリンク -->
    </div>
  <% end %> <!-- if文終わり -->
</div>

となります。
このとき、user-areaクラスは常に表示されており、user-nameクラスとlinkクラスはどちらかが表示されます。

まとめ

以上、長くなりましたが、Railsプレイヤーと一緒に仕事をするWebデザイナー向けにRailsの構文に対してとうクラス付けをしたらよいのかを記載しました。
お互いの仕事を尊重し、コミュニケーションを取りながら仕事を進めていきましょう！