がんばらない Vue.js / Vuejs on VS Code & TypeScript

de:code 2019 で発表したスライドです。

Web フロントエンドの開発で近年人気が高まっている Vue.js ですが、移り変わりの激しいフロントエンド技術を追いかけることが目的になってしまい、開発自体の効率がなかなか上がらないという声もよく聞きます。

このセッションでは、Visual Studio Code + TypeScript 利用してクールに Vue.js を開発できる手法や Tips を紹介します。

Transcript

3. About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP Vue.js 日本ユーザーグループ コアスタッフ typescript‑jp 立ち上げスタッフ PaaS がかりの部屋(Blog): https://k‑miyake.github.io/blog/
4. Vue.js の現状 JavaScript フレームワークのひとつ React, Angular と並んで人気がある GitHub Star: 約 13,900 プログレッシブフレームワーク 初学者でも習得しやすい: 日本語の 公式サイト や書籍が充実 小さくはじめられる: プログレッシブフレームワーク 常に進化している 2019 年は 3.x へのメジャーバージョンアップが予定されている
5. 日本国内でもユーザーが急増中 Meetup は数分で満員に！ 2018 年 11 月に Vue Fes Japan 2018 が開催された 日本初となる大規模 Vue.js カンファレンス Vue.js の作者である Evan You が Vue.js 3.0 のコンセプトを説明した Vue Fes Japan 2019 も開催決定！
6. Vue.js は何でつくる？ エディタ / IDE は何が良いの？ トランスパイルはどうしよう。
7. がんばらない人() => VS Code + TypeScript 定番の開発環境 TypeScript 必須ではないが、これからやるなら推奨 2019 年中のリリースが計画されている Vue.js 3.x では TypeScript サポートの大幅 な改善が予定されている クラス形式ではなく、 Vue.extend 方式がおすすめ （理由は こちら ） Visual Studio Code Vetur 機能拡張 .vue ファイル(SFC) + TypeScript で開発するならほぼ必須
8. Vetur 使用前 / 使用後
9. Vue.js をどうはじめる？ JS の開発では、 npm などの各種ツールやライブラリの組み合わせが必要となるため、 開発をはじめるまでのオーバーヘッドが大きくなる傾向にある ‑> 疲弊しやすく、あまり価値もない
10. がんばらない人() => Vue CLI Vue CLI Vue.js の開発環境を整えてくれる 公式コマンドラインツール webpack を隠蔽してくれている さまざまなプロジェクト作成オプションがある TypeScript 利用有無 Router , Vuex , ESLint などプラグインの導入 CLI なのに UI もある！
11. Demo: Vue CLI vue create hello-vue やってくれること Vue.js の初期プロジェクト構成の作成 各種モジュールの追加、初期設定 など
12. Inside the DEMO: Vue CLI $ vue create hello-vue Vue CLI v3.8.2 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◯ Babel ❯◉ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
13. Vue.js に機能を追加したい Vue.js で作るアプリケーションに何か機能を追加したい時に、 npm でインストールして ライブラリ毎に異なる config を設定し 場合によっては TypeScript の方定義ファイルを探し・・
14. がんばらない人() => Vue CLI プラグイン やってくれること npm モジュールの導入 設定ファイル等の追加 Vue インスタンスへのロード etc たとえば HTTP クライアントである axios の導入 多言語対応を実現する vue-i18n の導入 など
15. Demo: Vue CLI プラグイン vue add axios
16. Inside the DEMO: Vue CLI Plugin - axios import Vue from "vue"; import axios, { AxiosResponse } from "axios"; export default Vue.extend({ methods: { // Azure Text Translator API の実行 async invokeTranslator(text: string): Promise<TranslatorResult> { const res: AxiosResponse = await axios.post( "https://xxx-vue.azurewebsites.net/api/translate", { target: text } ); return res.data; } } });
17. UI どうしよう Vue.js を導入しただけでは、UI は勝手に作成されません。。
18. がんばらない人() => UI ライブラリ Vue.js に最適化された主なライブラリ Vuetify: マテリアルデザイン、コンポーネントが多い Element: 管理画面向けコンポーネントが豊富 Buefy: Bulma という CSS フレームワークがベースで軽い Onsen UI: モバイルアプリ向け
19. Demo: Element vue add element
20. Inside the DEMO: Element <template> <div class="form"> <el-form ref="form" :model="request" label-width="120px"> <el-form-item label=" タイトル"> <el-input v-model="request.title"></el-input> </el-form-item> <el-form-item label=" 本番環境"> <el-switch v-model="request.isProduction"></el-switch> </el-form-item> <el-form-item label=" 内容"> <el-input type="textarea" rows="3" v-model="request.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit"> 登録</el-button> </el-form-item> </el-form> </template>
21. Nuxt.js という選択肢 主な機能（公式サイトより抜粋） サーバーサイドレンダリング（ユニバーサル SSR） 静的ファイルの配信 非同期データをハンドリングするパワフルなルーティング モジュール構造で拡張できること etc
22. Advanced Vue.js Component を使った開発 トランジション、アニメーションの実装 Linter / Formatter の導入: ESLint Vuex によるステート管理 Testing: vue-test-utils , Jest サーバーサイドレンダリング etc.. 詳細: Vue.js 日本語公式ドキュメント
23. ご清聴ありがとうございました つづきは VueFes Japan 2019 で！