## プロダクトDiv フロントエンドチーム
自社プロダクトに関連するフロントエンドに関連する業務を行うチームです。<br>
主にマーケティングに関連する業務を遂行しつつ、フロントエンドにまつわる課題やアクセシビリティ改善なども率先して行いました。
### プロジェクト期間
2019/10〜2020/08
### チーム構成
マネージャ1名、プロダクトオーナー1名、フロントエンドエンジニア（2名）、デザイナー（2名）のチーム
### 実施したこと（マーケティング領域）
プロダクトへの検索流入や新規会員登録数を高める目的として、SEOやランディングページ作成を行いました。<br>
主な作業として、PCとモバイルでの表示コンテンツ差分を解消するためのMobile First Index対応や、構造化マークアップを data-vocabulary.org から schema.org へ更新するなどを行いました。
施策検証のためにA/BテストのためのGoogle Optimize導入し、その結果に基づいたページ、UI改修を行いました。
ランディングページの作成や更新も担当しておりました。これまでランディングページを手動更新していたところをGitHubリポジトリへ移行し履歴が残るようにしつつGitHub Actionsを用いて本番環境への反映を自動化するよう効率化を行いました。
### 実施したこと（フロントエンド関連）
ページ表示速度が課題となっていたためそれにまつわる改善を行っておりました。
GASとWebPageTestを用いたパフォーマンス観測をしつつ、ブロッキングレンダリングの軽減するためのCSS、JSの容量削減対応をしました。
上記JSの容量削減に付随し、プロダクト内で使用されているjQuery Pluginを調査し不要なものの剪定対応し容量軽減やエンジニアの認知負荷を軽減させる取り組みを実施しました。
社内での[安心安全宣言](https://crowdworks.jp/static/lp/safe_and_secure/)の取り組みで、お仕事の報酬金額の表示を分かりやすくするため、Vue.jsを用いたUI実装を担当しました。リアクティブに入力値が計算され結果が反映されるようにし、WAI-ARIAを用いて支援技術にも認識できる誰もが使えるUIを実装しました。
### 実施したこと（アクセシビリティ関連）
コーポレートサイトリニューアルに伴い、[コーポレートサイトのアクセシビリティチェック](https://note.com/contrabass/n/nf7931eb0c905#T0CYf)を行いました。リリースまで時間がなかったため、WCAGの原則における「知覚可能」のレベルA項目をチェックし、制作チームへのレビューを行いました。
社外でのアクセシビリティチェック活動の経験を活かし、[プロダクトのアクセシビリティチェック](https://engineer.crowdworks.jp/entry/product_accessibility_check)を行いました。WCAG2.1でのレベルA、一部レベルAAの対応確認をして、GitHub Projectでチェック結果を見える化するようにして時間を作ってそれらの対応を行いました。
ユーザーからのフィードバックを受けてデザイナーと協業し、PC版「仕事の詳細」「メッセージ」の文字サイズを変更、読みやすくなるように対応しました。
> 関連：[PC版「仕事の詳細」「メッセージ」の文字サイズを変更し、読みやすくなりました | クラウドワークス お知らせブログ](https://blog.crowdworks.jp/?p=3663)
---
## プロダクト本部 プロダクト開発部 プラットフォーム開発 開発1グループ 施策開発チーム
ユーザの発注を促進するため課題解決と施策の実施、新機能の開発を目的としたチームです。
### プロジェクト期間
2020/08〜2021/10
### チーム構成
開発者6人（フロントエンド2人, バックエンド4人）, デザイナー1人, プロダクトオーナー1人
### 実施したこと
- Rails API, Vue.js, Storybook を用いた新機能開発<br>バックエンドとフロントエンドの作業分離による効率化目的
- チーム内レビューを通じてフロントエンド開発が不慣れな人への知識取得を促す
### チーム内成果
[カンタン発注プラン診断](https://crowdworks.jp/order_plan_diagnoses)診断機能の開発しました。
> 関連：[クラウドワークス、業界初「カンタン発注プラン診断」機能を公開｜株式会社クラウドワークスのプレスリリース](https://prtimes.jp/main/html/rd/p/000000059.000050142.html)
2021年上期（2020/9~2021/3）に実施した施策において全社MVPを受賞しました。
> 関連：[プロフィールの性別欄で「回答しない」を選べるようになりました | クラウドワークス お知らせブログ](https://blog.crowdworks.jp/?p=4222)
---
## プロダクト本部 プロダクト開発部 プラットフォーム開発 開発4グループ ジャンヌチーム
組織内で不明瞭になっているものや技術的負債をコントローラブルなものにするため、現在ある技術的負債を理解し解消をリードしていく目的のチームです。
現在あるフロントエンド開発を整理し、バックエンドとの分離と正式にフロントエンド基盤を確立させるミッションに取り組んでいます。
### プロジェクト期間
2021/10〜現在
### チーム構成
開発者6人, チーム責任者1人（開発部長兼任）
### 実施したこと
- フロントエンド開発に関する開発指針やロードマップの策定
- 2021/10~2022/02 にかけて使用されている Vue.js の v2 から v3 への移行を完了（[記事](https://engineer.crowdworks.jp/entry/migrate-vue3)）
- Rails テンプレートエンジンから Vue.js への移行作業を開始<br />Vue3 環境を活かし`<script setup>` で記述
- markuplint ルールを拡充して堅牢な HTML マークアップをできるように整備
- Webpacker から webpack + Simpacker 環境への移行（[記事](https://engineer.crowdworks.jp/entry/thanks_webpacker_goodbye_webpacker)）
- Vue3 環境下での Storybook バージョンアップ（[記事](https://zenn.dev/yamanoku/scraps/b9b993c77e2b1b)）
- 他チームのVue.js開発における不明点のフォローや疑問点の解消を行う
---
## 広報・発表にまつわる活動
これまでのフロントエンドにおける活動をエンジニアブログにて発信をするよう心がけております。
- [crowdworks.jp のフロントエンド活動を振り返る2023 - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/crowdworksjp_frontend_2023)
- [crowdworks.jp のフロントエンド活動を振り返る 2022 - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/crowdworks_frontend_2022)
- [crowdworks.jp のフロントエンド活動を振り返る 2021 #フロントエンド - Qiita](https://qiita.com/yamanoku/items/29a74ebf3d74b3017581)
- [クラウドワークスのフロントエンド活動を振り返る 2020 - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/crowdworks_frontend_2020)
勉強会・カンファレンスへの参加やスポンサー協賛を通じて弊社のフロントエンド開発と社外との関係構築も行っております。
- [Vue Fes Japan Online 2022 参加レポート - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/report-vue-fes-japan-online-2022)
- [GAAD Japan 2022 でスポンサー協賛と LT をしてきました - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/gaad-japan-2022)
- [当事者不在でも変化してきたクラウドワークスのフロントエンド開発について - Google スライド](https://docs.google.com/presentation/d/1iWKz3rc9ObcfrNd7hYcYPYKm9EZ6DCAo0f2LBI2uteE/edit)
- [Vue Fes Japan 2023 参加レポート - クラウドワークス エンジニアブログ](https://engineer.crowdworks.jp/entry/report-vue-fes-japan-2023)