CSSのスペシャリストも、サーバーサイドを知れば視野が広がる！ Incrementsが目指すT型エンジニアの育成

──森下さんは入社してから、どのような仕事を？

髙橋 QiitaのCSS周りのエコシステムが古くなっていたのを、モダンなものに刷新する取り組みをやってもらいました。コードを変更しただけでなく、Qiita:Teamの上で、考えられる選択肢のPros/Cons（良い点、悪い点）を挙げて、「この技術はここがいいので採用する」ところまでドキュメントとして残しました。

森下 そのときの取り組みは、Qiitaの記事「QiitaのCSS構成2016」に書いています。取り組みとして、それまでRuby on Rails付属のSprocketsというassetファイルをコンパイルするツールを使っていたのですが、それをやめてNode.jsのツールでビルドするようにしました。

──方向性を作ったのは森下さんだったのですか？

森下 そうです。設計手法、ツールの選定、スタイルガイドの作成などをしました。僕が担当したのはCSS周りで、JavaScript周りは別の方が担当しています。

──良くなった点は？

森下 一番変わったのが、CSSの設計や書き方です。新しくPostCSSというツールのエコシステムを使った、コードのプリプロセス、最適化、リントを導入しました。ビルド速度が向上してデプロイが早くなり、開発成果が反映されるサイクルが早くなる効果もありました。

I字型からT字型にスキルセットを広げる

──森下さんは、CSSにむちゃくちゃ強い人材として活躍しているわけですね。

髙橋 森下はフロントエンドにすごく強みがあるのですが、最近は新しい分野にもチャレンジしてもらっています。そのために「Rails研修」という取り組みをしました。

エンジニアのスキルを可視化した「星取表（ほしとりひょう）」を作っているのですが、横軸にエンジニアの名前が並んでいて、縦軸に要求スキルがある。私はこれができる、これが苦手、これができるようになりたい、といったことが一覧できるようにしています。

──「星取表」はどういう使い方をするものですか？

髙橋 この表は評価に使うものではなくて、例えば、ある技術Aが得意な人がいると、Aを使う仕事はその人だけに集中しがちです。そこで、星取表を見て、別の人が「Aをできるようになりたい」と思っていることが分かれば、その人にやってもらい、得意な人にはレビューをお願いする。そういったタスクの舵取りができるようになります。それが作った目的でした。

──エンジニアのスキルセットを広げていくよう意識しているのですね。

髙橋 アプリケーションエンジニアにはT字型スキルセットを求めています。Tの字の上側のように、幅広いスキルを持っていて、Tの字の縦の線のように深く学んだ専門分野を持っている、そして縦の線と横の線はちゃんとつながっている、そんな人を求めています。

いろいろなT字型のスキルの人が集まっていて、縦の線がいろいろな場所からにょきにょき生えている。遠くから見たら長方形に見える。分野が近いスキルの人が集まっているばかりだと面積が増えない。新しいスキルを学び続ける人が集まっていないと長方形の面積が増えません。

森下の場合は典型的な「I型」だったので、それをTの字になるようにスキルセットを広げていければと思っています。それに、T字型だと共通のスキルセットを持っているので、そこを切り口にして他のメンバーも森下からCSSの深い知識を学べるようになる。森下の方も、例えばRSpec（Rubyのテスティングフレームワーク）が得意な人から学ぶことができるようになる。

それまでのIncrementsにはT字型っぽい人しかいなくて、研修を受けるのは森下が最初です。いずれ会社が大きくなると研修が必要になるので、気心が知れた相手とまず一緒にやったという側面があります。

──研修について、森下さんの感想はいかがでしたか？

森下 業務時間を使って、かなりていねいに教えてもらいました。それで身につかないとヤバいなと（笑）。

僕はフロントエンドやCSSについては自分なりの意見がありますが、それは好きで興味を持ってやっていたからです。なので、サーバーサイドのWebアプリやデータベースにも興味を持って意見を持てるようになったらいいと思っていました。

振り返ると、入社当初はプログラミング言語はJavaScriptぐらいしか書いたことがない状態でした。それにコンピュータサイエンスのバックグラウンドを持っているわけでもありませんでした。研修では、Ruby on Railsによるサーバーサイド開発に関連して、オブジェクト指向やDDD（ドメイン駆動設計）、RSpecを使ったBDDのテストの書き方、そうした、基礎というか、小手先のAPIの使い方とは違うことを学べました。

それで自信が付いたかどうかと聞かれると……まだ自分よりできる人しかいないので（笑）、まだまだ勉強しないといけないなと思っています。

新領域の知識と経験は新しいアイデアを生む

──研修後の森下さんの役割は？

森下 CSS周りは今も見ています。それに加えて、Qiitaのサーバーサイドの仕事も一部するようになりました。

──やってみて、いかがですか？

森下 新しい分野で、視野が広がったなという実感が持てました。

例えば、保守しやすいCSSコードを書こうとしたときに、HTMLとCSSしか知らなかったら「命名規則で解決しよう」と考えたと思います。でもNode.jsを知ったので、そのためのCSSプリプロセッサを自分で作りました。

Rubyを通してオブジェクト指向が分かるようになったら、一つのCSSのルールセットは一つの役割だけを持つようにしようとか、分割の粒度について新しい考え方ができるようになりました。

──そうして知識や経験が増えると、何かモヤモヤしたものが出てきませんか？

森下 実は、ここ3日ぐらいのことなんですが、関数型言語のElixirを勉強してみて、これはCSSのプリプロセッサにも考え方を当てはめられるんじゃないかというアイデアが浮かんできました。関数型言語には再代入がない。CSSは一度定義したルールを後から上書きできちゃう。それを制御できた方がいい。

──副作用がないプリプロセッサを作れそうな気がする？

森下 そんな感じです。以前、elm-css（関数型プログラミング言語ElmでCSSを扱うツール）を見たとき直観的に「良さそうだ」と思っていたんですけど。

──ところで、なぜElixirを？

森下 実は「Elixir Conf Japan 2017」というイベントに参加することになり、知識がなかったのでイベントをより楽しめるようにと思って勉強してみました。

──森下さんは、研修や別分野への取り組みの後で頭がさらに活性化している感じなんですね。髙橋さんの狙い通りですか？

髙橋 そうですね。一つのことしか知らないのはエンジニアとして危ういと思います。いろいろなことを知った上で、課題と思っていなかったことが課題であると思えるようになったことは大きな進歩だと思います。

──ただスキルセットを広げて、しかも専門性も深めていこうというのは、高い要求ですよね。

髙橋 僕の認識では、昔は少人数で作ったWebサービスが使われるようになって爆発的に広まることがあり得た。今はよく作り込まれたデザインが洗練されたサービスでないと使ってもらえない。そこである程度の規模のチームで作らないといけないわけですが、専門ごとに人が分かれていると自分が得意なタスクばかりを手がけることになる。短期的にはそれが最適解なのかもしれませんが。

──あえてかき混ぜる？

髙橋 「ハンマーを持つ人には、すべてのものが釘に見える」という例え話があります。フロントエンドしか知らないエンジニアはすべての問題をフロントエンドで解決しようとする。他に解決策があるのに。

自分が得意な技術を使うことが大事というわけではなく、ユーザに価値を届けること、それによって利益を生むことが求められる。そうした考えでやっています。

──洗練されたプロダクトを作りながら勉強してスキルの幅も広げていくのは大変ですね。

髙橋 エンジニア向けのサービスを作っているので、新しい技術には積極的に取り組む企業風土でありたいと思っています。新しいものが好きなエンジニアを採用しているという側面もあります。

それとは別に、CTOとして、判断を間違えた場合にいかに早く撤退できるようにしておくかも大事だと思っています。

──新しいことに挑戦し続けるエンジニアをフォローする立場も大変ではないでしょうか。

髙橋 新技術の習得にアップアップしてしまうか、楽しめるかの違いが大事だと思います。エンジニアリングが楽しいというモチベーションが消失した状態では競争に勝てない。「楽しめる」が大事なキーワードです。

──森下さん、研修は楽しめましたか？ また今後はどんな方向性でしょうか。

森下 楽しかったです。単純に、できないことができるようになるのは楽しいですね。

今後ですが、自分が興味を持てることをやっていきたいですね。面白いと思うことが大事です。今までの自分は完全にフロントエンドに振り切っていたのですが、やっぱり、それも面白かったからです。

──髙橋さん、メンターとしていかがでしたか？

髙橋 自分自身、メンタリングはほぼ初めての体験でした。何かを教えようとして、「これ、本当に正しい言葉の使い方だったっけ？」と本を調べ直したりしました。メンター側も学ぶことが多いというのが実感です。

──双方に学びがある関係なのですね。本日はありがとうございました。

取材：星暁雄／写真：赤司聡

連載バックナンバー

employment.en-japan.com