Zenn
💫

Vue.js でのAPI連携で使用する技術まとめ

2022/09/03に公開
Vue.js
Vuex
Vite
Vitest
pinja
tech

Vue3

Vue2から様々大きな変更があり、(VueのグローバルAPIの更新、テンプレートディレクティブの利用方法など）
それによりコード量が減り、効率的に記述することができるようになった。

注目機能

composition API

Vue3から新たに提供されたAPIで、従来使われていたOption APIをコード量が多くなった場合に煩雑になりがちだった実装をより可読性の高い実装ができるもの。
※optionAPI:data,props,computed,methods,watchなどの様々な機能を持った関数

Teleport

任意のHTMLの箇所にVueJSのComponentをレンダリングする機能。
モーダルウィンドウをBody直下に配置したい時に使用する。

<button @click="modalOpen = true">
    Open full screen modal! (With teleport!)
</button>
<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      モーダルウィンドウのコンテンツ
      <button @click="modalOpen = false">
        モーダルウィンドウを閉じる
      </button>
    </div>
  </div>
</teleport>

⇨ボタンが押されたらモーダルのHTMLがbody直下にレンダリングされる

Fragment

マルチルートコンポーネントがサポートされておらず、<div>タグで囲むようにしていたが、　コンポーネントが複数のルートノードを持つことができるようになった。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

↓

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Vite

高速でプロジェクトを生成・実行できるCLIツール。
従来で利用されていたVue CLIは動作速度が遅かったが、Viteでは高速でビルドすることができ、
さらにVue.jsだけでなくReact.js,vanilla.jsなど様々な形式のプロジェクトにも対応できる。

Piniaについて

state management solution：状態管理ツール
様々なところで利用するデータをGlobalにStoreできる状態管理ツールを介することによって簡単にデータの利用をすることができる。
今まではVuexを利用して状態管理を行なっていたが、冗長で学習コストが高いという問題があった。
Piniaは複雑なコードを書かずに安全な状態管理が行え、Typescriptも完全にサポートできるようになった。
5-10コンポーネントまでのプロジェクトやデモプロジェクトなどでは利用する必要はなく、規模が大きくなるであろうプロジェクトなどで利用しやすい。

Vitestについて

Viteベースのテスティングフレームワークで、自動テストを行うことができる。
JavaScriptでは他にもJestというフレームワークがある。
テストランナーを走らせることで簡単にテスト、値のチェックができる。

// テストする関数
export const add = (a: number, b: number): number => a + b;

import { describe, expect, it } from "vitest";
import { add } from "./add";

describe("add", () => {
  it("1 + 2 = 3", () => {
    const result = add(1, 2);

    expect(result).toBe(3);
  });
});

⇨関数のテストの例
Jestと書き方は基本的には同じだが、処理速度が2割ほどJestより速い。
他にもCypressなどのテスティングフレームワークがある

まとめ

今回はVue.jsにフォーカスして利用する技術の紹介をしてみたが、
Vueだけでもこれだけ多くのフレームワークがあり、どれもバージョンが上がるにつれて今までよりもシンプルで可読性の高いコードが書けるようになり、より処理速度が速くなっている。
こうしたライブラリの改善されるスピードがすごく速いためキャッチアップも非常に大切で速く習得できればそれだけ速く恩恵を受けられると感じた。

参考文献

https://ja.vitejs.dev/
https://pinia.vuejs.org/
https://vitest.dev/
https://www.cypress.io/

Discussion