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
2k
Vue.js + TypeScriptによる 新規サービス開発の振り返り/frontend-looking-back
Meetup資料
hatsune
October 28, 2020
Tweet
Share
More Decks by hatsune
See All by hatsune
フロントエンド_最強ディレクトリ構成
kitsuneeee
1
4.7k
Vue_CLIプロジェクトにViteを導入検討してみた
kitsuneeee
1
7.7k
コンポーネント間のデータやりとりを色々試してみた.pdf
kitsuneeee
0
460
Other Decks in Programming
See All in Programming
AIのメモリー
watany
12
1.2k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
階層化自動テストで開発に機動力を
ickx
1
470
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
画像コンペでのベースラインモデルの育て方
tattaka
3
930
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
Featured
See All Featured
Docker and Python
trallard
45
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Practical Orchestrator
shlominoach
190
11k
Writing Fast Ruby
sferik
628
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Language of Interfaces
destraynor
158
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
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や 勉強会を開催しています! ご参加お待ちしています! ラクス 中途 フロントエンドエンジニアも募集しています。