Help us understand the problem. What is going on with this article?

React Nativeアプリのスタイルガイドラインを0から考えてみた

More than 1 year has passed since last update.

こちらはReact Native Advent Calendar 25日目の記事になります。

React Nativeでアプリを作り始めて もうすぐ1年になります。
React Nativeはまだ世間的に書き方のお作法が確立されていませんが、実務の中でいくつかのコードのバットマナーを見つけました。

  • スタイルの命令が散乱していて、修正時にスタイルの把握が困難になる。
  • スタイルのせいでコードが長くなり、コンポーネントの出し分けしているような重要なロジックが読みにくい

このViewまわりのコードの書き方の作法について、最近になってやっと自分なりの理想の形が見えてきたので、今日はそれをみなさんに共有しようと思います。

React Nativeでのスタイルの当て方

まず整理しておきたいのがReact Nativeにおけるスタイルの当て方のパターンです。

React Nativeではスタイルに関するコードを書く場所が4通り考えられます。

1:タグのstyleに対して直接スタイルを記述する
2:StyleSheetを作成する
3:外部にスタイルを共通化してそれを呼び出す
4:スタイル適応済みのコンポーネントを呼び出す
スクリーンショット 2017-12-24 23.40.44.png

開発を始めた当初はPattern2を基本的に使用していましたが、開発を進めていくうちに、”あれ?同じようなスタイル前あてたな〜”と思うことが増え、commonStyleを使用するPattern3や、スタイルを当て済みのコンポーネントを持ってくるPattern4を使うようになりました。

スタイル共通化のメリット

コンポーネント思考を活かすためには、あるコンポーネントをどこに配置しても同じスタイルが再現されることが求められます。

Pattern2で実装していた頃のなごりで、同じ名前のスタイルクラスが様々なファイルに存在していました。
しかし、同名のスタイルでも各ファイルごとに中身のスタイルが異なるケースがあり、その場合には同じコンポーネントを配置したのに画面によってスタイルに差が生じてしまうことがありました。

スタイルを共通化し、各ファイルでは共通でないスタイルのみをあてるようにすることで、各ファイルのコード量を減らし、開発時の時間の節約にも繋がります。

ガイドライン導入のメリット

スタイルガイドラインを作成する目的は一貫したUI/UXを実現・維持することでユーザーによりよいUX体験を提供することです。

スタイルや使用場面をルール化は、全体的なリファクタリング効果や開発コストの低減も推し進める効果があります。

今回ガイドラインの導入により行った具体的な施策と改善内容です。

1:コンポーネント化をより細かい粒子で行う
=コンポーネント指向の実現により、移植性の向上と、全体を見渡したときに重複しているコードを減らす

2:共通化できるスタイルとできないスタイルを明確にわける
=開発者が各コンポーネントを異なる画面で使用する際に都度設定しなくてはならないことを減らす

3:スタイルの定義場所をできるだけ共通化
=メンテしやすく、全体のコードを減らす

4:色やフォントなどは定数を使う
=メンテしやすくする

スタイルガイドライン

コンポーネント

スクリーンショット 2017-12-24 23.56.47.png

上図はボタンのコンポーネントについてスタイルを定義しています。
記述内容はサイズやスタイルに加え配置する時のmarginです。
画像には写っていませんが、このボタンはRaised buttonという区分に分けられており、区分ごとに使用ルールをtextで記述しています。

スタイルを区分することはとても良いことです。
スタイルを区分することで、このコンポーネントの使われる場所・その規則性などを考える必要があるため、よりコンポーネントの果たすべき役割りが明確になります。

スタイルの区分にはマテリアルデザインの考えをよく参考にしています。
Button types

スクリーンショット 2017-12-24 23.58.09.png

Sketchではsymbolというクラスとインスタンスのような仕組みを使うことができます。
これを利用して共通のスタイルを作っておき、外部から操作できるスタイルだけをオーバーライド項目とすることで、なにが可変のスタイルなのかコードをみなくてもわかります。

上記の画像だとボタンの文言と背景色、線の色を変更できるようにしています。

これを実現するにはコードは下記のようになります。
Buttonコンポーネントを呼び出す際にtextとbackgroundColorとborderColorを渡してます。

index.js

button.jsではこれを親からのプロパティとして受け取り、使用します。

button.js

この時、propsTypeを使ってデフォルトの値を設定しておけば、可変の項目の中でも用途に応じて必要な箇所だけ設定をすることができるので便利です。

この調子でコンポーネントを小さい単位で切り出し、ガイドラインに落とし込む作業を行いました。

これにより
1:コンポーネント化をより細かい粒子で行う
2:共通化できるスタイルとできないスタイルを明確にわける
が実現できました。

共通スタイル

カラーコードに加えフォントのスタイルも共通のスタイルとして書き出すことにしました。

実装する際のイメージとして、まず使用する際に用途を想起させるスタイル名(左列)をつけます。
それを共通スタイルのファイルでスタイルをあてるのですが、その際にさらに別途スタイル定数ファイルを作成し、カラーコードなどは定数を呼びだすようにします。

上図最初の項目、contentTitleTxtを例によると下記のようになります。

これにより
3:スタイルの定義場所をできるだけ共通化
4:色やフォントなどは定数を使う
を実現できました。

Tips共有

スクリーンショット 2017-12-25 2.22.08.png

AndroidとiOSでスタイルの当たり方が微妙に異なるケースがあります。
その差分のためにこのスタイルの当て方じゃないとダメ!ということが多くはないですが稀にあるので見つけた時に書き加えるようにしています。

これにより新しいコンポーネントを作る際にTipsガイドラインを一読しておけば時間のロスをなくせればと思います。

ガイドライン作成に役立ちそうなライブラリ

おまけです。
ガイドラインを作成する中で見つけたもしかしたらガイドラインに役立つかもしれないライブラリを紹介します。

GitHub — airbnb/react-sketchapp: render React components to Sketch ⚛️💎

こちらの運用イメージとしては開発者が関連するデータを用意。
デザイナーがコンポーネントにスタイルをあてる。
という分担だと思われます。
データの用意は非同期処理のテストを書くのと雰囲気が似ています。

これを使って自分たちでデータを用意して、Sketchに書き出されたコンポーネントをコピーしてスタイルガイドラインに貼れば。。と思ったのですが、Sketchに生成されるコンポーネントのレイヤーの整理やコードを書く手間を考えるとそこまで美味しくなさそうかな…と思ったまま試していないです。

GitHub — nanohop/sketch-to-react-native
React Native専用でなにかないかなーと探してみたところこちらは逆にSketchをコードにしてくれるライブラリを見つけました。

作成したコンポーネントをsvgで吐き出してRNアプリにドロップするだけとのことですが、どこまで複雑なものに対応できるのかはまた別の機会に挑戦してみたいです。

yuri_htt
2016年5月にエンジニアとして活動を開始 活動範囲は React Native / React / Go / GraphQL / AWS / Swift
https://yuri-hotate.hatenablog.com/archive
linksports
「スポーツをしている人を幸せにする」ことをコンセプトに、スポーツ関連サービスの企画・開発を行っているスタートアップです。
https://linksports.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした