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

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

…と、それに伴う技術的負債を抱えています。この負債を解消しない限り、新しい機能や改善を進めることが困難な場面が多くあります。例えば、フロントエンドの多くが古い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/

…発全般における技術的負債の解消活動をするようになった現在でも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が考える、チームで向き合う技術的負債との付き合い方 負債はリボ払いみたいなもので、返すべきタイミングで返し切らないと雪だるま式に増え、返済計画がとんでもないことになります。もちろん、誰も意図的に負債を増やそうとして増やしているわけではありません。みんなわかりやすいソースコードの中で開発し…