Submit Search
Upload
属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
•
Download as PPTX, PDF
•
3 likes
•
2,225 views
Jun Suzuki
Follow
Developer Summit 2018 【15-D-2】 セッションの資料です。
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 64
Download now
Recommended
Wantedlyのテスト事情
Wantedlyのテスト事情
Takao Sumitomo
JavaからRubyへの変遷を約10年見てきて、プロジェクトで変わったこと、変わっていないこと12集
JavaからRubyへの変遷を約10年見てきて、プロジェクトで変わったこと、変わっていないこと12集
Koichi ITO
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
受託開発とRubyGems
受託開発とRubyGems
Koichi ITO
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Takao Sumitomo
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
プロジェクト管理ツールを使いこなせるようになった現場の話
プロジェクト管理ツールを使いこなせるようになった現場の話
Yoh Nakamura
Rnyoutube
Rnyoutube
yugo matsumoto
Recommended
Wantedlyのテスト事情
Wantedlyのテスト事情
Takao Sumitomo
JavaからRubyへの変遷を約10年見てきて、プロジェクトで変わったこと、変わっていないこと12集
JavaからRubyへの変遷を約10年見てきて、プロジェクトで変わったこと、変わっていないこと12集
Koichi ITO
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
受託開発とRubyGems
受託開発とRubyGems
Koichi ITO
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Takao Sumitomo
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
プロジェクト管理ツールを使いこなせるようになった現場の話
プロジェクト管理ツールを使いこなせるようになった現場の話
Yoh Nakamura
Rnyoutube
Rnyoutube
yugo matsumoto
Front-end package managers
Front-end package managers
Hayashi Yuichi
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
Yu Nobuoka
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Yukiya Nakagawa
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
Yoh Nakamura
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
You_Kinjoh
今時のオンプレなgithubクローン環境構築
今時のオンプレなgithubクローン環境構築
You&I
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
Fumiya Sakai
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
Reimi Kuramochi Chiba
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
Shuji Yamada
プロダクトを育てるのにGoogleのサービスが助けてくれること
プロダクトを育てるのにGoogleのサービスが助けてくれること
Takao Sumitomo
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
Fumiya Sakai
デブサミ2013LT大会 Japan SenchaUG
デブサミ2013LT大会 Japan SenchaUG
dsuke Takaoka
スッとGoを取り入れる
スッとGoを取り入れる
Yusuke Wada
第十一回渋谷Java
第十一回渋谷Java
Shigeki Yamato
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
ekushida
Detroit Programming City
Detroit Programming City
Koichi ITO
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。
toshihiro ichitani
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
Tomoyuki Sugita
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
More Related Content
What's hot
Front-end package managers
Front-end package managers
Hayashi Yuichi
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
Yu Nobuoka
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Yukiya Nakagawa
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
Yoh Nakamura
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
You_Kinjoh
今時のオンプレなgithubクローン環境構築
今時のオンプレなgithubクローン環境構築
You&I
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
Fumiya Sakai
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
Reimi Kuramochi Chiba
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
Shuji Yamada
プロダクトを育てるのにGoogleのサービスが助けてくれること
プロダクトを育てるのにGoogleのサービスが助けてくれること
Takao Sumitomo
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
Fumiya Sakai
デブサミ2013LT大会 Japan SenchaUG
デブサミ2013LT大会 Japan SenchaUG
dsuke Takaoka
スッとGoを取り入れる
スッとGoを取り入れる
Yusuke Wada
第十一回渋谷Java
第十一回渋谷Java
Shigeki Yamato
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
ekushida
Detroit Programming City
Detroit Programming City
Koichi ITO
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。
toshihiro ichitani
What's hot
(20)
Front-end package managers
Front-end package managers
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
デブサミ関西2015_関西で働くという生き方(公開版)_yohhatu
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
今時のオンプレなgithubクローン環境構築
今時のオンプレなgithubクローン環境構築
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
プロダクトを育てるのにGoogleのサービスが助けてくれること
プロダクトを育てるのにGoogleのサービスが助けてくれること
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
デブサミ2013LT大会 Japan SenchaUG
デブサミ2013LT大会 Japan SenchaUG
スッとGoを取り入れる
スッとGoを取り入れる
第十一回渋谷Java
第十一回渋谷Java
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
Detroit Programming City
Detroit Programming City
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。
Similar to 属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
Tomoyuki Sugita
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
リーンスタートアップと顧客開発とアジャイル開発を一気通貫するッ #devlove #devkan
リーンスタートアップと顧客開発とアジャイル開発を一気通貫するッ #devlove #devkan
Itsuki Kuroda
OpenCV on mobile
OpenCV on mobile
Daisuke Yamashita
Azure Functions あれこれ
Azure Functions あれこれ
Yasuaki Matsuda
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Yoshifumi Kawai
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
ドリコムサマージョブ報告 by 佐々木 誠治
ドリコムサマージョブ報告 by 佐々木 誠治
Drecom Co., Ltd.
20220716_jsfes.pdf
20220716_jsfes.pdf
Sugawara Ryousuke
SCRUMMASTER THE BOOK翻訳活動における、リモート x モブ実践
SCRUMMASTER THE BOOK翻訳活動における、リモート x モブ実践
ikikko
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
Yoshitaka Kawashima
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディング
Keisuke Imai
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
Yuuki Namikawa
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
SQLおじさん(自称)がBigQueryのStandard SQLを使ってみた
SQLおじさん(自称)がBigQueryのStandard SQLを使ってみた
Kumano Ryo
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
Fumiya Sakai
PFDの概説&ディスカッション
PFDの概説&ディスカッション
Takayuki Ujita
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
レスポンシブ対応 をサポートするプラグイン
レスポンシブ対応 をサポートするプラグイン
Kawaji Masaki
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
Koichi ITO
Similar to 属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
(20)
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
リーンスタートアップと顧客開発とアジャイル開発を一気通貫するッ #devlove #devkan
リーンスタートアップと顧客開発とアジャイル開発を一気通貫するッ #devlove #devkan
OpenCV on mobile
OpenCV on mobile
Azure Functions あれこれ
Azure Functions あれこれ
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
ドリコムサマージョブ報告 by 佐々木 誠治
ドリコムサマージョブ報告 by 佐々木 誠治
20220716_jsfes.pdf
20220716_jsfes.pdf
SCRUMMASTER THE BOOK翻訳活動における、リモート x モブ実践
SCRUMMASTER THE BOOK翻訳活動における、リモート x モブ実践
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディング
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
次世代Web業務アプリケーション
次世代Web業務アプリケーション
SQLおじさん(自称)がBigQueryのStandard SQLを使ってみた
SQLおじさん(自称)がBigQueryのStandard SQLを使ってみた
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
PFDの概説&ディスカッション
PFDの概説&ディスカッション
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
レスポンシブ対応 をサポートするプラグイン
レスポンシブ対応 をサポートするプラグイン
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
Recently uploaded
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(8)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
1.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。 2018年2月15日 パーソルキャリア株式会社 Innovation Lab.
MyReferグループ 鈴木 潤
2.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組み内容について • 実際やってどうだったのか
3.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 自己紹介 名前:鈴木 潤(すずき じゅん) ・大学卒業後SI系企業に勤務(主にJava) ・2015年5月にパーソルキャリアに入社。 ・MyReferグループ(主にフロントエンド) 所属:パーソルキャリア Innovation
Lab. MyReferグループ
4.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか
5.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 サービス紹介
6.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか
7.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 おはなしすること 属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。
8.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 おはなしすること • 取り組みの内容について • 実際やってみてどうだったのか
9.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか
10.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 取り組みの内容について • 課題を明確にする • 課題をどう改善するかを決める •
改善していくための方針を決める
11.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか 課題を明確にする 課題をどう改善するかを決める 改善していくための方針を決める
12.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
13.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
14.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
15.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
16.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
17.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題を明確にする
18.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか 課題を明確にする 課題をどう改善するかを決める 改善していくための方針を決める
19.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める
20.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める
21.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める 1. 複数のファイルをまたがっていることによる複雑さ 2. DOMとイベントリスナが離れすぎている
22.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 1.複数のファイルをまたがっていることによる 複雑さ
23.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <script type="text/javascript" src="/assets/plugins/../plugins/jquery/2.2.0/jquery.min.js?1501033302"></script> <script
type="text/javascript" src="/assets/plugins/../plugins/jquery-cookie/1.4.1/jquery.cookie.min.js?1501033302"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui/jquery-ui.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui-multiselect/jquery.multiselect.min.js?1488949047"></script> <script type="text/javascript" src="/assets/plugins/../plugins/select2/js/select2.full.min.js?1501033303"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery/jquery.plugins.js?1514427457"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/library2.0.6.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/velocity-1.2.2.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/twn-0.9.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/odometer/odometer.min.js?1488949048"></script> <script type="text/javascript" src="/assets/js/corp/common.js?1518052858"></script> <script type="text/javascript" src="/assets/js/util.js?1513229868"></script> <script type="text/javascript" src="/assets/js/corp/staff_list/clipboard.min.js?1488949046"></script> <script type="text/javascript" src="/assets/plugins/../plugins/taggle/taggle.js?1501033303"></script> <script type="text/javascript" src="/assets/js/support.js?1513229868"></script> <script type="text/javascript" src="/assets/js/modules/corp/vendor.js?1518053117"></script> <script type="text/javascript" src="/assets/js/app.js?1518053117"></script> <script type="text/javascript" src="/assets/js/facebook_checker.js?1515552101"></script> <script type="text/javascript" src="/assets/js/corp/dashboard/index.js?1516794464"></script> <script type="text/javascript" src="/assets/plugins/../plugins/easy-pie-chart/jquery.easypiechart.min.js?1488949047"></script> <script type="text/javascript" src="/assets/js/push_notification/main.js?1515552101"></script> <script type="text/javascript" src="/assets/js/modules/corp/dashboard/index.js?1518053117"></script>
24.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <script type="text/javascript" src="/assets/plugins/../plugins/jquery/2.2.0/jquery.min.js?1501033302"></script> <script
type="text/javascript" src="/assets/plugins/../plugins/jquery-cookie/1.4.1/jquery.cookie.min.js?1501033302"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui/jquery-ui.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui-multiselect/jquery.multiselect.min.js?1488949047"></script> <script type="text/javascript" src="/assets/plugins/../plugins/select2/js/select2.full.min.js?1501033303"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery/jquery.plugins.js?1514427457"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/library2.0.6.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/velocity-1.2.2.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/twn-0.9.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/odometer/odometer.min.js?1488949048"></script> <script type="text/javascript" src="/assets/js/corp/common.js?1518052858"></script> <script type="text/javascript" src="/assets/js/util.js?1513229868"></script> <script type="text/javascript" src="/assets/js/corp/staff_list/clipboard.min.js?1488949046"></script> <script type="text/javascript" src="/assets/plugins/../plugins/taggle/taggle.js?1501033303"></script> <script type="text/javascript" src="/assets/js/support.js?1513229868"></script> <script type="text/javascript" src="/assets/js/modules/corp/vendor.js?1518053117"></script> <script type="text/javascript" src="/assets/js/app.js?1518053117"></script> <script type="text/javascript" src="/assets/js/facebook_checker.js?1515552101"></script> <script type="text/javascript" src="/assets/js/corp/dashboard/index.js?1516794464"></script> <script type="text/javascript" src="/assets/plugins/../plugins/easy-pie-chart/jquery.easypiechart.min.js?1488949047"></script> <script type="text/javascript" src="/assets/js/push_notification/main.js?1515552101"></script> <script type="text/javascript" src="/assets/js/modules/corp/dashboard/index.js?1518053117"></script> 大量の <script src=“…”></script>タグ
25.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <script type="text/javascript" src="/assets/plugins/../plugins/jquery/2.2.0/jquery.min.js?1501033302"></script> <script
type="text/javascript" src="/assets/plugins/../plugins/jquery-cookie/1.4.1/jquery.cookie.min.js?1501033302"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui/jquery-ui.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui-multiselect/jquery.multiselect.min.js?1488949047"></script> <script type="text/javascript" src="/assets/plugins/../plugins/select2/js/select2.full.min.js?1501033303"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery/jquery.plugins.js?1514427457"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/library2.0.6.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/velocity-1.2.2.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/twn-0.9.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/odometer/odometer.min.js?1488949048"></script> <script type="text/javascript" src="/assets/js/corp/common.js?1518052858"></script> <script type="text/javascript" src="/assets/js/util.js?1513229868"></script> <script type="text/javascript" src="/assets/js/corp/staff_list/clipboard.min.js?1488949046"></script> <script type="text/javascript" src="/assets/plugins/../plugins/taggle/taggle.js?1501033303"></script> <script type="text/javascript" src="/assets/js/support.js?1513229868"></script> <script type="text/javascript" src="/assets/js/modules/corp/vendor.js?1518053117"></script> <script type="text/javascript" src="/assets/js/app.js?1518053117"></script> <script type="text/javascript" src="/assets/js/facebook_checker.js?1515552101"></script> <script type="text/javascript" src="/assets/js/corp/dashboard/index.js?1516794464"></script> <script type="text/javascript" src="/assets/plugins/../plugins/easy-pie-chart/jquery.easypiechart.min.js?1488949047"></script> <script type="text/javascript" src="/assets/js/push_notification/main.js?1515552101"></script> <script type="text/javascript" src="/assets/js/modules/corp/dashboard/index.js?1518053117"></script> これらのファイルのどれかで定義している Hoge.fuga 関数 を修正しなくてはなりません。
26.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 2.DOMとイベントリスナが離れすぎている
27.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <button class=“js-hoge-button”>hoge</button> $(‘.js-hoge-button’).click(function() {
… });
28.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <button class=“js-hoge-button”>fuga</button> $(‘.js-hoge-button’).click(function() {
… }); 変数に代入されていたり 動的に作られていたり
29.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 どう解決するか
30.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 1.複数のファイルをまたがっていることによる 複雑さ
31.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <script type="text/javascript" src="/assets/plugins/../plugins/jquery/2.2.0/jquery.min.js?1501033302"></script> <script
type="text/javascript" src="/assets/plugins/../plugins/jquery-cookie/1.4.1/jquery.cookie.min.js?1501033302"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui/jquery-ui.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui-multiselect/jquery.multiselect.min.js?1488949047"></script> <script type="text/javascript" src="/assets/plugins/../plugins/select2/js/select2.full.min.js?1501033303"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery/jquery.plugins.js?1514427457"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/library2.0.6.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/velocity-1.2.2.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/twn-0.9.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/odometer/odometer.min.js?1488949048"></script> <script type="text/javascript" src="/assets/js/corp/common.js?1518052858"></script> <script type="text/javascript" src="/assets/js/util.js?1513229868"></script> <script type="text/javascript" src="/assets/js/corp/staff_list/clipboard.min.js?1488949046"></script> <script type="text/javascript" src="/assets/plugins/../plugins/taggle/taggle.js?1501033303"></script> <script type="text/javascript" src="/assets/js/support.js?1513229868"></script> <script type="text/javascript" src="/assets/js/modules/corp/vendor.js?1518053117"></script> <script type="text/javascript" src="/assets/js/app.js?1518053117"></script> <script type="text/javascript" src="/assets/js/facebook_checker.js?1515552101"></script> <script type="text/javascript" src="/assets/js/corp/dashboard/index.js?1516794464"></script> <script type="text/javascript" src="/assets/plugins/../plugins/easy-pie-chart/jquery.easypiechart.min.js?1488949047"></script> <script type="text/javascript" src="/assets/js/push_notification/main.js?1515552101"></script> <script type="text/javascript" src="/assets/js/modules/corp/dashboard/index.js?1518053117"></script> これらのファイルのどれかで定義している Hoge.fuga 関数 を修正しなくてはなりません。
32.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める <script type="text/javascript" src="/assets/plugins/../plugins/jquery/2.2.0/jquery.min.js?1501033302"></script> <script
type="text/javascript" src="/assets/plugins/../plugins/jquery-cookie/1.4.1/jquery.cookie.min.js?1501033302"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui/jquery-ui.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery-ui-multiselect/jquery.multiselect.min.js?1488949047"></script> <script type="text/javascript" src="/assets/plugins/../plugins/select2/js/select2.full.min.js?1501033303"></script> <script type="text/javascript" src="/assets/plugins/../plugins/jquery/jquery.plugins.js?1514427457"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/library2.0.6.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/velocity-1.2.2.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/library/twn-0.9.min.js?1488949048"></script> <script type="text/javascript" src="/assets/plugins/../plugins/odometer/odometer.min.js?1488949048"></script> <script type="text/javascript" src="/assets/js/corp/common.js?1518052858"></script> <script type="text/javascript" src="/assets/js/util.js?1513229868"></script> <script type="text/javascript" src="/assets/js/corp/staff_list/clipboard.min.js?1488949046"></script> <script type="text/javascript" src="/assets/plugins/../plugins/taggle/taggle.js?1501033303"></script> <script type="text/javascript" src="/assets/js/support.js?1513229868"></script> <script type="text/javascript" src="/assets/js/modules/corp/vendor.js?1518053117"></script> <script type="text/javascript" src="/assets/js/app.js?1518053117"></script> <script type="text/javascript" src="/assets/js/facebook_checker.js?1515552101"></script> <script type="text/javascript" src="/assets/js/corp/dashboard/index.js?1516794464"></script> <script type="text/javascript" src="/assets/plugins/../plugins/easy-pie-chart/jquery.easypiechart.min.js?1488949047"></script> <script type="text/javascript" src="/assets/js/push_notification/main.js?1515552101"></script> <script type="text/javascript" src="/assets/js/modules/corp/dashboard/index.js?1518053117"></script> これらのファイルのどれかで定義している Hoge.fuga 関数 を修正しなくてはなりません。 どこで定義しているのかが 分かれば良い
33.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 import Hoge from
‘./sample/hoge.js’; import ActionHelper from './actions-helper.js'; import ContactStore from '../stores/contact-store.js’; class SampleClass { piyo() { return Hoge.fuga(‘hello world.’); } } 課題をどう改善するかを決める
34.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 import Hoge from
‘./sample/hoge.js’; import ActionHelper from './actions-helper.js'; import ContactStore from '../stores/contact-store.js’; class SampleClass { piyo() { return Hoge.fuga(‘hello world.’); } } 課題をどう改善するかを決める ファイルの場所 がわかる!
35.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 webpack モジュールバンドラー
36.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 import Hoge from
‘./sample/hoge.js’ import ActionHelper from './actions-helper.js'; import ContactStore from '../stores/contact-store.js’; class SampleClass { piyo() { return Hoge.fuga(‘hello world.’); } } 課題をどう改善するかを決める これらもまとめて 1つのファイルに出力する
37.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 2.DOMとイベントリスナが離れすぎている
38.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 <button class=“js-hoge-button”>hoge</button> $(‘.js-hoge-button’).click(function() {
… }); 課題をどう改善するかを決める
39.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 <button class=“js-hoge-button”>hoge</button> $(‘.js-hoge-button’).click(function() {
… }); このふたつが同じファイルに書かれていればいい 課題をどう改善するかを決める
40.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 React
41.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 <button class=“js-hoge-button”>hoge</button> $(‘.js-hoge-button’).click(function() {
… }); 課題をどう改善するかを決める
42.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める import React from
'react’; export default class HogeButton extends React.Component { handleClick() { console.log('hoge’); } render() { return <button onClick={ this.handleClick }>hoge</button>; } }
43.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める React Developer Tools コンポーネント名を確認できる
44.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める import React from
'react’; export default class HogeButton extends React.Component { handleClick() { console.log('hoge’); } render() { return <button onClick={ this.handleClick }>hoge</button>; } } jQueryとは共存 簡単に離れられない。
45.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 課題をどう改善するかを決める export default class
DatePickerComponent extends React.Component { componentDidMount() { this.$input.datepicker(…); } componentWillUnmount() { this.$input.datepicker('destroy'); } render() { return <input ref={ (input) => { this.$input = $(input); } }/> } } jQueryプラグインなどを Reactでラップして利用
46.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 ESLint JavaScript用静的検証 ツール
47.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 ESLint MyReferでの導入理由 グローバルに存在する名前空間の見える化 var, let, const
忘れによるグローバル変数化を防ぐため 課題をどう改善するかを決める
48.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか 課題を明確にする 課題をどう改善するかを決める 改善していくための方針を決める
49.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 MyReferでの方針 改善していくための方針を決める • 新規で追加する機能はReactで • 既存機能の改修の際は、Reactを使用するかを都度検討 •
ESLintでErrorになったコードはpushしない • まずは画面毎にReact化が完了されている状態を目指す
50.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 改善していくための方針を決める
51.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 MyReferでの方針 改善していくための方針を決める • 最終的には バックエンドはAPIのみを提供する •
APIを スマホアプリと同じ物使用するようにする • Webのフロントエンドを最終的にはSPAにする
52.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 MyReferでの方針 改善していくための方針を決める フロントエンドの改善/検証 バックエンドの改善バックエンド技術検証 フロントエンドの改善 今ここに取り組んでいる Step1 Step2 ここでSPA化完了 順次APIを作成
53.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか うまくいってること うまくいってないこと その他
54.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 うまくいってること 新規機能の開発について うまくいっている 既存機能の改修について 部分的にうまくいっている 既存のUtility系は随時ESモジュール化を進めている 仕様が単純な画面に関しては 実際やってどうだったか
55.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか うまくいってること うまくいってないこと その他
56.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 実際やってどうだったか うまくいってないこと 複雑な既存のコードに改善するための着手ができない
57.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 • 自己紹介 • サービス紹介 •
おはなしすること • 取り組みの内容について • 実際やってどうだったのか うまくいってること うまくいってないこと その他
58.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 その他 型チェック TypeScript2.3以降で使用できる.jsファイルに対する型チェック機能 JavaScriptファイルの JsDoc をもとに型チェック JavaScript用ユニットテスト 自信を持ってリファクタできるようにする。 コメント文の修正でOK なところが◎
59.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 その他 既存のコードをESモジュールとして使用した際に hoge = ‘hoge’; strictモードでは var,
let, const 忘れは 実行時エラーになる webpack導入よりも先に ESLintで未定義の変数の利用をチェックしておけば防げた。
60.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 その他 導入に伴う共有など ・Reactについてのチーム内勉強会 ・webpackについて共有 ・各エディタの設定に関する共有 ・Visual Studio Code ・Sublime
Text etc…
61.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 まとめ
62.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 まとめ ・Reactと、モジュール機能を使用することで、改善できた。 ・既存のコードは、機能の改修がある際に随時改善できている。 ・ただし、複雑な機能のコードに対する改善に難航している 自信を持ってリファクタリングできる環境を作ることで改善できるか。
63.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 まとめ フロントエンドの改善/検証 バックエンドの改善バックエンドの検証 フロントエンドの改善 今ここに取り組んでいる Step1 Step2
64.
ハッシュタグ:#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2 まとめ ・Reactと、モジュール機能を使用することで、改善できた。 ・既存のコードは、機能の改修がある際に随時改善できている。 ・ただし、複雑な機能のコードに対する改善に難航している 自信を持ってリファクタリングできる環境を作ることで改善できるか。 ・上記の課題を解決できれば、 着実に次のステップにすすんでいけるはず。
Editor's Notes
はい!ありがとうございます! それでは、はじめさせていただきます! ごめんなさい、いきなりでもうしわけないんですが、 この中で JavaScriptを 日常的に書いている方ってどのくらいいらしゃいますか? よかった〜〜〜〜〜 ぜんぜんいなくて、完全アウェーの会場だったらどうしようと昨日からそれがものすごい心配だったんです!少なくともね、そのレベルのアウェーではないということで、私いまものすごく安心しました。 はい、ありがとうございます。それではまず、本題に入る前に、かるく自己紹介と、私が今担当しているサービスの紹介して、それから本題に入っていこうと思います。 もし時間があまるようであれば、↓のgit hubのリポジトリソースコードについてもですね、簡単に触れられたらなと思います。
まずじこしょうかいですね
私はー もともとSI系起業に3年つよめていて、業務ではほとんどJavaを書いていました。 で、今回お話するJavaScriptについては、どちらかというと、趣味で続けていた部分が多い感じですね。 現在は、趣味で続けていたJavaScriptが業務の中心になってフロントエンドを主に担当しているような感じです。 所属についてなんですが、パーソルキャリア株式会社というのは、元々インテリジェンスという名前で、転職サイトのDODAとか、アルバイトのanとかですね運営している会社です。 で、その中の新規事業を開発する部署で、その中の1つMyReferというサービスの開発を担当しています。
次にたんとうしているサービスの内容をざっくり紹介します
わたしが、そのー 主にフロントエンドをたんとうしているサービスが MyReferというものでー MyReferは、企業の採用活動を支援するWebサービスの1つで、採用のなかでも 自社の社員に協力してもらって、 その社員の方の人脈の中から、会社に適性が高いと感じられる人や、今の職場に必要な能力を持っている人を紹介・推薦してもらうこと – これをリファラル採用と呼びますが – これを円滑に進めるための仕組みを提供するWebサービスです。
それでは ほんだいにはいります
今回 おはなしする テーマは こちらです。 現在わたしたちは、新規の機能の開発も進めながら同時に、技術的負債を返していくような取り組みを行っています。 なぜなら、技術的な負債を残したままでは長い目でみた場合に、機能の追加に時間がかかってしまったり、あるいは品質の低下を招く原因になる、 とはいえ、MyReferというサービスは、まだまだ新規機能を追加していく段階です。なのでこれは止めるわけにはいかない – という事情があり、こういう取り組みを行っていて、
そこで今回お話するのは この2つ、 1つめはー 具体的にMyReferでは、どういうことをやって、どういう順番で、何を決めて、どういうゴールを設定して取り組んでいるのか 2つ目に 実際やってみてどうだったのかー うまくいったのか なにかうまくいってないことはないのか この2つを、 おはなししていきます。 今回お話する狙いとしては、ひとつは、この発表がおわったあとですね、 “いやいや、もっといい方法があるからおしえてあげるよ!”っていう声がかかればいいなとおもってるのと、もし同様の課題をかかえている方がこの場にいたらですね、 なにかひとつでも参考になることがあればいいなとおもって、おはなしさせていただきます。
では、ですね まずは、取り組みの内容について、お話させていただきます。
【速】 で、まずは、 取り組んだ内容を “ぐたいてきに、改善するために” なにをどう、とりくんだのか 私達はまずは この3つを おこないました。 ひとつは 課題を明確にすること 現状の何がわるくて、 何がストレスになっているのか
で、実際の 開発メンバー全員で
なんでわからなかったんでしょう。
この問題についてですが、 こういうのが html ファイルにかかれているケースの問題です。
この問題は、こういう、まぁ よくある html と jQuery のソースコードですね。 で、別にこれならですね、別によくあるコードなので、まぁ必要があればセレクタでgrepかけるとかすればいいんじゃないかっていう話なんですが、 ただですね、 現実のソースコードはもっともっと複雑です。 たとえば 【クリック】
【ゆっくり目】 このセレクタが、変数に代入されていたり、 あるいは、
さて、 で先程の2つの問題を具体的にどうやって解決していくのかという話
わからなかったのは、 どこに、 なにが かかれているのか、わからなかった。 なんでわからなかったんでしょう。
わからなかったのは、 どこに、 なにが かかれているのか、わからなかった。 なんでわからなかったんでしょう。
色
1つは これ以上 特別な理由がない限りグローバルな領域に変数を増やさない。 もう一つは 多くのこういったツールの用途としては、多くの場合、コードスタイルの統一化も、目的に含まれる場合が多いと思いますが、 MyReferの取り組みとしては、クリティカルな問題を防ぐという目的に絞った、対策の一貫として導入しています。 他だと evalの禁止とか、あと、場合によっては実行時エラーを引き起こすセミコロン忘れとか をルールとしてErrorとなるようにしています。
これが今の私たちの 主な方針です。 * 新規機能は 今回改善策として導入した仕組みに則って作成していく * 既存の改修については 都度検証 ただ、仕様が単純な画面に関しては、以外とそんなに難しくはない といいのは、既存の機能ということは、マークアップは既にできているっていうことなんですよね。ということは、ブラウウザの開発者ツールから生成された動的に生成されたHTMLをコピってきて、ちょっとReactのJSXの書き方に修正してやれば、ある意味ブラックボックス化されたソースコードを読み解くよりいて、影響範囲を木にしながら修正するよりも、以外と楽だったりっていうことは MyReferのプロジェクトではありました。
MyReferの全体の方針としては、 バックエンドは Android iOS アプリと同じAPIのみを提供する形にする。 WebもSPA化してスマホアプリと同じAPIを使用するようにする
MyReferの全体の方針としては、 バックエンドは Android iOS アプリと同じAPIのみを提供する形にする。 Webも1つのアプリケーションとして React 段階的に でも 確実に最終的にゴールに近づけるような動き方をチーム全体で行っています。 さらにですね、ここには書いていないんですが、UIの抜本的なみなおしー デザインの見直し的なことも行っていて、 Step2に取り組む段階で、UIの刷新も行っていくような おおきなながれとしてはそんなかんじです。
さて、 問題は、 実際やってみてどうだったのか っていう話なんですよね。 で、 まずは うまくいってることからお話 していきます。
で、 うまくいってないこと っていうのも あってですね、
それで、 これがうまいっていないことです。 なぜ 着手できないのか 純粋にデグレがこわいということです
わからなかったのは、 どこに、 なにが かかれているのか、わからなかった。 なんでわからなかったんでしょう。
それから、やってみて の失敗談なんですが、 var をつけわすれたコードを import 文を使用してよみこむと、EcmaScriptのモジュールは strictモードが適用されるんですねー それで、それまではうごいていたけど、実行時エラーになってしまうっていうことがありました。 で、これなんですが、先にESLintで未定義変数の利用をチェックしておけばこれ防げんたんだな、っていうことがありました、
MyReferでは、 今行っている取り組みについてを、連携するために 勉強会であったり、共有会であったりっていうのをチームとして行いました。 Reactの勉強会だけで、4回くらいあって、なんだかんだで 今次点で10回くらい だれかが、率先してやっていかないと、前に進んでいかないところがあるので結構たいへんです
バックエンド含めたMyRefer全体のゴールと照らし合わせると、
ということで、 件のテストの仕組みや型チェックの環境などを導入して、自信をもってリファクタリングできる環境をつくって、改善する そうすれば、着実 次のステップに進んでいけるはずだと、考えています。 スライドは以上になります。 冒頭の方に戻るんですが、 いや、もっと良い方法あるからおしえてあげるよ! ひとつでも参考になることがあれば幸いです。以上、本日はお時間いただきありがとうございました!
Download now