インフラジスティックスのWEBアプリケーション開発用の UI 製品である Ignite UI には「ドックマネージャー」という、ペインでアプリケーションのレイアウトをコントロールする部品が含まれています。ドックマネージャーを利用すると、エンドユーザーはペインをピン固定、サイズ変更、移動、非表示にすることで自分の使いやすい様にカスタマイズすることができます。 ドックマネージャーの動作イメージ このドックマネージャーは開発者にとって、アプリケーションレイアウトにおける多くの可能性をもたらす一方で、具体的にどの様に自身のプロジェクトに組み込めば良いか、なかなか想像しにくい部品かもしれません。本記事では表形式でデータを一覧表示するための「グリッドコンポーネント」をドックマネージャーと組み合わせてデータの表示方法の幅を広げる例をご紹介します。UXを追求するフロントエンドエンジニアの皆様の参考になれば幸いです。 グリッドコンポーネントの陥りやすいシナリオ グリッドコンポーネントは、管理画面を持つ多くのウェブアプリケーションで、データの一覧を表示する際に利用されていることと思います。あくまでデータを一覧で確認するという目的の部品ですので、情報量は抑えたいものである一方で、実務上必要となる様々な情報を一覧画面で確認したいというエンドユーザーからの要望も上がってくるかと思います。そこでドックマネージャーを使用して、以下の様に、表示する情報の粒度を分けたレイアウトを考えてみます。 仮に学校や学習塾のような、学生のテスト結果を管理するシステムとして、左側の赤色のエリアでは学生の名前とID、クラス番号を表示しています。この赤色エリアのグリッドの目的は、詳細情報を得たい対象の学生を素早く識別し選択できる様にすることです。ですので必要最小限の情報に留める様にします。赤色エリアで学生を選択すると、右側の青色のエリアに詳細情報が表示されます。 デモアプリケーションを確認する 先ほど説明した内容を踏まえて、実際に Ignite UI のグリッドコンポーネント、チャートコンポーネント、ドックマネージャーを組み合わせて作成したデモアプリケーションを以下のリンクからご確認いただけます。 https://igjp-sample.github.io/react-demo-app/?lng=ja-JP 上記のデモアプリケーションは React をフレームワークとし、Ignite UI for React の UI 部品を利用して構築していますが、全ての Ignite UI 製品（※）において、同じ様な表現が可能です。 ※ Ignite UI 対応のWEB開発フレームワーク ... Angular、ASP.NET (Core & MVC)、Blazor、jQuery、React、Web Components このように、左側のエリアから欲しい情報に簡単にアクセスして、詳細な情報は右側のエリアで確認するという表現方法が可能です。 また、今回ドックマネージャーを利用してレイアウトを行なったことで、エンドユーザーが自分の見やすい様にサイズを調整することが可能です。全てのユーザーが同じ大きさ、画角の画面でアプリケーションを表示しているわけではなく、注目したい情報もユーザーによって異なる可能性があるため、パーソナライズ可能なレイアウトはUXの向上に一役買うでしょう。 発展：レイアウトの保存・読み込み 本記事ではドックマネージャーの機能のうち、シンプルなものの紹介に留めましたが、より複雑な要件を実現可能な機能もあります。そのひとつが「レイアウトの保存／読み込み」です。JSON形式でレイアウト設定を保存することができるので、エンドユーザーひとりひとりが個人の好みのレイアウト設定を保存して永続的に利用できる他、ユーザーの役割や業務シナリオに基づいた最適なレイアウトをあらかじめ定義しておき、必要なタイミングで読み込むといったことも可能になります。 デモアプリケーションのソースコードや実装方法に関するお問い合わせ 今回ご紹介したデモアプリケーションのソースコードを確認されたい、手元で動かしたいなどのご希望があればご提供可能ですので インフラジスティックスお問い合わせフォーム よりご連絡をいただければ幸いです。 その他、ドックマネージャーやその他の UI 部品の実装方法や、こういったことが実現したいといった機能実現に向けたご相談などもお気軽にご連絡ください。

npm startがエラーになったとき .envファイルを作成し、SKIP_PREFLIGHT_CHECK=true を記述

前置き MDNのReactチュートリアルをやって学んだことの復習をしています。 この記事の#2です 本記事では「コンポーネント化」について復習しています。 何か間違いがあれば指摘していただけると大変励みになります。 Reactアプリのコンポーネント化 コンポーネント化…アプリ内の要素を分割していき管理、記述しやすくしていくこと。 チュートリアルでは下記のような長ったらしいJSXを徐々にコンポーネント化していく App.js function App(props) { return ( <div className="todoapp stack-large"> <h1>TodoMatic</h1> <form> <h2 className="label-wrapper"> <label htmlFor="new-todo-input" className="label__lg"> What needs to be done? </label> </h2> <input type="text" id="new-todo-input" className="input input__lg" name="text" autoComplete="off" /> <button type="submit" className="btn btn__primary btn__lg"> Add </button> </form> <div className="filters btn-group stack-exception"> <button type="button" className="btn toggle-btn" aria-pressed="true"> <span className="visually-hidden">Show </span> <span>all</span> <span className="visually-hidden"> tasks</span> {// ...略} コンポーネント化 まずは各todoをliタグを使って記述している下記の部分 App.js {// ...略} <li className="todo stack-small"> <div className="c-cb"> <input id="todo-0" type="checkbox" defaultChecked={true} /> <label className="todo-label" htmlFor="todo-0"> Eat </label> </div> <div className="btn-group"> <button type="button" className="btn"> Edit <span className="visually-hidden">Eat</span> </button> <button type="button" className="btn btn__danger"> Delete <span className="visually-hidden">Eat</span> </button> </div> </li> <li className="todo stack-small"> <div className="c-cb"> <input id="todo-1" type="checkbox" /> <label className="todo-label" htmlFor="todo-1"> Sleep </label> {// ...略} まずは適切なコンポーネント名でファイルを作成する。 mkdir src/component touch src/component/Todo.js Todo.js内でfunctionを定義しreturn()で、対象のtodoリストの一番最初の要素だけを返すようにします。 Todo.js {// 定義と同時にエクスポートもしている} export default function Todo() { return ( <li className="todo stack-small"> <div className="c-cb"> <input id="todo-0" type="checkbox" defaultChecked={true} /> <label className="todo-label" htmlFor="todo-0"> Eat </label> </div> <div className="btn-group"> <button type="button" className="btn"> Edit <span className="visually-hidden">Eat</span> </button> <button type="button" className="btn btn__danger"> Delete <span className="visually-hidden">Eat</span> </button> </div> </li> ); } なぜ最初の要素だけなのかというと、id,defaultChecked,valueの値を除いて構成が同じだからです。 完成したコンポーネントをApp.jsで読み込んでみます。 App.js {// todoコンポーネントをインポート} import Todo from "./components/Todo"; {// ...略} <ul role="list" className="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <Todo /> <Todo /> <Todo /> </ul> {// ...略} しかしこのままでは同じタスクを3回表示してしまうだけです。それぞれのid.defaultChecked,valueの値をユニークなものにしなければなりません。そこでApp.jsの親コンポーネントであるindex.jsにそれぞれのtodoを定義してしまいます。 index.js {// ...略} const DATA = [ { id: "todo-0", name: "Eat", completed: true }, { id: "todo-1", name: "Sleep", completed: false }, { id: "todo-2", name: "Repeat", completed: false } ]; ReactDOM.render(<App tasks={DATA} />, document.getElementById('root')); {// ...略} こうすることでApp.jsでprops.tasksを使って値を受け取ることができます。 が、これをそのまま表示してしまうと下記のように代入した値がそのまま表示されていしまいます。（nameだけを表示） なので上記のmap()関数からtodoコンポーネントを返す必要も出てきます。 App.js {// ...略} const taskList = tasks.map(task => ( <Todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggleTaskCompleted={toggleTaskCompleted} /> ) ); {// ...略} 他の部分も同じ要領でコンポーネント化していきます。 終わりに 次の記事では「イベント」について復習していきたいと思います。