Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ʹ͓͚Δ ϑϩϯτΤϯυٕज़બఆʹ͍ͭͯ リソース、リスク、バリューから考える技術選定 DMM.comラボ デザイン本部 フロントエンド開発部 新規・流動チーム リードエンジニア 清宮 洋徳
Slide 2
Slide 2 text
ΞδΣϯμ
Slide 3
Slide 3 text
1. ⾃⼰紹介 2. プロジェクト背景 3. 技術選定とは？ 4. 今回の技術選定 5. さいごに
Slide 4
Slide 4 text
1. ࣗݾհ
Slide 5
Slide 5 text
ਗ਼ٶ ༸ಙ LJZPNJZB Webサイトに携わり約20年。 Webに関することに⼀通り⾜ をつっこみ、2016年に DMM.com ラボへ参加。
Slide 6
Slide 6 text
৽ن/ྲྀಈνʔϜ σβΠϯຊ෦ ϑϩϯτΤϯυ ։ൃ෦ に所属 （not sys！） ৽نࣄۀのサイト構築に携わ ることが⽐較的多い。 ৽ن / ྲྀಈ ৽ ৽ ৽
Slide 7
Slide 7 text
2. ϓϩδΣΫτഎܠ
Slide 8
Slide 8 text
%..DPN৽نࣄۀ͕ଟ͍ձࣾ ここ⼀年を振り返ってみても、 多くのサービスサイトが⽴ち上がっている
Slide 9
Slide 9 text
ͦΜͳզʑͷνʔϜʹ ৽ͨͳϓϩδΣΫτͷґཔ͕ʂ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
$.Ξϫʔυͱʁ DMMの各サービスを応援 する$.ಈըίϯςετ 最優秀賞はສԁ！ ୈೋճ։࠵த！
Slide 12
Slide 12 text
たくさんデータあるけど 全部API叩けばいいから！ $.Ξϫʔυͷϑϩϯτ։ൃཁ݅ 状態管理 ルーティング HistoryAPI 通信処理
Slide 13
Slide 13 text
੩తHTMLͰϦϦʔεͩʂ
Slide 14
Slide 14 text
͍··ͰͷϫʔΫελΠϧ HTML作成 php組み込み いままで • 異なる部署の成果物がີ݁߹ • クリティカルパスが存在 デザイン本部 システム本部
Slide 15
Slide 15 text
$.Ξϫʔυͷ։ൃ͜͏ͳΔ HTML作成 API作成 CMAWD • 異なる部署の成果物はૄ݁߹に！ • クリティカルパスからの開放！ デザイン本部 システム本部
Slide 16
Slide 16 text
͔͠͠ɺ͕͢͞ʹϑϨʔϜϫʔΫ ಋೖΛݕ౼͢Δ͖Ͱʁ
Slide 17
Slide 17 text
ಋೖ͍ͨ͠ཧ༝ • 投稿フォーム → 確認画⾯でデータを保持しておく • URLにより、APIに対して投げる値が変わる • モーダルを開いたときにURLを変えたい • 検索やページングなどの機能をフロントで実装 APIに投げるデータをたくさん保持しつつ、 データに応じて⾒た⽬とURLが変わる（逆も）
Slide 18
Slide 18 text
͍Ζ͍Ζ͋Δ͚ͲɺͲΕΛબͿʁ 何を拠り所として選んだらいいんだろう・・・？ React Vue RIOT Angular BACK BONE
Slide 19
Slide 19 text
3. ٕज़બఆͱʁ
Slide 20
Slide 20 text
ٕज़બఆͱͳΜͩΖ͏͔
Slide 21
Slide 21 text
·ͣͪΖΜཁٻΛຬͨ͢͜ͱ いくら良い技術を使ったところで、 要求を満たせなくては意味がない。
Slide 22
Slide 22 text
ϦιʔεͱϦεΫͷఱṝ リソースには限りがある… 限られたリソースだから、 リスクはしっかり考えないと。
Slide 23
Slide 23 text
ϦιʔεͱϦεΫͷఱṝ リソースよりリスクが上回るとେมͳ͜ͱに いつ終わるかわからない、ϦϦʔεԆ ΫΦϦςΟなアウトプット 結果的にେͳίετ ਓʹґଘ͠ɺ͔ͭߴίετͳӡ༻ମ࣭
Slide 24
Slide 24 text
ϦιʔεͱϦεΫͷఱṝ つまり ϑϨʔϜϫʔΫಋೖʹؔͯ͠ͷఆϦεΫ ίετΛ͑ͳ͍ように設計する。
Slide 25
Slide 25 text
ͱ͍͑ৡΕͳ͍ͷ͕͋Δ ただ、リスク回避に主眼を置きすぎると jQuery͍͍͑Μ͡Όͳ͍ʁ ってなりがち。
Slide 26
Slide 26 text
ͦ͏͡Όͳ͍ɻ όϦϡʔ͕ඞཁͩɻ
Slide 27
Slide 27 text
όϦϡʔͱʁ 「తͷୡ」ではなく 「͞ΒͳΔՃՁ」であり、 ϊϋとなるもの。
Slide 28
Slide 28 text
ϊϋʹ͍ͭͯ ⾼い⼭でも 0からスタートするのと、 五合⽬からスタートするのでは かかるリスクが異なります。 この「五合⽬スタート」がノウハウです。
Slide 29
Slide 29 text
ࠓճ jQuery Λͬͯ ϊϋͨ·Βͳ͍ɻ
Slide 30
Slide 30 text
όϦϡʔͷઃఆ つまり ࠓճҎ߱ɺޒ߹͔ΒελʔτͰ͖ΔΑ͏ʹɺ खʹೖΕΔՃՁΛ͋Β͔͡Ίઃఆしておく。 何かしら学ぶことが重要。
Slide 31
Slide 31 text
ͪͳΈʹ ⼭はどんどん⾼くします。 でも開始位置も少しずつあがっていきます。 このΰʔϧͱܦݧͷํΛੵΈॏͶߴΊͯ ͍͘͜ͱが重要です。
Slide 32
Slide 32 text
ͭ·Γ
Slide 33
Slide 33 text
ٕज़બఆͱ • ϏδωεతཁٻΛຬͨ͢ • Ϧιʔε > ϦεΫ • όϦϡʔ > ϊϋͷऔಘ
Slide 34
Slide 34 text
4. ࠓճͷٕज़બఆ
Slide 35
Slide 35 text
Ϗδωεతཁٻ 今回のケースでは • API連携が⼗分にできればよく、軽いもの （ϑϧελοΫෆཁʣ • ページ遷移時にデータを取り回せる • サーバーを持たない（SSRෆཁʣ • ࡞Γ͖ΓલఏͷͨΊɺӡ༻ੑॏࢹ͠ͳ͍
Slide 36
Slide 36 text
Ϧιʔεͱ੍ ぼくひとり。 2.5ヶ⽉程度の開発期間（not⼯数）を確保。 納期はマスト。 →͙͢ʹखΛ͚ΒΕɺࢿྉ͕ଟ͍ͱྑ͍
Slide 37
Slide 37 text
όϦϡʔ 何らかのクライアントサイドフレームワーク を導⼊し、知⾒を得ること。 →ࠓޙʹͭͳ͕Δ͜ͱΛߟ͑ΔͱɺͳΔ͘ ϝδϟʔͳͷ͕ྑ͍
Slide 38
Slide 38 text
ϏδωεཁٻΛຬٕͨ͢ज़ʹର͠ɺ ϦιʔεͱόϦϡʔ͔Β ϦεΫΛݕ౼͢Δ
Slide 39
Slide 39 text
ࢢௐࠪ 規模感と機能⾯の双⽅から、 いくつかのメジャーなアーキテクチャを 選定対象にしました。 React Vue RIOT
Slide 40
Slide 40 text
ϦεΫݕ౼ͷ؍ 選定対象のいずれも、要求を満たしており、 バリューも⼗分だと判断。 あとはリスクの精査から決めれば良い。 • 学習の容易さ（リスク） • ミニマムスタート（リスク） • 部内の知⾒、チーム内の知⾒（リスク） • 運⽤の容易さ（リスク）
Slide 41
Slide 41 text
特筆すべきポイント ES6およびJSXについて、チーム経験値が⼗分にない。 よって環境構築に若⼲のリスクがある。 資料とサンプルの豊富さは魅⼒。 Case: React React
Slide 42
Slide 42 text
Case: Vue.js 特筆すべきポイント RouterやValidator含め、⽇本語での⼀次資料が群を 抜いて豊富である点はすごかった。 また記述⽅法がReactよりもHTML的であり（今に なって思えばそこまでJSXは難しくなさそうだが）、 我々のバックグラウンドに馴染みやすかった。 Vue
Slide 43
Slide 43 text
Case: Riot.js 特筆すべきポイント 軽量であることが素晴らしい。Vue.jsと同じくReact よりもHTML的に記述できる。 ただし部内での実績がなく、詳しくリスクを把握で きなかった。 RIOT
Slide 44
Slide 44 text
ϦεΫ ES6かつJSXを使うという敷居の⾼さ →学習＆構築コスト⾼くなりそうな気配？ とくに⼤きいリスクなし？ 部内に実績がなかったため、 調査コストがかかりそうだと判断 React Vue RIOT
Slide 45
Slide 45 text
݁ͱͯ͠ 特に⼤きいリスクが⾒当たらなかったので、 その分学習に時間を割くことができそうだった に決めました。 Vue
Slide 46
Slide 46 text
バージョン名がEvangelionで気に⼊った という理由もある。(モチベはどんな形でも⼤事) ※本プロジェクトの開発時はまだ1系でした
Slide 47
Slide 47 text
݁Ռ
Slide 48
Slide 48 text
݁ՌͲ͏ͳ͔ͬͨʁ • リソース範囲内で学習と構築を完了 • MVVMの知⾒もGET • チーム⼒アップ（いまはReactも扱っている） • 部内外を問わず社内へフィードバックできた • システムさんと連携しつつ、別で開発ができた • CMアワードそのものが成功した！（第⼆回へ）
Slide 49
Slide 49 text
5. ͍͞͝ʹ
Slide 50
Slide 50 text
͍͞͝ʹ 技術選定とは • Ϗδωεཁ݅Λຬ্ͨͨ͠Ͱɺ • ݱࡏͷϦεΫͱϦιʔεΛߟ͑ͯɺ • ྑ͖όϦϡʔΛಘΔ͜ͱ という考え⽅で⼀定の成果が出たと思っています。
Slide 51
Slide 51 text
όϦϡʔ͕มΘΕબఆมΘΔ 今回はԿͰ͍͍ͷͰϑϨʔϜϫʔΫͷݟΛೖ ख͢Δということをバリューに設定していますが、 ノウハウの貯蓄具合によってはとうぜんόϦϡʔ ࣗମ͕มΘͬͯ͘Δと思います。 ϦιʔεɺϦεΫɺόϦϡʔを考え、最適な技術 選択する事をこれからも⼼がけたいと思います！
Slide 52
Slide 52 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ