🔰

記事の投稿はじめてみました

2024/02/03に公開

Markdown

tech

内容

もう既にまとめて頂けてそうですが、Markdownの練習も兼ねて、
アプリケーションの新規作成後に、よく必要になった作業をまとめてみようと思います。
自分のメモ書きみたいなものになります。

必要なプラグインを追加

$ yarn add @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object

プラグイン追加 → development.rb に config.hosts.clear を記載する

画像を扱うための設定

$ rails active_storage:install

ライブラリをインストールするコマンド : $ bundle install

画像のサイズ変更を行うGemを導入

Gemfile

gem 'image_processing', '~>1.2'

deviseのインストール

$ rails g devise:install

deviseを使用するmodelの作成 : $ rails g devise モデル名

ページネーション機能追加

①Gemfileに　gem 'kaminari','~> 1.2.1'　記載

$ bundle install

②kaminariの設定ファイルを作成

$ rails g kaminari:config

③kaminariがページャで利用するテンプレートを作成

$ rails g kaminari:views default

※controller.rb の書き方

@post_images = PostImage.page(params[:page])

※html.erbの書き方

<%= paginate post_images %>

Bootstrapを導入

①yarnでインストールする

$ yarn add jquery bootstrap@4.6.2 popper.js

②config/webpack/environment.js に追加

const webpack = require('webpack')
environment.plugins.prepend(
　'Provide',
　new webpack.ProvidePlugin({
　　$: 'jquery/src/jquery',
　　jQuery: 'jquery/src/jquery',
　　Popper: 'popper.js'
　})
)

③app/javascript/stylesheets/application.scss に追記

@use '~bootstrap/scss/bootstrap';

④app/javascript/packs/application.js に追記

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";

⑤app/views/layouts/application.html.erb を下記に修正

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