Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

miyake
May 29, 2019

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

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

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

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

miyake

May 29, 2019
Tweet

More Decks by miyake

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Vetur
    使用前 / 使用後

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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;
    }
    }
    });

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Demo: Element
    vue add element

    View full-size slide

  18. Inside the DEMO: Element














    登録



    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. ご清聴ありがとうございました
    つづきは VueFes Japan 2019 で!

    View full-size slide