コンポーネントに下記のメソッドをつける 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)

導入方法 gemを入れる gem 'ransack' 実装方法 モデル情報 Productモデル controller def index @search = Product.ransack(params[:q]) @products = @search.result end view <%= search_form_for @search, url: products_path do |f| %> <%= f.label :titl…

グラフ作成で簡単にできるgem chartkickは簡単に出来ました。 あと、このgemを使う上で、 Groupdateと言うgemの使うととても楽です。 こんな感じでできます。 手順 gemを入れます Gemfile gem 'chartkick' gem 'groupdate' 表示したい画面でこんな感じ。 以…

Docker + Rails + React + Postgresの環境構築 今回はこちらの組み合わせでやりたいので、テンプレートを作成しました。 初心者向けです。 環境構築で時間をかけずに、アプリ開発に時間をかけたい人向け ちょっとmysqlあたりで余計なモノが入っているかもだ…

リクエスト元の画面にリダイレクトしたい場合 requestメソッドとURI # controllerのファイル内で redirect_to URI(request.referer).path

IPアドレスの取得方法 コントローラーでリクエストからアクセスできるみたい request.ip [44] pry(#<SempleController>)> request.ip => "172.19.0.1"yHeadsController>)> 実際に実装するときは、applicationcontrollerなどに実装するのだろう。 コロナによって、リモートワー</semplecontroller>…

クラスを作成する目的 クラスを使う目的って、 プログラミングは重複した記述を避ける、かつまとまりを持たせる為にクラスを作るのかな # チェーン charing # コグは車輪の内側のやつ cog # チェーンはこっちの方が大きい charing = 52 cog = 11 ratio = cha…

メソッドの抽出 www.amazon.co.jp こちらの本を参考に。 この本は最高すぎる。webエンジニア でやって行く上で、基本的な書き方の概念を理解できる メソッドの抽出 # before def print_owing(amount) print_banner puts "name: #{@name}" # この二行を抽出す…

クラスコンポーネント関数コンポーネント クラスコンポーネントの型つけ // props とstateの型を宣言する type Todo ={ id:number body: string } type TodosState = {} // ここは特になければオブジェクトを受け取る type TodosProps = { todos: Todo[] } c…

Typescriptを勉強するにあたり Typescriptは、型の推論をする事。 ジェネリクスが何となくわかればギリギリ戦える 型の種類 8つあるらしい。 ただ、最初は、Number、String、Boolean、Nullくらいで良い気がする Undefined Null Boolean Number Bigint String…

expressの基本 インストール npm install --save express シンプルなリクエストレスポンス localhost:3000にアクセスすると、Hello worldの文字が ## index.js const express = require('express') const app = express() const portNo = 3000 app.get('/', …

React 動的なフォームコンポーネントを作る components UI Input Input.js Input.css App.js Imput コンポーネント import React from 'react'; import ReactDOM from 'react-dom'; import classes from './input.css' const input = (props) => { console.l…

React Router 基本 インストール npm install --save-dev react-router react-router-dom 必要なファイル index.js ## エントリーのファイル App.js ## index.jsで読み込む最初のコンポーネント First,Second,Third ## リンクさせたいコンポーネント index.j…

クラスライフサイクルメソッド 実行順番 結構この順番を理解していないと、レンダリングされる順番を理解していないと、 修正がうまく反映されないことがあるので、とても役に立ちそう 実行順番は下記らしい 1.constructor() 2. getDerivedStateFromProps(pr…

アロー関数の書き方 Reactの本だったら動画を見る時に、アロー関数で、ソースを読み進める事が苦労したので、まとめ。 アロー関数は、実はReactは関係なくJavascriptの記法らしいです。 ただ、Reactでやたら出てくるので、覚えて置くと便利 通常の書き方と、…

結論 コンポーネント内に入れてしまうでいいかなと思いました components tweets tweets.js tweets.scss cssファイルの呼び方 import 'パス' こんな書き方もある const styles = { red: {color: 'red'} } <h1 style={styles.red}>hello</h1> => helloが赤色になる 参考にした記事 jsで管…

ファイルのインポートエクスポート Reactと書いてありますが、これはjavscriptの記法だった気がします インポート インポートする時にエクスポートの方法によって、異なるので注意が必要です。 exportはデフォルトをつける場合とつけない場合があります。 デ…

React 関数を子コンポーネントに渡す 地味にここつまりました この入力フィールドに入れた値を更新している import React from 'react'; import logo from './logo.svg'; import './App.css'; class App extends React.Component { constructor(props) { sup…

関数コンポーネントの書き方 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ## これ同じ const Welcome = () => ( <h1>Hello, {props.name}</h1>; ) 注意点 ()でかくと、デフォルトでreturnをしてくれる。 {} で書くとエラーになる const Welcome = () =>…

大枠 stateで現在のタブを管理する（currentTab） stageで選択したタブを管理して、setStateで更新する 内容の部分に関しては、stateの内容に応じて出し分ける まずは、選択する部分を作ってみる これは現時点のTwitterのカテゴリーを参考にしています cssを…

webサービスとは？ 自分なりの解釈ですが、 【ブラウザー上で使えるサービス】の事をwebサービスをと 呼ぶのかなと思いました。 webサービスに出てくる登場人物 リソース（HTML・CSS・Javascript） 私たちがブラウザーで見ている画面は、HTML・CSS・Javascri…