React.jsを使ったガイドツアーの作り方(React Joyride)

こんにちは!

最近『あつ森』にハマり過ぎて、地下室のある5LDKの家で一人暮らしに憧れる町田です。
ファンデリーのデザイン・システム室でグループリーダーをしています。

さて、今日は前回(Part.1)に引き続き、React.jsパッケージのご紹介Part.2です。

今回紹介するのはReact Joyrideというパッケージです。
このパッケージを使って、本記事で簡単なガイドツアー機能を作ってみたいと思います。


なぜパッケージを紹介するのか?

パッケージの数が多すぎて、どれを選ぶのが最適解なのかがパッと見でわからないからです。
今後の開発で、何か取り入れたい機能があって、どう実装しようかを考える時に
本記事を読むことで、「そういえばあんなパッケージあったな。少し調べてみようかな」
となるきっかけになればと思い、パッケージを紹介しています。


React Joyrideとは?

今回、実装するのは『React Joyride』というパッケージです。
まず、「Joyride」ってどういう意味?ということで辞書サイトで調べてみたところ

Joyride

■名詞 〈俗〉ジョイライド

 ◇意味
 特に他人の車を盗んで(または無断で借用して)
 スリルを味わうために無謀な運転をすること


 ◇例文
 Hey, come on! We gonna go for a joyride. : さあ、車をブッ飛ばしに行くぜ。


■自動詞 〈俗〉

 ◇意味
 車を乱暴に乗り回す。
 他人の車やオートバイを盗んで(または無断で借用して)乗り回す場合を指すことが多い。

(引用: 英辞郎

なんか予想以上にヤバい意味でした…。
盗んだバイクで走り出してしまった“尾崎豊”的な感じでしょうか…。ちょっと違いますね。
でも、今回意味を調べたおかげで「Hey, come on! We gonna go for a joyride.」は“人生で一度は使ってみたいセリフランキング”の2位にランクインされました。ありがとうございます。
ちなみに1位は「いま、あなたの脳内に直接語りかけています」です。
人生で一度は使ってみたいですね。

話が外れましたが、React Joyrideの方は決してヤバいパッケージではなく、★3k以上、DL数212k以上もの実績がある比較的Popularなパッケージです。


本題

やっと本題です。
React Joyrideを使用して簡単な画面をつくってみます。
まずは完成イメージをご覧ください。

「ガイドツアースタート」のボタンを押してみてください。

こういうガイドツアーがあるアプリケーションをたまに見かけますよね?
アプリケーションの使い方をユーザーに説明する際に非常に有効な方法である反面、何度も表示されたり、表示するタイミングによっては逆にユーザーにストレスを与えてしまうという使い所を選ぶ機能の一つです。

そんなガイドツアー機能ですが、React Joyrideを使用すると比較的簡単に実装することができます。


以下、コードの解説です。
(今回も前回同様にReact + Redux環境で開発した場合を想定しています。
そのため、すべてを解説すると長くなりそうなので、React Joyrideでの実装部分に絞って解説させていただきます。)

すべてのコードをご覧になりたい場合、こちらをご参照ください


コード解説

src/components/Tour.jsx

import React from "react";
import { useSelector } from "react-redux";
// React Joyrideのインポート
import Joyride from "react-joyride";
import Content from "/src/components/Content";

const Tour = () => {
  // ReduxのStoreに格納されたガイドツアーの情報を取得
  // Storeの中身は以下URL参照
  // https://codesandbox.io/s/guidedtours01-6ivik?from-embed=&file=/src/modules/tour.js
  const tourState = useSelector(state => state.tour);

  return (
    <div>
      {/* React Joyride本体 ここから */}
      <Joyride
        continuous={true}
        run={tourState.run}
        scrollToFirstStep={true}
        showSkipButton={true}
        steps={tourState.steps}
        styles={{
          options: { primaryColor: "darkturquoise" }
        }}
      />
      {/* React Joyride本体 ここまで */}

      {
        /* ガイドするContentの中身。詳細は以下URL参照 */
        /* https://codesandbox.io/s/guidedtours01-6ivik?from-embed=&file=/src/components/Content.jsx */
      }
      <Content />
    </div>
  );
};
export default Tour;

使い方

React Joyride自体はyarnまたはnpmでパッケージをインストールした後に、使用したいコンポーネントでインポートをするだけで使えるようになります。


指定可能なオプション

詳しくはこちらをご参照ください。
たくさんあるので、本記事では実装で使用した代表的なものに絞って解説します。

continuous(型: boolean, デフォルト値: false)

次のステップを続けて表示させたい場合 → true
次のステップをユーザーにクリックさせたい場合 → false


run(型: boolean, デフォルト値: true)

ガイドツアーを発火したい場合 → true
ガイドツアーを停止したい場合 → false


scrollToFirstStep(型: boolean, デフォルト値: false)

発火時に最初のステップの位置までスクロールさせたい場合 → true
発火時に最初のステップの位置までスクロールさせたくない場合 → true


showSkipButton(型: boolean, デフォルト値: false)

スキップボタンを表示させたい場合 → true
スキップボタンを表示させたくない場合 → false


steps(型: Array<Step>)

ステップごとの中身を配列で指定することができます。
配列の中身の例はこんな感じです。

[    
  target: '.targetClassName',
  title: 'タイトル',
  content: '本文',
  locale: {
    skip: 'スキップ',
    back: '前へ',
    next: '次へ',
    last: '終了'
  }
]

target(型: Element | string)

ガイドのターゲットをクラス名で指定することができます。

title(型: React.Node)

ステップごとのタイトルを指定することができます。

content(型: React.Node)

ステップごとの中身(本文)を指定することができます。

locale(型: object)

残念ながらデフォルトの言語は英語なので、日本語化したい時に使用します。
以下が日本語化の例です。

{
  back: '前へ',
  close: '閉じる',
  last: '終了',
  next: '次へ',
  skip: 'スキップ'
}


styles(型: object)

React Joyrideのプライマリーカラーが結構どぎつい赤色なので、以下のように指定することで色を変更することができます。

{
  options: { primaryColor: "あなたの好きな色をここで指定してください" }
}


以上、React Joyrideを使ったガイドツアー実装のご紹介でした。
「Joyride」というパッケージ名の意味を調べた時は少し不安でしたが、簡単にガイドツアーを実装することができて色々なオプションも指定できて自分好みにある程度改造も出来るので、良いパッケージだと思います。

今後も気になるパッケージや日本語のドキュメントが少ないパッケージ、マイナーなパッケージなどを中心に書いていけたらと思います。


また、現在デザイン・システム室では新しいメンバーを大募集しています!
未経験の方も実務経験者の方も同時募集中です。
『本当に住みたい街』として有名なあの赤羽で一緒に働いてみませんか?
少しでも気になった方、どしどしご応募ください!


デザイン・システム室の採用に関するご質問

さらに、新しい取り組みとして、ファンデリーのエンジニアが所属する『デザイン・システム室』の質問箱およびTwitterのアカウントができました!!

“採用に関すること”、“現在の開発環境”や“どんなメンバーがいるのか”など
事前に聞いてみたいことがあれば、質問箱よりお気軽にご質問ください。
ご質問の回答はTwitterにて公開させていただく予定です。
ご質問およびフォローお待ちしております!


デザイン・システム室へのご質問 >

募集要項およびエントリーフォーム >