1 of 24

当事者不在でも変化してきた�クラウドワークスの�フロントエンド開発について

1

CrowdWorks Inc.｜

2 of 24

自己紹介

大山 奥人（オオヤマ オクト）

株式会社クラウドワークス

プロダクト本部 プロダクト開発部�プラットフォーム開発4グループ所属

主にフロントエンド領域に関わるエンジニア

2

CrowdWorks Inc.｜

3 of 24

株式会社クラウドワークス

2011年11月11日設立。日本最大級のクラウドソーシングサービス「クラウドワークス」といったマッチング事業や�ビジネス向けSaaS事業のサービス開発・運営。

3

CrowdWorks Inc.｜

4 of 24

株式会社クラウドワークスが運営するクラウドソーシングサービス。�日本最大の人材・クライアントプラットフォームで、2022年3月21日でサービス開始10年を迎える。

4

CrowdWorks Inc.｜

5 of 24

これまでのフロントエンド開発

5

CrowdWorks Inc.｜

6 of 24

Rails 下におけるフロントエンド開発（2012~2015）

  • Ruby on Rails アプリケーションとしてスタート
  • Sprockets によるアセットパイプライン
  • CoffeeScript による開発全盛期
  • 社内謹製の CSS フレームワーク（Bootstrap 風）

6

CrowdWorks Inc.｜

7 of 24

脱 jQuery のためのフロントエンド環境（2015~2018）

  • jQuery による操作が複雑で厳しくなってくる
  • 新たなるフロントエンドフレームワーク（React.js、Vue.js）の台頭
  • ES6、Vue.js を使えるモダンなフロントエンド環境を構築
  • Gulp + Browserify 構成

7

CrowdWorks Inc.｜

8 of 24

新たなる CSS フレームワークを構築（2018~2019）

  • チームリビルドフロントエンドが発足
  • 既存の CSS フレームワークのメンテナンスされていない問題
  • ルールやレギュレーションが守られずデザイン負債が生まれる
  • Mihaly（ミハイー）という CSS フレームワークを制作
  • 諸般事情につきお蔵入りに…

8

CrowdWorks Inc.｜

9 of 24

独自フロントエンド環境を再構築（2019）

  • かつて構築した環境が独自すぎてメンテナンスできなくなっていた
  • 過去在籍して業務委託として参加していたエンジニアが再構築
  • Webpacker の導入
  • メンテナンスができるようにわかりやすい構成への変更
  • Linter やテスト環境を追加

9

CrowdWorks Inc.｜

10 of 24

生まれてしまった技術的負債たち

  • Rails アプリケーションとしてのフロントエンドリソースはそのまま
  • モダンなリソースとの２重な管理
  • 何が正しいのか？が明確に分からないため独自実装が進む
  • 環境自体、だれもメンテナンスできていない
  • デザイン負債にも手がつけられていない状態

10

CrowdWorks Inc.｜

11 of 24

技術的負債解消チーム

通称「ジャンヌ」が誕生

11

11

CrowdWorks Inc.｜

CrowdWorks Inc.｜

12 of 24

技術的負債解消の取り組み

12

CrowdWorks Inc.｜

13 of 24

Storybook 駆動開発

  • フロントエンドの変更をフロントエンド環境のみで完結したい
  • Docker を使用せずとも立ち上げられる環境
  • Vue.js のアップデート対応（ver 2 系 から ver 3 系）で活用した
  • スナップショット、VRT といった各テストの充実
  • サーバーサイドからの依存より脱却する１つのきっかけになった

13

CrowdWorks Inc.｜

14 of 24

デザインシステムコンポーネントの取り組み

  • 「デザイン基盤」という取り組みがスタート
  • 構築したデザインシステムを画面に適応していく
  • デザインシステムとしてのコンポーネント作成に携わる
  • 一部画面、共通の画面に徐々にコンポーネント適応している
  • Rails テンプレートエンジンから Vue コンポーネント化へ

​

14

CrowdWorks Inc.｜

15 of 24

モダンフロントエンドディレクトリへの回帰

  • Webpacker から webpack と Simpacker という構成に変更
  • Rails 依存せずフロントエンドをビルドができるようになった
  • app/javascript ディレクトリから typescript ディレクトリへ
  • 各種フロントエンド環境のディレクトリを作成

15

CrowdWorks Inc.｜

16 of 24

16

typescript

└── vue-app

├── docs

├── jest

├── markuplint-jest-storyshot-parser

├── reg-notify-json-plugin

├── src

├── storybook

├── storybook-legacy

├── tsc

└── webpack

CrowdWorks Inc.｜

17 of 24

社内外での取り組みの発信

  • （社内）生産性向上プロジェクトでの発表・表彰
  • （社外）エンジニアブログとしての発信
  • （社外）Vue Fes Japan Online 2022 での発表

17

CrowdWorks Inc.｜

18 of 24

課題とこれからの取り組み

18

CrowdWorks Inc.｜

19 of 24

過去の技術との地層問題

  • 設計方針を含む実装との乖離している箇所がある
  • ディレクトリを別に扱うことで区別化している
  • 徐々に新たなものに移行していきたい（WIP）
  • チーム内で移行例をつくりコードサンプルを充実させていく

19

CrowdWorks Inc.｜

20 of 24

周辺ライブラリのアップデート対応

  • dependabot にてライブラリアップデートを監視
  • いくつかアップデートが放置されてしまっているものがある状態
  • テスト観点などをドキュメント化している
  • アップデートへの工数・認知負荷を下げたい
  • さらに自動テストを増やしていきたい

20

CrowdWorks Inc.｜

21 of 24

他チームへの周知やサポート活動

  • フロントエンド環境構築や実装が属人的な状態
  • 実装は設計方針や指針などを告知・周知していく
  • 同意されたルールであれば Linter のルールに採用
  • 環境はフロントエンド Ops 専任チームも視野に入れたい（願望）

21

CrowdWorks Inc.｜

22 of 24

フロントエンド開発はどうありたいのかを考えたい

  • 現在多岐に渡る領域をどうカバーしていくか
  • 今あるフレームワークもいずれ負債になるかもしれない
  • 我々が解決したい課題はなにか？を理解しておきたい
  • 「フロントエンド開発」とはどういうものなのかを定義する
  • Web 標準という仕様を見つめて続けていきたい

22

CrowdWorks Inc.｜

23 of 24

ご清聴いただきありがとうございました！

23

CrowdWorks Inc.｜

24 of 24

関連リンク

24

CrowdWorks Inc.｜