Rails で ToDo アプリをつくる① (Rails 入門)
Rails での開発の練習のために、数回にわたって、ToDo アプリをつくっていきたいと思います。
つくるもの
ToDo アプリ
CRUD を行う
- Create (ToDo作成)
- Read (ToDo一覧)
- Update (ToDo編集と完了処理)
- Delete (ToDo削除)
ユーザー毎にToDoを管理する
- とりあえずは、ユーザーIDをパラメータで渡す
(あとで、ユーザー認証を実装予定?未定です)
- とりあえずは、ユーザーIDをパラメータで渡す
デザインは Bootstrap を利用
開発環境
- Ruby on Rails
- PostgreSQL
- Docker & Docker Compose
- Bootstrap
- Git
- heroku (デプロイ予定)
環境構築
↓をもとにRailsサーバー起動まで行います。 utouto97.hatenablog.com
docker-compose.yml
ファイルのenvironment
のPOSTGRES_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 にコミットして、今回はここまでです。
続き
終わり