Rails で ToDo アプリをつくる① (Rails 入門)

Rails での開発の練習のために、数回にわたって、ToDo アプリをつくっていきたいと思います。

つくるもの

ToDo アプリ

  • CRUD を行う

    • Create (ToDo作成)
    • Read (ToDo一覧)
    • Update (ToDo編集と完了処理)
    • Delete (ToDo削除)
  • ユーザー毎にToDoを管理する

    • とりあえずは、ユーザーIDをパラメータで渡す
      (あとで、ユーザー認証を実装予定?未定です)
  • デザインは Bootstrap を利用

開発環境

環境構築

↓をもとにRailsサーバー起動まで行います。 utouto97.hatenablog.com

docker-compose.ymlファイルのenvironmentPOSTGRES_PASSWORDを設定することで、PostgreSQL にパスワードを利用するようにしています。
そのため、database.ymlファイルにpassword:も設定します。

また、このプロジェクトは Git で管理しようと思います。

$ git init
$ git add .
$ git commit -m "first commit"

続いて、Bootstrap をインストールしていきます。

Rails 6 には、Webpacker という Webpack が入っています。
これを利用して、Bootstrap をインストールしていきます。

まずは、yarn を使って必要なものをインストールします。

$ yarn add bootstrap @popperjs/core

いくつかのファイルを編集して、設定していく必要があります。

一つ目は、views/layouts/application.html.erbファイルに以下を追記します。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

二つ目は、app/javascript/stylesheets/application.scssファイルを新規作成します。
このディレクトリも存在しないと思うのでディレクトリも作っておきましょう。

@import "bootstrap"

三つ目は、app/javascript/packs/application.jsファイルに以下を追記します。
一番上に追記しておけば大丈夫だと思います。

import "bootstrap"
import "../stylesheets/application"

参考: Rails6にbootstrap5を適用する | srockstyle

これで、一通り環境を構築することができました。

最後に、Bootstrapを追加した分の変更も Git にコミットして、今回はここまでです。

続き

utouto97.hatenablog.com

終わり