属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。

ハッシュタグ：#devsumiDhttps://github.com/jsuzuki20120311/devsumi-2018-15-d-2
属人化したフロントエンドのJavaScriptを、
‘新規機能開発を止めずに’改善するために行った取り組みについて。
及びその経過報告。
2018年2月15日
パーソルキャリア株式会社 Innovation Lab. MyReferグループ
鈴木潤

• 自己紹介
• サービス紹介
• おはなしすること
• 取り組み内容について
• 実際やってどうだったのか

自己紹介
名前：鈴木潤（すずきじゅん）
・大学卒業後SI系企業に勤務（主にJava）
・2015年5月にパーソルキャリアに入社。
・MyReferグループ（主にフロントエンド）
所属：パーソルキャリア
Innovation Lab.
MyReferグループ

• 自己紹介
• 取り組みの内容について

サービス紹介

おはなしすること
属人化したフロントエンドのJavaScriptを、
‘新規機能開発を止めずに’改善するために行った取り組みについて。
及びその経過報告。

おはなしすること
• 実際やってみてどうだったのか

取り組みの内容について
• 課題を明確にする
• 課題をどう改善するかを決める
• 改善していくための方針を決める

• 自己紹介
課題を明確にする
課題をどう改善するかを決める
改善していくための方針を決める

課題を明確にする

1. 複数のファイルをまたがっていることによる複雑さ
2. DOMとイベントリスナが離れすぎている

1.複数のファイルをまたがっていることによる
複雑さ

大量の <script src=“…”></script>タグ

これらのファイルのどれかで定義している
Hoge.fuga 関数を修正しなくてはなりません。

2.DOMとイベントリスナが離れすぎている

<button class=“js-hoge-button”>hoge</button>
$(‘.js-hoge-button’).click(function() { … });

<button class=“js-hoge-button”>fuga</button>
変数に代入されていたり
動的に作られていたり

どう解決するか

これらのファイルのどれかで定義している
Hoge.fuga 関数を修正しなくてはなりません。
どこで定義しているのかが
分かれば良い

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.’);
}
}

import Hoge from ‘./sample/hoge.js’;
class SampleClass {
piyo() {
}
}
ファイルの場所
がわかる！

webpack
モジュールバンドラー

import Hoge from ‘./sample/hoge.js’
class SampleClass {
piyo() {
}
}
これらもまとめて
１つのファイルに出力する

このふたつが同じファイルに書かれていればいい

React

import React from 'react’;
export default class HogeButton extends React.Component {
handleClick() {
console.log('hoge’);
}
render() {
return <button onClick={ this.handleClick }>hoge</button>;
}
}

React Developer Tools
コンポーネント名を確認できる

import React from 'react’;
export default class HogeButton extends React.Component {
handleClick() {
console.log('hoge’);
}
render() {
return <button onClick={ this.handleClick }>hoge</button>;
}
}
jQueryとは共存
簡単に離れられない。

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でラップして利用

ESLint
JavaScript用静的検証
ツール

ESLint
MyReferでの導入理由
グローバルに存在する名前空間の見える化
var, let, const 忘れによるグローバル変数化を防ぐため

MyReferでの方針
• 新規で追加する機能はReactで
• 既存機能の改修の際は、Reactを使用するかを都度検討
• ESLintでErrorになったコードはpushしない
• まずは画面毎にReact化が完了されている状態を目指す

MyReferでの方針
• 最終的にはバックエンドはAPIのみを提供する
• APIをスマホアプリと同じ物使用するようにする
• Webのフロントエンドを最終的にはSPAにする

MyReferでの方針
フロントエンドの改善/検証
バックエンドの改善バックエンド技術検証
フロントエンドの改善
今ここに取り組んでいる
Step1 Step2
ここでSPA化完了
順次APIを作成

• 自己紹介
うまくいってること
うまくいってないこと
その他

うまくいってること
新規機能の開発について
うまくいっている
既存機能の改修について
部分的にうまくいっている
既存のUtility系は随時ESモジュール化を進めている
仕様が単純な画面に関しては
実際やってどうだったか

実際やってどうだったか
うまくいってないこと
複雑な既存のコードに改善するための着手ができない

その他
型チェック
TypeScript2.3以降で使用できる.jsファイルに対する型チェック機能
JavaScriptファイルの JsDoc をもとに型チェック
JavaScript用ユニットテスト
自信を持ってリファクタできるようにする。
コメント文の修正でOK
なところが◎

その他
既存のコードをESモジュールとして使用した際に
hoge = ‘hoge’;
strictモードでは
var, let, const 忘れは
実行時エラーになる
webpack導入よりも先に
ESLintで未定義の変数の利用をチェックしておけば防げた。

その他
導入に伴う共有など
・Reactについてのチーム内勉強会
・webpackについて共有
・各エディタの設定に関する共有
・Visual Studio Code
・Sublime Text
etc…

まとめ

まとめ
・Reactと、モジュール機能を使用することで、改善できた。
・既存のコードは、機能の改修がある際に随時改善できている。
・ただし、複雑な機能のコードに対する改善に難航している
自信を持ってリファクタリングできる環境を作ることで改善できるか。

まとめ
フロントエンドの改善/検証
バックエンドの改善バックエンドの検証
フロントエンドの改善
今ここに取り組んでいる
Step1 Step2

まとめ
・Reactと、モジュール機能を使用することで、改善できた。
・既存のコードは、機能の改修がある際に随時改善できている。
・ただし、複雑な機能のコードに対する改善に難航している
自信を持ってリファクタリングできる環境を作ることで改善できるか。
・上記の課題を解決できれば、
着実に次のステップにすすんでいけるはず。

属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。

More Related Content

What's hot (20)

Similar to 属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。 (20)