IT

1. 令和２年・
１月１２日開催
Vue.js NuXT
勉強会＠WeB Bench渋谷

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

3. Vue.JSに多少触れた
HTML,CSS,JS
ググりながら進められるようになる
分かる方はLT側に回ったり、もくもく進めてください

4. 環境設定
• ①ブラウザ、 ChromeのDL
•G②ooNgloede.jsのインストール
自分のPCのターミナルで $ node –vでバージョン確認できま
す
【Mac】 Homebrewを使う場合→brew–vでバージョン確認
$ brewupdate
$brew install node.js
【Windows】http://nodejs.org/ja/から最新版をDL

5. Nuxt.jsをやる方向け

6. Nuxt.js（ナクストと
は
• Nuxt.jsとはユニバーサルなVue.jsアプリケーションを構築するため
の フレームワーク
• vue-cliを利用
• $ npm install -gvue-cli # 既にvue-cliを導入されているかたについては
不要です
• $ vue init nuxt-community/starter-template nuxt_sample

7. プロジェクトのセットアップと実
行
• $ cdnuxt_sample
• $ yarn
• $ yarndev

8. 以下、表示できたら成功

9. さらに、やりたい人
• 以下・公式https://nuxtjs.org/
• ルーティングの追加と非同期データの取得
• Nuxt.js 上での開発におけるbabelの対応文法のソース（設定プリ
セット）https://github.com/vuejs/babel-preset-vue-app
• 参照URLhttps://html5experts.jp/potato4d/24346/

10. 環境設定続
き• npmコマンドのインストール
• $ npm –vでバージョンを確認できるので最新のものにす
る
• npmパッケージのインストール
$npm installvue
vue.jsのインストール
$npm installvue
vue-cliのインストール
npm install --globalvue-cli
＊webpackやbabelを使いたい場合
$npm install webpackwebpack-dev-server–save-dev

11. プロジェクトのディレクトリの作
成
• 任意のフォルダでvueinit webpackhello-vueを実
行
・作成したディレクトリで
$ cdhello-vue
$ npm run devを実行

12. WelcomeYourvue.jsappと表示されれば成功!
http://localhost:8080でVueの表示を確認してください
*ここまでで何か質問あれば事前に連絡してください!

13. 環境設定が難しい方向け
• Codesandboxというサービスを利用
https://codesandbox.io/
• ブラウザ上で動くエディタ
• npm package対応している。
こちらでも十分に演習することは可能です。

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

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

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

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

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

19. 作成するアプリの
例• vueを活用したチャットアプリ
• メモ帳やTodoアプリなど
• 参考記事URL&Githubリポジトリ
Nuxt.jsとFirebaseによる簡易チャットアプリ
https://github.com/hayasakaharuka/nuxt-firebase-chat-app
→こちらをクローンしていただけるとスムーズです

20. 参考書籍&記事URL&②（当日、一部持っ
ていきます
初めてのシングルページアプリケーションVue.jsとFirebaseで作る
ミニWebサービス
https://booth.pm/ja/items/829853
React，Angular，Vue.js，ReactNativeを使って学ぶ はじめてのフロント
エンド開発 Kindle版
https://gihyo.jp/book/2018/978-4-7741-9706-7
Nuxt.jsビギナーズガイド―Vue.jsベースのフレームワークによるシ
ングルページアプリケーション開発
http://nakajmg.hatenablog.com/entry/2018/11/10/131233

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

22. Let’Sスタート！！