フロントエンドがほぼわからない状態で攻略する

Vue.js

お疲れ様です！まっちゃんです！

最近はPCがリプレイスされ32GBのMacBookProになりました！
いままではWindows上のUbuntuの仮想環境で開発してたものの、MacでのScala、フロントのビルドが早くて驚きました......。

さて、本日は私がフロントエンドがほぼわからない状態で攻略をした話をします。

フロントエンドをやり始めたきっかけ

最近はScalaを用いた新規APIの開発やPerlでのシステム改修などを主に行なっていました。
そうすると、チーム内でフロントエンドを（ほぼ）触ってない最後の一人となってしまいました。
こりゃまずか！

そんな中、自分が所属しているチームのスプリントプランニングではやりたい事を挙手して担当を持つ事ができる。そんな素敵なルールがあります。
このままでは不味いと思ったので、手を上げました。
(プランニングでの工夫点はいつか自分のチームのスクラムマスターが書くかも......)

できる人が増えると何が嬉しいのか？

チーム、プロダクトとして
  • スキルの差が無いので、誰でも案件に対応する事ができる
  • 依存が発生しない事で品質やスピードも上がる
    • 個人として
  • スキルアップ
  • やったことない領域へのチャレンジができる

    • 全体で言えば、開発のスピードが上がります。（機能横断的な組織）
    個人の場合では、できる幅が広がるので武器になりますね。
    嬉しいことだらけです。

    プロジェクトの概要

    フロントエンドのプロジェクトはVuejsで作成されています。
    もともとはレポート用のプロジェクトでしたが、別のレポート機能も載せることになり現在開発が活発になっています。
    自分が着手する前までは開発チームメンバー6/7人がこのフロントエンドのプロジェクトに携わっており、わからないことはいつでも聞ける環境でした。

    最初は簡単なバグ修正から入っていった

    軽く勉強したものと、実際のプロジェクトはやはり異なります。
    そのため、プロジェクトの構成や流れなどを読まないといけません。
    フロントを今までやってこなかったツケか、自分には非常につらい時間でした。

    文言修正

    これは簡単です。
    コード検索して該当箇所が引っかかるのでそこを修正すればOKでした。
    大体HTML要素が書かれたvueファイルとなります。

    データが存在しない時に、「なし」と表示させたい

    これも簡単な部類ですね。
    各フレームワークなどでテンプレートファイルを触って入れば簡単だと思います。
    もちろん、vueファイルでした。
    自分にとって簡単な箇所はここまででした......。

    文字を返している箇所でHTMLがエスケープされていない

    これも完全にロジックだったので、対応できました。
    ちょうどTypeScriptも導入しているため、
    TypeScriptでコードを書き、ユニットテストコードも書くことができました。

    少し大きめのバグ修正

    特殊な実装方法が出てくるのがここあたりでした。
    コンポーネントや、今プロジェクトでデータの状態管理を表すformData、queryなどですね。
    わからない自分にとって、ここが壁でした。

    何がなんなのかわかんない問題

    開発をしていくために、src以下が重要だと簡単な修正を得て感じました。
    フロントエンドのsrc以下は下記のようになっていました。

    $ tree ./src/ -d -L 1
src/
├── api         ...... バックエンドのAPIと通信するための必要な処理
├── assets      ...... 静的コンテンツ（あまり使われない）
├── components  ...... コンポーネント、ページを構成するための部品
├── interfaces  ...... データ構造
├── lib         ...... グリッドツールで使用するライブラリがある
├── pages       ...... プロジェクト特有、ページごとに分割しており、子となる要素が格納
└── utils       ...... 共通処理など

    肝となるのは components と pages でした。

    エラーを初期化したい

    1. 入力画面１で異常な入力でエラーを起こし、エラー文言を出力する
    2. 入力画面１で正常な入力で入力画面２へ遷移する
    3. 入力画面２から入力画面１へ遷移する
    4. 入力画面１でエラー文言が出力されたまま

    という問題がありました。
    自分自身がformDataや画面遷移時のデータの受け渡しについて理解できておらず、
    これはチーフとのペアプロで教えてもらいながら解消することができました。

    未入力時にエラーを出力する

    今度はエラーを出力すべきなのに、エラーが出力されないパターンです。
    どうやら formData が空になっていたため、TypeScript側で初期値の設定をして、空の場合はnullを送るようにしました。
    こちらもチーフとペアプロで解消しました。

    直近では追加機能開発も

    直近のスプリントでは、追加開発も行うことができました！
    既に動いている既存のコードがあるため、そちらを参考にしながら追加改修をしていきました。

    わからない箇所はペアプロで乗り越える

    それでもまだまだわからないことが多いため、相談したりペアプロを行なったりしました。
    例えば新たにカレンダーを用いた日付入力があったのですがそちらは既にフロントエンドを触っている後輩とペアプロしながら教えていただいたり、
    どうしてもリクエストにデータが飛ばない場合などは、チーフに相談をして解消しました。

    最後に

    新しいことを始めることは非常に難しいと思いますが、非常にサポート体制が整っており、チャレンジしやすい環境だったと思います。 直近のスプリントでの追加機能開発も、一人で実装できた箇所が多かったので、案件を担当するのに支障がないレベルにはなったと思います。
    ここまで持って行ったのは1スプリントなので実質1週間ぐらいで持ってこれたのかなと思っています。
    ですがまだまだできない箇所もあり、冗長化している箇所もあるのでフロントエンドのレベルを上げて対応していけたらなと思います。