方法 stateのbooleanを更新したら、styled-componentで動的に変更する キャプチャー こんな感じのボタンを作成 クリックしたら文字色が赤になる様にします ボタンをクリックしたら文字が赤くなる ソース アプリケーション側 import RoundButton from './comp…

手順 gitignoreに.envに入れる gitignore .env .envに環境変数を設定する REACT_APP_FIREBASE_KEY="your_key" REACT_APP_FIREBASE_DOMAIN="your_app_id.firebaseapp.com" REACT_APP_FIREBASE_DATABASE="https://your_app_id.firebaseio.com" REACT_APP_FIREB…

コンポーネントに下記のメソッドをつける onClick={(e) => e.stopPropagation()

&&の使い方 OOだったら、レンダーする。 {this.state.isActive == true && ( <Filter>filter</Filter> )} 黒色の要素を表示する時に、isActiveのステータスをみて表示するか否かを決める import React, {Component, useState} from 'react'; import styled from 'styled-compo…

インストール npm install --save styled-components 基本的な書き方 import styled from 'styled-components' const 変数名 = styled.タグ名` cssを書く ` ## サンプル const Button = styled.button` width: 300px; height: 100px; border-radius: 10px; `…

ドキュメント https://developer.mozilla.org/ja/docs/Web/API/Storage SessionStrage ログイン情報として活用するケースも 基本操作 sessionStorage.setItem() sessionStorage.getItem() sessionStorage.removeItem()

React ライフサイクメソッドについて Reactで、元データは、propsであったり、APIで取得してきて、setStateをするケースが多多あると思います。 初期データは、ライフサイクルメソッドで設定する場合が多いと思います。 呼び出すタイミングによっては、デー…

gemを入れる gem 'kaminari' controller @products = Product.page(params[:page]).per(2) ビューを編集 <%= paginate @users %> これだけ。 基本はbootstrapと組み合わせるらしい github github.com

実装方法 出力させる方法 ## 出力させる方法 Logger.new("出力先", '出力内容') ex） Logger.new('/log/development', "出力内容") ## こんな書き方もある様子 logger = Logger.new('/log/development') logger.debug '出力させたい内容' 出力させるメソッド…

csv出力 view <%= link_to "CSV", products_path(format: :csv) %> controller def index respond_to do |format| format.html do @search = Product.ransack(params[:q]) @products = @search.result end format.csv do @products = Product.all data= CSV.…

n + 1については下記の記事を参考に qiita.com 検証 model Product belong_to product_price ProductPrice has_many :products view <% @products.each do |product| %> <tr> <td><%= product.title -%></td> <td><%= product.product_price.price -%></td> </tr> <% end %> NGパターン …

development.rbで下記の記述を記載する config.logger = Logger.new(STDOUT)