エンジニア力底辺のデザイナーが Vue.jsチャレンジ?
Download as PPTX, PDF3 likes496 views
2019年11月21日(木)に开催しました、エンジニア文化祭～新技术へのチャレンジ～の资料です。
More Related Content
What's hot (19)
Similar to エンジニア力底辺のデザイナーが Vue.jsチャレンジ? (20)
![[TL09] 突撃! 隣の Visual Studio Team Services / Team Foundation Server ~利用者からのベスト...](https://cdn.slidesharecdn.com/ss_thumbnails/tl09-170614050650-thumbnail.jpg?width=560&fit=bounds)
![Visual Studio Online BUILD を本気で使いこなして品質＆効率を劇的に上げる！ [ Comm Tech Festival ] C-4](https://cdn.slidesharecdn.com/ss_thumbnails/commtechfestivalvso2015build-150926103603-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
More from ceres-inc (6)
エンジニア力底辺のデザイナーが Vue.jsチャレンジ?
- 2. 結論、底辺にVue.jsは難しかった The Power of PowerPoint | thepopp.com 2
- 3. The Power of PowerPoint | thepopp.com 3 篠崎 真由美 社内システム開発チームで UIデザイン担当 WEB デザイナー 自己紹介1/2
- 4. The Power of PowerPoint | thepopp.com 4 ? HTML/CSS： 人並み ? Javascript ： とりあえずjQuery。ES2015って何？ ? Vue.js ： ドットインストールのVue.js入門修了 自己紹介2/2 コーディングレベル
- 5. なぜVue.jsにチャレンジしたか 目次 The Power of PowerPoint | thepopp.com 5 #0 1 Vue.jsで何か作ってみた #0 2 底辺でもできたこと、 できなかったこと #0 3 まとめ #0 4
- 7. The Power of PowerPoint | thepopp.com 7 Vue.jsとは？ ? UI構築のプログレッシブな JSフレームワーク ? jQueryライクに JSライブラリとして導入が容易 ? 高機能なSPAの構築も可能 シンプル設計で 学習コストが低いらしい？ #01 なぜVue.jsにチャレンジしたか
- 8. The Power of PowerPoint | thepopp.com 8 セレスでも Vue.jsの利用増加 フロントエンドが できると評価UP！ #01 なぜVue.jsにチャレンジしたか
- 9. The Power of PowerPoint | thepopp.com 9 セレスでも Vue.jsの利用増加 フロントエンドが できると評価UP!! #01 なぜVue.jsにチャレンジしたか 給料UPのチャンス？
- 12. The Power of PowerPoint | thepopp.com 12 過去に制作した画像の 管理ツール #02 Vue.jsで何か作ってみた 作ろうとしたもの
- 13. SHOWCASE
- 14. The Power of PowerPoint | thepopp.com 14 機能要件 画像を案件ごとに 一覧表示 キーワードで 絞り込み検索 絞込結果の リアルタイム反映 絞込キーワードの サジェスト表示 画像の新規追加? 編集?削除 #02 Vue.jsで何か作ってみた
- 15. The Power of PowerPoint | thepopp.com 15 #02 Vue.jsで何か作ってみた 作れたもの ? 単一キーワードで絞込検索が できる、案件ごとの画像一覧 表示画面 ? 画像データはjsonを手動更新
- 16. The Power of PowerPoint | thepopp.com 16 機能要件 画像を案件ごとに 一覧表示 キーワードで 絞り込み検索 絞込結果の リアルタイム反映 絞込キーワードの サジェスト表示 画像の新規追加? 編集?削除 #02 Vue.jsで何か作ってみた
- 18. The Power of PowerPoint | thepopp.com 18 1 できたこと4つ 2 3 4 jsonデータの読み込み 条件分岐と レンダリング フォーム入力 バインディング 文字列検索 #03 底辺でもできたこと、できなかったこと
- 19. The Power of PowerPoint | thepopp.com 19 1 2 3 4 jsonデータの読み込み 条件分岐と レンダリング フォーム入力 バインディング 文字列検索 #03 底辺でもできたこと、できなかったこと axiosで読みこませる できたこと4つ mountedって何？
- 20. The Power of PowerPoint | thepopp.com 20 1 2 3 4 jsonデータの読み込み 条件分岐と レンダリング フォーム入力 バインディング 文字列検索 #03 底辺でもできたこと、できなかったこと v-bind, v-if , v-for できたこと4つ
- 21. The Power of PowerPoint | thepopp.com 21 1 2 3 4 jsonデータの読み込み 条件分岐と レンダリング フォーム入力 バインディング 文字列検索 #03 底辺でもできたこと、できなかったこと Inputタグにv-model できたこと4つ
- 22. The Power of PowerPoint | thepopp.com 22 1 2 3 4 jsonデータの読み込み 条件分岐と レンダリング フォーム入力 バインディング 文字列検索 #03 底辺でもできたこと、できなかったこと indexOf()メソッド できたこと4つ computedって何？
- 23. The Power of PowerPoint | thepopp.com 23 できなかったこと2つ 新規追加、編集機能 サジェスト表示 #03 底辺でもできたこと、できなかったこと ?Vue.jsにjson書換機能はな い ?DB連携する力はない ?ライブリがうまく 設定できなかった (vue-simple-suggest)
- 24. The Power of PowerPoint | thepopp.com 24 壁 ? mounted がわからない ? computed がわからない ? method がわからない #03 底辺でもできたこと、できなかったこと
- 25. The Power of PowerPoint | thepopp.com 25 時間＋α 工数
- 26. The Power of PowerPoint | thepopp.com 26 タイムライン内訳
- 27. #04 まとめ
- 29. 結論、底辺にVue.jsは難しかった The Power of PowerPoint | thepopp.com 29
Editor's Notes
- #4: 「冒頭でも」 Webデザイン歴15年 普段は、Photoshopで画像つくったり HTHML/CSSでマークアップしたり、 社歴は長い方で、 以前は、プロダクトマネジメントとか、デザイナー採用とか、雑用なんかも昔やってた 最近は余り物の案件とかよく回ってきます。
- #5: HTML/CSS：15年やってればこれくらいできるよね。って期待するより、ちょっと出来ないくらい JS： if/for は書けるかな。 最近のESなんとかはさっぱりわかりません。 Vue,js は公式のチュートリアルを途中までやりました ４年前にAngularの案件に参加→Typescriptかけないと話にならない。
- #6: さっそく
- #8: みなさんもうご存じのことと --- よくいわれるのが、シンプル設計で 学習コストが低い、らしい？ とても流行ってます
- #9: もちろんセレスでも? 知ってる範囲 →管理画面はPHP+Bootstrapが定番、 →これから作るor作り直そうVue.js/Vuetify/Vuex組み合わせが候補にあがるようになってきました。 理由はよくわからない。 そもそも弊社フロントエンドのプロフェッショナルがずっと不在で、JSできる人がほしい デザイナーもフロントエンド理解してよ、という圧がある 「API作ったからあとよろしく、にしたい」ってしばしば耳にします。 これはつまり、
- #10: フロントエンドはセレスにとってブルーオーシャン、ならば「ちょっとできます」って顔ができれば、評価と給料があがるんでは？という気持ち シンプル設計で学習コストが低いらしいVue.jsなら出来るかもしれない、
- #11: なにはともあれ手を动かいしてみよう、作ってみよう。
- #12: ImageSearch 検索窓にキーワードをいれると該当する画像がでてきます これはなにか、なにを作ろうとしたか
- #14: 弊社の事情としてまして、 広告事業をメインにしているので、大量の訴求画像を作ります。 １，０００件単位で。 なにで管理？ー＞ ざっくり：画像URLをテキストデータで管理。追加削除も手動、探すのもCtr+Fと目視。
- #15: 機能としては５つ、 https://xd.adobe.com/view/52e77766-7d85-4bc5-7b28-9024f7435a52-24d6/
- #16: じゃあ、なにが作れたか、
- #17: 複数キーワード対応、And/OR検索はできず なにが出来てなにが出来なかったか、は次で具体的に説明
- #19: ?Jsonデータの読み込み＆読み込めるようにjsonデータを作れた ?そのデータを条件分岐等々をもちいて画面表示 ?フォーム入力したキーワードを、リアルタイムで表示反映する ?文字列検索
- #20: Axios https://github.com/axios/axios Promise based HTTP client for the browser and node.js ブラウザや node.js で動く Promise ベースとした HTTP クライアント 外部データを取得できる、って認識 ただ、mountedってなに？ --------- ※コードみてもらいながらでもOK※
- #21: Vueの ディレクティブ https://jp.vuejs.org/v2/guide/conditional.html 取得した画像データを、HTMLに出力し、ifやforを使って出し分けする 公式リファレンス参照して悩まずにできました
- #22: V-model: 双方向データバインディング Inputに入力したデータがModel と View（HTML）の双方に反映される 公式のリファレンスのままやった
- #23: indexOfメソットで文字列検索をした 底辺でもわかるJSの基礎の基礎でできる Computedってなに？ 算出プロパティ… がｚぴまおし
- #24: わなんかいこと説明できない https://www.npmjs.com/package/vue-simple-suggest methodって… ?mountedで読み込んだjson使えないの？→解決せず できなかったこと＝わからなかったこと、なにがわからないのか説明できない
- #25: なにがわからなかったか そもそもプログライミングの基礎が出来てないので、 なにいってるかわからない。 さらに学習していく必要があるなと感じた。 ちなみに工数は
- #26: ちなみに工数は Method ってなんだ？Computedってなんだ？結局わららなかった、と調べる時間が＋アルファの部分 Jsonデータつくる時間は別でとっています。 内訳は
- #27: 実際このツールっぽいものを作るのにかかった時間 この工数の評価がどうなのかわかりません わからないところ放置したとしても、自分としては意外とかからなかったな。という印象 形になるまで非常にスムーズにいきました
- #30: セレスでフロントエンドはブルーオーシャン。贵贰できる人、需要が高いです。ご兴味あるかた、ご一考ください。
- #31: 以上で発表をおわります、