管理画面向けの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

画像のように表示されていれば成功です。

さいごに

UIフレームワークをいくつか比較してみると、確実に揃っているべきコンポーネントがある、というのが分かったり、同じコンポーネントでもデザインが大きく違うものがあったりします。

フロントエンド開発でも最も依存が大きくなるライブラリの一つなので、選定の際には他のライブラリも見てみたり、用件が決まっていれば、「このコンポーネントを組み合わせて使えば実装できそう」などのイメージを立てておくのも大事です。

良質なフレームワークがたくさんあるので、是非、自分たちに合ったライブラリを探してみてください。

明日は、rychhrさんの、「Pure WebSocketsをサポートしたAWS AppSyncでWebとiOS間のリアルタイムチャットを作ってみた」です。