こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。
なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。
Design System Meets Vue.js
エンジニアリングマネージャーの芳賀です。
今回はクラウドサインとデザインシステムの成長にフォーカスをあてて発表させていただきました。 デザインの管理系ツールとフロントエンドの管理系ツールの組み合わせは膨大にあり、かつ具体事例もたくさん拝見してきております。 そのすべてが輝かしく見え、ついつい手を伸ばしたくなります。 （私もその一人ですｗ）
ただ、そのタイミングを見極めないとオーバーエンジニアリングになったり、後追いになってしまったりしがちです。 では何を基準にして選択・導入・変化していくか、ですが 我々としては、サービスの事業成長、組織成長、スキルを俯瞰して考えていく必要があるかなと感じております。
具体的な内容につきましては クラウドサイントラックの 01:24:31 ごろ にて発表しておりますのでご覧いただけますと嬉しいです！
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
フロントエンドエンジニアの山田です。
こちらのセッションは株式会社クラウドワークスさんによるレガシーなフロントエンドをリプレイスした話です。
具体的には Rails + jQuery によって実装された画面により以下の課題があったそうです。
- 見た目を変えたいだけなのにバックエンドもいじる必要がある。
- フロントエンドとバックエンドの分業がしにくい。
- jQuery から脱却したい。
それらを Vue.js 化によって解決した、ということでした。
まずプロジェクトにおいて大まかな方針、優先順位を決め、そしてやること・やらないことを明確にしたとのことです。 ことリファクタリング的な意味をもつプロジェクトでは、やろうと思えば理想を追い求めてどこまでもやれてしまいます。 プロジェクトには達成すべき目的があり、人的リソースと時間も限られます。そのため、どこまでやるかの境界線を最初に設定することが非常に大事だと思いました。
セッションの後半では既存の API の JSON 形式のレスポンスに HTML が含まれている例を紹介されていました。 既存のレスポンスを破壊的に変更するのではなく必要な要素を追加することで対応しサービスへの影響度をなるべく小さくすることを意識して進められていました。 サービスへの安定性を求められるクラウドサインのエンジニアとしても共感をもちました。
Vue.js でアクセシブルなコンポーネントをつくるために
フロントエンドエンジニアの @tee_talog です。 株式会社クラウドワークスさんのセッションについて書かせていただきます。
こちらのセッションでは、Vue.js で開発する際にアクセシビリティの向上に取り組みやすくなる、3 つのテーマを発表されていました。
- 誤ったアクセシビリティ対応
- 汎用性のあるアクセシブルなコンポーネント
- アクセシビリティテスト・チェック
発表内容で驚いたのが、「Vue.js でのアクセシビリティ対応は平均より 24.8% も低い」という調査結果が出ていることです。ライブラリやフレームワークは関係ないとはいえ、Vue.js と比較されることが多い React は -0.1% と平均的な数値になっているのと対照的です。 このような数字が示されている中で、Vue.js を利用しているユーザーのアクセシビリティへの関心を高めるという取り組みに感銘を受けました。
アクセシビリティ対応というものに完璧なものはないので、間違いを見つけたら焦らずに確実に直していくことが大切です。
まとめでおっしゃっていたこの言葉に思わず唸ってしまいました。 最初から 100% を目指すのではなく、一歩一歩着実に上を目指すことが大事だということを、あらためて実感しました。
余談ですが、「誤ったアクセシビリティ対応」セクションでは、弊社の太田が執筆した「 HTML 解体新書 」もおすすめされていました。気になった方はぜひご覧ください（ダイレクトマーケティング）
安全に開発効率を上げるための Vue 2.7 移行
フロントエンドエンジニアの篠田(@tttttt_621_s)です。
こちらのセッションは、株式会社 iCARE さんのプロダクトで Vue 2.6 + @vue/composition-api から、Vue 2.7 に移行した話でした。
主に以下の事について発表されていました。
- なぜ移行先は Vue 3 でなく、Vue 2.7 を選んだのか
- Vue 2.7 を経由するメリットと注意点
- 段階的に Vue のバージョンアップが必要な理由
- Vue 2.7 移行へのつまずきポイント
弊社プロダクトの CloudSign も Vue 2.6 + @vue/composition-api の構成で開発しており、今後 Vue 2.7 へ移行するため非常に刺さる内容でした。
実際に手を動かしたことで得られる Vue 2.7 を経由するメリットやつまずきポイントは、はじめて聞くものが多く個人的にとても学びになりました。
また Vue 2 の EOL までに段階的に移行するため、Vue 2.7 と Vue 3 の 2 つのマイルストーンを置いて分割していくアプローチが参考になりました。
プロダクトの安定性を担保するためにも段階的に移行し、負担とリスクを軽減することが重要であると実感しました。
プロダクト開発を止めずに Composition API と TypeScript に最速で移行するための戦い
フロントエンドエンジニアの辻です。
こちらのセッションは、STORES 株式会社さんの Composition API と TypeScript の移行についてのお話でした。
移行に際して、Options API と mixins を使った実装を Composition API と composable で実装する形に分解、その作業を作成した自動化ツールを使って行うことで、手動だと 1 ファイルの移行に 1 時間かかっていたものを 20 秒で完了できるようにしたというものでした。 リファクタリング時に自動化ツールの作成や導入を行うといった進め方は、弊社プロダクトでも参考にできる部分があり非常に学びになりました。
またモチベーションを維持しづらいリファクタリングの作業をできるだけ小さく細分化することで 1 日最低 1 プルリクエスト出せる状態にしたり、 DataDog のメトリクスで何％完了しているのか可視化するといった進め方も参考になりました。
Vue2 Vue3 マイグレーション 令和最新 最強
フロントエンドエンジニアの森です。
こちらのセッションは、STUDIO 株式会社さんの エディタ機能における Vue 2 から Vue 3 の移行についての発表でした。
1000コンポーネント以上のある巨大なソースコードを体験ベースでどう移行していったのかを主に話していました。
Vue 3が正式リリースするまでの歴史- 最初に
webpack→Viteを変更することによりBuildの時間を大幅短縮 + プロジェクト全体でVue 3に対するモチベーションアップ - 正規表現での変換 + 独自ツール で Composition化 を半自動化
- 移行時のハマったポイント
1000コンポーネントのある大幅なマイグレーションと1人で戦っていることは、純粋に凄いなと思いました。 手作業でやるには、辛い部分が多すぎるのでいかに自動化していくのかがとても参考になりました。
ただ、今回は一気にVue 3に移行したのもあり、通常の開発も進んでいく中でマイグレーション用のブランチとコンフリクトが大量発生した話もあったので
そこは作業などを細分化して徐々に以降していくなどの工夫が必要だなと感じました。
おわりに
はじめに、当日までご尽力いただいた運営スタッフのみなさん、ありがとうございました。 オフラインとオンラインの組み合わせという新しい開催形式で、 「どうなるかな」というワクワクを持ちながら配信画面を見つめておりました。 期待を上回るくらいの「盛り上げよう、楽しもう」という熱量が画面越しにも伝わるカンファレンスでした。 あらためてありがとうございました。
我々としても久しぶりの Vue Fes ということもあり、非常に面白く、かつ大いに収穫のあるカンファレンスでした。 これからの Vue であったり、今まさに弊社内でやろうとしていたことに刺さる内容であったり... みなさんのノウハウを吸収しつつクラウドサインとしてもより成長していければと思います。
具体的にどのようなことを考えているかについては meety でお話できればと思います。 （採用ページ もよろしければ！）
ありがとうございました。
