entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

デザイナーでも書けるReact Native

こんにちは、福岡オフィスで現在pixiv chatstoryの開発を全般を担当しているtawachan(@tawachan39)と申します。時にはRailsを書き、時にはAngularを書き、ごくまれにSwiftを書いたりとサービスのために日々開発しております。

さて、今回はReact Nativeに関するお話です。最近はReact Nativeでアプリをゼロから書いているのですが、その時にデザイナーのメンバーにも実際にコードを書いてもらったらとても良かった!という話を紹介していきたいと思います。

そもそもデザイナーにコードを書いてもらおうと思った経緯

当たり前といえば当たり前なのですが、実際にデザインを作ったデザイナーのほうが細かな意図を把握しています。 なので、エンジニアがとりあえずデザインを見たまま実装すると、

  • エンジニアは重要じゃないと思って雑に作ったら実は重要だった
  • 逆に重要と思って頑張って自前実装したら、デザイナーにとっては何でも良くてデフォルトのままでも全然良かった

ということが開発を始めた当初は何度か起こってしまいました。

こうした課題は、事前にデザイン意図などを共有してもらって認識を揃えた上で実装するなどコミュニケーションの問題として解決することが多いと思います。

この悩みを抱えている最中に、React NativeはJSXなのでHTML/CSSと雰囲気が似ているという話を小耳に挟んだ弊チームのデザイナーが突如こう言ったのです。

「私でもコードかけたりしませんか?HTMLとCSSくらいならちょっと知っています」

このちょっとした一言から、デザイナーがコードを書いても問題が解決できるのでは、という気持ちが湧いてきました。

こんな経緯でデザイナーにもコードを書いてもらう体制への変更を試みて2ヶ月ほど経過しましたが、今のところ大きな問題もなく開発を進めています。

事前準備

それでは、実際にデザイナーに書いてもらうまでに整えた3つのことをまとめていきます。

1. prettierを導入する

コードを綺麗に書くのはエンジニアにとっても難しいしその趣向も人それぞれとくれば、デザイナーにコードの綺麗さを求めるのはだいぶお門違いというものです。

そこでprettierを入れてしまえば自動でコードを整形してくれるので、エンジニアだけでなくデザイナーも幸せになれる平和な開発環境のできあがりです。 デザイナーはコーディングの細かいことには気を使わず、デザインを自分の理想に近づけることだけに集中できるはずなので、コードを書くということへのハードルがだいぶ下がります。

詳細は以下の記事をご参照頂ければと思います。

酔っ払ってもコードが書きたい!JavaScriptを書き散らかしてPrettierに介護してもらう方法

2. git/githubの使い方を共有する

共同開発するためにはどうしても欠かせないのがgit/githubです。 「branchを切って変更をcommitして、それをgithubにpushしてpull requestを作る」

この最低限の流れを共有しました。 さらによりシンプルにするためにGUIで操作できるSourcetreeを導入してもらいました。

3. ペアプロでReact Nativeのイメージを掴んでもらう

HTML/CSSがわかると言ってもReact Nativeのデザイン指定には少し癖があるのでそんな簡単なことではありません。

そこで、効率よくポイントを掴んでもらうために1日ペアプロをしました。

福岡オフィスのチームでは設立当初から、ペアプロをするという文化があり、ノウハウの共有にとても良いと感じていたので今回もペアプロを採用しました。 メジャーなハマりどころは予め解消できるので、1日丸々使ってしまいますがそれでもトータルでは効率が良かったと思っています。

実際の効果

現在もデザイナーにもコードを書いてもらいながら鋭意アプリを開発中です。

まだまだこの試みの良し悪しは判断が難しいところですが、今のところの感じている大きなポイントは以下の2つです。

1. デザイナーがUI/UXにとことんこだわれる

デザイナーに開発してもらうことで、UI/UXに妥協がなくなったところが一番大きいという印象があります。

エンジニアが実装すると意図が汲み取れず実装が荒くなってしまうことが多々あり、しかもそうした経験を繰り返していくと、デザイナーがエンジニアに遠慮して細かく思えることは言わず飲み込んでしまうようになります。

ですが、今はデザイナー自身が実装をしているので、デザインへのこだわりをとことん追求できますし、結果としてアプリの品質向上に繋がっていると思っています。

2. ビジネスロジックとビューがきれいに分離できる

これはエンジニアサイドの話なのですが、デザイナーが開発に関わっていることを意識すると、途端に汚いコードの書き方はしてはいけないという自制心が働きます。

開発を進めていくうちにビューとロジックが混ざってしまうことも多々あるかとも思いますが、そうなるとデザイナーが開発しづらくなり困ってしまうので、コードの責務を意識せざるを得なくなるという思わぬ効果もありました。

おわりに

今回は福岡オフィスのpixiv chatstoryチームでの新しい試みを簡単に紹介させていただきました。

東京だけでなく福岡のオフィスでも様々な試みをやっています。

引き続き情報発信していければと思っているので、今後ともよろしくお願いします。

ちなみに、そんな福岡オフィスでは現在新しいメンバーも絶賛募集中ですので、興味のある方はぜひのぞいてみてください!

20191219022058
tawachan
2017年11月入社。福岡オフィスにてpixiv chatstoryの開発全般を担当。あまり言っていないけど坂道好き。