Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。3:React.addons.TestUtils+Mochaでユニットテストを作成するMochaのインストールと準備テストを書くテストを通すまとめページ内画面遷移を実装する開発環境が整ったところで、いよいよTODOアプリを仕上げていきましょう。その前に、アプリの仕様を再確認しておきます。トップページで新規TODOを登録するDoneボタンを押下するとTODOが完了状態になる未完了のTODOはトップページ(#active)に、完了済のTODOは2ページ目(#completed)に表示するまだトップページしか作っていませんので、まずは2ページ目に遷移できるようにしましょう。シングルページアプリケーションにおけるRouterの概念シングルページアプリケーションでは同一ページ内で画面を再描画するため、そのままではURLが切り替わらず、戻る・進むボタンなどの操作やブックマークができず不便です。そこで、多くのJavaScriptフレームワークではRouterと呼ばれる仕組みを用いて、URLを切り替えながらページ内の画面遷移を実現しています。これは、ちょうどサーバがリクエストされたURLに応じて処理を振り分ける動作を、クライアント側で再現したものです。注意点としては、例えば/から/fooにページ内で画面遷移する場合と、/fooに直接アクセスする場合とで、同じ画面が表示される必要があります。Routerが正しく機能しているかを確かめるには、次の操作を試してみてください。ブラウザの「戻る」「進む」「更新」ボタンを押したときにコンテンツが正しく切り替わる新しいタブにURLをコピーしたときに同じ内容が表示されるアクセス方法によらず同じページが表示されるようにするサンプルではサーバー側の実装を省略するため、ハッシュリンクを使って画面を切り替える方式を採用しています[6]。ハッシュを用いる場合Routerの実装はhashchangeイベントを利用し、ハッシュを用いない場合Routerの実装はHTML5のpushState()/popState()を利用します。表面的なRouterの使い方はどちらも変わりません。Routerを使ってページ遷移を実装するReact.jsはViewのみを扱うため、それ自体はRouterの機能を持っていませんが、外部ライブラリを使うことで、Router機能を容易に実現できます。ここでは、Routerライブラリの1つである「director」を使います。}});/activeと/completedへの遷移(実際にはハッシュが付く)を検知してthis.stateを更新し、それぞれの内容をレンダリングします。デフォルトでは/activeと同じページが表示されるようにしています。これで画面遷移を実現することができました。あとは、上でTODOになっているコンポーネントを実装すれば完了です。次ページからは、React.jsを使って開発をする上で役立つTipsを紹介します。ヨウスケ)株式会社ワークスアプリケーションズ所属。イケてるアプリケーションを死ぬほど楽に作るために研究を続ける日々。社内での立ち位置は「フロントエンドのナウい人」。最近エバンジェリストという肩書きが付いた。趣味は作曲とスノーボード。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。