DesignJavaScriptCSSWordPressSEOお問合せ恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。恵比寿のデザイン制作チームのブログです。2019-06-10今回はVue.jsを使ったSPAの開発を紹介したいと思います。Vue.js(ビュー)とはReact、Angularと並ぶJavaScriptの3大フレームワークの1つです。有名どころだと、一休のサイトなんかはVueで作られていますね。Vueの主な特徴は以下です。単一のページでコンテンツの表示切替を行うSPA(シングルページアプリケーション)を制作する際によく使われています。SPAでは、ページ遷移の際はAJAX非同期通信を行い、HTMLの一部を切り替えています。動的でサクサク動きます。これを実現するために素のJavaScriptでコードを書くと大量になってしまうため、フレームワークを使用することが多いです。それでは早速使い方を見ていきましょう。使い方Node.jsとnpmが入っている方はターミナルでVueCLIをグローバルにインストールします。Node.jsについてよくわからない方は以下の記事を参考にしてみて下さい。nodistでNode.jsをインストールしてバージョン管理(Windows向け)VueCLIはVue.jsでの開発環境を簡単に構築してくれるコマンドラインインターフェースです。vue-cliインストールできたらバージョン確認もしておきましょう。--version本記事ではバージョン2.9.6を使用しています。バージョン3以降は現在開発中のベータ版となっており仕様に変更が入る可能性があり、バージョン3未満とプロジェクトの作成方法やディレクトリの構造も異なってきます。ここでは、バージョン3未満の説明で統一していきます。プロジェクトを作成していきましょう。【プロジェクトの名前】テンプレートは色々ありますが、ここではWebサイトやWebアプリでよく使われているwebpackとします。プロジェクトの名前は任意の名前を入れて下さい。ここではcompanyとします。company色々と質問されますが、全てEnterでも問題ありませんのでここでは質問の内容は省略します。companyサーバーを立ち上げます。devターミナルに表示されたURLにアクセスすると以下のようなページを確認できます。プロジェクトフォルダにはいろいろインストールされていると思いますが、いじっていくのはsrcの中だけになります。Routerという非同期通信を実装するための便利なライブラリがあるのでインストールしておきます。vue-routerバージョンを指定する場合はvue-routerのあとに@3.0.2などを付けると、そのバージョンをインストールします。何もつけなかった場合は最新版をインストールします。本記事では3.0.2を使っています。インストールできたら、srcフォルダ直下にrouter.jsファイルを作成して以下を記述します。'@/components/HelloWorld'Vue.use(Router)これはVue-routerを使いますという記述です。src直下にコンポーネントをまとめておくためのフォルダーを作成します。任意の名前で結構です。今回はcomponentsとしてあげます。componentsフォルダーの中にHome.vueファイルとAbout.vueファイルを作成し、以下を記述します。</div></template>そして、router.jsにも追記していきましょう。]})これはコンポーネントを読み込み、URLのパスで表示するコンポーネントを分別する設定です。TOPページの表示が変わっていると思います。試しに、URLに/aboutと入れてみると、About.vueのコンポ―ネントが描画されるはずです。表示がでない場合は、srcフォルダ直下のmain.jsに下記を記述してみてください。h(App)})最後に、コンポーネントを切り替えるヘッダーメニューを作っていきましょう。src直下のApp.vueを下記のように編集します。今回はApp.vueの中に直接ヘッダーを作成しています。App.vueを以下のように編集します。}}</style>これでヘッダーメニューができました。ボタンを押すとURLが変わり、それぞれコンポーネントが描画されると思います。router-viewはルートとマッチしたコンポーネントをそこに描画するタグです。この場合はURLによって描画をHomeとAboutで分岐します。router-linkはルートのリンクを作成します。Routerを読み込むことで使えるタグです。ちなみにcssでsassを使いたい場合はターミナルで以下のコマンドを入力します。--save-devsass-loaderをインストールし、styleタグに以下のように記述すればOKです。lang="scss">また、コンポーネントが切り替わる部分にフェードイン・アウトのアニメーションを付けてあげましょう。}}</style>router-viewをtransitionタグで囲み、CSSにアニメーションをつけていきます。vueにはトランジションクラスという便利なクラスを使うことができます。詳しくは公式サイトに色々載っているので、見てみて下さい。modeの”out-in”は、最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインするという設定を加える事ができます。ビルドするそれでは最後に、開発が一息ついた、または終わったところでビルドしましょう。Ctrl+Cでサーバーを止めてあげて、以下をターミナルに入力します。buildすると、buildフォルダーの中に作成されているフォルダやファイルがバンドルされたものが入っています。本アップはこれらのファイルをアップロードするだけでOKです。まとめこんな感じでポートフォリオサイトなどでよく見られるSPA構築が楽に行えるので、jQueryからのステップアップをしたい方はぜひVueに挑戦してみてください。【レンタルサーバー無し!】Firebaseを使って無料でネット上にサイトを公開するWebサイトの速度を計測・採点する方法(計測ツール)この記事を書いた人TOMWebデザイナー。英語がちょっと話せます。Indesignを扱います。