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
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that...
Search
meijin
October 21, 2019
Programming
3
2k
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that has no designer saved by Vuetify.
meijin
October 21, 2019
Tweet
Share
More Decks by meijin
See All by meijin
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
texmeijin
1
28
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
25k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.8k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
370
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.1k
個人開発がおすすめな理由
texmeijin
3
950
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
390
初めてESLintプラグインにコントリビュートした話
texmeijin
0
170
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
74
Other Decks in Programming
See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
150
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
150
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
ML.NETで始める機械学習
ymd65536
0
230
Rubyと自由とAIと
yotii23
6
1.6k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
150
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Automating Front-end Workflow
addyosmani
1368
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Music & Morning Musume
bryan
46
6.4k
Building Adaptive Systems
keathley
40
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Navigating Team Friction
lara
183
15k
Optimizing for Happiness
mojombo
376
70k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Rails Girls Zürich Keynote
gr2m
94
13k
Transcript
デザイナー不在の スタートアップが で救われている話 Vuetify @Meijin_garden
アジェンダ 1. 自己紹介 2. UIフレームワークを使う理由 3. Vuetifyの概要 4. 【実例】コンポーネントの運用 5.
運用しての所感 2
自己紹介
自己紹介 名人(@Meijin_garden) ※「名人さん」でTwitter検索たぶん1位 4 ㈱NoSchool CTO AWS/PHP/Ruby/Firebase/Nuxt/Scss/Pug 将棋、銭湯、ドラクエXI、高校野球 技術 仕事
趣味
経歴 5 不動産情報サイト LIFULL HOME’Sの開発 勉強質問サイト NoSchoolの開発 2016.04〜2019.03 2019.03〜 株式会社LIFULL
株式会社NoSchool 社員1,000名 社員2名
プロの家庭教師が無料で回答する勉強質問サイト https://noschool.asia NoSchoolの事業内容① 6 無料で家庭教師に 勉強の質問・回答 気に入った先生に 個別指導を依頼
2万件以上の質問/回答を 写真で検索できる機能を開発・販売 NoSchoolの事業内容② 7
技術スタック バックエンド • Laravel v5.7 • AWS • Firebase /
GCP • Algolia 8 フロントエンド • Nuxt.js v2.9.2 • Vuetify v2.0 • Pug / Scss • jQuery + blade
Vuetifyの概要
Vuetify 触ったことありますか? 一度やってみたかったやつ
Vuetifyとは Vue.js向けのUIフレームワーク 11 特長① 特長② 特長③ Material Design の仕様に準拠 props
や event emit, slot が多く活用 開発が速い(瞬く間にv2.0リリース)
UIフレームワークを 使おうと思った理由
一言でいうと スタートアップの開発サイクルに 合っている(と思った)から 13 スピード重視!! うおおお
まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 14 失敗 成功! ①爆速リリース 失敗
①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略
まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 15 失敗 成功! ①爆速リリース 失敗
①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略 初期リリースから最高のデザインを 実現することはできない UIコンポーネントの 色合い、フォントサイズ、雰囲気は 合わせたい →UIフレームワークを採用しよう! しかし、最低でも
【実例】 コンポーネントの運用
Form inputs & controls • v-select • v-checkbox • v-img
• Vuelidate
Formが持つべき機能 18 入力 短文、長文、選択式、ファイル、日付… 検証 文字数、文字種別、最小最大値などの検証 送信 バックエンドのAPIにPOST / PUTする
Form に関する機能を まとめた Component を 内製しました
20 ①親からFormの仕様を渡す Page Component Form.vue • ラベル • プレースホルダー •
フォームの種類 • バリデーションの種類 渡されたObjectに基づき、 ラベルやプレースホルダー、 Validation付きのFormを 自動生成
②送信時に入力値を親へ$emit 21 Page Component Form.vue 送信ボタンの @click 時に 各 Form
の値を Object にまとめて $emit する 親はもらった値を よしなにサーバーサイドへ POST/PUTする
メリット / デメリット 22 ✓ 挙動をサイト全体で共通化できUXが良い ✓ Vue / Vuetify
に詳しくない開発メンバーでも実装可能 △ 込み入った仕様、見た目のFormは作りにくい
Components For SEO • v-breadcrumbs • v-pagination
Vuex経由でパンくずを生成 24 Page Component Breadcrumbs.vue v-breadcrumb Vuex asyncData()内で パンくずに必要なデータを StoreにSet
パンくずデータ Object Objectから 適切なパンくずを 自動生成
ページネーション① 25 Page Component Pagination.vue Props • 現在のページ • 全体のページ数
v-pagination
ページネーション② 26 Page Component Pagination @click で $emit • クリックされた
ページ番号(3) $router.push(…, { query: { page: $event } });
ページネーション実装時の注意 27 Page Component watchQuery: [“page”], NuxtではwatchQueryを指定! pageクエリが変化すると asyncData()以降を再実行
メリット / デメリット 28 ✓ LaravelのAPIとpageクエリの相性が◎ SEO関連の処理とアプリケーションが密結合しがち △ watchQueryを忘れる被害者が定期的に出る △
運用しての所感
Vuetifyの運用でやっていること 30 拡張 サイトの仕様に合わせ、 独自のComponentでVuetifyをWrapする SEO Vuetify単体ではSEOに考慮されていない PageコンポーネントやPluginで別途対応
Vuetifyだけではできないこと 31 UXの設計 経営者の目標 → UXへの落とし込み 情報設計 ユーザーの視線や慣れを意識した 要素の配置など
ワイヤーフレームを依頼 32 週1稼働のデザイナーさんにXDでワイヤーだけ依頼
XD色付け係 33
最後に
鋭意採用活動中! 35 ✓ Nuxt.jsとLaravelで次々に新規開発ができる! ✓ 勤務体系は週1の副業から応相談! e.g. 平均180PR / 月
【今の体制】 CEO + CTO + 週4フリーランス + 週1〜2の副業4人
鋭意採用活動中! 36 ✓ CGMなので中高生ユーザーの喜ぶ声が届く! ✓ スタートアップなので変化が多くて楽しい! 某KPI 月次300%成長
ご清聴 ありがとうございました @Meijin_garden