Enviar pesquisa
Carregar
サービスの成長を支えるフロントエンド開発 #denatechcon
•
3 gostaram
•
4,340 visualizações
DeNA
Seguir
DeNA TechCon 2017の登壇資料です。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 86
Recomendados
DeNA private cloudのその後 #denatechcon
DeNA private cloudのその後 #denatechcon
DeNA
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
DeNA
マンガボックスのiOS10プッシュ通知導入事例
マンガボックスのiOS10プッシュ通知導入事例
Fukaya Akifumi
Mobage/AndAppのSDK開発事例とSDKを作る際に知っておくべきこと #denatechcon
Mobage/AndAppのSDK開発事例とSDKを作る際に知っておくべきこと #denatechcon
DeNA
DeNAのゲームを支えるプラットフォーム Sakasho #denatechcon
DeNAのゲームを支えるプラットフォーム Sakasho #denatechcon
DeNA
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA
Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案
gdays
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DeNA
Recomendados
DeNA private cloudのその後 #denatechcon
DeNA private cloudのその後 #denatechcon
DeNA
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
DeNA
マンガボックスのiOS10プッシュ通知導入事例
マンガボックスのiOS10プッシュ通知導入事例
Fukaya Akifumi
Mobage/AndAppのSDK開発事例とSDKを作る際に知っておくべきこと #denatechcon
Mobage/AndAppのSDK開発事例とSDKを作る際に知っておくべきこと #denatechcon
DeNA
DeNAのゲームを支えるプラットフォーム Sakasho #denatechcon
DeNAのゲームを支えるプラットフォーム Sakasho #denatechcon
DeNA
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA
Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案
gdays
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DeNA
AndApp開発における全て #denatechcon
AndApp開発における全て #denatechcon
DeNA
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
Toshiharu Sugiyama
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNA
これからの Microservices
これからの Microservices
Toru Yamaguchi
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
DeNA
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
Makoto Haruyama
B2B2Cなヘルスケアサービスの作り方
B2B2Cなヘルスケアサービスの作り方
Tomohiro MITSUMUNE
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
Toshiharu Sugiyama
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
dena_study
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
Makoto Haruyama
DeNAが取り組む Software Engineer in Test
DeNAが取り組む Software Engineer in Test
Masaki Nakagawa
DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -
Tomoya Kabe
DeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechcon
DeNA
セキュリティ業務の内製とチームメンバー育成
セキュリティ業務の内製とチームメンバー育成
Toshiharu Sugiyama
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
Yosaku Toyama
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
Satoshi Takano
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)
denatech2016
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Shuhei Kawasaki
Rancher による社内向けテナントサービス基盤
Rancher による社内向けテナントサービス基盤
Keita Shimada
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
DeNAのゲーム開発を支える Game Backend as a Service
DeNAのゲーム開発を支える Game Backend as a Service
Makoto Haruyama
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Koichiro Sumi
Mais conteúdo relacionado
Mais procurados
AndApp開発における全て #denatechcon
AndApp開発における全て #denatechcon
DeNA
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
Toshiharu Sugiyama
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNA
これからの Microservices
これからの Microservices
Toru Yamaguchi
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
DeNA
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
Makoto Haruyama
B2B2Cなヘルスケアサービスの作り方
B2B2Cなヘルスケアサービスの作り方
Tomohiro MITSUMUNE
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
Toshiharu Sugiyama
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
dena_study
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
Makoto Haruyama
DeNAが取り組む Software Engineer in Test
DeNAが取り組む Software Engineer in Test
Masaki Nakagawa
DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -
Tomoya Kabe
DeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechcon
DeNA
セキュリティ業務の内製とチームメンバー育成
セキュリティ業務の内製とチームメンバー育成
Toshiharu Sugiyama
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
Yosaku Toyama
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
Satoshi Takano
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)
denatech2016
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Shuhei Kawasaki
Rancher による社内向けテナントサービス基盤
Rancher による社内向けテナントサービス基盤
Keita Shimada
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
Mais procurados
(20)
AndApp開発における全て #denatechcon
AndApp開発における全て #denatechcon
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
DeNA_Techcon2017_DeNAでのチート・脆弱性診断への取り組み
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
これからの Microservices
これからの Microservices
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
Anyca(エニカ)のC2Cビジネスを支えるシステムと運用 #denatechcon
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
DeNAオリジナル ゲーム専用プラットフォーム Sakashoについて
B2B2Cなヘルスケアサービスの作り方
B2B2Cなヘルスケアサービスの作り方
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
マイクロサービスっぽい感じの話
マイクロサービスっぽい感じの話
DeNAが取り組む Software Engineer in Test
DeNAが取り組む Software Engineer in Test
DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -
DeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechcon
セキュリティ業務の内製とチームメンバー育成
セキュリティ業務の内製とチームメンバー育成
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
爆速でAndroidアプリを ビルドするための仕組み DeNA TechCon #denatechcon
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Anyca におけるUIフレームワークとスマホによるドア操作の仕組み
Rancher による社内向けテナントサービス基盤
Rancher による社内向けテナントサービス基盤
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
Semelhante a サービスの成長を支えるフロントエンド開発 #denatechcon
DeNAのゲーム開発を支える Game Backend as a Service
DeNAのゲーム開発を支える Game Backend as a Service
Makoto Haruyama
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Koichiro Sumi
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
SPAを選択した理由とその結果 ~Reactを添えて~
SPAを選択した理由とその結果 ~Reactを添えて~
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発
政雄 金森
Nifty cloud c4 sa meetup
Nifty cloud c4 sa meetup
Yuichi Saotome
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
Makoto Haruyama
Spring Fest 2017 「エンタープライズで利用するSpring Boot」#jsug #sf_h1
Spring Fest 2017 「エンタープライズで利用するSpring Boot」#jsug #sf_h1
Takeshi Hirosue
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
Shunsuke Maeda
ドリコムJenkins勉強会資料
ドリコムJenkins勉強会資料
Go Sueyoshi (a.k.a sue445)
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
CData Software Japan
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
Developers Summit
Klocwork 2017.0アップデート
Klocwork 2017.0アップデート
Masaru Horioka
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
CData Software Japan
SELinuxの課題について
SELinuxの課題について
Atsushi Mitsu
脅威へ、しなやかかつ持続可能に対応するためのIaC環境 ~循環型IaC~ (CloudNative Security Conference 2022 プレ...
脅威へ、しなやかかつ持続可能に対応するためのIaC環境 ~循環型IaC~ (CloudNative Security Conference 2022 プレ...
NTT DATA Technology & Innovation
CData Drivers HandsOn 20180326
CData Drivers HandsOn 20180326
CData Software Japan
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
LINE Corporation
KDDIが考える顧客へ本当の価値を届けるための開発手法
KDDIが考える顧客へ本当の価値を届けるための開発手法
Tsubasa Hirota
リクルートにおけるPaaS活用事例
リクルートにおけるPaaS活用事例
Recruit Technologies
Semelhante a サービスの成長を支えるフロントエンド開発 #denatechcon
(20)
DeNAのゲーム開発を支える Game Backend as a Service
DeNAのゲーム開発を支える Game Backend as a Service
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
SPAを選択した理由とその結果 ~Reactを添えて~
SPAを選択した理由とその結果 ~Reactを添えて~
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発
Nifty cloud c4 sa meetup
Nifty cloud c4 sa meetup
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
Spring Fest 2017 「エンタープライズで利用するSpring Boot」#jsug #sf_h1
Spring Fest 2017 「エンタープライズで利用するSpring Boot」#jsug #sf_h1
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
ドリコムJenkins勉強会資料
ドリコムJenkins勉強会資料
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
Klocwork 2017.0アップデート
Klocwork 2017.0アップデート
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
SELinuxの課題について
SELinuxの課題について
脅威へ、しなやかかつ持続可能に対応するためのIaC環境 ~循環型IaC~ (CloudNative Security Conference 2022 プレ...
脅威へ、しなやかかつ持続可能に対応するためのIaC環境 ~循環型IaC~ (CloudNative Security Conference 2022 プレ...
CData Drivers HandsOn 20180326
CData Drivers HandsOn 20180326
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
KDDIが考える顧客へ本当の価値を届けるための開発手法
KDDIが考える顧客へ本当の価値を届けるための開発手法
リクルートにおけるPaaS活用事例
リクルートにおけるPaaS活用事例
Mais de DeNA
DRIVE CHARTの裏側 〜 AI ☓ IoT ☓ ビッグデータを 支えるアーキテクチャ 〜
DRIVE CHARTの裏側 〜 AI ☓ IoT ☓ ビッグデータを 支えるアーキテクチャ 〜
DeNA
IoTと業務システムをつなぐgRPC/RESTサービスの開発と運用
IoTと業務システムをつなぐgRPC/RESTサービスの開発と運用
DeNA
Can We Make Maps from Videos? ~From AI Algorithm to Engineering for Continuou...
Can We Make Maps from Videos? ~From AI Algorithm to Engineering for Continuou...
DeNA
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
DeNA
クラウド環境でのセキュリティ監査自動化【DeNA TechCon 2020 ライブ配信】
クラウド環境でのセキュリティ監査自動化【DeNA TechCon 2020 ライブ配信】
DeNA
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
仕様起因の手戻りを減らして開発効率アップを目指すチャレンジ 【DeNA TechCon 2020 ライブ配信】
仕様起因の手戻りを減らして開発効率アップを目指すチャレンジ 【DeNA TechCon 2020 ライブ配信】
DeNA
DeNA データプラットフォームにおける 自由と統制のバランス【DeNA TechCon 2020 ライブ配信】
DeNA データプラットフォームにおける 自由と統制のバランス【DeNA TechCon 2020 ライブ配信】
DeNA
リアルタイムリモートデバッグ環境によるゲーム開発イテレーションの高速化【DeNA TechCon 2020 ライブ配信】
リアルタイムリモートデバッグ環境によるゲーム開発イテレーションの高速化【DeNA TechCon 2020 ライブ配信】
DeNA
MOV の機械学習システムを支える MLOps 実践【DeNA TechCon 2020 ライブ配信】
MOV の機械学習システムを支える MLOps 実践【DeNA TechCon 2020 ライブ配信】
DeNA
コンピュータビジョン技術の実応用〜DRIVE CHARTにおける脇見・車間距離不足検知〜【DeNA TechCon 2020 ライブ配信】
コンピュータビジョン技術の実応用〜DRIVE CHARTにおける脇見・車間距離不足検知〜【DeNA TechCon 2020 ライブ配信】
DeNA
DeNA の Slack 導入と活用の事例紹介
DeNA の Slack 導入と活用の事例紹介
DeNA
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
DeNA
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
DeNA
後部座席タブレットにおけるMaaS時代を見据えた半歩先のUX設計」 [MOBILITY:dev]
後部座席タブレットにおけるMaaS時代を見据えた半歩先のUX設計」 [MOBILITY:dev]
DeNA
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
DeNA
MOVで実践したサーバーAPI実装の超最適化について [MOBILITY:dev]
MOVで実践したサーバーAPI実装の超最適化について [MOBILITY:dev]
DeNA
MOV お客さま探索ナビの GCP ML開発フローについて
MOV お客さま探索ナビの GCP ML開発フローについて
DeNA
課題ドリブン、フルスタックAI開発術 [MOBILITY:dev]
課題ドリブン、フルスタックAI開発術 [MOBILITY:dev]
DeNA
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA
Mais de DeNA
(20)
DRIVE CHARTの裏側 〜 AI ☓ IoT ☓ ビッグデータを 支えるアーキテクチャ 〜
DRIVE CHARTの裏側 〜 AI ☓ IoT ☓ ビッグデータを 支えるアーキテクチャ 〜
IoTと業務システムをつなぐgRPC/RESTサービスの開発と運用
IoTと業務システムをつなぐgRPC/RESTサービスの開発と運用
Can We Make Maps from Videos? ~From AI Algorithm to Engineering for Continuou...
Can We Make Maps from Videos? ~From AI Algorithm to Engineering for Continuou...
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
クラウド環境でのセキュリティ監査自動化【DeNA TechCon 2020 ライブ配信】
クラウド環境でのセキュリティ監査自動化【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
仕様起因の手戻りを減らして開発効率アップを目指すチャレンジ 【DeNA TechCon 2020 ライブ配信】
仕様起因の手戻りを減らして開発効率アップを目指すチャレンジ 【DeNA TechCon 2020 ライブ配信】
DeNA データプラットフォームにおける 自由と統制のバランス【DeNA TechCon 2020 ライブ配信】
DeNA データプラットフォームにおける 自由と統制のバランス【DeNA TechCon 2020 ライブ配信】
リアルタイムリモートデバッグ環境によるゲーム開発イテレーションの高速化【DeNA TechCon 2020 ライブ配信】
リアルタイムリモートデバッグ環境によるゲーム開発イテレーションの高速化【DeNA TechCon 2020 ライブ配信】
MOV の機械学習システムを支える MLOps 実践【DeNA TechCon 2020 ライブ配信】
MOV の機械学習システムを支える MLOps 実践【DeNA TechCon 2020 ライブ配信】
コンピュータビジョン技術の実応用〜DRIVE CHARTにおける脇見・車間距離不足検知〜【DeNA TechCon 2020 ライブ配信】
コンピュータビジョン技術の実応用〜DRIVE CHARTにおける脇見・車間距離不足検知〜【DeNA TechCon 2020 ライブ配信】
DeNA の Slack 導入と活用の事例紹介
DeNA の Slack 導入と活用の事例紹介
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
後部座席タブレットにおけるMaaS時代を見据えた半歩先のUX設計」 [MOBILITY:dev]
後部座席タブレットにおけるMaaS時代を見据えた半歩先のUX設計」 [MOBILITY:dev]
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
MOVで実践したサーバーAPI実装の超最適化について [MOBILITY:dev]
MOVで実践したサーバーAPI実装の超最適化について [MOBILITY:dev]
MOV お客さま探索ナビの GCP ML開発フローについて
MOV お客さま探索ナビの GCP ML開発フローについて
課題ドリブン、フルスタックAI開発術 [MOBILITY:dev]
課題ドリブン、フルスタックAI開発術 [MOBILITY:dev]
DeNA の AWS アカウント管理とセキュリティ監査自動化
DeNA の AWS アカウント管理とセキュリティ監査自動化
Último
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Último
(8)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
サービスの成長を支えるフロントエンド開発 #denatechcon
1.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. サービスの成長を 支えるフロントエンド開発 February 10, 2017 Naoki Endo x Takefumi Yoshii DeNA Design Strategies Office DeNA Co., Ltd.
2.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. AGENDA ■ 自己紹介 ■ サービス運用におけるパラダイムシフトとの最適な付き合い方 ■ 直近の業務における選択 - React を選んだ観点 - ■ 直近の業務における選択 - Vue.js を選んだ観点 - ■ 中長期的にサービスを支えるコンポーネント設計 2
3.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 自己紹介 3
4.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 自己紹介 ■ 遠藤 直樹 ■ 株式会社ディー・エヌ・エー デザイン戦略室第2グループ ■ 2015年1月 DeNA に入社 ■ ベンチャー企業・フリーランスでデザイナー兼フロントエンジニアとして働く。そ の後、株式会社パズルへ入社して、主に広告プロモーションのWebサイト制作 を担当。 ■ 多くのユーザを抱えるサービスの制作をしたくて転職。 4
5.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 自己紹介 ■ DeNA 入社後はエブリスタ・Anyca・KenCoMなどのフロントエンドを担当。 ■ 現在は新規サービスでフロントエンド実装を行いながら、複数のサービスで設 計と指導に従事。 5 Anyca
6.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 自己紹介 ■ 吉井 健文 ■ 株式会社ディー・エヌ・エー デザイン戦略室第3グループ ■ DeSC ヘルスケア株式会社 企画開発部 ■ 2016年 DeNA に入社 ■ 前職は広告制作会社にて、デザイン・フロントエンド開発を担当。 ■ 事業会社でサービス開発に関わることに魅力を感じ転職。 6
7.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 自己紹介 ■ DeNA では Mirrativ・ゲームプロモーションサイトを実装。 ■ 現職のDeSC ヘルスケア株式会社では「KenCoM」の企画開発に従事。 7 デュエルエクスマキナ (DUELS X MACHINA) 公式サイト DeNA DESIGN BLOG (デザイン戦略室)
8.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. サービス運用における パラダイムシフトとの 最適な付き合い方 8 パラダイムシフト - Wikipedia:その時代や分野において当然のことと考えられていた認識や思想、社会全体の価値観などが革命的にもしくは劇的に変化することをいう。
9.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. フロントエンド界隈 2・3年で起こった パラダイムシフト 9 パラダイムシフト - Wikipedia:その時代や分野において当然のことと考えられていた認識や思想、社会全体の価値観などが革命的にもしくは劇的に変化することをいう。 サービス運用におけるパラダイムシフトとの最適な付き合い方
10.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 10 サービス運用におけるパラダイムシフトとの最適な付き合い方 ※登壇者の開発現場で体感している年表です。いずれのツールも各プロダクトで健在であり、リリース時期の前後により表を作成しています サービス運用におけるパラダイムシフトとの最適な付き合い方 ※登壇者の開発現場で体感している年表です。いずれのツールも各プロダクトで健在であり、リリース時期の前後により表を作成しています
11.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 11 ■ AltJS(Babel・TypeScript・CoffeeScript) ■ Web Components framework(React・Angular・Vue.js) ■ CSS pre processor(PostCSS・SASS・LESS・Stylus) ■ CSS naming conventions(BEM・ITCSS・FLOCSS) ■ Module bundler(webpack・gulp + npm scripts) ■ package manager(yarn・npm) ■ webpack、Browserifyによるモジュールシステム ■ Javascriptで静的型付け ■ Flux・Reduxによる状態の管理 ■ Unit test・e2e test 乱立するコンポーネントフレームワーク。 各種トランスパイル言語によるロックイン... サービス運用におけるパラダイムシフトとの最適な付き合い方
12.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 12 過去のパラダイムシフトで得た知見 フロントエンド開発現場は多かれ少なかれ、 リリース時期のトレンドにロックインさる。 リプレイスに工数が割けない現場は、 過去のドキュメントを元に運用するしかないのが現状。 サービス運用におけるパラダイムシフトとの最適な付き合い方
13.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. サービス運用におけるパラダイムシフトとの最適な付き合い方 13 過去のパラダイムシフトで得た知見 アウトプットに貢献する技術改革は常に起きている。 しかしながら、全てがサービスに寄与し得るとは限らない。 サービスを中長期運用するうえで最適解とは? 私たちが選択したフロントエンド開発のいまを お伝えしていきたい。
14.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 14 仮想DOMの火付け役。viewのみ のライブラリで、アプリケーション 構築のためには様々なモジュー ルが必要 ( Facebook ) 2017年2月 現在. 社内で使われているフレームワーク オールインワンのフレームワー ク。静的型付けのTypeScriptを 標準で使用、テストツールも充 実 ( Google / Microsoft ) ReactやAngularの影響を受け、 2016年にもっとも成長したフレーム ワーク。可読性や保守性と楽しさと のバランス ( Evan / john resig ) React Angular Vue.js サービス運用におけるパラダイムシフトとの最適な付き合い方
15.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 直近の業務における選択 - React を選んだ観点 - 15
16.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 16 ツールセットと開発環境 ■ React + Redux + redux-saga ■ npm scripts + webpack + webpack-dev-server ■ yarn + npm ■ Ruby on Rails 直近の業務における選択 - React を選んだ観点 -
17.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 17 静的片付けは見送り Typescript ・ flowtype は導入を控えた。 実装要件においてそれが MUST ではなかったため。 propTypesや、UnitTest で代替する方針に。 直近の業務における選択 - React を選んだ観点 -
18.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 18 React Redux を選定した基準 ■ フレームワークとして設計が確立されている ■ モジュール単位でのリプレイスしやすさ ■ テストコードの書きやすさ いずれも共通している点は「疎結合」であること。 疎結合なモジュール・コードは、パラダムシフトに強く 中長期運用に向いていると考えた。 直近の業務における選択 - React を選んだ観点 -
19.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 19 Redux Fluxパターン実装のひとつ。 React 専用の状態管理ライブラリの印象が強いが、 多くのviewライブラリと組み合わせが可能。 コーディングガイドが統一されるため 独自設計が生じにくい。 直近の業務における選択 - React を選んだ観点 -
20.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 20 直近の業務における選択 - React を選んだ観点 -
21.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 21 Redux で React の責務が単純になる Redux の恩恵で React のコンポーネントライフサイクルを 使う場面がほとんど無くなる。Reactの責務は view を返す シンプルなものになり、State を持つことが無くなる。 純粋な関数で記述された jsx コンポーネントは 再利用性が高まりパフォーマンス向上も期待できる。 参考文献: React Stateless Functional Components @Cory House 直近の業務における選択 - React を選んだ観点 -
22.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 22 Redux で React の責務が単純になる 直近の業務における選択 - React を選んだ観点 - React.Componentを継承した場合
23.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 23 Redux で React の責務が単純になる 直近の業務における選択 - React を選んだ観点 - React Reduxで頻出する、Stateless Functional Component の一例。 コンポーネントの状態はStoreで管理され、共有される。 コンポーネントからロジックが排出される。
24.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 24 Redux がもたらす疎結合性 Redux のお作法にならうことで、 各レイヤーの粒度が小さく、役割が明確になる。 モジュール同士を疎結合にしてくれるため、 Redux に変わる 状態管理ライブラリが将来台頭しても jsx で記述された Componentは継続して利用できる可能性が高い。 (Reactが置きかわる場合も同様) 直近の業務における選択 - React を選んだ観点 -
25.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 25 直近の業務における選択 - React を選んだ観点 -
26.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 26 直近の業務における選択 - React を選んだ観点 - Reduxに置きかわる状態管理ライブラリの台頭に備える。 Reactで記述されたコンポーネントは継続利用が可能 MobX alt
27.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 27 直近の業務における選択 - React を選んだ観点 - Reactに置きかわるViewライブラリの台頭に備える。 Reduxによる状態管理は継続利用が可能
28.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 28 React Redux のテスト Redux に則り記述されたコードは、 Actions・Reducers・Components、各レイヤーの責務が シンプルなため、テストコードも明瞭に。 テストの書きやすさもReduxの特徴 【React Redux のunitテスト一例】 ■ props 分岐で期待するコンポーネントテスト ■ reducer の initialStateとactionType による戻り値 ■ mock や stub はモジュールの汎用性に応じて 詳細: React Redux テスト考察 @Takepepe (Takefumi.Yoshii) 直近の業務における選択 - React を選んだ観点 -
29.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 29 React Redux のテスト 直近の業務における選択 - React を選んだ観点 - 【Component テスト一例】 リグレッションテストだけでなく、unitテストはI/F明示として 運用資産になる。アプリケーション規模が大きくなるにつれ、 事故を未然に防ぐ恩恵を受けやすい。
30.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 30 Redux の副作用を扱う React Redux の設計思想に則り構築すると、 それだけでは扱いきれない副作用が発生する。 ビジネスロジックや外部要因に起因するイベント、 非同期処理、アニメーションなど。 副作用を扱うためには middleware が必要。 選定した redux-saga は多くの副作用を扱うことができる。 【Redux の副作用一例】 ■ Ajax / Animation ■ websocket ■ History location 【redux-saga】 ■ https://github.com/redux-saga/redux-saga 直近の業務における選択 - React を選んだ観点 -
31.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 31 redux-saga の 特徴 疎結合な状態でReact Redux の アーキテクチャに組み込める。 API (redux-saga/effects) で、非同期処理の 並列リクエスト・コールバック・キャンセルなどを 同期的な記述で完結に記述出来る。 処理列のなかで、Storeの状態を参照出来る。 直近の業務における選択 - React を選んだ観点 -
32.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 32 redux-saga の API 【redux-saga/effects 抜粋】 ■ fork(Lounch saga task) ■ take(Waiting Action) ■ call(Waiting Promise Resolved) ■ put(Dsipatch Action) ■ select(Reference Store) 直近の業務における選択 - React を選んだ観点 -
33.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 33 直近の業務における選択 - React を選んだ観点 -
34.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 34 redux-saga の コード 各々がブレークポイントを持った マルチスレッドの様な振る舞いをする。 ES2015 Generator function を使用。 直近の業務における選択 - React を選んだ観点 -
35.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 35
36.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 36
37.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 37
38.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 38
39.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 39
40.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 40
41.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 41
42.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 42 React Redux 所感 数十ページに渡るWebサービス構築を予定していたり、 複雑なGUIアプリケーション構築にお勧め。 数ページのSPA実装のためには重量オーバー…? 直近の業務における選択 - React を選んだ観点 - 以上、Reactを選んだ観点でした!
43.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 直近の業務における選択 - Vue.js を選んだ観点 - 43
44.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 直近の業務における選択 - Vue.js を選んだ観点 - 44 ツールセットと開発環境 ■ Vue.js + Vuex ■ npm scripts + webpack + Browsersync ■ yarn + npm ■ Ruby on Rails
45.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 45 Vue.js を選定した基準 ■ 単純なテンプレート構文による宣言的レンダリング ■ コンポーネントシステム ■ プログレッシブフレームワーク コードの可読性や、フレームワークに不慣れなメンバーも 導入ハードルが低い。アジャイル開発向きなため プロダクトの中長期運用に向いている。 直近の業務における選択 - Vue.js を選んだ観点 -
46.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 46 単純なテンプレート構文による宣言的レンダリング 既存のマークアップ資産を流用する容易さ 直近の業務における選択 - Vue.js を選んだ観点 -
47.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 47 コンポーネントシステム Web Components の仕様に沿ったモデル化 直近の業務における選択 - Vue.js を選んだ観点 -
48.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 48 プログレッシブフレームワーク コアは宣言的レンダリング & コンポーネントシステム とりあえず動くものを素早く完成させる モジュール化の粒度の自由さ クライアントサイドルーティングを加えたければ & vue-router 大規模状態管理を加えたければ & Vuex 直近の業務における選択 - Vue.js を選んだ観点 -
49.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 49 導入も簡単で、 サクサクと動くものを作ることに集中した結果… 直近の業務における選択 - Vue.js を選んだ観点 -
50.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 状態管理ツラい物語1 あるところに仕様を決めながら作っていたため、 複数人で高速プロトタイピングを繰り返した結果、 1コンポーネントの粒度もバラバラなソースがありました。 リリースを終えて運用フェーズに入ったことで、 関わっていた人は減り、バラバラだったファイルに秩序をもたらすためモ ジュール化を進めることになりました。 最初はとても大きな単位でコンポーネントを作っていたため、 大量の状態を1コンポーネントが抱えています。 50 直近の業務における選択 - Vue.js を選んだ観点 -
51.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 状態管理ツラい物語2 51 直近の業務における選択 - Vue.js を選んだ観点 - これは見通しが悪いと、 コンポーネントの粒度を細かくしていくと、 だんだん props のバケツリレーが増えてきます。 親から子へ、子から孫へ、孫からひ孫へ… 双方向バインディングしてると、コンポーネント間の関係を追っていくの がとても大変です。 ただリレーしてるだけで使ってない値がコンポーネント内に存在します。 1箇所直すと、他に影響が出ててしまわないか不安になってきました。
52.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 状態管理ツラい物語3 52 「信頼できる状態管理の仕組みがほしい」 直近の業務における選択 - Vue.js を選んだ観点 -
53.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 状態管理ツラい物語4 53 直近の業務における選択 - Vue.js を選んだ観点 - React 界隈で流行っている Flux, Redux 「いつやるか?今でしょ!」 用語の多さを見ればわかるとおり、 ソース量の増加があって、冗長化されているようにみえます。 しかし、データの流れが一方向になったため、 可読率と変更に対する安定性が上がり、 状態遷移を追うことが楽になりました。めでたしめでたし。
54.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 54 Vuex を導入した理由 ■ 書き方がバラバラだった ■ コンポーネント粒度が細かくなっていく ■ 大量の状態を1つのコンポーネントが抱えていた ■ バケツリレーするだけで、コンポーネントが使わない値が量産 直近の業務における選択 - Vue.js を選んだ観点 -
55.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 55 直近の業務における選択 - Vue.js を選んだ観点 -
56.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 56 サービスの成長に合わせて 状態管理も柔軟に これもプログレッシブ 直近の業務における選択 - Vue.js を選んだ観点 -
57.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 中長期的にサービスを支える コンポーネント設計 57
58.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. Linter の設定を用意して、 記述ルールのドキュメントを廃止する サービスによって、記述ルールが個人の趣味に偏りがち。 ESLint, Sass-lint, stylelint でスタンダードな書き方に矯正して、チーム としてメンテナンスをできる体制にする。 58 中長期的にサービスを支えるコンポーネント設計
59.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 59 .eslintrc.js airbnb/javascript をベースにルールを追加 .stylelintrc stylelint/stylelint-config-standard をベースにルールを追加 ESLint や stylelint では extend を利用して、 OSSで多くの人が採用しているスタンダードに合わせやすい。 中長期的にサービスを支えるコンポーネント設計
60.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. こんなPRのくだらない指摘を未然に防ぐ。 60 中長期的にサービスを支えるコンポーネント設計
61.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 61 CSS 設計のこれまでと、これから ■ BEM のコンポーネントスコープ ■ OOCSS, SMACSS, の柔軟性 ■ ITCSSの記述順と詳細度 各設計が解決している問題点を継承。 プロジェクト単位でルールを作り上げているのが現状。 中長期的にサービスを支えるコンポーネント設計
62.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 62 CSS 設計のこれまでと、これから ■ BEM のコンポーネントスコープ ■ OOCSS, SMACSS, の柔軟性 ■ ITCSSの記述順と詳細度 SPAフレームワークと併せて登場した CSS Modules は、 これらの問題を解決するかもしれない。 中長期的にサービスを支えるコンポーネント設計
63.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 63 CSS Modules はフロントエンド設計を 改変するのか CSS Modules とは、javascript を bundle する際、 各コンポーネントに一意のhash値をclass名として付与し、 CSSグルーバル汚染を解決するアプローチ。 Bundleされたjavascriptにcssのコードが内包され、 CSS in JS とも呼ばれている。 同一ディレクトリにコンポーネントを定義している javascript、stylesheetを配置するケースが多い。 中長期的にサービスを支えるコンポーネント設計
64.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 64 CSS Modules はフロントエンド設計を 改変するのか Vue.js でのコンポーネントの作り方と CSS Modules 中長期的にサービスを支えるコンポーネント設計
65.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 65 CSS Modules はフロントエンド設計を 改変するのか React でのコンポーネントの作り方と CSS Modules 中長期的にサービスを支えるコンポーネント設計
66.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 66 CSS Modules はフロントエンド設計を 改変するのか ブラウザでの展開例 中長期的にサービスを支えるコンポーネント設計 webpackによる一意のclass付与 コンポーネントマウント時 head タグ内に挿入される
67.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 67 CSS Modules はフロントエンド設計を 改変するのか CSS Modules はグローバル汚染を解決したものの、 プロダクトを取り巻く様々な要因により 導入できないのが、現場の実情。 ※そもそも、React や Vue.js など、CSS Modules が利用できる環境ではない ※Featureテストなど外部コードからDOM名を参照できない ※外部リソースを挿入した際、詳細度のコントロールが辛くなる 中長期的にサービスを支えるコンポーネント設計
68.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 68 CSS Modules はフロントエンド設計を 改変するのか SPA・非SPAが混在するプロダクトで共有し辛い… javascript と css が密結合になってしまうこと、 特定のフレームワークによるロックインも 避けたいところ。 中長期的にサービスを支えるコンポーネント設計
69.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 69 2017年2月現在 CSS Modules は全てのプロダクトで 最適解であるとは限らない 中長期的にサービスを支えるコンポーネント設計
70.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 70 が、いつかは移行したい。 将来的に移行しやすい設計を意識することで 自然と良いCSS設計を得ることができる 中長期的にサービスを支えるコンポーネント設計
71.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 71 CSS Modules を見据えた CSS設計 ここで、CSS Modules が成し遂げようとしたことが 長年試行錯誤されてきたCSS設計の 台頭であったことに立ち返りたい。 それらのCSS設計と CSS Modules の共通点とは? 中長期的にサービスを支えるコンポーネント設計
72.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 72 中長期的にサービスを支えるコンポーネント設計 ■ 名前空間 ■ 関心の分離 ■ 状態管理
73.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 73 中長期的にサービスを支えるコンポーネント設計 ■ 名前空間 ■ 関心の分離 ■ 状態管理
74.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 74 CSS設計で再現する 名前空間 いずれのCSS設計もコンポーネントスコープを担保するため BEM(Block・Element・Modifier)を用いた 命名規則を取り入れている。 BEMにおけるBlock = 名前空間 は、 CSS Modules が付与するhash値と等しい。 中長期的にサービスを支えるコンポーネント設計
75.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 75 CSS設計で再現する 名前空間 SPA コンポーネントの粒度に倣い、view関連ファイルを定義。 ファイルツリーに由来する名前空間をBEMのBlock名に。 view関連ファイルのツリー構造を対にしてみる。 ■ partial ≒ component ■ locals ≒ props 中長期的にサービスを支えるコンポーネント設計
76.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 76 CSS設計で再現する 名前空間 非CSS Modulesプロダクトであっても、 将来的に移行しやすい状態に。 コンポーネントの粒度や I/F設計が 自然と良いものに。 中長期的にサービスを支えるコンポーネント設計
77.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 77 中長期的にサービスを支えるコンポーネント設計 ■ 名前空間 ■ 関心の分離 ■ 状態管理
78.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 78 コンポーネント同士の 関心の分離 外部定義からの影響は遮断したい。 担保した名前空間が台無しに… BEMにおけるElement = プライベート要素 で、 外部の名前空間から関心を分離してみる。 中長期的にサービスを支えるコンポーネント設計
79.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 79 コンポーネント同士の 関心の分離 名前空間以外の指定を含んでしまうと、 該当コンポーネントに関する定義が分散してしまう。 また、その存在で担保していたレイアウトが破綻し、 アウトプットが予測しづらい設計に。 中長期的にサービスを支えるコンポーネント設計
80.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 80 コンポーネント同士の 関心の分離 外部コンポーネントを配置するため、 Container Element を用意する。 BEM Element 指定は、CSS Modules における :local() や scoped の機能と等しい。 中長期的にサービスを支えるコンポーネント設計
81.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 81 中長期的にサービスを支えるコンポーネント設計 ■ 名前空間 ■ 関心の分離 ■ 状態管理
82.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 82 予測しやすい状態管理 CSSの指定はコンポーネントの BOXモデル・装飾の定義だけではない。 状態に応じて、Modify(修正)をかけ 定義を積み重ねていく。 ある特定の状態に一致したとき、 コンポーネントに対して変化を与える様な 管理方法の危険性に触れていく。 中長期的にサービスを支えるコンポーネント設計
83.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 83 予測しやすい状態管理 詳細度の競合が発生し、影響範囲が予測できなくなる。 特定の状態になったとき、予想外の崩れが発生する。 中長期的にサービスを支えるコンポーネント設計 影響範囲を特定するのが困難な例 ?
84.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 84 予測しやすい状態管理 そこで、コンポーネント単位で状態を管理することに。 状態による変化の優先順位が予測しやすくなる。 コンポーネント単位にまとまるため、 CSS Modules への移行も容易に。 中長期的にサービスを支えるコンポーネント設計 CSS Modules への移行例
85.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 85 新しいトレンドには 起源となるアイデアと知見が背景にある。 それを見逃さずに意識することで、 中長期運用における最適解を導くことができる。 中長期的にサービスを支えるコンポーネント設計
86.
Copyright © DeNA
Co.,Ltd. All Rights Reserved. 86 ご清聴ありがとうございました design.dena.com