@nifty天気予報のフロントエンドを 実装するまで - NIFTY Tech Talk #22

イベント
Next.js/Go/GraphQLで生まれ変わった@nifty天気予報 開発のウラ側
https://nifty.connpass.com/event/328943/

登壇者
ニフティ株式会社
佐々木 優

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved. 
 @nifty天気予報のフロントエンドを 実装するまで 佐々木　優

2. Copyright © NIFTY Corporation All Rights Reserved. 
 2
 あらためて自己紹介 
 ニフティ株式会社 
 
 佐々木 優
 
 • 新卒入社6年目 
 
 • 自社WEBサービスの運用開発 
 （@nifty天気予報@niftyトップページ） 
 
 • ランニング、旅行にハマり中 
 
 

3. Copyright © NIFTY Corporation All Rights Reserved. 
 @nifty天気予報で扱ったフロントエンド技術 
 3

4. Copyright © NIFTY Corporation All Rights Reserved. 
 リニューアル前のフロントエンドの状況 
 • @niftyCMSという自社のCMSを利用し動作
 
 • Git管理されていないなどの問題から容易に修正しづらい環境
 
 • デザインが現在のモダンなWebサイトに比べてなんとなく古い
 
 
 
 
 
 4
 背景

5. Copyright © NIFTY Corporation All Rights Reserved. 
 フロントエンド技術 
 • Next.js
 • TypeScript
 
 デザインシステム 
 • デザイントークン
 • レスポンシブデザイン
 • SCSS
 
 デザインのワイヤーフレーム 
 • draw.io
 
 ツール
 • StoryBook
 5
 リニューアル時に採用した要素 

6. Copyright © NIFTY Corporation All Rights Reserved. 
 6
 Next.js、TypeScriptの採用理由 
 背景
 • ニフティで採用実績がある
 • モダンなフロントエンドとして最適
 • 型安全性、開発効率の向上
 • より安定しているPages Routerを採用
 
 
 問題点
 • ページ数が多くSSRで実現できるのか不安があった
 ◦ 実際に組み込んでみて大きな問題は発生せず
 ◦ ほとんどのページでデータ取得が発生する構成だったため SSRが最適だった
 

7. Copyright © NIFTY Corporation All Rights Reserved. 
 7
 実装方針
 featureベースのディレクトリ設計 
 • 機能単位（feature）に着目しコードを整理
 • 依存関係を最小限に抑える効果
 • components/common/
 ◦ 複数ページにわたって使用する
 コンポーネント
 • components/feature/
 ◦ 特定の機能に関連する
 コンポーネン
 • 階層は深くなるが開発しやすい

8. Copyright © NIFTY Corporation All Rights Reserved. 
 8
 デザインシステムの採用理由 
 背景
 • 制作チームと企画が最初に調整した上でデザインを決定
 • 決まったデザインを元に開発側が実装するという流れが多い
 
 制作チーム 
 （デザイナー） 
 企画
 エンジニア 
 調整
 調整

9. Copyright © NIFTY Corporation All Rights Reserved. 
 9
 デザインシステムの採用理由 
 問題点
 • 開発側と制作チームとの距離が遠い
 ◦ 企画側と制作チームとのやり取りが発生する
 ◦ エンジニア視点の意見をデザインに直接反映させづらい
 
 
 制作チーム 
 （デザイナー） 
 企画
 エンジニア 
 調整
 調整
 距離が遠い... 
 コミュニケーション 

10. Copyright © NIFTY Corporation All Rights Reserved. 
 10
 デザインシステム採用の効果 
 デザインシステム 
 • UI要素やパターンの集合体のこと
 • 一貫性のあるユーザー体験を提供するための指針として存在
 • 元々のCSSのデザイン意図を消失させない意味もある
 
 デザイントークン 
 • デザインシステムの基本要素
 • 色、タイポグラフィ、レイアウト
 • システム全体の一貫性を保つための
 「共通言語」
 ◦ デザインチームとの調整効率UP
 ◦ 開発効率UP
 • @nifty天気予報用にカスタマイズ
 ◦ Notionでドキュメントとして管理
 

11. Copyright © NIFTY Corporation All Rights Reserved. 
 11
 デザインシステムと関連してとして役立ったもの 
 仕様検討
 • 「こんな機能があったらいいな」をベースに
 エンジニア主体と企画側話し合った
 ◦ 例）MY天気
 ◦ お気に入りの地点を登録できる
 
 
 

12. Copyright © NIFTY Corporation All Rights Reserved. 
 12
 デザインシステムと関連してとして役立ったもの 
 ワイヤーフレーム 
 • 検討した仕様からベースとなる
 ワイヤーフレームを作成
 • ツールはdraw.ioを試用
 • エンジニア視点での実装を意識した
 仕様を盛り込む
 ◦ Reactでのコンポーネント化など
 • デザインチームへの依頼時に活用
 ◦ 全体の余白をどうするか
 ◦ レイアウトの統一性
 ◦ サイト全体の色合い、etc…

13. Copyright © NIFTY Corporation All Rights Reserved. 
 
 
 
 全て1つのページとして管理 
 13
 デザインシステムと関連してとして役立ったもの 
 
 レスポンシブデザイン 
 • 元々はSMP版とPC版が別々に存在
 • PC、SMPのどちらにも対応できるレスポンシブデザインを採 用
 
 
 
 
 
 PC
 SMP
 タブレット

14. Copyright © NIFTY Corporation All Rights Reserved. 
 14
 デザインシステムと関連してとして役立ったもの 
 SCSS
 • CSSの管理性向上のために導入
 • バニラCSS+SCSSの組み合わせ
 • デザイントークンで定義した
 フォントサイズや色を変数として定義
 • 各コンポーネント用のCSS側で読み込んで適用
 
 CSS Media Query 
 • レスポンシブデザインを
 再現するために導入
 • ブレイクポイントに応じて
 表示を出し分ける
 
 
 $変数名: 値; 
 

15. Copyright © NIFTY Corporation All Rights Reserved. 
 15
 デザインシステムと関連してとして役立ったもの 
 Storybookとは 
 • UIコンポーネントとページを切り離すことで、独立した状態で コンポーネントの開発を行えるツール
 • 効果
 ◦ ローカル環境での動作確認の効率化
 ◦ コンポーネントを意識した開発の促進
 ◦ 開発側でのコミュニケーションコストの削減
 
 

16. Copyright © NIFTY Corporation All Rights Reserved. 
 Good
 • Next.js、TypeScriptの構成をフロントエンドで活用できた
 • 一番苦戦すると想定していたデザイン周りが比較的にスムーズに 実装できた
 ◦ エンジニア主体で仕様やデザインのベースを考案→デザイン システムに落とし込むという開発フローを初期の段階から作れ たのが良かった
 • 開発チーム内でのコミュニケーションが上手く行った
 ◦ フロントだけでなくバックエンドも横断的に見るメンバーが多 かったので、バグを発見した際にすぐに修正できる環境が整っ ていた
 振り返り
 16

17. Copyright © NIFTY Corporation All Rights Reserved. 
 Bad
 • コンポーネント管理のルールがやや曖昧だった
 ◦ 実装していく中で設計の最適解を見つけていくことも多かった
 • 軌道に乗るまではやや時間がかかるやり方だった
 ◦ 必要なissueを切ってあとはコンポーネントとページを実装する だけ！となってからの効率はとても良かった
 ◦ 初期段階で開発手法やルールをメンバーと話し合っておくこと が重要かもしれない
 • draw.ioの作図がやりづらかったこと
 振り返り
 17

18. Copyright © NIFTY Corporation All Rights Reserved. 
 おわりに
 まとめ
 • @nifty天気予報のフロントエンドで採用した技術に ついて
 • デザインシステムを採用した背景
 • デザインシステムと関連してとして役立ったものを紹 介
 
 
 
 
 
 18

19. Copyright © NIFTY Corporation All Rights Reserved.