…した施策、管理画面の負債解消などに取り組んでいます。 私の入社時点ではチーム立ち上げ直後ということもあり、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/

…発全般における技術的負債の解消活動をするようになった現在でもHTMLは構文エラーなく書くように意識したり社内コーディングチェック書の策定に関わったり、markuplintの導入1などHTMLとは様々な形で付き合い続けている。 そういった関わりをもっていても、HTML解体新書を眺めているとHTMLのマークアップルールや仕様についてまだ知らなかったことが多かったのだと気付かされたのだ。 HTML要素の属性で廃止となった部分についてや、特に文字参照や「2-8 HTMLの細かい構文ル…

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

…はクラウドワークスの負債を管理下に置くことがミッションのチームです。 問題の大きさに合わせて、直接解決する場合や、他チームと連動したりこちらから依頼することもあります。 弊社のアドベントカレンダー「crowdworks.jp のフロントエンド活動を振り返る 2021」の記事で触れていた Vue 3 移行が完了したので、その報告になります。 Save the date: Vue 3 is becoming the new default version on Monday Fe…

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

…要があると考えています。 それらを押し進めていくためにもデータ分析基盤チームの誕生が望まれます。 そういうわけで私達と一緒に１からデータ分析基盤を作っていきたいというエンジニアを絶賛募集しております！ データ分析基盤はまだチームとしても存在していない状況ですが、クラウドワークスでは時代が経ち様々な負債を抱えたシステムを改善していこうというチームも立ち上がりました。 興味がある方やお話を聞きたいという方は是非DMやリンクページからの応募をお願いします。 herp.careers

…しれません。 技術的負債の積み方 今でこそ技術的負債とどう向き合うかのエントリが増えましたが、実際どう向き合うかは人それぞれです。自分が今でも参考にしているエントリはこちらの連載です。 CTOが考える、チームで向き合う技術的負債との付き合い方 負債はリボ払いみたいなもので、返すべきタイミングで返し切らないと雪だるま式に増え、返済計画がとんでもないことになります。もちろん、誰も意図的に負債を増やそうとして増やしているわけではありません。みんなわかりやすいソースコードの中で開発し…

…な施策を開発する際の負債となって立ちはだかってしまいます(しまいました)。 この借金を少しでも返済すべく、 2020 年 9 月にシステム・サービスの維持とエンジニア業務の効率化をミッションとするチームが作られました。 ミッション 維持しているメンバーを明確に見える化し、定常的に取り組みが行えるようにする 不足を補い、正常な維持が行えるように人のアサインを行う 放置されていたプロダクトの整理を行う 思い思いに構築されているシステムの整理を行う エンジニアが動かないと情報が得ら…

…0年目を迎え、技術的負債や組織的な課題が増えている状況であり、皆なんとなく短期的な業績には紐づかないがやらないといけないことを認知しつつも、それをどう優先度をつけて対応するかが言語化できておらず、後回しにされるような状態でした。 具体的には、業績を見ている人からすると、技術的負債の解消の優先度が下がってしまう傾向がありました。 この状況を改善していく為に、プロダクト開発における議論や行動の土台となるものが必要と考え、ポリシーの策定を開始しました。 プロダクト開発ポリシーの作成…

…使い続けることは技術負債を抱え続けることになり、"もううんざりだ！"と述べています。 The perils of using Internet Explorer as your default browser このような問題と向き合い、なるべく多くのブラウザでの動作保証も大事です。しかし、Microsoftの動向を鑑みると、表現の制約を減らし新しいことへの挑戦や、UIの効果的な表現の実現に時間を使いたいと考えます。 動作確認の難しさ クラウドワークスのエンジニア・デザイナが開…

…ます。 また、技術的負債に対しての取り組みも継続しています。 2015年のブログ記事にすでに技術的負債という言葉が出ていますが、これまでの4年間でも、テストコードの充実や、リファクタリングや再設計の模索等多くの取り組みがなされてきました。現在は、コードの保守性を高めるにあたって、もっとも効果の高い箇所を洗い出し、その部分に対して集中して改善を行うため、crowdworks.jpのコアドメインについての深堀りが進められています。 中長期を見据えた組織の形の模索 現在の開発組織の…

…ングになったら技術的負債解消に取り組むか？いつ社内オペレーションの改善に取り組むか？いつ違反対策に取り組むか？そのような観点も失ってはいけません。 本来はプロダクトマネージャーないしプロダクトマネジメントを担う部署が全体を把握し、バランスを意識しながらも短期・中期・長期で戦略を立てるべきところと考えます。 しかし長らく組織として「サービスとは＜体験の循環＞だ」という認識がなかったため、全体のバランスを把握しようとする動きもなければ、それに基づいた戦略を考えることもできていませ…

…ントエンド環境のまま負債となっている箇所があります。 このままその基盤に乗ったままだと後続の開発者に負担を強いることになってしまいかねないため、TypeScript や Vue.js での開発も推進しています。 engineer.crowdworks.jp こうすることで後続のエンジニアたちの参入障壁を減らしモダンな開発を行えるようになるので、地道ではありますが、非常に大切な活動になっています。 フロントエンド開発でのチーム越境レビュー 他チームからフロントエンドレビューを依…

…にバズっていた技術的負債の解消などはデータベース構造のリファクタリングの動機となりえます。 改修前のざっくりとした構造 今回の話題の登場人物を示しています。 ※ ここでの名前は、ある程度抽象したものに置き換えており実際の名前とは異なります。 「ユーザ (User)」はクラウドテックに登録くださっているユーザそのものを表します。 「クライアント (Client)」はクラウドテックに案件を提供くださっている企業を表します。 「案件 (Project)」は、特定のクライアントの案件…