소개

이번은 아래와 같은 도입에 대해, 주로 프런트 주위의 투고가 됩니다.

1. jQuery

「팔로우 버튼」이나 「좋아 버튼」등, 페이지 천이를 수반하지 않는 (비동기 통신) 기능의 구현에 필요합니다.
Bootstrap의 일부 기능도 필요합니다.

2. Bootstrap

프런트 엔드의 프레임워크로, 네비게이션 바나 버튼 등, 페이지의 디자인을 간단하게 변경할 수 있게 됩니다.
드롭다운 기능 등 jQuery 이외에도 popper.js가 필요하기 때문에 이 기사에서는 그 쪽도 도입합니다.

자세한 것은 이쪽
htps : // 게이 t보오 tst et al p. jp / 도cs / 4.3 / 갓찐 g-s r d / 인 t 로즈 c 치온 /

※「JavaScript를 필요로 하는 컴퍼넌트를 표시」를 참조. popper.js가 필요한 기능을 사용하지 않는다면 popper.js는 필요하지 않습니다.

3. Font Awesome

좋은 느낌의 아이콘을 무료로 이용할 수 있습니다. 검색 버튼에 돋보기 아이콘을 표시하는 등 간단하게 할 수 있습니다.

개발 환경

MacOS Catalina 10.15.7

루비 2.7.1

rails 6.0.3.4

jQuery 설치

터미널에서 실행합니다.

yarn add jquery

설정을 추가합니다. const와 module.export의 행은 초기부터 있다고 생각하므로, 그 사이에 추기합니다.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

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

module.exports = environment

Bootstrap 설치

터미널에서 실행합니다.

yarn add bootstrap popper.js

설정을 추가합니다.

app/javascript/packs/application.js

require("bootstrap");

파일을 만듭니다.

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

사용법

예를 들어 버튼 링크의 디자인을 바꾸는 경우는 이런 느낌입니다.

<%= link_to "ボタンに表示する文字列", リンク先, class: "btn btn-primary" %>

Font Awesome 설치

터미널에서 실행합니다.

yarn add @fortawesome/fontawesome-free

설정을 추가합니다.

app/javascript/packs/application.js

require("@fortawesome/fontawesome-free");
import '@fortawesome/fontawesome-free/js/all';

파일을 만듭니다.

app/javascript/stylesheets/application.scss

@import '@fortawesome/fontawesome-free/scss/fontawesome';

사용법

Font Awesome 페이지로 이동하여 왼쪽 상단의 검색 양식으로 검색합니다.

htps : ///후타타우우소메. 코m/


"search"라는 단어로 검색하면 검색 결과에 돋보기 아이콘을 찾을 수 있다고 생각합니다.
검색 결과를 클릭하면 아이콘 페이지로 이동하므로 <i class="～～～></i> 라는 부분을 클릭하면 복사할 수 있습니다.



그리고는 view 템플릿의 사용하고 싶은 부분에 붙여 넣는 것 뿐입니다!
예를 들어 검색 버튼(링크)을 설치하는 경우는 이런 느낌입니다.

<%= link_to 'リンク先' do %>
  <i class="fas fa-search"></i> 検索
<% end %>