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

Home テクノロジー Blog Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPA

[kzms2]

2019/10/01に結構大きな変更あったの気づいてくださった方はどのくらいいるのかな…？☺️採用した技術やそのメリデメについて書きました✍️ Atomic Design、React、TypeScript、CSS in JS、SVGはいいゾ💪✨

[mohri]

すごい。ヤバい。見た目は完全にゼロ年代前半のインターネッツなのに。

[hhungry]

“ヤフってみてください。”

[Ashburton]

日本有数のIT企業がフレームワーク使ってウェブサイト作り直しましたってだけの話を自慢げに公表。。。ネット上ではすごいすごいと絶賛。。。IT後進国すぎてヤバい。

[ytRino]

ところで⌘クリックしても新規タブで開かないんだけど…最上部のロゴでは出来て記事リンクだとできないので制御してるんだろうけどやめてほしい

[mayumayu_nimolove]

おっしゃる通り全然気づかなかったw

[MonkaS]

オフィス版Yahoo！復活しませんか？

[jovi0608]

ヤフーのトップページのフロントエンドを作り変えた記事です。これからもまだまだ改善していきます。

[kijtra]

へえ。てっきりIE6とかガラケーでも見られるようにしてるのかと思ってた。

[shimmering]

Reactの拡張見て気づいたので流石って感じですね

[karauma]

UIを構成している部品を「Atoms」「Molecules」「Organisms」と分類して、それらを「Templates」「Pages」といった概念で組み合わせてページを作り上げる設計・実装の手法

[d4-1977]

トップページ以外もやっていく感じなんでしょうか？なんだかそのあたり気になる。

[tiplas]

ためになる

[griefworker]

razzle っていう SSR 用のライブラリがあるのか。

[HolyGrail]

変わったことには気づいてたんだけどこんなモダンな環境に切り替えてたとは思わなかった……。2008年の時も見た目以外はシステム刷新というほどのリニューアルはしていなかったので本当に偉業だと思う。すごい。

[mountainar]

]

[mami-hate]

技術的にやりたい組み合わせ。こういうの案件でやりたいな。

[B-CHAN]

検索してくださいを ググってください と言うのが一般化したけど、 さすがにYahoo!の中の人は、 ヤフってください と言うんだね。

[que_serser]

導入試みて失敗した技術だ。

[yositosi]

リニューアルするとは知ってたけど、Reactになったの全く気づいてなかった。

[paperclipsquare]

基本的にヤフーはスマホアプリだからPCの変化はまったくわからなかった…

[hmd703]

ヤフる………

[tetsugrande]

明日確認します。（仕事みたい）

[chiba1008]

トップページだけ、デザイン変更なしでやる意味ある…？

[kazuya030]

全然気づかなかった！

[kamiokando]

いつまでたってもトップページの天気予報が登録した地域を覚えてくれないのを直してくれ。何のためのアカウントかと。

[maecchi]

SSRにはrazzle使っているのか。next.jsだと思ってた

[fa11enprince]

技術的に素晴らしい！！ワクワクするってのはいいと思う。けど一方でほんと意味あったのだろうか。。。このくらい薄いならVueのほうが向いてそう。

[ysk-ur]

すごそう

[munieru_jp]

“ヤフってみてください。” これすき

[PEH01404]

最近トップページの表示が時々おかしくなるのはこれが原因か。。

[tofu-kun]

全然気が付かなかった…まじかよ

[nkgr]

なんと。

[dancel]

そこはぐぐってって書いてほしかった

[roppara]

atomic designかー。メモメモ

[gachapining]

1枚ページでしかもSSRするってReactっぽさがめちゃくちゃ薄いな！コンバージョンに影響したのかどうかは気になる

[miki3k]

そういえば、いつの間にか、「MS Pゴシック」指定が無くなってた

[satohu20xx]

小さいし状態をあまり持たないならreactよりvueのほうが好き