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

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

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

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

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

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

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

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

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

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

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

事前準備

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

1. prettierを導入する

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

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

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