vue

1. 【資料】７月８日開催
Vue.js 勉強会＠渋谷

2. 自己紹介
• 主催者プロフィール 三浦卓馬
• これまで大学院での学校支援プロジェクトや学会発表を経験後、
• 公立小の教員を半年間経験。その後G’sアカデミーにて新規Web サービ
スの企画立案から開発までの基礎を学びSNSを卒業制作として作成。
• またサービスの開発だけでなく、マーケティングやデータベース、サー
バーの基礎を学ぶ。 G’sアカデミー卒業後は、常駐案件のエンジニアをし
ながら、
• 今春フリーランスを経験後、エンジニアとして勤務予定。

3. この勉強会の目的と想定するレベル
・Vue.JSに触ったことない人
・HTML,CSS,JSなどやった人
・一人でもググりながら進められるようになる
＊分かる方はLT側に回ったり、もくもく進めてください
目的

4. VueJSとは何ぞや・
・UI構築のためのJSライブラリ
モダンな Web インタフェース向けのリアクティブコン
ポーネント
Vue.js公式サイト：http://jp.vuejs.org

5. GoogleにおいてAngularJSを使用した開発に
携わったエヴァン・ヨーによって開発された。
Progressive Framework→フレームワークは複雑さへ
の対処を助けるために設計
＊詳しくは動画にて
https://blog.nagisa-inc.jp/archives/2980

6. State of VueJS 2018 | Vue.js Amsterdam
Conference
https://www.youtube.com/watch?v=TRJMT9y
jONQ

7. Vue.jsの良いところ
・書き方において
・ JS (ES5)
・ビルド (Babel + Webpack, Browserify, Rollup)
・TypeScript
など選択することができます。

8. 他のフレームワークより
シンプルで自由度が高い
Vue.jsは全体にとてもシンプル！

9. もう一度使ってみたいJSフレームワーク

10. Vue.jsのモデル

11. 導入例・求人紹介
マンガZERO・https://manga-zero.com/
株式会社Nagisaが出版社、作家から許諾を得て
新作を「無料」で掲載しているマンガアプリ。
Vue.Jsを活用

12. 導入例・求人紹介
株式会社オムニス、ITxファッション領域で2015年
3月よりファッションのシェアリングサービス
「SUSTINA（サスティナ）」
https://omnisinc.co/2015/01/21/service/
Vue.jsとFirebaseを活用

13. Nuxt.jsとは

14. Nuxt.jsとはユニバーサルなVue.jsアプリケー
ションを構築するためのフレームワーク

15. 導入例
・日本初のソーシャルヘッドハンティング
SCOUTER・https://corp.scouter.co.jp/service
・ブロックチェーン技術を用いたソーシャルメ
ディア「ALIS(アリス)」

16. 続きは、、、
・【2018年版】vue.jsをmacに入れて動かすまで
やってみた
https://qiita.com/Alex_mht_code/items/a05b1b62
322b5eff4aa8
https://router.vuejs.org/ja/
https://qiita.com/cheez921/items/266b1b4534b61
11a9686

17. Vue.native資料
https://qiita.com/nitaking/items/5c6fb6990d
3bdb5769cc
https://qiita.com/taquaki-
satwo/items/523f65723cf2bf7b049a

18. 本日、何をやっていいかわからな人にオススメ
・とにかくVueに触れてみる
・初めてのシングルページアプリケーション
Vue.js と Firebase で作るミニ Web サービス
https://booth.pm/ja/items/829853
・ Vue.js でかんばんライクなタスク管理アプリを
作ってみました
https://nulab-inc.com/ja/blog/backlog/vue-js-
kanban-app/

19. 本日、何をやっていいかわからな人にオススメ
・Vue.js製フレームワークNuxt.jsではじめる
Universalアプリケーション開発
https://html5experts.jp/potato4d/24346/
・ Vue NativeでTodoアプリを作ろう その１
https://qiita.com/nitaking/items/5c6fb6990d3bdb5
769cc

20. Vue.js 日本コミュニティ
・Slack
https://vuejs-jp-slackin.herokuapp.com/

21. タイムテーブル
• 13:30 - 開場・受付開始
• 14:00 - 14:05 オープニング
• 14:05 - 14:30 自己紹介 全員
• 14:30 - 16:30 Reactでwebアプリを作成してみる
• 16:30 - 17:00 成果発表(フリートーク）
• 17:00 - 17:30 クロージング (アンケート)
• ※途中退場可能

22. 会場の注意事項
• 備品など間違って持ち帰らないように
• 飲酒は禁止です。
• 17時15分には撤収予定です。
• もし、Reactの案件やこんなサービス使ってるなど、
参加者の方でLTしたい方は事前に申し出てください！

23. グループを３つに分けます
vue初心者の方
環境構築やvueに触り始めの方
自分で何かしらのの開発経験がある方 もくもくと進めたい方

24. 本日の目標
何かしらのWebサービスを作成する
・例 会員制のTo doサイト
・チャットサイト
・ブログサイト
参考
皆様に作業する箱を提供しますので各自、もくもく進めましょう！
＊質問はバンバンOKです！

25. Let’Sスタート！！