Skip to content

Instantly share code, notes, and snippets.

View kenmori's full-sized avatar

KenjiMorita kenmori

77 followers · 1 following
View GitHub Profile
@kenmori
kenmori / 検索機能.md
Created June 5, 2019 09:03
検索機能

検索機能 メモ

  • urlパラメータを参照してリクエストする ブラウザバック対応
  • 戻る次へボタン時にhistory.pushでurlを変える
  • ページ遷移するさいにhistory.push.stateに状態を詰める
  • ページ遷移した先で戻るボタンにstateを詰めて状態を復元させる
  • window.onpushstateでurlをみて状態を復元する
  • urlをいじられた時の対応をする
  • ページネーションの番号を再現する
@kenmori
kenmori / gist:27df26cafaa9f28d4a358cf9dd32d728
Last active May 29, 2019 02:26
[React x GraphQL x Rx.js] 入力された値を購読して1.5秒後にdispatchする検索機能

[React x GraphQL x Rx.js] 入力された値を購読して1.5秒後にdispatchする検索機能

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
.
.
.

const onSearch$ = new Subject().pip(debounceTime(1500))
@kenmori
kenmori / react-dom.development.js?61bb:506 Warning: Did not expect server HTML to contain a <ul> in <dd>.md
Last active May 27, 2019 07:21

react-dom.development.js?61bb:506 Warning: Did not expect server HTML to contain a <ul> in <dd>.

and

Warning: Text content did not match. Server: "1" Client: "2"

see: skip ssr

SSR中に意図的にクエリをスキップしたい場合は、クエリオプションにssr：falseを渡すことができます。 通常、これはコンポーネントがサーバー上でロード状態でレンダリングされることを意味します。

@kenmori
kenmori / reactであるページのstate状態を保持して遷移先からのhistory-back(ブラウザバック)に対応する.md
Last active March 4, 2024 00:42
Reactであるページのstate状態を保持して遷移先からのhistory-back(ブラウザバック)に対応する

Reactであるページのstate状態を保持して遷移先からのhistory-back(ブラウザバック)に対応する

方法の概要

globalなstateとして管理するのではなく、 Aページ -> Bページ -> Aページ と関連するページ内だけで状態を参照しあう風にする。

@kenmori
kenmori / ReactにおけるWeb Accessibility Initiative - Accessible Rich Internet Applications(ウェイ・アリア).md
Last active May 19, 2019 00:27
ReactにおけるWAI-ARIA[ウェイ・アリア](Web Accessibility Initiative - Accessible Rich Internet Applications)

ReactにおけるWAI-ARIA[ウェイ・アリア](Web Accessibility Initiative - Accessible Rich Internet Applications)

WIP

role_definitions

state_prop_def

@kenmori
kenmori / Apollo x Reley Style Corsele PageNation(リレースタイルカーソルページネーション).md
Last active March 31, 2022 13:39
Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)

Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)

この記事は「GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ！」(https://www.udemy.com/graphql-with-react/) で学んだ知見をまとめたものです。

自分がapollo x graphQLを使うにあたって非常に役立った動画ですので。初学者におすすめです。

@kenmori
kenmori / inlineFragments_typename.md
Last active June 2, 2021 13:11
Apollo x GraphQLのinlineFragmentsと(インラインフラグメント)と__typename(タイプネーム)

Apollo x GraphQLのinlineFragmentsと(インラインフラグメント)と__typename(タイプネーム)

試す場合

自分の情報取得

@kenmori
kenmori / understandingasfrontendengineer.md
Last active January 25, 2021 06:41
【更新】自分(フロントエンドエンジニア)が周辺技術を理解する為に助かった良記事リンク集
@kenmori
kenmori / gist:0ff1a1eabef723218b736ca642a26d1d
Created May 14, 2019 05:02
updateでcacheにfieldがないことを告げられたら直前に行われたqueryのfieldの欠落がないか確認する
@kenmori
kenmori / ReactのMountとは何か.md
Last active May 11, 2019 23:53
ReactのMountとは何か(What is “Mounting” in React js?)

ReactのMountとは何か

What is “Mounting” in React js?

This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.

Reactコンポーネントに対応するインスタンスとDOMノードを作成し、それらをDOMに挿入するこのプロセスがマウントと呼ばれます。