![Page 1: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/1.jpg)
ProductManagement / front-endin Sansan( & remote work)
2016.03.25 Sansan 株式会社 岩下弘法
![Page 2: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/2.jpg)
Copyright © Sansan, Inc. All rights reserved.
introduce
- 岩下 弘法
- ♂(4) と ♀ (0) の父
- 2013 年 10 月 Sansan 入社
- 前職は SIer で HRM パッケージを作ってた
- Java(Seasar2, Play!)- フロントエンドエンジニアではない
2
![Page 3: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/3.jpg)
Copyright © Sansan, Inc. All rights reserved.
introduce
![Page 4: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/4.jpg)
Copyright © Sansan, Inc. All rights reserved.
Ice break
4
![Page 5: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/5.jpg)
Copyright © Sansan, Inc. All rights reserved.
リモートワーク
- 通勤は人生の無駄づかい
- 9 時 5 時からの解放
- 節約するより価値を生みだそう
- 上司が見張っていないと仕事をサボる?
- 家には邪魔が多すぎる?
- 社内に不公平が生まれる?
- セキュリティを守るにはオフィスが必要?
5
「強いチームはオフィスを捨てる」の目次より
![Page 6: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/6.jpg)
Copyright © Sansan, Inc. All rights reserved.
リモートワーク
6
![Page 7: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/7.jpg)
Copyright © Sansan, Inc. All rights reserved.
リモートワーク
7
![Page 8: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/8.jpg)
Copyright © Sansan, Inc. All rights reserved.
リモートワーク
8
![Page 9: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/9.jpg)
Copyright © Sansan, Inc. All rights reserved.
リモートワーク
- 昨年は計四ヶ月ほど
- 通勤の満員電車ないだけで世界が変わる
- 怠けより働き過ぎに注意
- 孤独は人を狂わせる
- 信頼関係が大事
9
![Page 10: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/10.jpg)
Copyright © Sansan, Inc. All rights reserved.
体制 / プロジェクト
10
![Page 11: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/11.jpg)
Copyright © Sansan, Inc. All rights reserved.
体制
Product Owner
Product Manager
Engineer
プロダクト部 開発部
![Page 12: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/12.jpg)
Copyright © Sansan, Inc. All rights reserved.
プロダクトマップ
12
UX 進化
ビジョンニーズ
ビジネス進化
既存改善
大規模対応 新ビジネスモデル対応
API 連携ネイティブアプリ強化新機能
![Page 13: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/13.jpg)
Copyright © Sansan, Inc. All rights reserved.
プロダクト
- 唯一無二のシステムを創っている
- 顧客ごとのオーダーメイドシステムではない
- 準拠する明確なルールがあるわけではない
- 世界観を決めるのは我々
13
![Page 14: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/14.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方
Product Owner
Product Manager
Engineer
プロダクト部 開発部
![Page 15: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/15.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (PM)
- 解決すべき課題を見つけユーザー体験を考える
15
![Page 16: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/16.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (PM)
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
16
![Page 17: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/17.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (PM)
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
- PO に設計意図を伝え承認を得る
17
![Page 18: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/18.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (PM)
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
- PO に設計意図を伝え承認を得る
- PM & エンジニアで UI/UX 確認
18
![Page 19: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/19.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (Engineer)
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
- PO に設計意図を伝え承認を得る
- PM & エンジニアで UI/UX 確認
- 負の遺産を掻い潜りながら実装する
- 前側 : ASP.NET Web Forms -> ASP.NET MVC- 後側 : DDD
>過去勉強会 ( #Sansan_DDD ) を参照
19
![Page 20: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/20.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方 (PM)
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
- PO に設計意図を伝え承認を得る
- PM & エンジニアで UI/UX 確認
- 負の遺産を掻い潜りながら実装する
- PM レビュー
20
![Page 21: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/21.jpg)
Copyright © Sansan, Inc. All rights reserved.
進め方
- 解決すべき課題を見つけユーザー体験を考える
- 既存仕様との整合性検証
- PO に設計意図を伝え承認を得る
- PM & エンジニアで UI/UX 確認
- 負の遺産を掻い潜りながら実装する
- PM レビュー
- PO レビュー
- リリース
21
![Page 22: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/22.jpg)
Copyright © Sansan, Inc. All rights reserved.
フロント周りの技術
22
![Page 23: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/23.jpg)
Copyright © Sansan, Inc. All rights reserved.
JavaScript framework
出展 : http://engineering.paiza.io/entry/2015/03/12/145216
![Page 24: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/24.jpg)
Copyright © Sansan, Inc. All rights reserved.
僕 is
![Page 25: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/25.jpg)
Copyright © Sansan, Inc. All rights reserved.
弊社 is
- 使ってない。 jQuery のみ。
- SPA は ( 今のところ ) 合わない
>スイッチコストを掛けれない
- 画面複雑 / 多機能
>画面デザパタが異なる
>MVC と Web Forms の混在
- Vue.js- IE8 サポート NG- Knockout.js で代替
25
![Page 26: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/26.jpg)
Copyright © Sansan, Inc. All rights reserved.
弊社 is
- Graceful Degradation- 最近の環境を基準にし、古い環境にはレベルを落とす
26
![Page 27: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/27.jpg)
Copyright © Sansan, Inc. All rights reserved.
手を入れたこと
- ASP.NET MVC3 -> ASP.NET MVC5- WebGrease
- jQuery1.2, 1.5, 1.6 -> jQuery1.11- jQueryUI -> Bootstrap- css -> less
- Grunt (-> Gulp)
- gif, png -> web fonts- Nuget -> Bower
27
![Page 28: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/28.jpg)
Copyright © Sansan, Inc. All rights reserved.
WebGrease
- WebGrease is a suite of tools for optimizing javascript, css files and images.- Minification of JavaScript files- Validation of JavaScript files- Minification of CSS files- Bundling of JavaScript and CSS files- Image sprites- Auto Version naming of the files (version stamp)
28
![Page 29: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/29.jpg)
Copyright © Sansan, Inc. All rights reserved.
Auto Version naming of the files (version stamp)
- BundleConfig.cs で全ての js, css を処理
29
<%: Styles.Render("~/Content/commns.css.bundle") %>
Directory.GetFiles(fullPath, "*.css", SearchOption.AllDirectories).ForEach(fileFullName => { var relativePath = …; var bundleName = relativePath + "*.bundle"; var bundle = (Bundle) Activator.CreateInstance(typeof (T), bundleName); bundles.Add(bundle.Include(relativePath));});
![Page 30: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/30.jpg)
Copyright © Sansan, Inc. All rights reserved.
jQuery1.11
- 1.8 以前と 1.9 以後の壁が大きい
- 早めにクリアしておきたかった
- IE8 を切れない…ので 1 系- 合わせて各種 plugin も version up- $hoge.on( events [, selector ] [, data ], handler )- As of jQuery 1.8, the use of async: false with
jqXHR ($.Deferred) is deprecated
30
![Page 31: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/31.jpg)
Copyright © Sansan, Inc. All rights reserved.
Bootstrap
31
- 使えてない。 js メイン。
- 影響範囲を見ながら少しずつ解放
- あとから grid layout 入れるのむりぽ
![Page 32: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/32.jpg)
Copyright © Sansan, Inc. All rights reserved.
css -> less
- grunt-contrib-less で変換
- wiredep で対象一覧を BundleConfing に inject
32
![Page 33: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/33.jpg)
Copyright © Sansan, Inc. All rights reserved.
その他
- gif, png -> webfonts- 画像ではなく svg を受け取る
- Nuget -> Bower- A package manager for the web
33
![Page 34: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/34.jpg)
Copyright © Sansan, Inc. All rights reserved.
その他
34
![Page 35: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/35.jpg)
Copyright © Sansan, Inc. All rights reserved.
Bower.json
35
![Page 36: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/36.jpg)
Copyright © Sansan, Inc. All rights reserved.
課題
- CSS is カオス
- OOCSS, SMACSS, BEM, FLOCSS なにそれ美味しいの
>詳細度の考慮
>再利用性
- フロント周りのテスト
- PO レビューで UI /UX 変わる
- 自動化するコスト
- バージョンアップ追随
- 「覚悟」が暗闇の荒野に進むべき道を切り開く
36
![Page 37: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/37.jpg)
Copyright © Sansan, Inc. All rights reserved.
課題
- CSSLint, JavaScriptLint かけたい
- js 生で書きたくない
- Vanilla.js が早いのは分かるけど
- IE8- 規約がない
- WEB デザイナー
37
![Page 38: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/38.jpg)
Copyright © Sansan, Inc. All rights reserved.
少しでも足掻く
- class は静的用 data-* は動的用
- 同一観点で見れる人間をレビューアとする
- ここから規約やレギュレーションの策定
- デザインチェックの仕組み
- スクショ比較とか
- リビーリングモジュールパターン
38
![Page 39: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/39.jpg)
Copyright © Sansan, Inc. All rights reserved.
React(*´ρ`*)
- react-dom を使って PE-SPA- View 層を Razor -> react
- 言語境界を Edge.js で跨ぐ
39
出展 : https://msdn.microsoft.com/ja-jp/magazine/mt632272.aspx
ASP.NET と React によるプログレッシブ エンハンスメント
![Page 40: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/40.jpg)
Copyright © Sansan, Inc. All rights reserved.
発表は以上です。
40
![Page 41: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/41.jpg)
Copyright © Sansan, Inc. All rights reserved.
僕は今、限界集落の山奥でリモート発表して、
41
![Page 42: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/42.jpg)
Copyright © Sansan, Inc. All rights reserved.
この後業務と自炊に戻るけど、
42
![Page 43: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/43.jpg)
Copyright © Sansan, Inc. All rights reserved.
皆様この後も楽しんでください ( ゚ Д ゚ )
43
![Page 44: ProductManagement / front-endin Sansan( & remote work)](https://reader031.vdocuments.us/reader031/viewer/2022030309/58f287b61a28abd0238b4601/html5/thumbnails/44.jpg)