Vue3向けのUIライブラリ Inklineを使ってみる

# はじめに
この記事はVue3向けのUIライブラリである[Inklike](https://www.inkline.io/)をインストールして使ってみるステップバイステップです。
Inklineをメインに据えた記事がQiita内にない[^1]ようなので、筆者の学習を兼ねて記事にしてみます。
記事の内容は公式ページのIntroductionを追ったものプラスアルファを目指しています。

# Inklineについて
「はじめに」にて書いていますが、Vue3向けのUIコンポーネントライブラリです。([公式のAbout](https://www.inkline.io/docs/preface)の表記に従いました)
良質なUI(User Interface)、UX(User Experience)のみならず、DX(Developer Experience)も提供することを目標としているとのことです。
作者はルーマニアのティミショアラに住むAlex Grozav氏で、オープンソースで開発が進められています。
Contributorsの中には日本の方もおられるようです。

# 環境
Vue3の開発を行うための環境が必要です。
筆者はWindowsを使っているため、[NVM for Windows](https://github.com/coreybutler/nvm-windows)で準備しました。
```Powershell
PS D:\workspace\inkline-introduction> nvm --version
1.1.10
PS D:\workspace\inkline-introduction> node --version
v18.12.1
PS D:\workspace\inkline-introduction> npm --version
8.19.2
```

# インストール
Viteによるインストールが推奨されています。
とは言っても特別なことが必要なわけではなく、create-vueでVueのプロジェクトを作る→作ったプロジェクトにInklineをインストールする、という手順になります。

## Vue3のプロジェクトを作る
通常のVue3のプロジェクトと同じく`npm init vue@latest (作りたいプロジェクト名)`でOKです。
ログは掲載しませんが、TypeScriptの有効化と、ESLintとPrettierの追加のみデフォルトから変更しました。

必要なパッケージをインストールできたら、一度実行してページを表示できるか確認しておきます。
create-vueの実行時に表示される通り、`npm run dev`を実行します。
![screenshot.90.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2643107/e21fedf6-d323-1a21-9e56-cc648df23df2.png)
無事にVue3のスタートページが表示されました。

## Inklineをインストールする
インストールはnpmを使います。
公式ページではInklineをインストールする際に`--save`オプションが付いていますが、筆者環境のnpmでは不要です。
また、ガイドのとおりにscssもインストールします。
```Powershell
PS D:\workspace\inkline-introduction\inkline-introduction> npm install @inkline/inkline
PS D:\workspace\inkline-introduction\inkline-introduction> npm install --save-dev sass
PS D:\workspace\inkline-introduction\inkline-introduction> 
```

# Inklineを使うための設定
## スタイルの設定
インストールガイドに従って`src/main.scss`を追加します。
```scss:main.scss
@import "@inkline/inkline/css/variables";
@import "@inkline/inkline/css/mixins";

:root{
    --color--primary--h: 195deg;
    --color--primary--s: 77%;
    --color--primary--l: 39%;
}
```
## プロジェクトの設定
筆者はTypeScriptを使っているので`src/main.ts`をインストールガイドに従って変更します。
```ts:main.ts
import { createApp } from "vue"
import App from "./App.vue"

import { Inkline, components } from "@inkline/inkline"
import "@inkline/inkline/inkline.scss"

import "./main.scss"

const app = createApp(App)

app.use(Inkline, {
    components
})

app.mount("#app")
```

## 実行してみる
公式のインストールガイドは以上で終了です。
再度`npm run dev`を実行します。
![screenshot.91.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2643107/fb9aff4a-11d5-6200-d924-674929e66036.png)
ページの中身がVue3のスタートページそのままなので、Inklineを使っている感がありません。
続けてInklineで画面を作ってみます。

# Inklineで画面を作る
## レイアウト
ページの構造を組み立てるために以下のレイアウトコンポーネントが用意されています。
- `<i-layout>` : レイアウトのラッパー
- `<i-layout-header>` : ページのヘッダー
- `<i-layout-footer>` : ページのフッター
- `<i-layout-aside>` : 左右のセクション
- `<i-layout-content>` : メインになるコンテンツ
`<i-layout>`の中に別の`<i-layout>`を入れることもできます。
今回は公式にある「ヘッダーとフッターが幅いっぱい、左にセクションあり」を作ってみます。
```vue:App.vue
<script setup lang="ts">
</script>

<template>
  <i-layout>
    <i-layout-header>
      Header
    </i-layout-header>
    <i-layout vertical>
      <i-layout-aside>
        Left Aside
      </i-layout-aside>
      <i-layout-content>
        Content
      </i-layout-content>
    </i-layout>
    <i-layout-footer>
      Footer
    </i-layout-footer>
  </i-layout>
</template>

<style>
.layout-aside {
  width: 12rem;
}
</style>
```
するとページはこうなりました。
![screenshot.92.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2643107/3b22c778-2f19-92c0-5b4d-bbf2937ea237.png)
どうやら位置関係は合っていそうです。

## コンポーネント
レイアウトが決まったので、レイアウトの中にコンポーネントを置いて画面を作っていきます。
利用できるコンポーネントは公式ページに記載されています。
Inklineのコンポーネントは、レイアウトを見てお気づきかもしれませんが「i-xxx」という名前になっています。
作成したvueファイルはヘッダー、コンテンツ、サイドバー、フッターそれぞれに分けて抜粋して掲載します。

### ヘッダー
Navbar(`<i-navbar>`)が向いているようです。
アイテムを入れるなど色々できますが、今回はサイト名などを入れる(たぶん)`<i-navbar-brand>`だけを使います。
```vue:App.vue
<template>
<!-- 省略 -->
    <i-layout-header>
      <i-navbar>
        <i-navbar-brand>
          Inkline Introduction
        </i-navbar-brand>
      </i-navbar>
    </i-layout-header>
<!-- 省略 -->
</template>

<style>
nav {
  margin: 6px;
}
</style>
```

### コンテンツ
せっかくなのでInklineのコントロールをいくつか並べてみます。
テキストはInklineのコントロールではないですが、配置や折り返しなどのユーティリティが用意されています。
```vue:App.vue
<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref("")
</script>

<template>
<!-- 省略 -->
      <i-layout-content>
        <i-container fluid>
          <i-row>
            <i-column>
              <h1>Some of Inkline Controls</h1>
            </i-column>
          </i-row>
          <i-row>
            <i-column>
              <h2>Button</h2>
              <i-button>Button</i-button>
              <i-button color="primary">Primary</i-button>
              <i-button color="secondary">Secondary</i-button>
              <i-button color="success">Success</i-button>
              <i-button color="danger">Danger</i-button>
              <i-button color="warning">Warning</i-button>
              <i-button color="info">Info</i-button>
              <i-button color="light">Light</i-button>
              <i-button color="dark">Dark</i-button>
            </i-column>
          </i-row>
          <i-row>
            <i-column>
              <h2>Input</h2>
              <i-input v-model="inputValue" placeholder="Type something.." />
            </i-column>
          </i-row>
          <i-row>
            <i-column>
              <h2>Text</h2>
              <p class="_text-align:left">
                This is a left aligned text.
              </p>
              <p class="_text-align:center">This is a center aligned text.</p>
              <p class="_text-align:right">This is a right aligned text.</p>
            </i-column>
          </i-row>
        </i-container>
      </i-layout-content>
<!-- 省略 -->
</template>
```

### サイドバー
そのものズバリSidebar(`<i-sidebar>`)というコンポーネントがあります。
```vue:App.vue
<template>
<!-- 省略 -->
      <i-layout-aside>
        <i-sidebar>
          <i-nav vertical>
            <i-nav-item>item1</i-nav-item>
            <i-nav-item>item2</i-nav-item>
            <i-nav-item>item3</i-nav-item>
          </i-nav>
        </i-sidebar>
      </i-layout-aside>
<!-- 省略 -->
</template>
```

### フッター
フッターはボーダーユーティリティを使い、コピーライトを入れてみました。
```vue:App.vue
<template>
<!-- 省略 -->
    <i-layout-footer>
      <div class="_border">(c) 2022 NIKO</div>
    </i-layout-footer>
<!-- 省略 -->
</template>

<style>
._border {
  padding: 6px;
}
</style>
```

# Voila!
ブラウザでlocalhostを開くと以下のページが表示されます。
ボタンや入力欄の見た目が変わっていること、ヘッダーやサイドバーができていることがお分かりいただけるかと思います。
![screenshot.96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2643107/2fc1d240-c9f7-ba55-1c52-b56cc3093ecd.png)

# ソースコード
今回作成したサンプルはGitHubに置いてあります。

https://github.com/NIKOtheWolFox/inkline-introduction

# 最後に
お読みいただきありがとうございました。
Vue3用のUIライブラリを探している、Inklineというライブラリの存在を知ったがよくわからない、などという方の助けになれば幸いです。

# 参考資料
[Vue.js UI UX DX Library - Inkline](https://www.inkline.io/)
[nvm-windowsでNode.jsバージョン管理](https://qiita.com/akuden/items/a88630de9624039c4135)

[^1]:執筆開始時点で[Vue3のUIフレームワーク／UIライブラリ紹介と比較](https://qiita.com/kensoz/items/6839fd47548f3609cb69)にて「その他のVue.js3対応UIフレームワーク」として挙げられているのみのようです。