Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js + TypeScriptによる 新規サービス開発の振り返り/frontend-l...
Search
hatsune
October 28, 2020
Programming
4
1.9k
Vue.js + TypeScriptによる 新規サービス開発の振り返り/frontend-looking-back
Meetup資料
hatsune
October 28, 2020
Tweet
Share
More Decks by hatsune
See All by hatsune
フロントエンド_最強ディレクトリ構成
kitsuneeee
1
3.8k
Vue_CLIプロジェクトにViteを導入検討してみた
kitsuneeee
1
7.5k
コンポーネント間のデータやりとりを色々試してみた.pdf
kitsuneeee
0
410
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
590
受け取る人から提供する人になるということ
little_rubyist
0
250
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
ヤプリ新卒SREの オンボーディング
masaki12
0
130
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Outline View in SwiftUI
1024jp
1
330
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
A Philosophy of Restraint
colly
203
16k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
For a Future-Friendly Web
brad_frost
175
9.4k
Practical Orchestrator
shlominoach
186
10k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Transcript
Vue.js + TypeScriptによる 新規サービス開発の振り返り 株式会社ラクス 開発本部 第一開発部 UI開発課 北嶋 初音
#RAKUSMeetup 自己紹介 • 北嶋 初音 / Hatsune Kitajima • 経歴
◦ 2016年4月:Web系のITベンチャーに新卒入社 ◦ 2020年1月:ラクスに中途入社 • 現在 ◦ ラクス初のフロントエンドエンジニア ◦ 新規サービス(楽楽勤怠)の機能開発を担当 ◦ フロントエンド組織のベース作り
#RAKUSMeetup 楽楽勤怠 • 2020年10月1日に無事リリース • 今後も新機能を続々追加予定
#RAKUSMeetup 今日お話しすること 楽楽勤怠の開発初期〜リリースまでの振り返り 開発体制 利用技術 今後の開発
開発体制
#RAKUSMeetup 開発体制 - エンジニア • SPA(Single Page Application)を採用 • FE・BEを分けて開発(社内初)
FE 画面表示 BE Web API Ajax通信
#RAKUSMeetup 開発体制 - 全体 FEエンジニア(4) BEエンジニア(6) PdM(1) UIデザイナー(2)
#RAKUSMeetup 開発体制 - 全体 FEエンジニア(4) BEエンジニア(6) PdM(1) UIデザイナー(2) FE,BEを分けて開発
#RAKUSMeetup 開発体制 - 開発フロー FEエンジニア 画面実装 BEエンジニア API仕様書作成
UIデザイナー デザイン作成 PdM 要件仕様書作成 BEエンジニア API実装
#RAKUSMeetup 開発体制 - 開発フロー FEエンジニア 画面実装 BEエンジニア API仕様書作成
UIデザイナー デザイン作成 PdM 要件仕様書作成 BEエンジニア API実装 ・FE,BEが並行開発 ・APIは初めはモック ・実装後に繋ぎ込み
#RAKUSMeetup 開発体制 - 良かった点 • SPA ◦ 最小限のデータのやりとりでOK ◦ スムーズなUI/UXを実現できる
• Web API ◦ SPAと相性が良い ◦ FEのモダンなフレームワークを利用しやすい ▪ 楽楽勤怠ではVue.js採用 ◦ 再利用ができる ▪ PC版・スマホ版で同じAPIを呼べばOK
#RAKUSMeetup 開発体制 - 良かった点 • BE,FEを分けて開発 ◦ それぞれの作業に集中できる ◦ FE的には
▪ デザインの再現、画面表示・動作に注力できる ▪ APIのインターフェースだけ把握しておけばOK ◦ BE,FEが並行開発できる ▪ 開発スピードが早い(工数削減)
#RAKUSMeetup 開発体制 - 辛かった点 • 開発フロー ◦ FEが要件仕様書・デザイン・API仕様書のすべてをウォッチする必要が あり、変更に気付けないときがある ◦
【対応】ウォッチできる仕組みを作る必要がある ▪ 現状は変更者が忘れないように通知するしかない ▪ 例)チャットに自動投稿するなど
#RAKUSMeetup 開発体制 - 辛かった点 • 開発フロー ◦ デザインだけでは細かい挙動は読み取れない ◦ FEで要件仕様書・デザイン・API仕様書を組み合わせて、動作を想像し
て実装する必要がある ◦ 実装者以外が動作の正当性を分からない(レビューできない) ◦ 【対応】画面仕様書を作成する ▪ 細かい動作について記載した資料を作る ▪ 実装前にデザイナーや要件定義者のレビューを挟む
#RAKUSMeetup 開発体制 - 辛かった点 • 開発フロー ◦ FEでAPI仕様書を参考にAPIモックを作成しなければならない ◦ localで各自JSONサーバーを立ち上げて対応
◦ 正常系・異常系の全パターン網羅などがつらい ◦ API変更時の出戻りが大きい ◦ 【対応】OpenAPIでモックサーバーを立てる ▪ npmかDockerで定義ファイルからモックサーバーを立てられない か調査中(参考:swagger-typescript-codegen)
利用技術について
#RAKUSMeetup 利用技術 - フロントエンド開発 • Vue CLI(4.0.5) ◦ Babel ◦
TypeScript ◦ SCSS ◦ Vuex ◦ Vue Router ◦ Vuetify ◦ ESLint ◦ Prettier
#RAKUSMeetup 利用技術 - 良かった点 • Vue.js ◦ コンポーネント化 ▪ 基底コンポーネントが再利用可能
▪ 開発が進むほど実装スピードが上がる ▪ PC版・スマホ版でも別スタイルを当てるだけで済む ▪ scopedなCSS記述が可能 ▪ アトミックデザインとの相性が良い ◦ 高度なUI/UXの表現が可能
#RAKUSMeetup 利用技術 - 良かった点 • TypeScript ◦ 型指定で安全な開発が行える ◦ エディタの補完機能が効く
◦ ドキュメントとしても機能する ▪ 例)メソッドに型指定があると使い方が分かる
#RAKUSMeetup 利用技術 - 辛かった点 • TypeScript ◦ Vue.jsとの相性の悪さ、型が衝突する ◦ anyや!で型指定から逃げてしまっている所が多い
▪ 既存箇所は徐々に指定していくしかない ▪ 【対応】最終的にはlintではじく ◦ API仕様書の変更に気付けないと型定義がずれる ▪ 【対応】定義ファイルから型生成する仕組みを導入する ◦ enumの利用が推奨されていない ▪ 【対応】Union Types + as constに置き換える
#RAKUSMeetup 利用技術 - 辛かった点 • Vuex ◦ Storeで持つべきでない値を持ってしまっている ▪ グローバルな値なので、最小限にすべき
▪ 【対応】local変数に移動する ◦ 他画面でfetchした情報がクリアされておらず、別画面に影響を与えて いる ▪ 今までは遷移前に画面で利用したModuleの情報をクリア ▪ 【対応】画面で利用するModuleを画面呼び出し時にクリア
#RAKUSMeetup 利用技術 - 辛かった点 • Vue router ◦ 履歴管理が大変 ▪
historyに積む?積まない? ▪ 【対応】画面仕様書に記載する ◦ URLのparamを直接参照していると、画面間を高速遷移時に別画面の 同名のparam値でAPIを叩いてしまう ▪ 【対応】ローカル変数に代入することで対応
#RAKUSMeetup 利用技術 - 辛かった点 • パフォーマンス ◦ SPAなので初期表示のパフォーマンスが悪い ▪ 特にテーブル(複数API、要素数が膨大)
▪ 【対応】要素の描画を段階的に行うことで回避 ◦ 基底コンポーネントがリッチになるとパフォーマンスが劣化する ▪ 基底コンポーネントはVuetifyをラップしたもの ▪ 【対応】使っていない機能が多いので、オリジナルのものに置き換 えていくと良さそう
#RAKUSMeetup 利用技術 - 辛かった点 • テストコードがない ◦ リファクタリング時などにデグレが発生が検知できない ▪ 【対応1】テスト環境(jest)の導入
▪ 【対応2】自動テストの仕組みを作成(CI) ◦ テストを意識したコーティングになっていない ▪ Vueファイルにロジックを持ちすぎている ▪ 【対応1】helperファイルにロジックを移行 ▪ 【対応2】Vue3.0への移行、ドメイン駆動思想の導入 • Composition API
これからの開発
#RAKUSMeetup 振り返り作業 • FEチームでリリースまでの開発の振り返りを行なった ◦ 先ほどの辛かった点は振り返りで出たもの(全40件ほど) ◦ 各々がスプレッドシートに改善したい項目を記載 ◦ 重要度・緊急度の2軸でHigh・Middle・Lowで評価
◦ 緊急度Highから対応していく予定
#RAKUSMeetup これからの開発 • 新規開発・改善タスクを並行で進めていく ◦ 優先度は新規開発>改善タスク • FEの新規開発にかかる時間はコンポーネント化により少なく なってくる想定 ◦
BEよりも工数は小さくなるはず ◦ 前倒しで進めて改善タスクを対応したい
ラクスでは定期的にMeetupや 勉強会を開催しています! ご参加お待ちしています! ラクス 中途 フロントエンドエンジニアも募集しています。