JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み

JSConf のスポンサートークの資料です。
ダイバーシティ化する DMM.com のフロントエンド, JavaScript についての取り組みをお話しました。

Transcript

1. TECH VISION に向けての取り組み 2019.12.01 JSConf JP Sponsor talk DMM.com LLC Kotaro Chiba Efforts toward TECH VISION Diversified DMM.com FrontEnd & JavaScript ダイバーシティ化する DMM.com のフロントエンド, JavaScript
3. 千葉 弘太郎 Kotaro Chiba (@ur_uha) DMM. com LLC CTO Office Evangelist team Web Engineer / Designer フロントエンドの技術を軸に、 会社の制度・アーキテクチャ選定・レビュー・採⽤周りなどで 黒⼦役をしています。 Focusing on FrontEnd technology, I play the support role in the company system, architecture selection, review, and recruitment. デザイナーとして、ブランディング向け（カンファレンス向けのフライヤーとか） のデザインも担当しています。 As a designer, I'm in charge of designing for branding (such as conference flyers).
4. 今 DMM.com で起こっていること What is happening at DMM.com now ?
5. 今 DMM.com で起こっていること 合同会社化による 事業部制へ TECH VISION • マトリクス組織から事業部制組織へ • From matrix organization to business unit organization • 職種に関係無く、フロントエンドを触れる機会が増えた • Regardless of job type, the number of engineers and designers developing FrontEnd has increased. • 「染み出す開発者」が増えつつある • Increasing number of “Oozing Developers” • CTO松本 就任による • Proposed by CTO Matsumoto • 「当たり前」を作り続けるため • To continue to make “natural” • データ戦略・負債脱却・モダン化などを推進 • Promote data strategy, debt elimination and modernization • ベストプラクティスの集合 • A collection of best practices • ⾼品質で効率的なアウトプット • High quality and efficient https://inside.dmm.com/entry/12/12/dmm-techvision 5&$)
   7*4*0/
   #Z
   -JNJUFE
   MJBCJMJUZ
   DPNQBOZ
   UP
   CVTJOFTT
   VOJU
   PSHBOJ[BUJPO
6. DMM.com のフロントエンドにおける 制度・技術推進などを⾒直しへ In the FrontEnd of DMM.com, Review system and technology promotion
7. 主に取り組んでいること Mainly working on
8. 主に取り組んでいること 評価制度 ガイドライン リファレンスアーキテクチャ Rating system Guidelines Reference architecture
9. 評価制度 Rating system
10. 評価制度 様々な職種がフロントエンドで評価されるように • 「運⽤」「⽴ち上げ」などプロダクトのフェーズなども考慮した項⽬設定 • Item settings that take into account the product phase, such as “operation” and “launch” • フロントエンドをメインとしている職種でなくてもやった⼈が評価される仕組みに 作り変え • Redesigned the system that people who do it are not the type of job that mainly uses the FrontEnd. • 事業部制になったことで、スクラム開発⼿法を取り⼊れるチームが増え、フロ ントエンドを触るバックエンドエンジニアも増えた • プロダクトの運⽤でデザイナがフロントエンドを触るケースや、LP作製なども デザイナが受け持つことなど往々にしてある • The number of engineers and designers developing FrontEnd has increased. 曖昧なフロントエンドの技術をなるべく⾒える化 For various occupations to be evaluated at the FrontEnd Visualize ambiguous FrontEnd technology as much as possible
11. ガイドライン Guidelines
12. ガイドライン 40をも超えるサービスを⽀える開発者にどうタッチしていくのか • コーディングガイドラインなどを以前からはあったが、実際問題これを40をも 超えるプロダクト⼀つ⼀つに普及啓蒙していくのは現実的ではない • Although coding guidelines have been around for a long time, it is not practical to raise awareness of each problem to over 40 products • HTML / CSS などは最低限覚えていれば実務で活かせるタグやプロパティを策定 • Create HTML tags and CSS properties that can be used in practice if you remember at least • JavaScript に関しては、 eslint / prettier をプロジェクトに組み込むよう啓蒙し、 pull request など本来ビジネスロジックなどをレビューするような意識付けをして いく • As for JavaScript, enlightenment to incorporate eslint / prettier into the project, and raise awareness to review business logic etc. 「教育」「実践」に観点をおいて刷新中 How to appeal to developers who support more than 40 services Renovating from the perspective of "education" and "practice"
13. リファレンス アーキテクチャ Reference architecture
14. リファレンスアーキテクチャ 新規事業の⽴ち上げをよりスピーディに • 今後、様々な事業展開をよりスピードを上げて⽴ち上げるため、リファレンス アーキテクチャをCTO室・SRE部と共同で選定中 • A reference architecture is being selected jointly with the CTO Office and SRE Department in order to launch various business developments at a higher speed. • インフラ・バックエンド・フロントエンド・ネイティブアプリの DMM.com 標準 となる技術のアーキテクチャの策定を⽬指す • Aiming to develop technology architecture for DMM.com standard for Infrastructure, BackEnd, FrontEnd, and Native Apps • React (Next.js), Angular で技術選定中（⚠ Vue を外しているわけではない） • React (Next.js), Angular selecting technology (⚠ Vue is not removed) 新規事業⽴ち上げにおける「当たり前」を技術で作り出す 'BTUFS
    TUBSUVQ
    PG
    OFX
    CVTJOFTT $SFBUJOH
    lOBUVSBMz
    GPS
    OFX
    CVTJOFTT
    MBVODIFT
    XJUI
    UFDIOPMPHZ
15. 「なんでもあり」の DMM.com のプロダクトを フロントエンド視点からもっと柔軟に More flexible DMM.com products from the FrontEnd perspective