この記事は第2のドワンゴ Advent Calendar 2017 22日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 はじめに ここ1年半くらいは、主に ViewComponent(VC) と ContainerComponent(CC) 周りのアーキテクチャ設計、コンポーネント設計、実装を担当しています。 生放送のHTML5プレーヤーなどを開発してきました。 第1回 ニコ動/ニコ生 HTML5化への奮闘~ドワンゴ流動画配信サービスのつくりかた~ 今回はニコニコ生放送のViewComponent周りがどのように作られているのかを紹介したいと思います。 内容としては大体こんな感じです。 VCを中心とした設計から実装の流れ CSS Modulesを使いつつコンポーネントとデザインを柔軟に組み合わせられる仕組み ニコニコ生放送のコ
![React + TypeScript + CSS Modules によるコンポーネント指向フロントエンド開発の流れと知見 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/adbccc14d1f7909c6ff73ced84c66f694f079f29/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmVhY3QlMjAlMkIlMjBUeXBlU2NyaXB0JTIwJTJCJTIwQ1NTJTIwTW9kdWxlcyUyMCVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MiU4QiVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU5RCVFMyU4MyVCQyVFMyU4MyU4RCVFMyU4MyVCMyVFMyU4MyU4OCVFNiU4QyU4NyVFNSU5MCU5MSVFMyU4MyU5NSVFMyU4MyVBRCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MiVBOCVFMyU4MyVCMyVFMyU4MyU4OSVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSVBRSVFNiVCNSU4MSVFMyU4MiU4QyVFMyU4MSVBOCVFNyU5RiVBNSVFOCVBNiU4QiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9YTEyM2I4MzVhMzFhOWM4OGEyNDRlOThiMTI4MjRlYzQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWlzdWtlbiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTZkMGViMzA1OWQ0MTc0MTA5Yjg1OWQzN2E2NzJlZDM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0c5de28dc4999a9de15a9bd34e7fc84c)