IT the Best
Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。
また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。
これは、UIがどのような見た目かJavaScript自体に記述するためのものです。
React - アコーディオンリスト
通常
多階層
横方向に展開
オートclose
AccordionListの引数にautoCloseを指定することで、リストアイテムを開くとそれと同じ階層のリストアイテムの自動クローズが可能
多階層リスト
リストアイテムの中に、さらにリストアイテムを入れることで多階層リストが実現可能
横方向リスト
リストアイテムの引数にhorizontalを指定することで、横方向に開閉させることが可能。横方向のスタイルを適用するためにAccordionListの引数にも、horizontalを指定する必要あり
その他
開閉の処理は、Reactコンポーネントの状態を更新し再レンダリングして実現しているわけではなく、対象要素の属性を直接変更して行っているため、Reactで作る意味があまりない
「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。
type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。
Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。
ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。
この方法は学習やシンプルなデモの作成にはいいですが、これをそのまま使うとウェブサイトは重くなってしまい、本番環境には向きません。次のレベルに進む準備ができたら、先ほど追加した
<script>タグとtype="text/babel"属性は削除してしまいましょう。そして次のセクションに進み、JSX プリプロセッサを設定して<script>タグを自動変換するようにしましょう。
