Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

BEENOS
October 20, 2021
96

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

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

BEENOS

October 20, 2021
Tweet

Transcript

  1. 新規事業LinkusにおけるVue.jsの使い方、
    また今後の課題について
    BEENOS株式会社 Linkus開発チーム テックリード 三上 孝明

    View full-size slide

  2. ABOUT
    › 三上 孝明 (Takaaki Mikami)
    › BEENOS株式会社
    › フロントエンドメイン、他薄く広く
    › 最近のおしごと
    › Linkus
    › GA/GTMのマーケサイドからの利活用推進
    › LPやフォームの新規設置、仕組み化とか
    › 実は個人プロダクトではReact派

    View full-size slide

  3. › 実は東証一部上場
    › 中核となる事業は越境EC
    › 新規事業を興したり、スタートアップに出資するなどもしてます
    › 社員/副業エンジニア絶賛募集中

    View full-size slide

  4. › Linkusでは参画する人が多様だった => スキルセットが様々
    - 社員や日本人業務委託メンバー2~4名程?
    - 越境なフリーランス(フランス/ウクライナ)
    - オフショアチーム(ベトナム/インド)
    › 各メンバーが比較的キャッチアップが容易と考えた
    - とりあえずhtml/css/jsを1枚に書いてると思えば...ヨシ!
    › Vueのマークアップを施すだけで動きをアドオンできる、手軽!
    Why Vue.js?

    View full-size slide

  5. TypeScript + Vue2 + Composition API
    › 一旦Vue2のまま `@vue/composition-api` だけ導入
    › どこかのタイミングでVue3目論んでいる
    - `v-model` で親子間のやり取りしてるとこ多いので大変そう...
    - 今日の他の方の発表から勉強させてもらいます🤓

    View full-size slide

  6. 当時の課題

    View full-size slide

  7. Vue経験が浅いチームなので啓蒙活動が必要 🤔
    › Vueだと時間かかるから、という理由でjQueryで書いちゃったり...
    - 結果的にそのコードのメンテ難易度高くてVueでリプレイスしてる
    › Vueに加えてTypeScriptもセットだと型エラーで大混戦
    - これまでは SFC + `Vue.extend` での実装が多い
    - 個人的には↑の構成だと型エラーが難しいと思ってる
    - (今日はコード例を挙げません、すいません!! 󰢛)

    View full-size slide

  8. 楽に書いて正しく成果に繋がって欲しい🔥
    › コード面
    - eslint + prettierでrule適用、formatting
    - ライブコーディング、(ペアプロ、モブプロ)
    › デザイン面
    - XDでのComponent設計
    - Component見本市としてのStorybook

    View full-size slide

  9. XDでのデザイン共有

    View full-size slide

  10. XDでのComponent設計

    View full-size slide

  11. XDでのComponent設計

    View full-size slide

  12. XDでのComponent設計

    View full-size slide

  13. Component見本市としてのStorybook

    View full-size slide

  14. 今後の課題...

    View full-size slide

  15. › Laravel Jetstream(Inertia.js)への移行
    - どなたか知見のある人〜〜〜〜🙏
    › Vue v3への移行
    - `v-model` 多用してるので、そこちょっと調整しなきゃな、という気持

    › Storybookどんどん活用していきたい
    › Buildシステム最適化等々

    View full-size slide

  16. › Vue.js採用の理由はキャッチアップ速度
    › 啓蒙のための各施策実施中
    - ライブコーディング、(ペアプロ、モブプロ)どんどんやらなきゃ...
    - XD/StorybookでComponent見本市の導入
    › 引き続き課題はたくさん!
    - Inertia.js移行, Vue v3移行, Storybook拡充, Buildシステム最適化
    まとめ

    View full-size slide

  17. We are hiring!!
    シューマツワーカーさんではTalkforというプロジェクトで募集があります!
    その他もあらゆるポジションで募集があります、是非カジュアル面談しましょう!

    View full-size slide