Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js + TypeScriptによる 新規サービス開発の振り返り/frontend-looking-back
hatsune
October 28, 2020
Programming
4
1.2k
Vue.js + TypeScriptによる 新規サービス開発の振り返り/frontend-looking-back
Meetup資料
hatsune
October 28, 2020
Tweet
Share
More Decks by hatsune
See All by hatsune
Vue_CLIプロジェクトにViteを導入検討してみた
kitsuneeee
1
5.7k
コンポーネント間のデータやりとりを色々試してみた.pdf
kitsuneeee
0
280
Other Decks in Programming
See All in Programming
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
lovee
2
260
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
近況PHP / PHP in now a days
uzulla
4
1.7k
Language Summit 2022: WebAssembly: Python in the browser and beyond
tiran
2
310
Reactでアプリケーションを構築する多様化
sakito
4
3.3k
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
130
Let's make a contract: the art of designing a Java API
mariofusco
0
160
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
180
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.6k
読みやすいコードを書こう
yutorin
0
400
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
インフラエンジニアの多様性と評価、またはキャリアへのつなげ方 / Careers as infrastructure engineers
katsuhisa91
0
480
Featured
See All Featured
Robots, Beer and Maslow
schacon
152
7.1k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Design by the Numbers
sachag
271
17k
A designer walks into a library…
pauljervisheath
196
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
910
Bootstrapping a Software Product
garrettdimon
295
110k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Designing for humans not robots
tammielis
241
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
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や 勉強会を開催しています! ご参加お待ちしています! ラクス 中途 フロントエンドエンジニアも募集しています。