3章<Excel>:高機能な表コンポーネント

ここまでに、独自のReactコンポーネントを作成し、汎用のDOMコンポーネントと併用してUIを組み立て描画できるようになりました。プロパティをセットし、ステートを管理し、コンポーネントのライフサイクルを知り、不必要な描画を避けてパフォーマンスを向上させることも学びました。

得られた知識をすべて使い、(Reactについてもう少し学びながら)データの表という実践的なコンポーネントを作成してみましょう。Microsoft Excelのバージョン0.1ベータ版の初期プロトタイプのように、表のコンテンツを編集でき、並べ替えや検索(フィルター)、エクスポートやダウンロードにも対応します。

3.1 まずはデータから

表とはデータを扱うためのものです。我々の高機能な表コンポーネント(Excelと呼ぶに値します)も、データの配列とヘッダーの配列を受け取って動作します。テストデータとして、Wikipediaから取得したベストセラー書籍のリスト(http://en.wikipedia.org/wiki/List_of_bestselling_books)を使います。

var headers = [ "タイトル", "著者", "言語", "出版年", "売上部数" ]; var data = [ ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupery", "French", "1943", "140 million"], ...

Get Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.