読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

Style - React Native スタイルの設定

f:id:mochizuki_p:20161029101755p:plain

Style - React Native スタイルの設定

React NativeではHTMLのスタイル定義でおなじみのCSSのような形式ではなくて、Javascriptのオブジェクト形式のスタイル宣言を使用する。これはCSSが抱えている7つの問題を改善する目的で導入したものだ。

1.グローバル名前空間の使用

CSSでスタイルを宣言したとき、そのスタイルはCSSがインポートされているHTMLのどの位置からも参照することができる。これは避けるべきとされているグローバル変数の乱用に当たるものだ。グローバル変数は名前空間を汚染して、思わぬエラーの発生源になりうる。

Bootstrapでは600ものグローバル変数が使用されています。もしもあなたがBootstrapを使用していたのならば、Bootstrapの変数を意識せずに上書きしてしまって、レイアウトが変になってしまうことがあるかしれません。

Facebookは、長い間名前空間の汚染による問題に悩まされてきました。この問題に対してFacebookのエンジニア達が考案したアイディアを簡単に説明します。CSSの変数を宣言するときにクラス名と変数名を / で区切り、クラスを定義することにしましょう。

これをより優れた方法は、button/containerをbutton.cssの場合のみ有効にすることです。もしほかのCSSファイル、例えばarticle.cssの中でbutton/container を宣言したとき、これを無効にすればよいのです。

もし、button/containerをbutton.cssの外部で利用したいときはどうすればよいのでしょうか?これに対しては変数名の次に/publicを付けるルールにしました。これで基本的に変数をローカルに扱いながら、必要な時はグローバルとして扱うことができるようになりました。

しかしbutton/containerは有効なクラス名ではありません。この問題に対しては、別の関数を定義して読み込ませる(たとえばclassExtension)ことによって対処しました。

2.依存関係

グローバル変数の問題は解決できましたが、まだ問題があります。かつて私たちは、依存関係に対処するために、すべてのCSSコードを1つのファイルに集約して、必要に応じて分割していました。

長い間、私たちは開発者たちに依存関係を呼び出すrequireCSSを利用するように呼びかけてきました。残念ながらこれには副作用がありました。もし他の別のファイルがそのCSSを呼び出していた場合も、動作してしまうのです。

クラス拡張(class extension)によって、そのような心配をする必要はなくなりました。requireCSSによって依存関係を自動的によびだすので、もはや複雑な確認作業は必要ありません。

3.到達不能コード

一般的に到達不能コード(dead code)は望ましくないとされています。このためJavaなどの一部のプログラミング言語ではコンパイラがエラーを出すように設計されています。

しかしCSSではこの問題は長い間放置されてきました。これは1.で説明したグローバル変数の乱用と相まって、思わぬ問題を引き起こすことになります。

Reactでは、この問題に対処することは簡単です。正規表現で、クラス名を検索することで、使用されていないコードを即座に削除することができます。

4.最小化

ファイルの最小化を行うことは、ユーザーにとってほんのわずかですが、体感速度の上昇によってメリットがあります。

CSSのオブジェクト化はこの点でもメリットがあります。

5.定数の共有

CSSとJavaScriptの間で定数を共有することはよい方法とは言えませんが、実際の開発現場では、必要になることがあります。長い間、この問題に対してはコメントを両方のファイルに残すことによって、対処してきました。

しかしこれはスケーラビリティに欠けています。不注意なエンジニアはファイル名を変更した時に、その中のコメントにまでは注意が回らないかもしれませんし、片方のコードを修正したまま、もう片方の修正を忘れてしまうかもしれません。

これに対しては、CSS内部に変数を導入することで解決すべきでしょう。そしてjsファイルにはCSS内部の変数を参照するように設定します。

続く