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

by ニフティ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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