クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

crowdworks.jp のフロントエンド活動を振り返る 2022

アイキャッチ:crowdworks.jp のフロントエンド活動を振り返る 2022

この記事は クラウドワークス Advent Calendar 2022 の1日目の記事です。

クラウドソーシングサービス「クラウドワークス」(以下 crowdworks.jp)にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける @okuto_oyama です。

一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。

フロントエンド活動の振り返りをしてみよう

一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。

qiita.com

engineer.crowdworks.jp

去年と変わらず crowdworks.jp にはフロントエンド専属チームというものは存在しておりません。ですが、今年は去年よりも重要なフロントエンドにまつわる活動をしてこれたと思っています。

それでは、ご覧ください。

続きを読む

Gormのv1からv2へバージョンアップした話

こんにちは。クラウドログ事業推進部の甲斐です。 普段はWEBエンジニアとしてフロントエンド開発やバックエンドのAPI開発を担当しております。 クラウドログではオフショア開発を行なっているため、苦手意識のあった英語に苦戦しつつもフィリピンの開発メンバーと一丸となり日々精進しております。 今回は最近行った取り組みであるORMライブラリGormのバージョンアップ対応についてご紹介します。 具体的なコードの改修方法には触れていませんが影響範囲の大きいライブラリの移行を検討中の方に向けて施策の進め方の参考になれば幸いです。

Gormについて

クラウドログでは現在API開発にGoを使用しています。 Goで利用できるORMはSQLBoilerやentなど色々ありますがクラウドログではgithubのスター数も多く、比較的ネット上に情報も多いGormを利用しています。 Gormv2のリリース以降も長らくv1を使い続けてきましたがライブラリのアップデートによりいくつかのメリットも享受できる見込みだったためアップデートに踏み切りました。

目的

Gorm v1からv2へ移行する目的についてです。 利用したかった新機能など挙げるとキリがないですが、クラウドログとしては大きくは下記の3つとなります。

V1の開発が止まっていること

v2がリリースされたことにより、今後v1では改善や新機能追加によるメリットの享受が難しく開発が止まったライブラリを使い続けることはセキュリティリスクにも繋がります。多少の移行コストを払ってでもこのタイミングでv2へ移行すべきとチーム内で決定しました。

パフォーマンス改善が見込めること

Gorm v2は同じGormと言ってもフルスクラッチで書き直され内部の構造なども見直しが入っています。特にライブラリ利用者側が意識する大きな変更点としてはクエリの組み立て処理でインスタンスが使い回されるようになったことです。v1では内部的にcloneメソッドの呼び出しがあり毎回新しいインスタンスが返されていました。v2ではGCアロケーション削減のため構造体内部に持つフィールドが共有されます。

SQLのテストが簡単にできる

クラウドログではORMでのSQL組み立ての共通メソッドが多数存在しており、これまでそれらのパッケージに対してテストを行う場合、reflectパッケージなどを用いて無理やりテストを行なっていました。v2では新たに追加されたStatementフィールを参照することで簡単にSQLや引数などを取得できるようになっています。

どのように進めたか

次に移行の進め方について簡単にご紹介いたします。

リリースノートを確認して修正方針を固める

まず最初にリリースノートと既存のコードを確認しつつ修正方針を固めていきました。

公式ドキュメントに比較的丁寧にv2のリリース内容が記載されているので、セクションを1つずつ確認して記載のメソッドが自分達のコード上で利用されているか確認し修正方法についてissueのチケット上にTODOとして起こしていきました。 利用していたメソッドがv2で削除されていたりと戸惑う箇所はありましたが、修正方針について事前に検討しておくことでおおよそ移行にかかる工数を見積ることができました。

(この時点では「意外と楽勝かもな〜」なんて呑気に考えていました)

[チケットの抜粋]

テスト方針を策定する

大まかな方針としては、ユニットテストでカバーできているところ、できていないところを精査してカバーできている箇所に関してはユニットテストのクリアを持って移行完了と見なし、できていないところに対してはその機能のリリース時に行ったテスト仕様書をもとに再度テストを行っていくことにしました。 余談ですが、クラウドログのユニットテストはエンドポイントからDBまで一気通貫で動作を検証する方針をとっています。(デトロイト派)

そのため移行中もユニットテストを動かしながら実装を行うことで、機能として壊れていないことを確認しながら安心して作業を進めることができました。 改めてユニットテストの大事さを実感しました。

修正実施 & テスト

最初に修正箇所については検討をつけていたのでビルドを通すところまでは一瞬で完了できました。が、一筋縄ではいかずかなり苦戦しました。基本的には移行前と移行後に出力されるSQLを比較したり、Gormのソースコード読みながら地道に修正を進めてなんとか完了できました。

(1回のレビュー依頼で220ファイルほどの変更を入れる暴挙を働いたにも関わらず、レビューしていただきました皆様、本当にありがとうございました。)

テストに関してはフィリピン開発メンバーにも協力してもらいながら円滑に進めることができました。ここでも事前にテスト方針に関するドキュメントを整理していたので連携がスムーズにいきました。

メンバー全員に変更点と修正方法を共有

移行完了後、開発メンバー全員に向けて変更点と修正方法の共有会を行いました。

ライブラリのアップデートを行うにあたり、どのような変更があり、それをクラウドログとしてどのように修正していくかについてドキュメントにまとめてはいましたが開発メンバー全員に確実に伝達するために毎週行っている開発者勉強会の時間を利用して共有会を行いました。 私は英語にかなり不安がありましたので開発メンバーの内山さん(英語ペラペラ)に逐次通訳をお願いしフィリピンメンバーにもしっかりと情報を共有することができました。(内山さんありがとうございました)

注意すべきポイント

移行するにあたり注意すべきポイントを簡単に紹介させていただきます。

(修正したコードについては後日アドベントカレンダーにて書かせて頂こうと考えていますのでここでは具体的なコードに触れるものは記載しません。)

クエリ組立メソッド呼び出し時の副作用

先にも触れましたがv2ではクエリ組み立てメソッドに副作用があるため適切にSessionメソッドを呼び出す必要があります。 v1ではクエリ組み立てメソッド呼び出しの度に新しいインスタンスが返却されていたので、意識しなくとも途中まで作成したクエリを流用して別の複数のクエリを組み立てることが可能でした。しかしv2からはSessionメソッドの呼び出しがない場合クエリが汚染され意図しないSQLが発行されることになります。 シンプルなクエリであれば簡単に修正可能ですが、複雑なクエリ組み立てであったり自分の知らない機能を変更する際は一旦コードを読み込む必要があったため大変でした。

Scopesメソッドの実行タイミングの変更

個人的にはこの変更の修正が一番大変でした。 v1ではScopesに渡された共通処理は即時にクエリに反映されていましたが、v2のScopesメソッドは呼び出し時に即時実行されずfinisher_api系のメソッドの呼び出し時にまとめて実行されます。 気づいてしまえば修正は簡単でしたが、リリースノートにも記載がなかった(はず)のでかなり苦しめられました。

ユニットテストが必要不可欠

今回ライブラリ移行においてユニットテストの存在が不可欠でした。 もし、ユニットテストがここまで揃っていなかったら移行は不可能でした。 出来たとしても、全ての関連する機能に対して網羅的にテストする必要があるので莫大な時間が掛かってしまったことでしょう。 今回のケースのように影響範囲の広い改修が必要なケースでもユニットテストは非常に役に立つのでまだ導入されていない方が是非とも導入検討をお勧めします。

まとめ

今回の移行作業を通してバックエンド開発のキモであるORMのGormについてより深く知る機会になりとても良い経験になったと感じています。

また、現状の実装を改めて見直す機会にもなりユニットテストの改善案やその他いくつかの課題を発見することができとても有意義な施策となりました。

採用について

クラウドログではGoによるAPI開発を一緒に進めていただけるエンジニアの方を募集しています。 少しでも興味のある方がいらっしゃいましたら是非とも一度カジュアルにお話ししてみませんか??

ご応募お待ちしております!!

Vue Fes Japan Online 2022 参加レポート

アイキャッチ:Vue Fes Japan Online 2022 参加レポート

皆様こんにちは、クラウドワークスのジャンヌチーム所属の @okuto_oyama です。最近飼い始めた大型犬と一緒に散歩できるようになり最高に幸せな日々を送っております。

10/16(日)に Vue.js 日本ユーザーグループが主催する日本最大の Vue.js カンファレンス、Vue Fes Japan Online 2022 が開催されました。

www.youtube.com

各セッションのアーカイブも閲覧できるようになっていますので、まだ見ていない方もぜひご覧になってみてください。

参加したブログを出すまでカンファレンスということなので、今回は視聴していて興味深かったセッションのレポートを書いていこうと思います。

続きを読む

【完全未経験】プログラミングスクールを経て、クラウドワークスに転職した話

はじめに

こんにちは、松尾です。 2022年9月からクラウドワークスでWebエンジニアとしてのキャリアをスタートさせた駆け出しエンジニアです。

業務内容としては、クラウドテックというフリーランスエージェントサービスの開発業務に取り組んでいます。 入社1ヶ月目の段階で、自分の書いたコードがプロダクトに反映されてて、「うぇーーーい」ってなってます。(笑)

この記事では「開発未経験だった入社前のプログラミング学習過程・転職活動」、「入社後に実際どんな会社だったのか」について事実をもとに語ります。

なので、以下のような方には参考になる記事だと思います。

  • 開発未経験からWebエンジニアにジョブチェンジをしようと思っている人
  • 現在、プログラミングスクールで学習中の人
  • クラウドワークスに応募しようか迷っている開発未経験 or エンジニア歴の浅い人

ただし、自分語りのポエム的要素も含んでいるので、必要な部分のみご覧ください。

続きを読む

Vue Fes Japan Online 2022 にクラウドワークスのエンジニアが登壇します

アイキャッチ:Vue Fes Japan Online 2022 にクラウドワークスのエンジニアが登壇します

Vue Fes Japan とは

Vue Fes Japan は Vue.js 日本ユーザーグループが主催する日本最大の Vue.js カンファレンスです。

Vue Fes Japan Online 2022 TOPページのスクリーンショット

日本における Vue.js 開発者たちによる発表や、 Evan You といった Vue.js コアコントリビューターの方たちも登壇されます。

今回、2018年に開催されてから4年ぶりにオンラインで開催されることになりました。

vuefes.jp

登壇情報

弊社からはクラウドワークスエンジニアの @t0yohei@yamanoku がそれぞれ登壇いたします。

負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話

t0yohei

とある Rails のテンプレート + CoffeeScript で構築された画面を、 Vue.js でリプレイスしました。

その際の知見を、具体的な工夫や悩んだポイント、実際の遭遇した技術的負債の話を交えて共有できればと思います。

本セッションのキーワードは以下になります。

  • Vue3 の script setup + TypeScript に始まる開発体験の良さ
  • Container Component、Layout Component などの開発プラクティス
  • Storybook、 StoryShots(VRT) によるフロントエンド DX
  • あるべき姿に至るまでの長い道のりと取捨選択
  • 命令的 UI から宣言的 UI へのパラダイムの変更
  • Ajax のリクエストを送ると、jsonシリアライズされた html が帰ってくる API のエンドポイント
  • 忍耐力

メドピアトラック(13:30 - 13:50)にて発表

vuefes.jp

Vue.js でアクセシブルなコンポーネントをつくるために

yamanoku

昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。

最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。

しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシブルでなくなる可能性もあります。

この発表ではそうした間違いや疑問を解消し Vue.js でのアクセシビリティ向上に取り組みやすくするやり方を発表いたします。

FUTURE トラック(13:55 - 14:15)にて発表

vuefes.jp

おわりに

2018年にカンファレンスが開催されてからの間に Vue3 がリリースされたり Vue.js にまつわる OSS においても様々な変化がありました。

クラウドワークスにおいても Vue3 に移行し、Composition APIscript setup を活用してフロントエンド開発しています。私たちからはそうした経験談や知見といったものを通じて Vue.js コミュニティに還元していければと思っております。

その他の登壇者の発表やスポンサーセッションもそれぞれ興味深い内容がたくさんあります。

当日は是非ご参加ください。

vuefes.jp

© 2016 CrowdWorks, Inc., All rights reserved.