より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

その名は「Ring UI」JetBrainsのReactコンポーネントを試してみる

Ring UIはJetBrainsのReact Componentです。

以前Dataloreというのを本ブログで紹介させていただきましたが、JetBrainsもIDEだけではなく、色々なプロダクトを開発してますね。

YouTrackやTeamCityで見かけるあのJetBrainsのコンポーネントを使うことができます。

JavaScriptのReactフレームワークに載せる必要がありますが、あのコンポーネントをこの手で使うことが出来るというのであれば使ってみたくなるというものです。

Getting Started — Ring UI

導入

ダウンロードにはnpm経由で行います。

公式に書いてありますが、Node.js経由で実行します。

空のフォルダを用意して

npm install -g yo @jetbrains/generator-ring-ui

yo @jetbrains/ring-ui

するとテンプレートが生成されます。

何をしているのかよくわからなかったのですが、yeomonというWebアプリケーションのベースを生成するツールを使ってRingUIのテンプレートを生成しているようです。

ですので、空のフォルダで何も用意せずにはじめた方がいいです。中途半端にindex.htmlとか用意した状態でコマンドを叩いたら、わかりにくくなってしまいました。

※StackBlitzでも出来そうな気もしましたが、うまく行きませんでした。

その後、

npm start

で、作成されたテンプレートを確認します。

f:id:rimever:20190219071909p:plain

実践

公式サイトを真似て実装していきました。

はじめにやったのはReact TutorialをRingUIでデコってみました。

f:id:rimever:20190219075308p:plain

テーブル

Webサイトのライブラリとしてポイントは何かと考えました。

その中では、やはりテーブルかなあと思います。

Table — Ring UI

ソートなども出来そうですし、なかなか機能は揃ってます。

ただ、いざ使おうとするとハードル高そうです。

おまけ:npmのインストールについて

Macの場合はHomebrewを使うべきでした。出なければ下記の問題に悩まされます。

npmでpermission deniedになった時の対処法[mac] - Qiita

nodebrewを使う方法も案内されてますが、私はnode.jsのヘビーユーザーではないので普通に

brew install node

とコマンドを叩きました。

node.jsのバージョンを管理したくなったらnodebrewを入れようかと思います。

qiita.com