管理画面向けのVue.jsのUIフレームワーク、iViewについて

「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木（泰）さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。

フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。

はじめに

管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、

それぞれのコンポーネントのデザインにあまりこだわらない
機能面や、使い勝手の優先度が高い

などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。

JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。

特徴

基本的にデザインがシンプル
カスタマイズできる項目が多い
少し特殊な用途(無限スクロール、ツリー構造のチェックボックスなど)にも対応している

デザインはこのようになっていて、このまま使用しても遜色のない画面を作ることができます。

f:id:jx_k_watanabe:20191207182947p:plain

良かった点

上記の理由で、大抵の管理画面のニーズには応えることができます。特にフォームのinput周り、テーブル周りはスタイル、機能ともにカスタマイズしたい用件が多くあるので、その部分に応えられたのは大きかったです。
アップデートが早く、開発中にドキュメントを見るとコンポーネントが追加されている、ということもあります。

難しかった点

国内での知名度がやや低め（英語、中国語の情報がほとんど）だったので、時には中国語のIssueを読みながら対応する、などの場合がありました（中国語は、翻訳機能を使って英語に直してから読むと、結構読めるようになります）

導入

Nuxt.jsから導入する方法について書いていきます。

$ npm install nuxt view-design

パッケージ名がview-designになっている点が注意が必要です。

インストールが終わったら、iViewを読み込んでいきます。 nuxt.config.jsファイルを新規作成して、以下のコードを追記します。ドキュメントにはもう少し長いconfigが載っていますが、基本的にはこの記述さえあれば大丈夫です。

nuxt.config.js

modules.exports = {
  plugins: [
      {src: '~plugins/iview', ssr: true}
  ]
}

上記のコードはplugins/iview.jsにあるコードを読み込みますよ、という意味なので、それに沿うようにVueから読み込みができるように記述します。ついでに、日本語対応のためのモジュールを追記します。

plugins/iview.js

import Vue from 'vue';
import iView from 'view-design';
import locale from 'view-design/dist/locale/ja-JP'
import 'view-design/dist/styles/iview.css';

Vue.use(iView, { locale });

確認のために、pages/index.vueを作成して、画面からiViewのコンポーネントが表示できるかを確認します。

pages/index.vue

<template>
  <div style="margin: 100px;">
    <div>
      Button: <Button type="primary">Button</Button>
    </div>
    <div style="margin-top: 20px;">
      Datepicker: <DatePicker />
    </div>
  </div>
</template>

f:id:jx_k_watanabe:20191207182745p:plain