UX/UIデザイナー

2016/11/28

フロントエンド夜話　~フィードフォースのフロントエンドの人たちと話してみた~

UX/UIデザイナーの鈴木です！

今回は、弊社フロントエンドチームの３人のインタビューをお届けします！

インタビュー内容は「Reactを選ぶ理由」と「フロントエンド界隈で最近気になる技術」です。

また、録音した音声をこちらで公開しています。真面目に不真面目な収録光景が想像できると思いますので、是非聞いてみてください。笑

https://soundcloud.com/user-382926936/lufu6zwcybwq

ーーーーーーーーーー以下インタビュー内容ーーーーーーーーーー

自己紹介

- はじめに自己紹介と使ってるエディタを教えてください。

市野

「フロントエンドエンジニアの市野です。使っているエディタはWebstormです、Webstorm大好きです。」

木村

「フロントエンドエンジニアの木村です。最近使っているエディタはVSCode（Visual Studio Code）です、Atom使ってましたがVSCodeに乗り換えました。」

並木

「フロントエンドエンジニアの並木です。使ってるエディタはVimです。
やっぱあれなんですよ、あまり環境に依存しないものが好きかなと。」

フロントエンドチームの主な開発環境について

- ではちょっと紹介として、フロントエンド・JavaScriptですが、フィードフォースでは主にどんな開発環境を使っているか、市野さん教えてください。

市野

「弊社は基本ES6に準拠してて、ESLintもAirbnbさんの「eslint-config-airbnb」を積極的につかってます。
最近は型宣言もちゃんとつけるようにしていて、Facebookさんのflowtypeなんかを使ってます。
開発はほとんどReactを使ってて、一部Reactを使ってないプロダクトに関してもeslint-config-airbnb-baseを使ってしっかりコードのメンテナンスをしていくよう心がけてます。」

お題

- じゃあ早速お題に入っていきたいのですが、今回は事前にこちらで準備したお題にランダムで答えていただく、「なにがでるかな♪」方式でいきたいと思います。

が、一つ問題がありまして、サイコロ振ってお題を決めようとしたのですが肝心のサイコロがないっていう・・・
ってことで僕がランダムで選んで出すっていう形でいいですかね・・・

一同

「雑っ・・・笑」

- いつも通りのゆるさでね笑

Reactを選ぶ理由

- Reactを選ぶ理由 / 行き着くまでの苦労話を聞かせてください。

木村

「2年前はAngular使ってましたね。学ぶ事の多さは辛いものがあったり・・・Angular2は触ってないのでわからないですけど。
一旦AngularでSPAを作ってましたね。」

市野

「Reactになったきっかけは、そのAngularで作ったアプリがお蔵入りになって、その前にReactが騒がれ出してて「ちょっと触ってみようぜ、Angularと比較しようぜ」みたいな感じで。まだFluxがメジャーになる前、とりあえずReact触ってみて、なるほどただのViewなんだねーってなって。
React自体に関しては単純なViewで自由度もあって、で木村と「Fluxどれがいいか？」って結構な数試してみてて海外のフォーラムとかでもReduxがちょっと一歩先に出てたというか、その流れがあって「じゃあちょっとこれでSPA作ってみるか」みたいなノリでReactにのっかった、というのが今までの流れですね。」

- Angular以前は何か使ってましたか？

市野

「フィードフォースではAngular以前にSPAは作ってなかったです。個人的にはMarionette.jsとかBackbone.jsとかでSPAについて勉強したり実際作ってみたりしてましたが、もう苦しい苦しい、アプリケーションが大きくなるとわけがわからなくなってきて。」

並木

「Backbone.jsはめちゃめちゃ自由度が高くて、Marionette.jsはもうちょっとカチッとしてるんですけどそれでも３ヶ月経つと自分が書いたコードがわからなくなるという笑」

市野

「あの当時は自由度が高すぎて、最初の設計の段階でちゃんと”絵を描いて”おかないと「もうあかん！」って状態になってたかな。」

- 辛いやつですね・・・

木村

「Reactを選ぶ理由になるかわからないけど、僕は”薄さ”がやはり一番かなと。最低限の描画に関わる部分だけをReactでやれるというか。
勉強コスト的にも少ない方だと思う、そこらへんが魅力的かなと。」

今気になる・イケてると思うものがあれば教えてください。

- ここ最近フロントエンド界隈でこれ気になるとか、使ってみたいとか、イケてるなと思うものがあれば教えてください。

市野

「気になっている技術としては、Next.jsとかGatsbyとか、アプリケーションを作るためだけにReactを使うのではなくて、それ以外の静的サイト等にも使えるんだというのが個人的には素晴らしいなと思っています。」

木村

「Vue.js 2.0ですかね。
最近CSSをどうするか迷っていて、今のプロダクトでもCSSをJavaScriptの中に取り込むのにCSS Modulesとかやっているんですけど、あれはあれで今まで静的ファイルをひたすら出力してきた身からすると、どう考えてもしんどいんですよ。『これリセット用のCSSとかどうすんの？』とか。
コンポーネントに対になるスタイルがあるのはわかるしコンポーネント指向でUIを作っていくというのはわかるんですけど、ファイルの構成どうするかとかデザイナーとコラボレーションするとき『これデザイナーさん困るんじゃないか』とか、そこらへんの温度感が全然わかってなくて。
ある意味Vue.js 2.0とは別の話なんですけど、どうしようかなって色々見てます。
３年ぶり位にCSS設計をどうしようかなって考えてます。」

市野

「そう、デザイナーと頻繁にやりとりしてって経験は最近無くて。言われてみれば確かにCSSとの付き合い方については未だに素人だなって思います。」

木村

「CSS Modulesでやるとするじゃないですか、今までハイフンで単語をつないでクラス名を書いていた身からすると、それってJavaScriptにインポートするとき配列参照しなきゃいけないじゃないですか。あれはあれで辛いしみたいな、JavaScriptの中で使うなら普通にオブジェクトとして認識したいのに・・・」

市野

「キャメルケース使えって話ですよ！笑」

木村

「笑　キャメルケース使えってのはわかるんですけど、今までCSSフレームワークのクラス名とかハイフンで書かれてたところに、いきなりキャメルケースくると「うお！お前誰だ！？」みたいな笑」

市野

「なんかありそうじゃない？プロセッサーでキャメライズ的なものが」

木村

「たぶんありそうな気がするんですけど、そもそもとして「リセットはこう読んで、コンポーネントはこう読む」みたいな、なんか一貫性がなくて辛いということになるなと。苦しみしか喋ってない笑」

- CSSに関しては皆悩んでいるんじゃないかと・・・解決策はあるのかな・・・

木村

「並木さんなんとかしてください笑」

一同

「笑」

- じゃあ振られた並木さんそのままどうぞ

並木

「気になるというか、今業務でも散々やっているブラウザの自動テストについてですね。
あまり日本でもE2E、ブラウザで一貫したユーザー目線のテストって流行ってないじゃないですか。
Seleniumとかいろんな手段はあるんですけど、なぜかみんな単体テストに一生懸命になって、ユーザー目線のテストがなぜあまり書かれてないのかなっていうのが気になってて。
今業務でも外部のシステムと連携したE2E テスト書いてて・・・流行らないかなぁ〜って思いながら・・・」

木村

「それは流行ってほしいの？笑」

並木

「流行ってほしい！笑
弊社フロントエンドでは今自分一人でやってるみたいですごい寂しいなって。
バックエンドはCapybara使ってやっていますね。
でも、クロスブラウザでE2Eでっていう一貫したユーザー目線のテストはあまりないんじゃないかなと。」

- あんまりこの辺詳しくないんですけど、”日本はテスト書かない”みたいな記事を読んだ記憶が・・・

市野

「日本って言っていいのかわからないですけど、もともとJavaScriptのエンジニアは他の言語に比べるとテスト書かない方が多い印象があって。
最近は結構書く人多いと思うし、特にアプリケーションエンジニアはほとんど書いているとは思うんですけど、ほぼユニットテストだったりとか。
E2Eとかになると書いてるところはそんなにないんじゃないかって気はしてる。」

並木

「一休.comさんのところのE2Eについてのスライド (Ruby)※1 が上がってましたね。でも、js JavaScriptで E2Eテストやってるてのはあんまりみかけないですね。」

木村

「私も最近のテストフレームワークは追ったりするんですけど、正直今すぐ書くかって言われると手を出しづらいですね。」

- Viewの部分って変更が多かったりで、一回テスト書いてもまた変更があってアーッみたいになったり

並木

「単体テストも同じだと思いますけどね、関数名変わったら書き直さなきゃみたいな。」

市野

「逆にユニットとかに関してはJavaScriptエンジニアなので自分で書いてるものにはまだ自信があるんだけど、デザインの部分ってデザイナーが関わっていない時がやっぱりあって。『このUIで本当に良いのかよ』って状態で実装しているケースがあると、そこに対してテスト書いてもまたすぐに変わっちゃうっていうのが歴史的にあって・・・それで嫌遠されているってところがあるのかもしれない。」

木村

「テストレイヤーが別れ始めてるのかなと思う。デザインのテストはスクリーンショットベースでという雰囲気が最近する。
そもそもフロントエンドエンジニアという言葉が広義すぎてあれなんですけど、自分たちは”JavaScriptエンジニア”だからJavaScript”だけ”に注力するという枠組みでも良いのかなって最近ちょっと思ってる。まぁそれ完全に甘えなんですけど笑」

- なるほどスクリーンショットですか。テスト/スクリーンショットで思い出したんですけど、並木さんがBrowserStackで・・・

並木

「あーあれはBrowserStackというクロスブラウザテスティングサービスで、一連のブラウザ操作の流れを「確認しましたよー」って証拠を動画やスクリーンショットで自動的に残せる。
リリース直後は人の目と手で動作確認して「動作しました」ってSlackで報告したりするんですけど、その辺も全部自動化できるんじゃないかなと。」

- なんか過激な社内記事を書いてましたよね、「テストで精神的安定を得る」みたいな・・・

並木