非エンジニアのための SPA 的世界におけるコンポーネントデザイン入門、今回は 4 回目です。前回はこちら。
今回から、状態についての話をします。
コンポーネントのデザインをする際、考えないといけないことの一つにコンポーネントの状態というのがあります。コンポーネントが持つ状態というと、まず思い浮かべられるのは、タブ型ナビゲーションのコンポーネントの場合に、どのタブが選択されているかとか、折りたたむことができるリストの開閉状態などかと思います。
実はそういったユーザーの操作や外部から渡された値による状態の他にも、SPA のコンポーネントにはライフサイクルという大きな枠の状態があります。(もちろん SPA を作る際に使用するライブラリやフレームワークにもよります)
ライフサイクルというと、SPA と切り離して考えてみれば、人生の段階が一般的な認識といえるかもしれません。プロダクトに関わっている人なら、プロダクトのライフサイクルという言葉を知っていたりするでしょう。
人間のライフサイクルには、以下の 8 つがあると エリク・H・エリクソン 氏 (参照 - ライフサイクル - Wikipedia 書籍「ライフサイクル その完結」については課題図書としたいと思います) は定義しています。
- 乳児期
- 幼児期初期
- 幼児期
- 学童期
- 青年期
- 成人期初期
- 成人期後期
- 老年期
SPA のコンポーネントも、人生ほど複雑ではありませんが、ライフサイクルがあります。 React という有名なライブラリの React lifecycle methods diagram にある componentDidMount componentDidUpdate componentWillUnmount という一般的なライフサイクルを例に説明してみます。
この図だとよくわかりませんよね。
ここではコンポーネントのライフサイクルについて、コンポーネントがマウントされたときから、アンマウントされるまでを扱ってみます。マウントというのは HTML 内に配置されることを指し、アンマウントは、HTML 内から除去されることだと思ってください。これを人間の一生に例えると、以下のように例えることができます。
- componentDidMount : この世に生をうけた
- componentDidUpdate : 生まれてから寿命が尽きるまでのコンポーネントにおける節目節目のイベント完了
- componentWillUnmount : 寿命を終え、天に召されるまさにその時
componentDidUpdate は、コンポーネントにおいて何かしらの節目となるイベントが発生し、状態が変わったことを表します。
コンポーネントを人間に例えてみましょう。
- componentDidMount : 生まれました
- ...
- componentDidUpdate : 1 歳になりました
- ...
- componentDidUpdate : 髪の毛を切りました
- ...
- componentDidUpdate : 小学生になりました
- ...
- componentDidUpdate : 転職しました
- ...
- componentWillUnmount : お亡くなりになりました
まあ、こんな感じでコンポーネントは、HTML 内で生を受け、コンポーネントが存在している間は、ライフサイクルによって管理されることになります。
人間は、コンポーネントではないので、当てはまらない部分もあります。ただ、SPA が様々なコンポーネントで構成されているように、人間も人間という大きなコンポーネントの中に、内臓や手や足というそれぞれ小さなコンポーネントを持っている存在といえるかもしれません。
SPA は、ユーザーのアクションによって様々なコンポーネントがマウントされ、イベントによって更新され、そしてアンマウントされていくということがわかればこの節は完了です。
ARTICLES
AUTHOR
原 一浩
カンソクインダストリーズ代表 / グレーティブ合同会社代表
1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール＆キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。