…モック開発、CSSのリファクタリングにて結果の同一を確認するためのVRT（ビジュアルリグレッションテスト）、スナップショット結果を活用したMarkuplintでのチェックやアクセシビリティチェックなど、多岐にわたる用途で活躍しています。 今年、Storybook v7が発表され、crowdworks.jp でもその恩恵を受けられるようアップデートしました。このアップデートにより、Babelの設定が簡素化され、立ち上げ速度の向上や設定における型情報の扱いも容易になりました。 s…

…以下を参考に、勉強、リファクタリング、バックログリファインメントといった活動に時間を使う選択肢を持つことができるようになりました。https://www.ryuzee.com/faq/0054/ ） スクラムの理解が深まることで、改善のアイデアは増えると感じます。その起点としてスプリントゴールの意識づけがポイントだと思います。 型にこだわり過ぎない スクラムガイドに書いてあることをまずは試してみたいと思っていましたが、それをやろうとすると大きく変えなくてはいけないこともありま…

…￣ー￣) 新規開発、リファクタリング、設計などを扱う書籍、学ぶ方法は世の中にたくさんありますが、機能の削除に触れられるコンテンツ、機会ってなかなかないんじゃないかなと思います。そんな貴重な経験ができる機会をいただけたのはかなり幸運だったかなと思っています。あざざます…！ その他…もりだくさん その他にもcrowdworks.jpの利用体験をよくするための改善実装などたくさんの経験をさせていただきました！ 働いてみての感想や気づき 働きやすいよう柔軟に対応してもらえた 1日でも…

…るにあたって、闇雲にリファクタリングしていくぞ！では到底うまくいきそうにない。まず「何故やるのか、何をゴールとするのか」の意識あわせから始まり、戦い方を探求していっています。まだその道半ばではありますが、方針を決めていっている最中での気づきをまとめ、そこで個人的に得ることができた新たな考え方を記しておきます。 （ここからは冗長さを除くため「である調」になります） 技術的負債という課題 技術的負債とは 具体の話に入る前にまず「技術的負債」という用語についての定義を揃えておくと、…

…erraform のリファクタリング用のライブラリを作ってアップグレード作業を行いました。 AWS プロバイダ v4 アップグレードツールの仕組みを詳しく紹介していますので、Terraform AWS プロバイダ v4 のアップグレードに対応していない方は、是非ご覧ください。 engineer.crowdworks.jp AWS Athena で ALB のログを過去分も検索する AWS の公式ドキュメントの通り Athena の設定をすると ALB の過去ログが検索できない…

…を作る以外にも内部のリファクタリングや CSS の修正にてどこが変わったか・変わっていないかを理解しやすくなり、今や VRT はフロントエンド開発ではなくてはならない存在になっております。 詳細は以下エンジニアブログをご覧ください。 engineer.crowdworks.jp 型チェッカーを導入 Vue3 化によって安定した型開発ができるようになったのですが、肝心の Vue.js の型チェック自体はされておりませんでした。これでは手元で型エラーを無視してしまう可能性も出てし…

…でTerraformリファクタリング機能をCI/CDに組み込むでご紹介した通り、crowdworks.jpではTerraformのPlan/ApplyにAtlantisを使用しています。 通常のPlan/ApplyはAtlantis、ドリフト検出はCodeBuildとTerraformのPlanを2か所で行なっている状態でした。 AWSのほぼすべてのリソースに対してPlanができるような、強いAWSの権限が複数箇所に散らばっているのは良くありません。Atlantisに寄せ、構…

…対して、テスト追加やリファクタリングをしたいですし、するべきなのですが、時間は有限で、やりたい施策は順番待ちになっています。 なので、今回行いたい改修のために必要な分はどこまでかを議論し、既存実装にどこまで手を入れるかを決めます。 フロントエンドは何で進めるか クラウドワークスでは、Railsで動いているサービスのフロントエンドをVue.jsに置き換えつつあります。 その上で、コストとリターンを鑑みて、Vue.jsに切り替えるか、Railsで完結させるかを決めます。 とはいえ…

…ばコード読みやすいしリファクタリングとかもしやすい。 静的型付けが人気ですね。これなしでは今のフロントエンド開発出来ない！って言う人も居そう。 Go（6人） Java歴が一番長い中Go言語勉強したら、エラー処理とかGoでのオブジェクト指向の考え方に感動した(Gopherくんがかわいい） こちらも静的型付けで人気。シンプルで読みやすいという意見が多かったです。 Gopherくんかわいい。わかる（わかる） その他 Kotlin（2人） Python（2人） Rust（2人） C#…

…Terraformのリファクタリング用のライブラリを作り始めました。そして最終的にいいかんじのアップグレードツールを書きました。 github.com とりあえずツールの使い方だけ知りたいという人はリポジトリのREADMEを読んで下さい。（※現状aws_s3_bucketのリファクタリングにしか対応してないことに注意） この記事ではツールの使い方ではなく、仕組みの解説をします。一体誰得なんだと思いつつ、Terraform設定をいいかんじにプログラムで書き換えたいなという人向け…

…アプローチ 生半可なリファクタリングでは中途半端に適用されてしまい、逆効果になってしまうケースがあるのではないかという懸念があります。 「価値のある知識」を明確化・言語化し、「境界づけられたコンテキスト」単位で既存のコードからのリファクタリングが有効だと考えています。 リファクタリング対象をカバーするようなユニットテストを実装しておくことで、既存の動きを担保することででき、安全に「境界づけられたコンテキスト」単位でのリファクタリングを行うことが可能です。 また、既存のコードを…

…該当のコンポーネントのみ Storycap の例外設定にしています。 おわりに VRT の導入と GitHub Actions での設定により、プルリクエスト上でレポートされるようになりました！ これで Vue.js で作成したコンポーネントでの CSS リファクタリングの心理的安全性が向上し、レビュー時の確認負荷の軽減にも一役買ってくれそうです。 We're Hiring ! クラウドワークスではフロントエンドにとどまらずメンバーを募集しています！ herp.careers

…間を要したりします。リファクタリングを行うにも依存関係が多すぎて片手間にはできません。 入社当時「全貌を知るには数年はかかる」ということを言われましたが、その意味を一年かけてやっと理解できました。 辛いことばかり書きましたが、この規模のサービスだからこそ学べることもあります。例えば負債をどう減らすかや負債にならないコードの書き方は深く身につきました。コードを書く力がつくのはとてもありがたいです。また沢山のユーザーがいるからこそ機能を作ったときの反響が大きく、それがやりがいにも…

…債2が存在し、地道にリファクタリング3してます。楽しさの度合いが高くない瞬間は少なからずあると思っており、最重要課題の一つとして改善に取り組んでいます。 2. みんなでつくると、もっと楽しい いろいろな要望をプロダクトとして実現していくわけですが、傍観者ではなく当事者として議論に参加し自分の意思を伝えることができる、チームでつくっている一体感はとてもあります。エンジニア組織も役割ごとにチームが分かれているものの、エンジニア全員が参加する会議があったり、Slackで質問すると別…

…rateにも対応し、リファクタリングし放題になりました。詳細は @minamijoyo の記事を参照ください。 qiita.com Redashのバージョンアップ crowdwowrks.jpではデータからのインサイトを重視しており、マーケティングなどのチームや施策の検討時にはそれらのデータを頻繁に参照します。crowdworks.jpの分析系データベースはAmazon Redshiftで構成されており、それらのデータを参照する際にはRedashを活用しています。 その重要性…

…リントの中の何割かをリファクタリングやドキュメント整備に充てるという地道な作業によってのみ防げるのかなと思います。言うは易し行うは難しであることは重々承知していますが、一緒に頑張りましょう！ 改善すべきだったこと 万事が上手く進んだわけではありません。この記事を書くにあたって再度振り返ってみて以下の部分が改善点として挙げられました。 開発対象のサービスの機能要件・非機能要件の複雑さによる実装・調査・検証コストの増大 複雑なデータ形式を扱う必要があったためデータの取得の部分でス…

…ストコードの充実や、リファクタリングや再設計の模索等多くの取り組みがなされてきました。現在は、コードの保守性を高めるにあたって、もっとも効果の高い箇所を洗い出し、その部分に対して集中して改善を行うため、crowdworks.jpのコアドメインについての深堀りが進められています。 中長期を見据えた組織の形の模索 現在の開発組織の規模はベンチャーとしては大きいですが、大企業と比べると、もちろん小さい。境目くらいの規模感です。メンバーの期待も、ベンチャーの自由さやチャレンジ機会を求…

…の差はあれど定期的なリファクタリングはあるべきでしょう。 プログラムと違い、 Security Fix や Rails バージョンアップの変更に追従するなどの動機はあまりありませんが、少し前にバズっていた技術的負債の解消などはデータベース構造のリファクタリングの動機となりえます。 改修前のざっくりとした構造 今回の話題の登場人物を示しています。 ※ ここでの名前は、ある程度抽象したものに置き換えており実際の名前とは異なります。 「ユーザ (User)」はクラウドテックに登録く…

…です。 今年2月までリファクタリング専門チームにてcrowdworks.jpの技術的負債を返却するために奮闘しておりましたが、そこから現在まではユーザーの皆様に安心安全なサービスを提供するためにクラウドワークス 安心安全宣言のための施策を行っています。 リファクタリング専門チームについては以下をご覧ください。 engineer.crowdworks.jp qiita.com 施策による機能開発を行う際に直面した課題 施策では主にフロントエンドの機能追加をすることになったのです…

…rraformは絶賛リファクタリング中でコードの中には古い書き方と新しい書き方が混在し、そこから今現在のベストプラクティスを導き出さねばならなかったからです。 sleepを入れないとうまく動かないバッチがあった これはどちらかというとDatadogの仕様になると思うのですが、 今回DatadogのDogStatsDを使って定期的にDBのリソース情報を取得しメトリクス を送信するというジョブを移行しました。 しかしバッチ実行後、sleepを入れておかないとデータがうまく送信でき…

…jp このような形でリファクタリング特化のチームを作ったり、フロントエンド専門のチームを作ったり、これまであまり取り組めなかった領域へのアプローチを試みてきました。途中方針転換などもありまだまだ道半ばなところはあるのですが様々なトライから得られた知見は大きいと思っています。 また、それまでマネージャーが私一人だったところからEMチームとしてマネジメントチームを組成できたことも進展でした。ただまだまだEMも足りておらず負担を増やさずに効率的に組織運営ができるような形を探っていま…

…peScriptへ リファクタリング テスト 工夫したこと 計算ロジックの共有化 複数ブラウザ対応 さいごに We are Hiring!! クラウドワークスのフロントエンドの事情 クラウドワークスのフロントエンドはいくつかの地層が存在します。 詳しい内容は過去の投稿に譲りますが、今回の作業対象は、 Sprockets層のCoffeeScriptとjQuery : 4画面 Webpacker層のVue : 1画面 となります。 Sprockets層は以下の理由からモダンJS化…

…詳しくなるようになりリファクタリングなども行いました。 今回の詳細には書かなかったのですが、レコメンドで使っている別のElasticsearchインスタンスが存在しており、そちらはもう完全に無人化しており環境構築さえ困難な状態になっていたのでDocker化をしたりElasticsearch5以降メンテされていないelasticsearch-embulkというGemを使わずにbulk APIを使うようにリファクタリングしたりしました。 周りの環境の整備をまとめて行えたので良かっ…

…したが、11月からはリファクタリングチームにてcrowdworks.jpのリファクタリングをしています。 現在のcrowdworks.jpの状況 過去の記事にもあるように、crowdworks.jpはサービスインから約8年が経過し、30万行を超えるモノリシックなRailsアプリケーションになってきていて、コード行数の増加量やファイル変更数の推移は年々鈍化してきています。 内部には開発生産性を低下させる技術的負債が溜まってきており、技術的な投資がしづらくなってきているという課題…

…機能の優先順位づけやリファクタリングを緊張感をもって進めることができた点が、よかった点じゃないかと思っています。 蛇足：副業人材活用 話は逸れますが、今回のプロダクト作りでは、最初から副業のエンジニアの方にも助けてもらって、スピーディな開発体制の構築と実装を意識しました。 必ずしも社内のエンジニアだけでなくとも今やクラウドワーキングの時代ですので、副業や業務委託で関わってもらい、どんどんサービス開発していくというのはこれからますます自然になっていくなあと感じました。 新規プロ…

…ト全体を俯瞰的に捉えリファクタリング戦略を推進する専任チームを発足してリファクタリングを進めています。 そのチームでは技術的負債をどれくらい減らしたかをCodeClimate Qualityによって計測しています。取り組みの詳細はこちらの記事を参照ください。 CodeClimate Qualityではファイル単位でRemediation Timeという指標を計測してくれます。これは日本語にすれば修復時間ですが、技術的負債を解消するのにかかる時間をCodeClimateの基準で…

…今年2019年4月にリファクタリング専門チームを発足しました。 crowdworks.jp の最重要機能であるお金周りの機能に関して、どのような技術アプローチでリファクタしているかを紹介致します。特に、Railsには適用困難と言われているドメイン駆動設計の考え方を取り入れた手法を解説致します。 目次 背景 リファクタリング専門チーム発足 技術的負債 リファクタリング対象選定 方針①：パレートの法則（80:20の法則） 方針②：リファクタリング選定基準3軸 「仕事周り」か「お金…

…度わかるが、開発者でリファクタリングしたものなど、開発者でしかわからないものもあるので、影響範囲などちゃんと伝える必要がある これらの課題に対して、チームでは リリース管理表 を作って解決するようにしました。 この図の通り、リリースしたいものを開発者が登録し、QAさんで受け付けてリリース対象にするものを管理するようにします。 ついでに、開発者はテストをするための（影響範囲などの）情報を書くようにしています。QAさんはその情報が不十分な場合には、受け付けないような仕組みとなって…

…まとめようとすると、リファクタリングなど修正範囲が膨らむ事になり、時間が掛かると中途半端にマージして別のリファクタリングを挟む事になります。 そうなると、1つのタスクに縛られ過ぎて仕事が進んだ心地になりません。 同じような結果になるのであれば、どこまで進んで何が障害になるのか分かるような区切りにして、着実に進んでいる実感を得られた方が良いと感じました。 スプリントプランニングでゴールを決める 次に何が完成したら目的達成となるかを主題にすると上手く進むと感じました。 プロダクト…

はじめに こんにちは 今年の４月に入社した欧州サッカーが大好きな19卒エンジニアの伊達(@b0ntenmaru)です。 大学時代は体育会系の部活で汗を流しながら、独学でプログラミングを勉強してサービスを作ったりしていました。 今年のクラウドワークスの新卒エンジニアは自分一人で、周りのエンジニアはほぼ中途で入社された方という環境で、その中で日々課題ドリブンで成長するために試行錯誤しています。 今回は新人の自分が配属後２ヶ月を振り返りつつ、その中で感じた新人エンジニアが成長するた…