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 & UIkit
Search
Toshiki Ohnogi
January 15, 2020
Programming
3
3.4k
サーバサイドアプリケーションエンジニアのためのVue.js & UIkit
v-kansai #13 Lightning Talkの発表資料です。
Toshiki Ohnogi
January 15, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
240
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
700
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
230
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
CursorはMCPを使った方が良いぞ
taigakono
1
210
エラーって何種類あるの?
kajitack
5
330
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
SSAEのためのVue.js & UIKit v-kansai, 2020-01-14 Toshiki Ohnogi
自己紹介 基本情報 - 大野木俊樹(HN: Nogissh) - 神奈川県横浜市出身 - 2019年卒(新卒) 仕事
- 大阪の人材ベンチャー - アプリケーションエンジニア フィールド - サーバサイドアプリケーション - Web API - Domain Modeling - 離散最適化(凡人) - 機械学習(非DL) @nogissh
結論から言います
Vue.js & UIKitでの開発が爆速(体感) 有限時間下で複数のアプリケーションを構築可能 自主研究 賃貸管理システム (アルバイト) DJ支援 データ管理 Vue.js
(JavaScript Framework) UIKit (CSS Framework) &
ある1日の時間 この時間大切!
人生は短すぎる やりたいこと、やらないといけないこともたくさん サーバサイド アプリケーション サーバ管理 仕事 自学自習 余暇・睡眠 機械学習・最適化
フロントエンド (クライアント) バックエンド (サーバ) 領域の切り分け
ひとくちに「フロントエンド」といっても フロントエンド アプリケーション スタイル UXリサーチ 「人に魅せる」のは奥が深い... 不快の少なさ 見た目のよさ 親しみやすさ フロントエンドだけでも没入したくなる
サーバサイドエンジニアの活躍場所 サーバサイドアプリケーション フロントエンド アプリケーション モデリング 高速API アーキテクチャ 機械学習 外部連携 自動化
外界 こっちで 勝負したい
本質ではないことは早く済ませよう Vue.js (JavaScript Framework) UIKit (CSS Framework) & OOUI (OOP)
Component (OOP) SPA (ROA API) Component (OOP) サーバサイドプログラミングの知見を活かすことができます
実は全く領域の異なる「スタイル」 インフラストラクチャ サーバサイド アプリケーション スタイル リサーチ フロントエンド アプリケーション ユーザ寄り 本質的に異なる領域にも関わらず
どちらも手をつけて辛くなっていく 得意な領域で アウトプットを出すことが重要 UI・UX領域はそのあと
UIKitの紹介
UIKit: 高機能なモダンCSSフレームワーク <div class="container"> <div class="uk-card uk-card-default uk-card-body"> <h1 class="uk-text-lead">hello,
world</h1> <p>Sample text here.</p> <button class="uk-button uk-button-default uk-button-primary">Click!!</button> </div> </div> 記憶コストが低いことは爆速開発において重要 特徴 • パワフルなデフォルトのスタイル • 接頭辞の存在 ◦ 名前衝突の回避 ◦ 学習および記憶コストの軽減 uk-***-***
可視性の高いドキュメント
Vue.js & UIKitの簡単な紹介
導入しやすい組み合わせ Vue.js UIKit 導入のしやすさもピカイチ > npm install uikit
言わずもがな簡単なVue.js <template> <div> <p>hello, world</p> </div> </template> <script> export default
{ name: 'SampleComponent' } </script> 見慣れた光景 Vue.js
UIKitを適用する <template> <div class="uk-card uk-card-body"> <h1 class="uk-text-lead">Welcome</h1> <p>hello, world</p> </div>
</template> <script> import 'uikit/dist/css/uikit.css' export default { name: 'SampleComponent' } </script> UIKit classを追加するだけで立派な Card が完成
Modalもラクラク実装 <template> <div class="uk-container"> <div> <button class="uk-button uk-button-body" href="#sample-modal" uk-toggle
>Open</button> </div> <div id="sample-modal" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <p>hello, world</p> <button @click="hide">Close</button> </div> </div> </div> </template> <script> import UIKit from 'uikit' import 'uikit/dist/css/uikit.css' export default { name: 'SampleModalComponent', methods: { hide: function () { UIKit.modal('#sample-modal').hide() } } } </script> Modal of UIKit
まとめ 本質に全力投球するためにはVue.jsとUIKitのタッグが強力! > npm install uikit 今すぐ install ! フロントエンジニアにもおすすめ!
社内ツール作って欲しい とりあえず ログイン画面が欲しい 体裁だけでも整えたい! パフォーマンスに集中できる! Object Oriented Clean Component
Thanks!!