サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>はじめに</h2>

<p>プラットフォーム開発部CSプラットフォームグループ、フロントエンドエンジニアの金粕です。</p>

<p>私は2022〜2023年中頃にかけて、ヘルプ・問い合わせサイトとその管理システム（現：ヘルプセンターシステム）のリプレイスプロジェクトに携わりました。<br />
本プロジェクトの概要に関しては以下の記事をお読みください。<br />
<a href="http://https://inside.dmm.com/articles/new-helpcentersystem/" target="_blank">https://inside.dmm.com/articles/new-helpcentersystem/</a></p>

<p>このプロジェクトに途中参入した経験を通して、元々はフロントエンドエンジニアではなかった私が感じたことや、直面した苦労についてお話しします。</p>

<h2>異動の転機</h2>

<h3>現チーム配属前の経歴</h3>

<p>以前いたチームは、ライブチャットサービスの運用に携わるチームでした。<br />
そこでは販促用・集客用の新規施策に向けた開発やバグ改修、データ集計による施策提案がメインのタスクでした。<br />
新規施策に向けた開発では、細かな仕様を決定する要件定義、デザイナーさんから受け取った画像・HTML・CSSを用いた画面制作、データベースのテーブル設計やPHPでのコーディング、JavaScriptを利用した簡単なUI作成までを行いながら、サービス運営全般に携わっていました。</p>

<p>使用していたのはPHPがメインで、フレームワークはLaravelやCakePHPです。<br />
MVCモデルに則ってフロントエンドからバックエンドまで幅広く、UI作成をしたりデータベースの設計・管理を行ったりと多岐にわたるタスクを担当していました。<br />
そのため、複数人での開発を行う場合もフロントエンド/バックエンドで分担するというよりも、必要な処理で分けるような体制を取っていました。</p>

<p>ただ、そのチームでは保守・運用のタスクがメインで、大規模な開発やリプレイスはありませんでした。<br />
大規模開発やリプレイスを経験したいと思い、リプレイス途中だったこのチームに参加しました。</p>

<p>また、業務外ではC言語やGo言語、Pythonにも個人的なプロジェクトで触れていました。</p>

<h3>CSプラットフォームグループへの参画</h3>

<p>ヘルプセンターリプレイスプロジェクトのチーム構成は、プロダクトオーナー1名、フロントエンドエンジニアとバックエンドエンジニアがそれぞれ5名ずつの合計11人で開発を進めていました。プロジェクトは最初のリリースに向けて残り半分程の進捗でした。</p>

<p>プロジェクトに参画した際に、私はフロントエンドの開発チームに配属されました。フロントエンドの開発では、言語としてTypeScriptを使い、Reactにサーバーサイドの機能が付いたNext.jsというフロントエンドフレームワークを使っていました。<br />
さらに、状態管理にRecoil、テストはJest、コンポーネントカタログにはStorybookを採用してAWS ECS上で動作させていました。</p>

<p>フロントエンドの開発環境ではモノレポを採用しており、その管理を専門チームが行うことで、私たちは言語やフレームワークのバージョンアップを心配することなくコーディングに集中できるという利点がありました。</p>

<p>ちなみにモノレポとは、複数アプリケーションを単一のリポジトリで管理する手法で、各ライブラリのバージョン管理や独自ライブラリの仕様を容易にするなどのメリットがあります。</p>

<p>こちらの記事で詳細に説明されているので、よかったら読んでみてください！<br />
<a href="https://inside.dmm.com/articles/dmm-frontend-ecosystem/" target="_blank">https://inside.dmm.com/articles/dmm-frontend-ecosystem/</a></p>

<h2>フロントエンド開発への挑戦</h2>

<h3>フロントエンド開発のための学習</h3>

<p>TypeScriptやNext.jsを学ぶために業務中に時間を取ることはしなかったので、主に3つの手段で学びながら業務を進めました。<br />
まず、用意された資料による学習です。この資料はフロントエンドのモノレポ基盤を提供しているチームによる学習資料で、リポジトリに導入しているライブラリの扱い方が記載されていました。<br />
そして、実装済みのコードからもさまざまな知識を得ました。リリースに向けて中盤に差し掛かったプロジェクトということもあり、実装も充実し始めていました。ライブラリを使っている部分も多くあり、使い方のヒントになりました。<br />
最後に、チーム内でのコードレビュー会による指摘です。これにより、誤った知識の訂正や疑問の解消ができました。自分の書いたコードはもちろん、他の人のコードもその場でレビューするため、チームとしての実装の軌道修正やそれまでと違う考え方・知見など新しい発見がありました。<br />
また、コードレビュー会では基盤を提供しているチームのメンバーに相談する場も設けてもらい、自分たちとはまた違った観点での指摘や意見を伺うこともしていました。</p>

<h3>TypeScriptやReactでの苦労と学び</h3>

<p>これまで扱っていたフロントエンド開発はHTMLベタ書きやPHPを使用し、条件分岐や変数の出力、フレームワークやライブラリを用いずに書かれたJavaScriptでの簡単なUI作成程度だったため、コンポーネントごとのUI設計やSPAのルーティング、状態管理は未経験でした。JavaScriptからTypeScriptへ静的型付け言語に変わったことへの抵抗は特になかったのですが、ライブラリが絡んだ場合をはじめ、いくつか苦労点がありました。それについては次に紹介します。</p>

<h4>TypeScriptの分割代入、スプレッド構文</h4>

<p>私が扱っていたバージョンのPHPには存在しなかった概念が、TypeScriptの「分割代入」と「スプレッド構文」です。<br />
この概念に初めて触れた私としては、当時はこの新たな構文に違和感しかありませんでした。<br />
分割代入とは、配列やオブジェクトを分解し、それぞれの要素を新たな変数に代入することを指します。一方、スプレッド構文は、配列式や文字列などの反復可能オブジェクトを展開するための構文です。<br />
それらを使用した短いサンプルコードを以下に示します。</p>

<pre>
<code class="language-javascript">type FruitBasket = {
  apple: number;
  banana: number;
  orange: number;
};

const getTotalPrice = ({apple, banana, orange}: FruitBasket) =&gt; {
  return apple + banana + orange;
};

const sample: FruitBasket = {
  apple: 100,
  banana: 50,
  orange: 80,
};

console.log(getTotalPrice({...sample, banana: 100}));</code></pre>

<p>ここでは、分割代入によりFruitBasket型のsampleオブジェクトから各フルーツの値を個別に抽出しています。そして、スプレッド構文を使ってsampleオブジェクトの中のbananaの値を変更し、それをgetTotalPrice関数に渡しています。<br />
スプレッド構文によってsample以外に新たな変数を宣言することなく、別の要素を持ったオブジェクトをgetTotalPrice()に渡すことができました。</p>

<h4>React hooks</h4>

<p>現チーム配属前にもReactを扱ったことはあったのですが、久しぶりに触れると新機能が追加されていました。<br />
useState()やuseMemo(), useCallback()など、新しい概念で当初は苦労しました。</p>

<p>stateを使うことで値が変更されることでコンポーネントを再描画させることができたり、反対に値や関数をmemo化することで余計な再描画を抑えたりできます。</p>

<pre>
<code class="language-javascript">const [name, setName] = useState('');
const message = useMemo(() =&gt; {
  return '名前は' + name + 'ですか？';
}, [name]);

const handleChangeName = useCallback(
  (event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    setName(event.target.value);
  },
  []
);

return (
  &lt;&gt;
    &lt;input
      type="text"
      onChange={handleChangeName}
      value={name}
    /&gt;
    &lt;p&gt;{message}&lt;/p&gt;
  &lt;/&gt;
);</code></pre>

<p>上記は入力された名前を元にメッセージを出力する処理です。<br />
このように、useStateを使用してstateを作成し、useMemoで無駄な計算を防ぐことができます。さらに、useCallbackを用いてイベントハンドラの再作成を防ぐことで、パフォーマンスを改善することができます。</p>

<h4>ライブラリの利用</h4>

<p>下記はreact-hook-formというライブラリを使った実装の一部です。<br />
ライブラリは引数に独自の型を使用していたり、使い方が特殊だったりするため、初見ではなにがなんだかわかりません。<br />
ドキュメントを読んで、その使い方を理解するまでに時間がかかったというのが正直な感想ですが、一度それが理解できれば非常に便利なツールであることに改めて気付きました。</p>

<pre>
<code class="language-javascript">// 1. yupでバリデーションスキーマを作成
const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().required().email(),
});

export const Form = () =&gt; {
  // 2. useFormを使ってフォームを作成
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) =&gt; {
    console.log(data);
  };

  return (
    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
      {/* 3. register関数を使って各フォームフィールドを登録 */}
      &lt;input name="name" ref={register} /&gt;
      {errors.name &amp;&amp; &lt;p&gt;This field is required&lt;/p&gt;}

      &lt;input name="email" ref={register} /&gt;
      {errors.email &amp;&amp; &lt;p&gt;This field is required&lt;/p&gt;}

      &lt;input type="submit" /&gt;
    &lt;/form&gt;
  );
};</code></pre>

<p>react-hook-formはReactでフォームを簡単に扱うためのライブラリです。<br />
本格的な利用にはドキュメントの熟読が必要になりますが、フォーム関連の複雑な状態管理を一手に引き受けてくれるため、生産性の向上に大いに貢献します。サンプルコードでは、短いコードでyupというバリデーションのためのライブラリと組み合わせて入力フォームを実現しています。私達のプロダクトでは、Googleフォームの編集画面のような「フォームを作るためのフォーム」を実現するために導入しました。</p>

<p><img alt="フォーム作成画面" height="337" src="https://image.dmm-corp.com/ym1938tid2jdqwxygzfwp427f98s" width="400" /></p>

<h2>フロントエンドエンジニアとしての開発</h2>

<h3>開発体制の変化</h3>

<p>これまでの開発では、APIの入出力は自分で決めて自分で実装をしていました。<br />
しかし、今回の開発ではフロントエンドチームとバックエンドチームで入出力の合意を取り、同時に開発を進めていきました。<br />
フロントエンドとバックエンドを分けた開発をしてこなかった私にとっては、これがなかなか苦労しました。</p>

<p>結合テストのタイミングでフロントエンドとバックエンドのアプリケーションをデプロイしたところ、なぜか動かない。<br />
フロントエンドでの処理やバックエンドからのレスポンスを追ってみると、レスポンスの型が仕様書に書いてあった型と違う。もしくは、nullになると書いてあった部分でフィールドごとなくなり、TypeScript上でundefinedと認識されている&hellip;など、当時はAPIの入出力に関してどう合意を取るかが課題でした。<br />
例えば、シンプルそうな文字列のフィールドがあったとします。「値なし」を表現するにあたって、 「&#39;&#39;」 （空文字）で表現するか、nullで表現するか、フィールドごと消してundefined扱いにするのか、この3択のうちどれが最適解なのかでとても迷いました。<br />
バックエンドの扱う言語がGo言語だったため、null, 空文字, undefinedの区別がつかなかったことがこの問題の原因でもありました。</p>

<p>自分ひとりで好きなタイミングで開発方針を変更していた開発体制とは違い、APIの仕様書レベルで変更して合意を取り直す必要がありました。</p>

<h3>フロントエンド/バックエンド間の連携と問題解決</h3>

<p>最初のリリースを終えた後も、新機能のために第二弾、第三弾と開発を続けてきました。その過程で、フロントエンドとバックエンド間の連携については試行錯誤を重ねていました。</p>

<p>当初のフロントエンドチームでは並行開発のしやすさから独自の優先度を設定し、開発を進めました。これにより、各開発フェーズの最終段階でバックエンドのAPIと連携し、機能を完成させていきました。この方法を採用した理由は、並行開発が容易になり、フロントエンドエンジニアのリソースを有効活用できるからです。</p>

<p>しかし、この方法のデメリットとして、修正に時間が費やされたことが挙げられます。バックエンドが長い期間モック状態にあったため、実際に結合してみると正常に動かないことが多くありました。フロントエンドとバックエンドの開発が完全には連携していないため、開発の流れの中で設計の不備や変更点の共有ができず、結合時に問題が露呈したのです。<br />
これを解決するために、各機能の開発優先度を揃え、APIのモック状態での開発時間を最小限に抑えるように改善しました。また、開発にあたってフロントエンドとバックエンドの連携を強化しました。仕様の変更や調整については、両チームが密にコミュニケーションをとりながら、適切に機能するシステムを確実に構築する方向へ方針転換しました。<br />
例えば、APIの入出力に関する定義をバックエンドで作成後にフロントエンドでも精査するなどです。</p>

<p>これにより、フロントエンドとバックエンドの結合時の手戻りが大幅に削減でき、開発全体の工数削減につながりました。</p>

<h2>まとめ</h2>

<p>エンジニアとして新しいことに挑戦するのは好きですが、少し役割が変わっただけでこんなに苦戦するとは思っていませんでした。<br />
コーディングももちろんですが、ポジションやチーム構成によって開発の進め方が変わり、それまでの経験とは違った開発をする必要がでてきました。<br />
なにか障害にぶつかっても、解決策におそらく正解はなくてそのチームならではの最適解を見つけるのがベストだと思います。<br />
私も最適解を見つけられるよう、知識の引き出しを増やす努力をしていこうと思います。</p>


フロントエンド

カスタマサポート・ユーザーサポート

開発プロセス

新ヘルプセンターシステム#6 異動を機にフロントエンドエンジニア始めました

新ヘルプセンターシステム#6 異動を機にフロントエンドエンジニア始めました

シェア

関連する求人

関連する記事