Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

2019年9月28日 Reactを使ってスワイプカードUIを作ってみよう

CodeSandBoxの準備

  1. テンプレートを開く
  2. 「Fork」する
  3. ファイル名をわかりやすいものに変更する(ログインしていなくても再度編集ができる)(githubアカウント持っている人はログインしてOK)

サンプルコード

こちらのサンプルコードを適宜参照して進行する。 困ったら公式ドキュメントがわかりやすい。日本語翻訳もされている。

ハンズオンの前提

セクションと内容

1: テンプレートをForkしてコードの準備をする(略)

2: 「いいね!」の実装する

ゴール

  • ユーザーの「いいね!」ボタンクリックを検知してカードを(一枚)スワイプすることができる。

主に学べること

  • Reactを用いたユーザーイベント(クリックなど)の制御方法
  • (Functional Componentでの)Stateの定義/使用方法

ここで参考になるドキュメントのURL

3: カードのコンポーネント化

ゴール

  • カード部分を外部ファイルに定義してコンポーネント化し、index.jsから呼び出せている
  • カードではpropsを受け取れるようにして、呼び出し元(index.js)から渡した値を画面に表示できている
  • カードを2枚表示できている

主に学べること

  • コンポーネントの定義と利用方法
  • コンポーネントに外部から値を渡す方法
  • 外部から受け取った値をコンポーネントで使う方法

ここで参考になるドキュメントのURL

4:n枚のカードに対応する

ゴール

  • カードが何枚のときでもスワイプできるようになっている
  • 最低限のコンポーネントでn枚のスワイプカードに対応できている

主に学べること

  • カード2枚分のコンポーネントでn枚似対応するためのtips

完成形

https://codesandbox.io/embed/swipe-card-complete-yjlpo?codemirror=1

CodeSandBoxで、もっと実装してみる

  • スキップにも対応する
  • 関数の定義にuseCallBackを使う。(パフォーマンスの向上)
  • ユーザーの情報がない場合もカードが表示できるようにする。(コミュニティ/歳が無い場合への対応)
  • TypeScriptを使ってみる
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.