Designの考え方を使えば解決できます。TV」のUI設計で実践導入した著者が解説。フロントエンドの方にオススメの1冊です。著者の一言UIをより効率良く開発したい私は長らくWebフロントエンド・エンジニアとして,複数のWebサービスのUI開発に携ってきました。最近の開発では,新しくサービスを作るたびにそのアプリケーションの開発規模は大きくなり,開発するUIの数は増すばかりです。UIの数が増えると,その機能を実装するために書かなければいけないコードが増えます。コードが増えるということは,工数もそれ相応に増えます。開発に当てられる期間は,競合サービスがどんどん出てくるなか,想定よりもどんどん短くなっています。書くコードが増えれば,バグが生まれやすくなります。どんな場合であってもバグは好ましくありませんが,特にUIのバグは,ユーザーの体験に直接的な影響を与えるため,より慎重に実装しなければいけません。「ユーザーが使いやすいサービスをより少ない工数で作りたい」こう私と同じように感じている読者の方は多いのではないでしょうか。コンポーネント・ベースで,確実で効率が良い開発を実現する本書は「WebアプリケーションのUI開発を効率的に行いたい」というWebフロントエンド・エンジニアのために書きました。Designを使ったコンポーネント・ベースでの開発方法を説明しています。「機能をコンポーネントに分ける」という考え方は,ソフトウェア開発では一般的なものですが,UIについては,きれいにコンポーネントに分けて実践するのは難しいです。UIというものは,画面を通してユーザーが実際に触って感じるものであり,ブランディングされた見た目を伝えるための役割も担うので,人間の感性や感覚に大きく依存する要素を持っているためです。デザインやマーケティング的な戦略も含めチーム全体で向き合う要素が強いため,実際の開発では,ほかの職種のチームメンバーとの深いコミュニケーションを必要とします。それもUIのコンポーネント化をより複雑にする要因となっています。コンポーネント・ベースでUI開発を進めることには,以下のようなさまざまなメリットがあります。複雑なUIも確実に組み立てることができるしっかりとコンポーネントごとに分けられたUIの機能は再利用性が高い多くの画面に対して少ないコードで実装できる再利用性が高いコンポーネントは,統一された使い勝手をユーザーに提供できる画面別ではなく機能別に分けられたUI設計が複数人の平行実装を実現し,開発速度がアップそして,この開発方法はテストにも大きく力を発揮します。UIは,1度アプリケーションに組み込まれると,アプリケーション全体の状態にUIの状態が依存するため,テストで状態のパターンを網羅することがかなり難しくなります。コンポーネントに分割されたUIは,さまざまな種類のテスト手法を組み合わせることで,効率良くテストすることが可能です。本書では,始めにこれまでUI開発の現場を振り返りつつ,コンポーネント・ベースのUI開発の具体的な手順から,テストの方法,現場のUI開発においてエンジニアリング以外で問題になりがちなチームメンバーとのコミュニケーションの問題へのアプローチ方法までを説明しています。Designという設計手法とReactというライブラリを取り上げています。Designは,スケールしやすくメンテナンスしやすいUIの開発を実践できるデザイン手法です。Designの実践的な手法について学んだ後,「AbemaTV」というインターネットTVサービスの開発でUI設計に採用しています。最近ではUI設計手法としての認知度も確実に上がってきていて,多くの導入事例を耳にするようになりました。Reactも最近のモダンなWebアプリケーションのフロントエンド開発では必ず候補に挙がるほど普及しているUI開発用ライブラリです。DesignとReact,この2つをUI開発の道具として,掲載するコードもできる限り実践的な内容になるように心掛けました。特定の道具を例として採用してはいますが,もちろんそのUI設計の考え方は,ほかの道具や手法を採用したとしても必ず活きる内容になっています。良いユーザー体験を提供するために私はモノを作る身として,「より良いユーザー体験を提供するアプリケーションが増えてほしい」と思っています。アプリケーションのUIは,ユーザー体験を直接的に大きく影響する存在なので,「UIコンポーネント設計を正しく行うで,そういったアプリケーションを生み出しやすくできる」と確信しています。本書を通して,私の経験が,これからアプリケーション開発に関わる方のUI設計の一助になれば幸いです。(「はじめに」から)この書籍に関連する記事があります!堅牢で使いやすいUIを効率良く設計するアプリが生活に欠かせないものになった今,新しいサービスを開発するたびにアプリの規模は大きくなり,求められるUI画面も複雑で大量になっています。目次お問い合わせ著者プロフィール五藤佑典(ごとうゆうすけ)株式会社サイバーエージェント所属のエンジニア。米国カリフォルニア州立大学サンバナディーノ校でグラフィックデザインを学んだ後,大手IT会社にてマーケティングとデザイン業務に従事。現職でエンジニアに転向。Design」を導入した。現在は,技術領域を動画へと広げて,「AbemaTV」の動画技術戦略に携わり,国内外で動画事業における技術研究を行っている。2019/9/25技術評論社子供向けプログラミング書籍が、学習している様子とともに紹介されています。書店・販売店の皆様へデベロッパアドミニストレータWEB+デザインライフスタイルサイエンスニュース&レポートメールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。