分12はじめにこの連載の前回までの記事で解説にあったように,Vue.jsはシンプルなViewレイヤのライブラリです。アプリケーションにシングルページアプリケーションとしての要件がある場合,ライブラリとしてVue.jsのみを使用した実装では少し困難になるでしょう。Routerを使えば,SPAを簡単に実現できるようになります。Routerを使ったSPAの実装の基本について紹介します。シングルページアプリケーションとはシングルページアプリケーション(以下SPA)とは,1つのHTMLをロードして,ユーザーインタラクションに応じて動的にページを更新するWebアプリケーションです。通常のWebアプリケーションでは,ページ遷移時にサーバへアクセスしコンテンツをロードしますが,SPAではページ遷移をクライアントサイドで行います。その際に,Ajaxを使用して必要な時に必要なデータを取得してViewの表示を行います。そのため,より滑らかなユーザー体験を提供できるようになります。一般的にSPAを実装するには,クライアントサイドでのページ遷移,データ取得,Viewのレンダリング,モジュール化されたコードの管理など,多くのことを考慮する必要があります。それらの機能を担ってくれるのがルーターと呼ばれるモジュールです。Reactに代表されるような最近の人気JavaScriptライブラリの多くは,ルーターの機能を本体もしくはプラグインとして提供しています。Routerは,ページ遷移先URLに対応するViewのレンダリング管理機能の他にも,便利なフック関数や遅延ローディングなどの機能を持っています。インストールするにはスクリプトタグでVue.js本体に続けて読み込んでください。Routerの最新バージョンはv2.0.1です)。src=&quot;https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js&quot;&gt;&lt;/script&gt;ルートの定義ルートとは,URLとViewの情報を保持する1つのレコードです。Routerにおけるルートは,前回の記事で解説したVue.jsのコンポーネントを特定のURLにマッピングしたオブジェクトとして,ルーター初期化時のroutesオプションに設定されます。'&lt;div&gt;トップページです。'&lt;div&gt;ユーザー一覧ページです。router}).$mount('#app')これだけで基本的なルートの定義は完了です。SPAを実装していると,ユーザがアクセスするURLに対してパターンマッチングさせたいケースもあるでしょう。そのような場合はpath内のURLに:を使用してパターンを記述しましょう。マッチしたURL上のパラメータはコンポーネント内の$route.paramsからパターンに使用したパラメータ名と同じ名前でアクセスして取得することができます。ユーザの詳細ページを/user/:userIdというURLで受け付けて,URL内に含まれるユーザのIDに応じて表示を切り替えるようなUIを考えてみましょう。以下のコード例では,/user/123へアクセスがあった時に,コンポーネント内部でアクセスできる$route.params.userIdの値は123になります。]})ページ遷移の実行URLがマッチした時にマッピングされたコンポーネントをレンダリングして出力する先をrootのVueインスタンスがマウントしているHTML内に指定しましょう。<router-view>タグを使用します。&lt;router-view&gt;&lt;/router-view&gt;&lt;/div&gt;この例ではブラウザで直接入力してアクセスしたURLとルート内でマッピングしたコンポーネントが<router-view>の部分にレンダリングされます。このままではページを開いてからページ遷移ができません。リンクを表示してページ遷移をできるようにしましょう。リンクの定義には<router-link>タグを使用します。&lt;router-view&gt;&lt;/router-view&gt;&lt;/div&gt;jsfiddleのサンプルを実行してみてください(jsfiddleではiframeを用いているためブラウザー上に表示されているURLは変更されません)。以上,わずかなコード量でシンプルなSPAの基礎ができました。シングルページアプリケーション著者プロフィール手島拓也(てじまたくや)新卒で入社した日本IBM研究所にて検索・テキスト解析ソフトウェア製品の開発に関わったのち,LINE株式会社にて数多くのLINEプラットフォーム開発を担当。その後,株式会社Indieの共同創業者&CTOとしてサービス開発全般を担当。そこにはヒットメーカーの極意があった噂の超高速分析データベースを試してみよう~ログ解析,機械学習なんでもござれ~ワールドワイドで3,500社以上が活用しているビッグデータ高速分析用のデータベース「Vertica」。クエリ性能を簡単に数百倍にする術をご紹介します。「JIRA」をはじめとするアトラシアンのツール群。多くのオープンソースソフトウェアを継続して提供する支えとなっている使い易さを探ってみます。Cloud」が,いよいよ日本でのサービスを本格的に開始します。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。