Elastic UI Frameworkのリポジトリは色々参考になりそうなので共有したい

りまりま団のもふもふです。この記事はElastic stack (Elasticsearch) Advent Calendar 2018 23日目の記事です。

qiita.com

Advent Calendarに向けてどんなCanvasを作ろうかなと思ってあれこれ探していたらそれ以上に面白そうな物を見つけてしまったため、予定を変更してお送りしています。1

Elastic UI frameworkとは

Elastic UI frameworkとは、Elasticsearch社が提供しているライブラリです。 名前の通り、Elasticsearch社から提供されている画面を構成する部品を再利用できる形にまとめています。

提供されている部品の種類としては、次のようなものがあります。

  • アイコン
  • ボタン
  • 各要素のレイアウト(flex layout)
  • カード
  • フォーム
  • その他Kibanaで利用されている部品

f:id:MofuMofu:20181221164803p:plain

GitHubリポジトリのFAQにもありますが、Elastic製品で利用することを目的としています。 一般的なアプリケーションで利用することは推奨されていません。2 Kibanaのプラグイン開発時に利用することになりそうです。

利用されている技術

React.js + SCSSで作成されています。Reactなので、コンポーネント指向で開発されています。SCSSの書き方・管理の仕方はかなり参考になりました。3 各コンポーネントには必ずテストが書かれているので、コンポーネントに対してどうやってテストを書いているのかも参考になりそうです。

リポジトリはこちらです。componentsディレクトリより下にボタンやカレンダーなどのコンポーネントが配置されています。

github.com

眺めていて面白かった部分

Color Palettes

ありきたりな感想ですが、「ちゃんと見やすく配色してんだなー」と改めて思いました。色がぎゅっと詰まって並んでいても目がチカチカしないのは色づかいの力を感じます。

https://elastic.github.io/eui/#/utilities/color-palettes

Series charts (beta)

f:id:MofuMofu:20181221165053p:plain

これはBar chartsのドキュメントの一部です。JavaScriptのドキュメントあるあるですが、Web上で実行結果とコードが比較できるのは良いですよね。Demoをクリックすれば実行結果(グラフ)を参照できます。

https://elastic.github.io/eui/#/series-charts-beta/bar-charts

Propsの値を参照して描画する…と考えると、「Propsでこの値を使うからデータ加工しとこっと」というように、どんなデータをElasticsearchに投入するかを逆算して考えることができます。 Kibanaは他のElastic製品に比べて公式ドキュメントが少し寂しいので、どのようにデータを割り当てればいいんだろう?という情報を取集するのに良いのでは?!?!と感じました。

…とまあ短い記事になってしまいました。ただ、Kibanaの画面がどのように作られているかを知る手がかりが増えたことに嬉しくなったので、いろんな人に「みてみて!」ってしたくなったのでした。


  1. コミックマーケットでもサークルカットと毎回違う本を出しているくらいには予定は未定であります。

  2. 一応Apache2.0ライセンスではありますが…。

  3. 仕事ではVue.js使ってるので…。でもディレクトリ構成や考え方の大枠は似てるなーと思いました。