Yahoo! JAPAN トップページを作り変えたお話に対して思うこと

2019-12-10

自分が前々から理想としている開発手法にかなり似てるなーと思う一方、一部「ん?」と思うところあるので、書いていこうと思います。


元ネタはこれ。

Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話

そんなに長いエントリーでもないのですが、概要としては、

  • Yahoo! JAPAN のトップページのフロントを作り変えた
  • FW は React、周辺は Redux と TypeScript、Storybook
  • デザインシステムは Atomic Design から templates を除いたもの
  • molecules をなるべく減らした
  • css は css in js

などなど。


まず率直に記事の感想を述べると、『ここのフロントエンドエンジニアの方は、すごく調べられたんだなー』と思いました。

全体的に、とてもグローバルスタンダードな技術で作り変えたという印象です。

で、これを日本有数の大企業が行ったというのが凄いなぁと、さすが Yahoo。

一方で、これらの知識って、ネット上では散らばって書かれているため、それを集結するのは、そんなに楽なことではないと思います。

加えて、おそらくこのリニューアルを推進された方は、ある程度上の役職の方なのかなーと思われます。

でないと、フロントとデザイナー(記事中ではビジュアルデザイナーと書かれていますが)の両方に働きかけるなんて無理だよなーと。

しょせんフリーランスのフロントエンドの端くれでは、いくら知識や技術を持ち合わせていても、現場の抜本から変えるとなると、どの現場でもお断りされてしまうのが辛いところです。


一方、いくつか気になる点もありまして。


一番気になったのは、Atomic Design から templates を除いたデザインシステムを導入したという点です。

今回のケースでは、Yahoo! JAPAN のトップページだけのリニューアルなので、自分であれば、単純に templates は 1 枚切ってやると思います。

とはいえ、SPA と Atomic Design の相性の悪さもあって、templates を切らなかったというのも、手法としてはアリなケースも存在するのかなーと。

ただその場合、organisms を配置する presentational component が存在しないため、そこはどう回避されているのかなと。

今回のケースでは、1 画面のみの開発であるため、templates という概念を省くメリットは何なんだろう、とは思いました。


もう一件気になったのは、molecules をなるべく減らしたという点で、Atomic Design の各要素は、増やしたり減らしたりするものではないよなーと。

特に、今回のケースでは、既存のデザインをほぼそのまま Atomic Design に落とし込んでいる以上、molecules を減らすという表現にはかなり違和感があります。

Atomic Design の要素の分割は、Atomic Design の思想に従えば、自然と分けられるものじゃないのかなと。

もちろん、サイトデザインが複雑になればなるほど、organisms 以下のコンポーネントは数が増えていきますが、それが自然な流れだと思っています。


他にも、

  • redux 周りはどういったパッケージ選定、開発手法を取ったのか
  • sketch ファイルを使用していると書いてあるけれど、プロトタイピングツールは導入していないのか

と、ちょこちょこ気になる点もある一方、

  • Storybook の導入はとても良いと思う
  • WAI-ARIA や razzle など、全然知らなかった

など、学びも多くあって、良い意味で大企業とは思えない、比較的モダンな開発手法を取られているなーと思いました。


最後に、過去何度も書いてきましたが、日本のフロントエンド事情は、とても遅れています。

jQuery 全盛期あたりの開発手法から全く進歩していない現場がとても多く、もっと危機感を持つべきです。

フロントの開発は、今やフロントの範囲だけで済むものではなく、Yahoo が取られた手法同じく、デザイナーとフロント、フロントとバックエンドが手を取って、足並みをそろえて開発を行う時代です。

コンポーネント指向であったり、プロトタイピングツールであったり、スキーマファーストであったり、これらは全て使われていて当たり前になっていないといけないよなーと思う、今日この頃です。

© 2018 kk-web