【Ruby on Rails】Webアプリケーションのフロント実装に入る前の環境構築

実行環境

■MacOS
■Visual Studio Code
■Ruby
■Ruby on Rails

 

Hamlとは

HTMLよりも簡単にコードを書くことができるビューテンプレートエンジンです。
Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができます。

Hamlには階層構造をインデントで表現するという原則があります。

下記にHamlの例文を記載しています。

.sidebar 
  .side-header 
    .side-header__box 
    %p.side-header__box__username = current_user.name 
    %ul.side-header__box__menu 
      %li.side-header__box__edit-user = link_to new_group_path(current_user), class: "side-header__box__edit-user__btn" do = icon("fas", "edit") 
      %li.side-header__box__new-group = link_to edit_user_path(current_user) do 
      = icon("fas", "cog") 
  .groups - current_user
    .groups.each do |group| 
      .group = link_to group_messages_path(group) do 
        .group__group-name = group.name .group__latest-message = group.show_last_message

GemでHamlを導入


Railsでは、Haml記法を可能にするhaml-railsというGemが提供されています。
このGemをインストールすることで簡単にHamlを導入することができます。
詳しく知りたい方は、下記のリンクをご覧ください。
https://haml.info/
https://github.com/haml/haml-rails

Gemfileに下記のコードを記載します。

gem "haml-rails", ">= 1.0", '<= 2.0.1'

記載後、ターミナルにてbundle install
また、既存のerbファイルをHaml記法に変換することができます。
ターミナルで下記のコマンドを実行します。

rails haml:erb2haml

警告文が出た場合、yを選択すればOKです。

 

MVCとは

Ruby on RailsはMVCの考え方を採用しています。
MVCとは、「Model – View – Controller」の頭文字で、アプリケーションをそれぞれの役割に応じて分割する考え方です。

◎Model ビジネスロジック(データの処理)を行う。

◎Controller リクエストに応じて適切な処理を呼び出す。

◎View 表示処理を行う

 

ルーティングの設定

MVCの前にルーティングを設定しなければいけません。
ルーティングとは道標です。
プログラムを実行するための案内役と思っていただいて構いません。
この段階では、仮のルーティングを設定します。

ルートパスへのアクセスがあったら、contents_controllerのindexアクションが呼び出されるようにします。

Rails.application.routes.draw do 
  root "contents#index" 
 end

次にコントローラーとビューを作成。

rails g controller contents index

コントローラー作成時に、コントローラー名に続けてアクション名を指定します。
それによって以下の2つが変更されます。
・contentsコントローラーにindexアクションが作られている
・viewsのcontentsフォルダにindex.html.hamlが作られている

ターミナルでrails sコマンドを実行。
http://localhost:3000/にアクセスして下記のような表示がされていれば成功です。

次に、Sassを使う準備を行っていきます。

Sassとは

Sass(サス)とはCSSの機能を拡張した言語です。
SassはCSSに似ているものの、異なる言語になります。
CSSを効率的に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことができます。

Sassの特徴

Sassは通常のCSSファイルには記述できません。
反対にSassファイルにCSSを記述することはできます。

Sassを扱うファイルの拡張子は、.sassと.scssの2種類があります。
どちらもSassのファイルとなるものの、記法が大きく異なります。
現在は、SCSS記法が主流となっています。

.scss拡張子(SCSS記法)

.sassの後に作られたSassファイルが.scssの拡張子ファイル。
CSSに非常に似た記法でSassの機能を使うことができます。

Sassのメリット

Sassのメリットとして以下の3つがあげられます。

◎記述の簡略化ができる
親子関係にあるセレクタを入れ子にして書くことができます。
CSSでは、親要素から対象要素までのセレクタを何度も書く必要があります。
しかし、Sassではネスト(入れ子構造)させることで、同じ親のセレクタをまとめることができます。
ネストして記述することで深い階層になっても親子関係がわかりやすい、親要素を複数記述しなくて済むといったメリットがあります。

◎プログラムのような処理ができる
Sassでは変数や条件分岐といったプログラムのような処理を記述できます。
そのため、CSSよりも柔軟なコーディングが可能となります。
変数を定義するには、$変数名: 値; のように記述します。

・mixin
mixinという機能を使用することで、まとまったスタイルを定義することができます。
@mixin mixin名( ) { } のように記述します。
mixinの呼び出しは@includeを使用します。
何度も同じ記述をしていることがあれば、mixinでまとめられないか考えていきましょう。

◎複数のCSSファイルを1つにまとめることができる
Sassではパーシャルという機能を使用することで、複数のSassファイルを1つのCSSファイルとしてまとめることができます。
パーシャルファイルを作成するには、ファイル名を_(アンダースコア)から始めます。
そして、パーシャルファイルを読み込むには、@import ファイル名 と記述します。

@import "reset"; /* _reset.scssを読み込む */ 


@import "header"; /* _header.scssを読み込む */

 

BEMとは

BEMとは、多くの開発者が取り入れているCSS設計(CSSを記述する際のルール)。
命名規則のことで、規則を統一することにより、早く効率的にコードを書いていくことができます。
BEMはBlock、Element、Modifierの頭文字をとったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。

BEMを使用するメリット

■クラスの命名が簡単になる
アプリ開発において、命名規則は非常に重要です。
チームで開発を行う際、誰が見てもわかりやすい命名にする必要があるからです。

■要素の再利用がしやすくなる
共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければなりません。
しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなります。

◎Block
Blockとは、ある要素の大元となるブロック要素です。
Blockの命名には、名詞を使用します。
ElementやModifierはBlockを起点に命名されます。

◎Element
Elementとは、Blockに属する子要素です。
1つ以上のElementによって、Blockは構成されています。
Elementの命名には名詞を使用します。

◎Modifier
Modifierとは、Blockまたは、Elementに特別な装飾をする要素です。
Modifierの命名には、形容詞を使用します。

BEMは開発現場ごとに様々なルールを設けています。
ここでは、代表的な2つのルールを記載しています。

・BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
・Modifierにつなぐ場合は、ハイフン2つでつなぐ

 

Sassの導入

■application.css のファイル名を変更する
ファイルの拡張子が異なるとscssを使えないため、以下の操作を行います。
①app/assets/stylesheets/application.cssの中身を全て消す
②application.cssの拡張子を変更して「application.scss」にする
また、これから追加する全てのスタイルシートはapplication.scssから@importを使って読み込んでいきます。

■reset.scssの設定を行う
ブラウザによってデフォルトで設定されているスタイルをリセットするため以下の操作を行います。
① app/assets/styleseetsディレクトリに_reset.scssファイルを作成する
② application.scssに以下の記述を行い、_reset.scssを読み込む

@import "reset";

③今回は、YUI 3のリセットファイルを使用します。
下記のリンクからコードをコピーして_rest.scssに貼り付けます。
https://github.com/yui/yui3/releases

■contents.scssの設定を行う
以下の操作を行って、これから追加するscssの設定が読み込まれるようにします。
①app/assets/stylesheetsフォルダに、「modules」フォルダを作成
②①のフォルダ内に、「_contents.scss」という名称でファイルを作成
③application.scssファイルを以下のように編集

@import "reset"; 
@import "modules/contents";

■FontAwesomeの導入
FontAwesomeはウェブフォントの一種で、文字を扱うのと同じようにアイコンを表示させることができます。 FontAwesome用のGemがあるのでインストールを行います。
①gemをインストール

gem 'font-awesome-sass'

Gemfileに追記したら、「bundle install」 を行い、サーバーを再起動する。

②次にapplication.scss に以下の記述を追加

@import "reset"; 
@import "modules/messages"; 
@import "font-awesome-sprockets"; 
@import "font-awesome";

これで、FontAwesome が使えるようになります。

■要素サイズの設定
◎paddingなどでサイズが変わらないように設定する
CSSの仕様で、paddingなどの設定を行った場合、その要素全体のサイズが大きくなってしまいます。
それを避けるために以下の記述を行います。

* { 
  box-sizing: border-box; 
  }

この設定を行うことで、paddingやborderの設定を行っても、要素の大きさがwidthやheightで指定したサイズのまま変わらなくなります。
また、上記で設定した「*」というセレクタは、全ての要素に適用させるという意味です。

ここまでが、Sass導入の手順となります。

 

ビューファイルの作成

ウェブサイトのコーディングでは、絶対的な正解の手順はありません。
ここからは、自分で考え実装していきます。

■hamlファイルの作成
views/contentsフォルダにファイルを作成します。
今回は、3つファイルを作成しています。
_header.html.haml
_main.html.haml
_footer.html.haml

■ビューファイルを読み込む
上記のファイルを読み込むために、app/views/contents/index.html.hamlに下記のコードを記載します。
その際、デフォルトで入っているコードは消しておきます。

.wrapper 
  = render "header" 
  = render "main" 
  = render "footer"

部分テンプレートの読み込みのため、ファイル名の先頭の「_」や拡張子は必要ありません。
ここまできたら、動作確認をしてビューが表示されていれば成功です。