Railsにこれから初めて触れる方を対象にしたチュートリアルです
RailsにElmを導入するチュートリアルになります
まず、rails newを実行し、Railsアプリのひな型を作成します。
rails new elm
次に、作成したRailsアプリのディレクトリへと移動します。
cd elm
RailsでWeboackを使いやすくしたWebpackerというものを使用します
まず、GemfileにWebpackerを追加します
gem 'webpacker', '4.0.2'
なお、Webpackerのバージョンを4.0.2としているのはElmのインストールエラー回避のためです
3.5.5だとインストール時にエラーが発生します
ref: Elm installer not working #1711
ちなみに、Webpackerでは、Vue、React、Angular、Elm、Stimulusを使用することができます
gemを追加した後、ターミナルでbundle installを実行します
bundle install
その後、Webpackerのインストールコマンドを実行します
rails webpacker:install
今回はElmを使用するのでrails webpacker:install:elmを実行します
rails webpacker:install:elm
これでElmをRailへ導入できました！
Webpackerを使う場合、ruby ./bin/webpack-dev-serverというコマンドを実行しつつ、rails sでローカルサーバーを起動する必要があります
その為、現状のままではターミナルを複数開いておく必要があり、少々面倒です
そこで、複数のコマンドを並列して実行できるforemanを使用します
まず、Gemfileにgem 'foreman'を追記します
gem 'foreman'
その後、bundle install
bundle install
この時、sqlite3がインストールできないエラーが発生するかもしれません その場合は以下のようにsqlite3のバージョンを修正してbundle installを実行してください
gem 'sqlite3', '1.3.13'
bundle install
次に、foremanで使用するProcfile.devを作成します
web: bundle exec rails s
webpacker: ruby ./bin/webpack-dev-server
あとは、foreman start -f Procfile.devをターミナルで実行するだけです
foreman start -f Procfile.dev
localhost:5000にアクセスできればOkです(foremanを使用する場合、使用するポートが5000へと変更されています)
rails g controller コマンドを使い、コントローラーを作成します
rails g controller web index
その後、config/routes.rbを以下のように編集します
Rails.application.routes.draw do
root 'web#index'
end
foreman start -f Procfile.devを実行して、localhost:5000でページが表示されていればOKです
それではElmを使ってみましょう
先ほどElmインストールした際に、app/javascript/packs/hello_elm.jsが作成されています
app/views/web/index.html.erbに以下のコードを追加してください
<%= javascript_pack_tag 'hello_elm' %>
その後、foreman start -f Procfile.devを実行し、localhost:5000にアクセスします
ブラウザにHello Elm!と表示されていればOKです！
次に、app/javascript/packs/index.jsを以下のように作成します
import { Elm } from '../Index'
document.addEventListener('DOMContentLoaded', () => {
const target = document.createElement('div')
document.body.appendChild(target)
Elm.Index.init({
node: target
})
})
その後、app/javascript/Index.elmを以下のように作成します
module Index exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
main =
div [] [text "Hello, Elm & Ruby on Rails!"]
最後に、app/views/web/index.html.erbに以下のコードを追加します
<%= javascript_pack_tag 'index' %>
あとは、foreman start -f Procfile.devを実行し、localhost:5000にアクセスします
ブラウザにHello, Elm & Ruby on Rails!と表示されていればOkです！