React.jsを使ったスマホアプリっぽいWebページの作り方(パッケージ紹介Part.1)

こんにちは!
ファンデリー デザインシステム室の町田です!

突然ですが今回は、React.jsでスマホアプリっぽいWebページを作ってみようと思います。


■作ろうと思った経緯

①ファンデリーのサービスをもっと幅広い世代に知ってもらいたい!使ってもらいたい!



②最近の若年層(スマホ世代)はWebアプリよりもスマホアプリの動作に慣れているのではないか?



③スマホアプリっぽいWebページを作ってみよう!



④でもスマホアプリっぽさって何だろう…?


⑤そうだ、スワイプだ!

…ということで少し強引ではありますが、今回の記事ではスワイプに絞って説明をしていきます。


■はじめに

React.jsには便利な追加機能のセット(パッケージ)がたくさんあります。
パッケージの種類は無数にあるため、メジャーなパッケージもあれば、マイナーなパッケージもたくさんあります。
メジャーなパッケージについては、先人の方が詳しく説明した資料がネット上に転がっているので、本ブログではマイナーなパッケージについてたくさん紹介していけたらと思っています。ただ、今回は『Webページでアプリっぽい動きを実装する』というテーマなので、それを実現してくれそうなメジャーなパッケージ『react-swipeable-views』を使用してスマホアプリには欠かせない“スワイプ”をReact.jsで実装してみようと思います!

もちろん、本格的にスマホアプリっぽくしたいのであれば、PWA化やそもそもReactにはReact Nativeというスマホアプリ開発向けのフレームワークがあるのでそちらを使う方がよりスマホアプリさを追求できるとは思いますが、今回は簡易版ということでReact.jsで実装可能でさらに、スワイプに限定する形でお話しを進めて行きたいと思います。

※本記事ではReact.jsだけでなくMaterial-UIとReduxを使用した、より実践的な実装方法で説明していきますので、React.jsの開発に興味がある方や現在React.jsで開発中の方の参考になれば幸いです。


■react-swipeable-viewsとは

Reactパッケージの1つです。
名前の通り、Webページをスワイプできるようにしてくれます。
インストールと実装はとてもカンタンです。


■インストール方法

使用しているパッケージマネージャによってインストール方法は異なりますが
いずれもコンソールで以下のコマンドを叩くだけです!

npm install react-swipeable-views

  or

yarn add react-swipeable-views


■実装

まずは「Hello react-swipeable-views!」
react-swipeable-viewsを使用し、複数のスライドをスワイプできる状態になるまで進めてみます。
ちなみに、今回は面倒な環境構築の手間を省くためにCodeSandboxを使用しています。

よし、作るぞ!と思ってから数分でここまで来れました。
ありがとうCodeSandbox!

ちなみに、スワイプの実装というだけであればこれで完成です。。。
ただ、今のままでは見た目がアレなので少し修正してみます。

まず、スライドの切れ目がわかりやすくなるように各スライドに色を付けます。

次に、スライドの中身を画像に変えてみます。

美味しそうなスイーツの画像を差し込むだけでなんかちょっと良い感じの見た目になりました。
ちなみに、このスイーツはミールタイムというECサイトで購入ができるそうですよ!! XD

続けて、ここからはデザインに特化したパッケージ『Material-UI』を使用してさらに見た目を修正していきます。


■Materil-UIとは

Reactのパッケージの1つです。
Material-UIを使用すると、マテリアルデザインというGoogleが推奨するデザインをカンタンに実装することができます。

Material-UIを使ってタブを追加してみました。

Material-UIを使ってカードを追加してみました。

react-swipeable-viewsとMaterial-UIを組み合わせることでスマホアプリっぽいデザインがカンタンに出来ました。


■Reduxの利用

Reduxとは…state(状態)をStore内で一元管理するためのライブラリです。
中規模以上のプロダクトであれば、このReduxとReactの組み合わせはデファクトスタンダードになりつつあります。

そこで、今回はより実践的な開発を意識し、React.jsで保持しているState(状態)をReduxのStoreに移管してみます。

見た目では全く変化していないように見えますが、タブのインデックスの値をReduxのStoreで管理するようコードを変更しています。
また、ReduxでCRUD処理をする際は、modules内のactionからRails等のAPIを叩くことが推奨されています。


■まとめ

いかがでしたでしょうか。
React.jsのパッケージを使用することで、スマホアプリっぽい動きや見た目がカンタンに実装できることを実感していただけたかと思います。
今回はスワイプに限定して紹介させていただきましたが、今後もユーザーの利便性を向上させるような開発についてお話しできればと思います。
また、本記事で紹介した内容が実際のサービスに使用されるかはわかりませんが、継続的なサービス向上のため、デザインシステム室ができることをメンバー全員で日々追求していきたいと思います。

そんなファンデリー デザインシステム室では、現在新しいメンバーを募集しています。
スマホアプリっぽいWebページ作りに興味がある方もそうでない方も以下のリンクより募集要項をご確認いただき、少しでもご興味がございましたらエントリーフォームより、ご応募お待ちしております。

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


■参考

react-swipeable-views 公式ページ