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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

About Me 三宅和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP Vue.js 日本ユーザーグループコアスタッフ typescript‑jp 立ち上げスタッフ PaaS がかりの部屋(Blog): https://k‑miyake.github.io/blog/

Slide 4

Slide 4 text

Vue.js の現状 JavaScript フレームワークのひとつ React, Angular と並んで人気がある GitHub Star: 約 13,900 プログレッシブフレームワーク初学者でも習得しやすい: 日本語の公式サイトや書籍が充実小さくはじめられる: プログレッシブフレームワーク常に進化している 2019 年は 3.x へのメジャーバージョンアップが予定されている

Slide 5

Slide 5 text

日本国内でもユーザーが急増中 Meetup は数分で満員に！ 2018 年 11 月に Vue Fes Japan 2018 が開催された日本初となる大規模 Vue.js カンファレンス Vue.js の作者である Evan You が Vue.js 3.0 のコンセプトを説明した Vue Fes Japan 2019 も開催決定！

Slide 6

Slide 6 text

Vue.js は何でつくる？エディタ / IDE は何が良いの？トランスパイルはどうしよう。

Slide 7

Slide 7 text

がんばらない人() => VS Code + TypeScript 定番の開発環境 TypeScript 必須ではないが、これからやるなら推奨 2019 年中のリリースが計画されている Vue.js 3.x では TypeScript サポートの大幅な改善が予定されているクラス形式ではなく、 Vue.extend 方式がおすすめ（理由はこちら） Visual Studio Code Vetur 機能拡張 .vue ファイル(SFC) + TypeScript で開発するならほぼ必須

Slide 8

Slide 8 text

Vetur 使用前 / 使用後

Slide 9

Slide 9 text

Vue.js をどうはじめる？ JS の開発では、 npm などの各種ツールやライブラリの組み合わせが必要となるため、開発をはじめるまでのオーバーヘッドが大きくなる傾向にある ‑> 疲弊しやすく、あまり価値もない

Slide 10

Slide 10 text

がんばらない人() => Vue CLI Vue CLI Vue.js の開発環境を整えてくれる公式コマンドラインツール webpack を隠蔽してくれているさまざまなプロジェクト作成オプションがある TypeScript 利用有無 Router , Vuex , ESLint などプラグインの導入 CLI なのに UI もある！

Slide 11

Slide 11 text

Demo: Vue CLI vue create hello-vue やってくれること Vue.js の初期プロジェクト構成の作成各種モジュールの追加、初期設定など

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Vue.js に機能を追加したい Vue.js で作るアプリケーションに何か機能を追加したい時に、 npm でインストールしてライブラリ毎に異なる config を設定し場合によっては TypeScript の方定義ファイルを探し・・

Slide 14

Slide 14 text

がんばらない人() => Vue CLI プラグインやってくれること npm モジュールの導入設定ファイル等の追加 Vue インスタンスへのロード etc たとえば HTTP クライアントである axios の導入多言語対応を実現する vue-i18n の導入など

Slide 15

Slide 15 text

Demo: Vue CLI プラグイン vue add axios

Slide 16

Slide 16 text

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 { const res: AxiosResponse = await axios.post( "https://xxx-vue.azurewebsites.net/api/translate", { target: text } ); return res.data; } } });

Slide 17

Slide 17 text

UI どうしよう Vue.js を導入しただけでは、UI は勝手に作成されません。。

Slide 18

Slide 18 text

がんばらない人() => UI ライブラリ Vue.js に最適化された主なライブラリ Vuetify: マテリアルデザイン、コンポーネントが多い Element: 管理画面向けコンポーネントが豊富 Buefy: Bulma という CSS フレームワークがベースで軽い Onsen UI: モバイルアプリ向け

Slide 19

Slide 19 text

Demo: Element vue add element

Slide 20

Slide 20 text

Inside the DEMO: Element

登録

Slide 21

Slide 21 text

Nuxt.js という選択肢主な機能（公式サイトより抜粋）サーバーサイドレンダリング（ユニバーサル SSR）静的ファイルの配信非同期データをハンドリングするパワフルなルーティングモジュール構造で拡張できること etc

Slide 22

Slide 22 text

Advanced Vue.js Component を使った開発トランジション、アニメーションの実装 Linter / Formatter の導入: ESLint Vuex によるステート管理 Testing: vue-test-utils , Jest サーバーサイドレンダリング etc.. 詳細: Vue.js 日本語公式ドキュメント