エンジニア力底辺のデザイナーが Vue.jsチャレンジ

エンジニア力底辺のデザイナーが
Vue.jsチャレンジ
株式会社セレス
サービスエンジニアリング部インフラグループ所属
篠崎真由美

結論、底辺にVue.jsは難しかった
The Power of PowerPoint | thepopp.com 2

篠崎真由美
社内システム開発チームで
UIデザイン担当
WEB デザイナー
自己紹介1/2

 HTML/CSS：人並み
 Javascript ：とりあえずjQuery。ES2015って何？
 Vue.js ：ドットインストールのVue.js入門修了
自己紹介2/2
コーディングレベル

なぜVue.jsにチャレンジしたか
目次
#0
1
Vue.jsで何か作ってみた
#0
2
底辺でもできたこと、
できなかったこと
#0
3
まとめ
#0
4

# 01
なぜVue.jsにチャレンジしたか

Vue.jsとは？
 UI構築のプログレッシブな
JSフレームワーク
 jQueryライクに
JSライブラリとして導入が容易
 高機能なSPAの構築も可能
シンプル設計で
学習コストが低いらしい？
#01 なぜVue.jsにチャレンジしたか

セレスでも
Vue.jsの利用増加
フロントエンドが
できると評価UP！

セレスでも
Vue.jsの利用増加
フロントエンドが
できると評価UP!!
給料UPのチャンス？

# 02
Vue.jsで何か作ってみた

実際の画面を
ご覧ください
#02 Vue.jsで何か作ってみた

過去に制作した画像の
管理ツール
作ろうとしたもの

機能要件
画像を案件ごとに
一覧表示
キーワードで
絞り込み検索
絞込結果の
リアルタイム反映
絞込キーワードの
サジェスト表示
画像の新規追加・
編集・削除

作れたもの
 単一キーワードで絞込検索が
できる、案件ごとの画像一覧
表示画面
 画像データはjsonを手動更新

機能要件
画像を案件ごとに
一覧表示
キーワードで
絞り込み検索
絞込結果の
リアルタイム反映
絞込キーワードの
サジェスト表示
画像の新規追加・
編集・削除

#03
底辺でもできたこと
できなかったこと

1
できたこと4つ
2
3 4
jsonデータの読み込み条件分岐と
レンダリング
フォーム入力
バインディング
文字列検索
#03 底辺でもできたこと、できなかったこと

1 2
3 4
レンダリング
フォーム入力
文字列検索
axiosで読みこませる
できたこと4つ
mountedって何？

1 2
3 4
レンダリング
フォーム入力
文字列検索
v-bind, v-if , v-for
できたこと4つ

1 2
3 4
レンダリング
フォーム入力
文字列検索
Inputタグにv-model
できたこと4つ

1 2
3 4
レンダリング
フォーム入力
文字列検索
indexOf()メソッド
できたこと4つ
computedって何？

できなかったこと2つ
新規追加、編集機能サジェスト表示
Vue.jsにjson書換機能はな
い
DB連携する力はない
ライブリがうまく
設定できなかった
(vue-simple-suggest)

壁
 mounted がわからない
 computed がわからない
 method がわからない

時間＋α
工数

タイムライン内訳

JSの基礎知識だけでも作れそう
処理を複雑にしていくには、
プログラミングの基礎＋Vue.jsの概念の理
解が必要だった

結論、底辺にVue.jsは難しかった

以上、ご清聴ありがとうございました

Recommended