新規事業LinkusにおけるVue.jsの使い方、また今後の課題について

2021/10/13(水)19:30に開催された、シューマツワーカー様主催のイベント”シューマイ”「Tech Lead Engineerから最新技術を学べ！Vue.js/Next.js編」
に登壇した際に発表した資料です。

Transcript

1. 新規事業LinkusにおけるVue.jsの使い方、 また今後の課題について BEENOS株式会社 Linkus開発チーム テックリード 三上 孝明
2. ABOUT › 三上 孝明 (Takaaki Mikami) › BEENOS株式会社 › フロントエンドメイン、他薄く広く › 最近のおしごと › Linkus › GA/GTMのマーケサイドからの利活用推進 › LPやフォームの新規設置、仕組み化とか › 実は個人プロダクトではReact派
3. BEENOS…?
4. › 実は東証一部上場 › 中核となる事業は越境EC › 新規事業を興したり、スタートアップに出資するなどもしてます › 社員/副業エンジニア絶賛募集中
6. Why Vue.js?
7. › Linkusでは参画する人が多様だった => スキルセットが様々 - 社員や日本人業務委託メンバー2~4名程？ - 越境なフリーランス（フランス/ウクライナ） - オフショアチーム（ベトナム/インド） › 各メンバーが比較的キャッチアップが容易と考えた - とりあえずhtml/css/jsを1枚に書いてると思えば...ヨシ！ › Vueのマークアップを施すだけで動きをアドオンできる、手軽！ Why Vue.js?
8. TypeScript + Vue2 + Composition API › 一旦Vue2のまま `@vue/composition-api` だけ導入 › どこかのタイミングでVue3目論んでいる - `v-model` で親子間のやり取りしてるとこ多いので大変そう... - 今日の他の方の発表から勉強させてもらいます🤓
9. 当時の課題
10. Vue経験が浅いチームなので啓蒙活動が必要 🤔 › Vueだと時間かかるから、という理由でjQueryで書いちゃったり... - 結果的にそのコードのメンテ難易度高くてVueでリプレイスしてる › Vueに加えてTypeScriptもセットだと型エラーで大混戦 - これまでは SFC + `Vue.extend` での実装が多い - 個人的には↑の構成だと型エラーが難しいと思ってる - （今日はコード例を挙げません、すいません!! 󰢛）
11. 楽に書いて正しく成果に繋がって欲しい🔥 › コード面 - eslint + prettierでrule適用、formatting - ライブコーディング、（ペアプロ、モブプロ） › デザイン面 - XDでのComponent設計 - Component見本市としてのStorybook
12. XDでのデザイン共有
13. XDでのComponent設計
14. XDでのComponent設計
15. XDでのComponent設計
16. Component見本市としてのStorybook
17. 今後の課題...
18. › Laravel Jetstream(Inertia.js)への移行 - どなたか知見のある人〜〜〜〜🙏 › Vue v3への移行 - `v-model` 多用してるので、そこちょっと調整しなきゃな、という気持 ち › Storybookどんどん活用していきたい › Buildシステム最適化等々
19. › Vue.js採用の理由はキャッチアップ速度 › 啓蒙のための各施策実施中 - ライブコーディング、（ペアプロ、モブプロ）どんどんやらなきゃ... - XD/StorybookでComponent見本市の導入 › 引き続き課題はたくさん！ - Inertia.js移行, Vue v3移行, Storybook拡充, Buildシステム最適化 まとめ
20. We are hiring!! シューマツワーカーさんではTalkforというプロジェクトで募集があります！ その他もあらゆるポジションで募集があります、是非カジュアル面談しましょう！