RailsでHTMLやJavaScriptを扱う基本の仕組みとReact・Vue.jsとの連携方法

こんにちは、とまだです。

みなさん、Railsでフロントエンドを扱うとき、どこから始めればいいか迷ったことはありませんか？

サーバーサイドは得意だけど、HTMLやJavaScriptの部分でつまずいてしまう。

そんな悩みを抱えている方も多いのではないでしょうか。

今回は現役のエンジニアとしての経験から、RailsでHTMLやJavaScriptを扱う基本的な仕組みについて解説します。

RailsにおけるHTMLの生成方法とは？

ERBテンプレートという便利な仕組み

Railsには、HTMLを動的に生成する仕組みがあります。

それがERB（Embedded Ruby）と呼ばれるテンプレートエンジンです。

簡単に言うと、HTMLの中にRubyのコードを埋め込める仕組みです。

たとえば、郵便配達員を想像してみてください。

配達員（Rails）が手紙（データ）を受け取り、宛名（変数）を見て正しい住所（HTML）に届ける。

ERBはこの「宛名を見て住所を書く」作業を自動化してくれるようなものです。

基本的なERBの書き方

ERBファイルは.html.erbという拡張子で保存されます。

通常のHTMLと違うのは、<%= %>や<% %>という記号を使える点です。

以下のようにRubyの変数をHTMLに埋め込むことができます。

<h1>こんにちは、<%= @name %>さん</h1>
<p>今日は<%= Date.today %>です</p>

このコードのポイントは<%= %>の部分です。

ここにRubyの変数や式を書くと、その結果がHTMLに表示されます。

<% %>（イコールなし）は処理だけ実行して、結果を表示しない場合に使います。

なぜRailsでフロントエンドを扱う必要があるのか

サーバーとブラウザの役割分担

Webアプリケーションを作るとき、サーバーとブラウザはそれぞれ役割があります。

サーバーはデータを管理し、ブラウザは見た目を表示する。

この2つをうまく連携させることが大切です。

Railsを使えば、この連携を一つのフレームワークで実現できます。

データベースから取得した情報を、そのままHTMLに反映できるからです。

別々のツールを使う必要がないので、開発効率が上がります。

JavaScriptを使った動的な機能の実現

最近のWebサイトでは、ページを再読み込みせずに内容が変わることがありますよね。

これはJavaScriptの力によるものです。

Railsでは、このJavaScriptも一緒に管理できます。

たとえば、ボタンをクリックしたときにメッセージを表示する。

フォームの内容をチェックしてエラーを出す。

こういった機能をRailsの中で実装できるのです。

JavaScriptをRailsで扱う具体的な方法

アセットパイプラインの基本

Railsには「アセットパイプライン」という仕組みがあります。

これは、CSSやJavaScriptファイルを管理する倉庫のようなものです。

倉庫に入れたファイルは、自動的に圧縮されて配信されます。

app/assets/javascriptsフォルダにJavaScriptファイルを置く。

すると、Railsが自動的にそれを読み込んでくれます。

特別な設定は必要ありません。

Webpackerでモダンな開発

最近のRailsでは、Webpackerという仕組みも使えます。

これは、より新しいJavaScriptの書き方に対応したツールです。

app/javascriptフォルダを使って、モジュール形式でコードを管理できます。

以下のようにJavaScriptファイルを配置します。

// app/javascript/packs/hello.js
console.log('Hello from Webpacker!')

そして、ERBファイルで読み込みます。

<%= javascript_pack_tag 'hello' %>

このようにして、JavaScriptをRailsに組み込むことができます。

実際のプロジェクトでは、もっと複雑な処理を書くことになります。

でも基本的な流れは同じです。

ReactやVue.jsをRailsで使う方法

なぜフロントエンドフレームワークが必要なのか

複雑なUIを作るとき、素のJavaScriptだけでは大変です。

たとえば、ToDoリストのようなアプリを考えてみましょう。

項目の追加、削除、編集、並び替え...

これらを全部手作業でコーディングするのは骨が折れます。

そこで登場するのがReactやVue.jsです。

これらのフレームワークを使えば、複雑なUIも整理して作れます。

Railsと組み合わせることで、さらに開発が楽になります。

Reactの導入手順

RailsにReactを導入する基本的な流れを説明します。

まず、Webpackerを使ってReactをインストールします。

rails webpacker:install:react

このコマンドを実行すると、必要なファイルが自動生成されます。

次に、Reactコンポーネントを作成します。

// app/javascript/components/HelloReact.js
import React from 'react'

const HelloReact = () => {
  return <h1>Hello from React!</h1>
}

export default HelloReact

最後に、ERBファイルでコンポーネントを表示します。

<div id="react-root"></div>
<%= javascript_pack_tag 'application' %>

これでReactがRailsで動くようになります。

基本を理解すれば、あとは少しずつ機能を追加していけます。

Vue.jsの導入手順

Vue.jsも同じような手順で導入できます。

インストールコマンドは以下の通りです。

rails webpacker:install:vue

Vue.jsの特徴は、HTMLに近い書き方ができることです。

初心者にとっては、Reactよりも親しみやすいかもしれません。

<!-- app/javascript/app.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Vue!'
    }
  }
}
</script>

このように、HTMLとJavaScriptを一つのファイルにまとめて書けます。

見た目と動作が一目でわかるので、理解しやすいです。

よくある質問と解決方法

Q: ERBとJavaScriptフレームワーク、どちらを使うべき？

これは本当によく聞かれる質問です。

答えは「作りたいものによる」です。

シンプルなWebサイトならERBだけで十分です。

ユーザーの操作に応じて画面が頻繁に変わるなら、JavaScriptフレームワークが便利です。

最初はERBから始めて、必要に応じてJavaScriptを追加する。

この進め方が一番スムーズだと思います。

Q: JavaScriptのエラーが出て困っています

JavaScriptのエラーは、ブラウザの開発者ツールで確認できます。

ChromeならF12キーを押してConsoleタブを見てください。

エラーメッセージが表示されているはずです。

よくあるエラーの原因は以下の通りです。

まず、ファイルの読み込み順序が間違っている場合。

次に、変数名のタイプミスをしている場合。

最後に、必要なライブラリが読み込まれていない場合。

一つずつ確認していけば、必ず解決できます。

Q: フロントエンドの勉強はどこから始めればいい？

まずはHTMLとCSSの基本を理解することが大切です。

次にJavaScriptの基礎文法を学びます。

その後、RailsのERBテンプレートで実践してみてください。

慣れてきたら、ReactやVue.jsに挑戦するのがおすすめです。

一度にすべてを理解しようとすると混乱します。

少しずつ、確実に進めていくことが大切です。

実践的なテクニックと注意点

部分テンプレートを活用した効率的な開発

Railsには「パーシャル」と呼ばれる機能があります。

これは、HTMLの一部分を別ファイルに切り出す仕組みです。

たとえば、ヘッダーやフッターは全ページで共通ですよね。

これらを個別のファイルにしておけば、修正が一箇所で済みます。

<!-- app/views/shared/_header.html.erb -->
<header>
  <h1>My Website</h1>
  <nav>
    <%= link_to "Home", root_path %>
    <%= link_to "About", about_path %>
  </nav>
</header>

使うときはrenderメソッドを呼ぶだけです。

<%= render 'shared/header' %>

こうすることで、コードの重複を避けられます。

メンテナンスも楽になり、ミスも減ります。

非同期通信でユーザー体験を向上させる

ページ全体を再読み込みすると、ユーザーは待たされます。

これを避けるために、非同期通信（Ajax）を使います。

必要な部分だけを更新するので、動作が速くなります。

Railsでは、以下のようにFetch APIを使って実装できます。

// ボタンクリックでデータを取得
document.getElementById('load-button').addEventListener('click', () => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      document.getElementById('result').textContent = data.message
    })
})

サーバー側では、JSON形式でデータを返します。

# app/controllers/api_controller.rb
class ApiController < ApplicationController
  def data
    render json: { message: "データを取得しました" }
  end
end

このように、少しのコードで非同期通信が実現できます。

ユーザーは待ち時間なく、スムーズに操作できるようになります。

まとめ

RailsでフロントエンドTo扱う方法について解説してきました。

ERBテンプレートから始めて、JavaScriptの組み込み方を学ぶ。

そしてReactやVue.jsといったフレームワークの導入方法も理解する。

この流れで進めれば、着実にスキルアップできます。

最初は簡単なERBテンプレートから始めてみてください。

慣れてきたら、JavaScriptで動きを加える。

さらに複雑なUIが必要になったら、フレームワークを検討する。

段階的に進めていけば、必ず理解できるようになります。

フロントエンドの技術は日々進化していますが、基本は変わりません。

HTMLでコンテンツを構造化し、CSSで見た目を整え、JavaScriptで動きを加える。

この原則を理解していれば、新しい技術にも対応できます。

ぜひ実際に手を動かして、RailsでのフロントエンドTo開発に挑戦してみてください。