…バックエンドの技術的負債の解消に取り組んでいる @kotarou1192 です。 crowdworks.jp を支える Rails アプリケーションで YJIT を有効化しました。 本記事では、有効化の背景と、1週間の観察で得られたパフォーマンスの変化を報告します。 YJIT とは YJIT は Ruby 3.1 で実験的に導入された JIT コンパイラです。 Ruby 3.2 で本番利用可能な品質となり、Ruby 3.3 ではさらなるパフォーマンス改善が加えられています。 …

…プロセスの中で技術的負債に対処しようとすると、どうしても限られた時間の中で「対症療法的な解決策」を取りがちです。私たちはこの構造的な課題を変えるため、「全てのチームの施策を止めて、技術課題の解消に集中する期間」を半年ごとに設けました。 普段はスプリントゴールという主目的があるため、腰を落ち着けて根本対策を考える時間が取れません。しかし、この期間だけはバックログの奥底にある「重要だけど緊急ではない課題」に向き合えます。 合同スプリントの進め方としては、まず解決したい課題をピック…

…flake導入初期の負債 まとめ ツール導入について 各ツールの役割について、現状は以下の通りとなっています。 Amazon Redshift: クラウドワークス事業の既存データ基盤、事業ドメインの分析に利用 Salesforce Data Cloud: マーケティング施策で活用するためのデータ基盤（CDP） Snowflake: 全社向けのデータ基盤、事業横断的なデータ分析、AI連携などの役割を期待 各ツールを導入した時期を並べると、以下の順になります。 Amazon Re…

…加 合同スプリント 負債の解消 Node.js v22に更新 Vite対応のPoC ドキュメントの充実 パッケージドキュメントの充実 Vue.js実装範囲の拡大 Vitestへの移行完了 脱Sprocketsを行いWebpackとViteへ移行進行中 Viteへ移行進行中 全社共通ヘッダーの導入 おわりに 参考 過去の振り返り 脱Sprockets詳細 画像の移行 CSSの移行 JavaScriptの移行 gemからのasset移動 フロントエンド活動の総括 crowdwor…

…ざまでした。 技術的負債解消（Gemの削除、リファクタリングなど） CIの高速化 フロントエンド開発ツールのアップデートや剪定 フロントエンドの機能剪定に向けた調査 検索エンジン（OpenSearch）のパフォーマンスチューニング Rollbarから飛んでくるアラート通知の精査 仕事検索機能の改善に伴う調査 今回の合同スプリントには私が普段所属しているデリバードチーム※のエンジニア4人も全員参加したので、各メンバーに自身の取り組みの内容について振り返ってもらおうと思います。 …

…ャンヌチーム（技術的負債解消チーム）所属のlinyclarです。AI関連技術はど素人です。 生成AIコーディング時代の到来 いや、本当に到来しているのか、Clineなどが実務で使い物になるのかはわかりませんが1、AIによるコーディングが進化しているのは間違いありません。 仮に現段階で使い物にならないのだとしても、生成AIという技術上の問題点なのか、我々の使い方の問題なのか、切り分けて考えねばなりません。また、技術上の問題点は解消されていくのが常なので、常に我々の使い方に問題が…

…きたこと 続・技術的負債解消への取り組み ※我々の組織では、「技術的負債」を以下のように定義しています。 一旦それらは脇において、我々の中では「現状放置しておくと開発速度の低下を招き、やがてプロダクトの競争力を失わせる技術的要因」を指し示している。変化に適応するソフトウェアアーキテクチャと組織構造への道程 - クラウドワークス エンジニアブログ フロントエンド 昨年に引き続き、フロントエンドでの技術負債解消を中心にしつつ、品質改善の取り組みも何歩か前進した一年でした。詳しくは…

…ありました。 技術的負債が溜まっており、ヘッダーの修正コストが高い 新たにデザインシステムを適用する画面ではレスポンシブデザインを採用していたいが、ヘッダーがそれに対応していない ヘッダーのリプレイスにより無事これらの課題が解決でき、ヘッダーの変更容易性や今後のデザインシステム適用に関する懸念が払拭できました。 リプレイスにおける困難は以下にまとまっておりますので、良かったらご覧ください。 サービスのヘッダーリプレイスがたいへんだった話 - クラウドワークス エンジニアブログ…

…と、それに伴う技術的負債を抱えています。この負債を解消しない限り、新しい機能や改善を進めることが困難な場面が多くあります。例えば、フロントエンドの多くが古いERBベースのコードで記述されているため、クラウドワークスのデザインシステムを適用するにはまずVue.js化が必要になるなど、開発そのものが難しい状況です。 現在は一時的に他チームから支援を受けて負債解消やVue.js化を進めており、このサポートには非常に感謝しています。しかし、他チームに依存する形では、マッチング領域の知…

…ロントエンドの技術的負債をいくつか解消することができました。 開発ドキュメントの改善 フロントエンドに関わるメンバーが増える中、新しいメンバーを中心にドキュメントの整備が進み、よりスムーズに開発を始められるようになりました。 engineer.crowdworks.jp パッケージドキュメントの追加 ADRの導入により、パッケージ導入の判断が記録されるようになりましたが、既存のパッケージについてもドキュメントを整備し始めています。利用用途、利用箇所、削除検討、更新時の動作確認…

…タイムは短く、技術的負債も発生せずで、そのほうが嬉しかったりする この矛盾はありつつ、手札としてソフトウェア開発力を備えていない企業が生き残るとは思えないし、いざ地上戦になったときに製品開発力がないことによる「戦う前からの敗戦」を避けることはできる。そもそも新規開発に限らず、長期的に製品を保守運用するだけでも相当の技術力は必要である。 事業会社における技術戦略とはそういうものであるという解釈のもと、では自社の開発組織の強みとはなんなのかを抽出してみる。 自社の開発組織の強みの…

…指すと同時に、技術的負債の解消や新しい画面レイアウトの下準備といった意図もありました。 このブログでは、今回のヘッダーリプレイスで直面した課題やポイントを共有したいと思います。 ヘッダーの改修や多くの画面に適用されているUIパーツのリプレイスに取り組む方にとって参考になれば嬉しいです。 バリエーションの把握と、採用パターンの選択 サービス全体に反映されているヘッダーをリプレイスするには、まずどのようなバリエーションが現在存在しているのかを知る必要があります。 時には特定画面に…

…心とした課題や技術的負債の解消を目的に行っています。 先日、「SaaSUI の割れ窓リストを作ってみた話」が投稿されました。こちらは UI/UX を中心とした課題が割れ窓リストにまとめられています。 それに対しフロントエンドアッセンブルでは、この割れ窓リストの中からフロントエンドの技術的な課題を抽出し、対応しています。 課題「CSS スタイリング力向上」 次に過去に私が実施した「CSS スタイリング力向上」の取り組みを紹介させていただきます。 「CSS スタイリング力向上」の…

…した施策、管理画面の負債解消などに取り組んでいます。 私の入社時点ではチーム立ち上げ直後ということもあり、EM1名とエンジニア2名の合計3名でしたが、徐々にチームビルディングが進み、現在はEM1名・エンジニア3名・PO2名の6名体制です。 チーム設立の背景とミッション チーム立ち上げ以前の課題として、以下の2つがありました。 ユーサポは最もユーザーとの接点が多い部署であるにも関わらず、ユーサポ社員が感じている課題や気づきをサービスに反映させる環境が整っていない 技術的サポート…

…ってきたこと 技術的負債解消への取り組み 昨年のアドベントカレンダーでも書きましたが、2023年も技術的負債の解消に取り組んで参りました。 結果としては、フロントエンドでの注力の割合が大きかった一年でした。詳しくは@okuto_oyamaさんの1日目の記事をご覧ください。 記事にもありますが、Vue.js化をフロントエンドを触る全チームが行える体制に整えることで加速させていきます。 またバックエンド側でも、不要な機能の削除、不要なデータの削除、不要なライブラリの削除を地道に行…

…こともあって、技術的負債の解消も含め 2,3 ヶ月ほど時間がかかったのですが無事完了できました。 これにより、crowdworks.jp の全ページで Design Token が反映された Vue.js のコンポーネントが表示されることになります。 Footer before Footer after 全ページに関わるレベルのアウトプットが出てきたということで、社内的にもデザインシステム構築活動の認知が進んでいきました。 Component Library の導入方針決め …

…ぼいない / 技術的負債解消をミッションにしている、などの特徴があり、エンジニア経験がなく浅い知識しか持たない私には各チームにどのようにお願いしていいのかすら大変悩ましかった。 適切なタスク分解や複数チーム横断のタスク差配の難易度が高く、サービスの複雑度により見積もりも出しづらい中で、どうやってスケジュールに間に合わせるか、私には打ち手の引き出しが少なかったのである。 最終的に、@hihats さんやEMの方々のお力添えにより、残タスクを全てmiroに洗い出し、どのチームが対…

…ロントエンドの技術的負債 みんなで学ぶ Lunch LT発表 ファインディ株式会社主催のフロントエンドの技術的負債に関するLT会で、crowdworks.jp の事例を発表しました。 イベントページ Togetterまとめ crowdworks.jp のフロントエンド開発の歴史を振り返り、私が所属するチーム「ジャンヌ」での技術的負債の継続的な解消について紹介しました。また、サイボウズ株式会社、Chatwork株式会社、株式会社スリーシェイク、ファインディ株式会社の事例も学ぶこ…

…た。 入社前、技術的負債を解消するチームがある、ということを知り、その言葉の意味と意義が通じちゃんとリソースが投下される組織とはITリテラシーが高く、体力のある組織だ、と驚きました。 そして入社後、「説明が上手な人と、理解力のある人が多いからか！」とすごく単純に納得しました。 勿論それだけが理由とは思っておらず、様々な取り組みや苦い失敗などを繰り返して獲得した環境や体制だとは思いますが、そもそもシンプルに話の上手な人、話のわかる人が多い印象を持っています。 今回はブログという…

…ャンヌチーム（技術的負債解消チーム）所属のlinyclarです。 「片付ければ片付く、片付けないから片付かない」をモットーに技術的負債解消に取り組んでおります。 長年放置され負債を生み出す原因となっているRuboCop設定の見直しを最近行っています。今回はその事例を共有します。なお、RuboCopでは各チェックのことをCopと言いますが、この記事では表現のしやすさから以下ルールと書いています。 MeowCopとは MeowCopとは、簡単に言えばStyleやLayoutなどの…

…ってしまいました。時間はかかってしまいましたが、Rundeck自体の技術的な負債を粗方解消できたり、デプロイが自動化できたおかげで運用コストを激減させることができました。 まだ、Rundeckのジョブ自体に負債が残っているので、これからも改善活動を続けていきたいと思います。 We're hiring! crowdworks.jpでは、サービスが持続的に成長するために改善し続けるエンジニアを募集しています！ ご興味ある方は、ぜひお気軽にご連絡ください。 herp.careers

…てもいくつかの技術的負債が存在しています。 前職では「とにかく早く作る、早く立ち上げる」ことを大切にしてコードを書いていましたが、技術的負債となっているコード、設計を目の当たりにした時に「早いだけではダメなんだ」と実感しました。 別チームの方で負債解消のために動いてくれていますが、その様子を見たり、自分でも設計を勉強したりして持続的な成長に耐えられる開発を実現するための知恵をつけたいと思います。 まわりを観察して組織がどう動いているのかを見たい チームが目的を達成するためにど…

…works.jpでは負債解消の一環で、一部のRuby on Railsのerbで作られた画面をVue.jsに置き換える取り組みを行っています。（社内ではVue.js化と呼ばれています。） この記事では、施策チームで現在注力しているcrowdworks.jpのクライアントプロフィール画面のVue.js化の中で、ユーザーのフォロー機能を実装した際に扱った技術などについて紹介します。 対象について 本記事ではVue.js化を行っているクライアントプロフィール画面にある、プロフィール…

…ています！ 技術的な負債解消活動にて erb で記述されていた既存画面を徐々に Vue.js 化しています デザイナーを中心として作られているデザインシステム（norman）におけるコンポーネント設計と実装が進んでいます Storybook のバージョンを 6.3 から 6.5 へアップデートしました 関連記事：Vue3 での Storybook v6.3.13 から v6.5.14 にアップデートする 前年に webpack へ移行した結果、フロントエンド関連を Rails…

…ではこれまでも技術的負債解消に取り組んできていましたが、今期（10月）よりさらに人と時間をそこに集中しています。これまでこのブログでも紹介されてきたようにRuby on Railsのモノリスとなっているcrowdworks.jpにおいて、フロントエンドのVue.jsへの移行は今年に入ってから着々と進む中、バックエンドのほうは保守性の低下からどう脱却していくかが手付かずに近い状態でした。 この本丸を攻略するにあたって、闇雲にリファクタリングしていくぞ！では到底うまくいきそうにな…

…jp における技術的負債の解消をリードするジャンヌチームです。 12 月ということでアドベントカレンダーの時期ですね。今年も弊社で開催しており、合計 25 名が参加して盛り上げております。 qiita.com ジャンヌチームからは @okuto_oyama が今年のフロントエンド活動の振り返りをしていました。 engineer.crowdworks.jp その中の１つに「Webpacker から Simpacker + webpack 構成へ」というものがあり、今回はそれに関…

…ロントエンドの技術的負債としても名高かった CoffeeScript。こちらを decaffeinate にて手動で１つずつ置換していましたが、総 411 ファイルもあり非常に時間がかかっていました。それを Sprockets の変換コードを借用して、ほとんどを機械的に置き換えるという対応をしました。 変換したファイルは依然として app/asstes 配下にあるためこれを webpack 側に移行したり TypeScript 化するなどの対応はまだ残っていますが、大量にあっ…

…した。 これは技術的負債を管理下に置いていくチームに所属する身として非常に刺さるものでした。 プロダクト開発を止めずに Composition API と TypeScript に最速で移行するための戦い speakerdeck.com STORES株式会社さんによる Vue.js の Composition API と TypeScript への移行に関して。 Vue Mixins Converter と Vue composition converter を用いて自動化を…

…れ登壇いたします。 負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話 とある Rails のテンプレート + CoffeeScript で構築された画面を、 Vue.js でリプレイスしました。 その際の知見を、具体的な工夫や悩んだポイント、実際の遭遇した技術的負債の話を交えて共有できればと思います。 本セッションのキーワードは以下になります。 Vue3 の script setup + TypeScript に始まる開発体験の良さ Contain…

…分が支払い元決済機関から返金された(ユーザーの出金の手間が減っている) また、ユーザーの返金に関するコストが減ったことで、社内の出金対応運用コストも10%に減りました。 ユーザーと社内運営チームともにメリットとなり、返金のあり方に納得感もでる施策だったと思います。 We're hiring! クラウドワークスでは技術的負債の解消に興味があるエンジニアを募集しています！ 興味のある方はこちらからご応募ください。 https://crowdworks.co.jp/careers/