世界を旅して暮らしたい放浪エンジニアブログ

Railsのフロントエンドをコンポーネント指向で構築していく

「今更改めて Ruby On Railsの開発を行う 〜 Part3」です。Rails開発のフロントエンドをコンポーネント指向で進めていきます。

[ 目次 ]

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ(@nakanakamu0828)です。

この記事は過去に運用していたブログからの移行記事になります。

前回に引き続きRailsの開発を進めていきたいと思います。
コンポーネントごとに画面を作成していきます。
前回確認用として作成したapplication.cssは不要になります。削除してください。

$ rm -f frontend/packs/application.css

アプリの初期設定

アプリ全体で共通利用するフォルダを作成します。
今回はinitとします。

$ mkdir -p frontend/init
$ touch frontend/init/index.js
$ touch frontend/init/index.css

frontend/packs/application.jsにinitのimportを追加します。

// frontend/packs/application.js
import "init";

frontend/init/index.js, frontend/init/index.cssは以下のように作成します。

// frontend/init/index.js
import "./index.css";
/* frontend/init/index.css */
@import "normalize.css/normalize.css"; 

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

normalize.cssfrontend/init/index.cssの最初に読み込み、ブラウザ依存のCSSをリセットします。

コンポーネント作成

コンポーネントは、layouts, pages, componentsの3種類を用意したいと思います。

  • layouts : 共通デザインを定義
  • pages : ページごとのデザインを定義
  • components : ページ内のパーツごとのデザインを定義。複数ページで共通利用が可能

まず最初に作成するレイアウトのテンプレートをsiteと呼ぶことにします。
各画面で共通利用するレイアウトのデザインです。

$ mkdir -p frontend/{layouts,pages,components}
$ mkdir -p frontend/layouts/site
$ touch frontend/layouts/site/{_site.html.erb,site.css,site.js}

各ファイルの内容は以下のように定義します。

// frontend/layouts/site/site.js
import "./site.css";
/* frontend/layouts/site/site.css */
.site {
    height: 100vh;
    width: 700px;
    margin: 0 auto;
    overflow: hidden;
}
<!-- frontend/layouts/site/_site.html.erb -->
<div class="site">
  <%= yield %>
</div>

続いて前回作成したHome画面のコンポーネントを作成します。
ページ毎のコンポーネントになります。

$ mkdir -p frontend/pages/home
$ touch frontend/pages/home/{_show.html.erb,home.css,home.js}

各ファイルの内容は以下のように定義します。

// frontend/pages/home/home.js
import "./home.css";
/* frontend/pages/home/home.css */
.home h1 {
    font-size: 1.2rem;
    font-weight: bold;
}
<!-- frontend/pages/home/_show.html.erb -->
<div class="home">
    <h1>Home page</h1>
    <p>Hello from our first component!</p>
</div>

initと同様で作成したコンポーネントは、frontend/packs/application.jsにてimportします。

// frontend/packs/application.js
import "init";
// 以下を追加
import "layouts/site/site";
import "pages/home/home";

前回作成したHome画面のhtml app/views/homes/show.html.erb を以下のように変更します。

<!-- app/views/homes/show.html.erb -->
<%= render "layouts/site/site" do %>
  <%= render "pages/home/show" %>
<% end %>

siteレイアウトを使用してhomeの画面を表示するようにコンポーネントを読み込みます。
ここまでできたらサーバーを再び起動し、以下の画面が表示さるか確認してください。

Rails サンプル画面

今回はlayouts, pagesの2つのみで、componentsに触れませんでしたが、複数の画面で利用するUIパーツなどcomponentsとして切り出して利用したいと考えています。
こちらに関しては実装を進めていく上でリファクタリングを進めながら切り出していきたいと思います。

今回の成果物は こちら をご確認ください。

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts