SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用

「Nuxt.js」で作ったWebページをインターネットで公開する方法

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、Webページのユーザーインタフェース(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。

 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサーバーではサーバーサイドレンダリングを動作させることもできます。

 本記事では、Nuxt.jsで作成したWebページをインターネット上に公開する方法を説明します。静的ファイルを生成する方法と、Node.jsの実行環境を提供するクラウドサービスであるHerokuFirebaseに公開する方法を説明していきます。

対象読者

  • Nuxt.jsで作成したWebページをインターネット上に公開したい方
  • Apacheなど、静的ファイルしか提供できない環境をお使いの方
  • クラウドサービスを利用したWebページの公開に興味がある方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Node.js v12.16.3 64bit版
    • Nuxt.js 2.12.2
    • Vue.js 2.6.11
    • Microsoft Edge 81.0.416.68

 サンプルコードは、Nuxt.jsのCLIツール(create-nuxt-app)で生成したプロジェクトをもとに実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、連載第1回の記事を参照してください。

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

本記事で利用するサンプルの説明

 最初に、本記事でインターネット上に公開するサンプル(図1)について説明します。このサンプルは、スマートフォンのメーカーをリストするトップページと、各メーカーのスマートフォンを表示する詳細ページで構成されており、ルーティング機能でページ遷移できます。

図1:本記事で利用するサンプル(p001-basic)
図1:本記事で利用するサンプル(p001-basic)

 内部的には、トップページ(pages/index.vue)と詳細ページ(pages/phones/_vendor.vue)のページコンポーネントが存在します。トップページのコンポーネントはリスト1の通りです。メーカーのリスト(3)を、(2)のv-forディレクティブで一覧表示します。(1)は、JavaScriptのDateオブジェクトでページに表示される日時を画面表示する記述です。

[リスト1]トップページのコンポーネント(p001-basic/pages/index.vue)
<template>
  <div class="container">
    <div>ページ表示日時:{{ new Date() }}</div> <!-- 日時を表示 ...(1)-->
    <h1>2020年秋冬注目スマホ</h1>
    <!-- vendors配列からリストを表示 ...(2)-->
    <ul>
      <li v-for="vendor in vendorsData" v-bind:key="vendor.id">
        <nuxt-link v-bind:to="vendor.link">{{ vendor.name }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // メーカーのリスト ...(3)
      vendorsData: [
        { id: 1, name: 'Apple', link: '/phones/Apple' },
        { id: 2, name: 'Google', link: '/phones/Google' },
        { id: 3, name: 'Samsung', link: '/phones/Samsung' },
      ]
    }
  }
}
</script>

 詳細ページのコンポーネント(pages/phones/_vendor.vue)では、ルーティング機能でトップページから渡されたメーカー名をもとに、対応するスマートフォンのリストを一覧表示します。実装の詳細はサンプルコードを参照してください。詳細ページでも、リスト1(1)と同じ処理でページ表示日時を画面表示するようになっています。

 このサンプルはサーバーサイドレンダリングに対応しています。ブラウザーのJavaScriptが有効な状態では、トップページと詳細ページとの間の遷移はWebブラウザー上のJavaScript処理で行われるため、ページ遷移時にWebサーバーとの通信は発生しません。一方、JavaScriptが無効な状態では、サーバーサイドでページを生成するため、ページ遷移時に通信が発生します(図2)。ブラウザーのJavaScriptを無効にしても、サーバーサイドレンダリングの処理でページの表示日時が都度更新されることに注意してください。

図2:サーバーサイドレンダリングの様子(p001-basic)
図2:サーバーサイドレンダリングの様子(p001-basic)

[補足]Microsoft EdgeでJavaScriptの有効/無効を切り替える

 Microsoft EdgeでJavaScriptの有効/無効を切り替える設定は、設定画面の「サイトのアクセス許可」-「JavaScript」にあります。「edge://settings/content/javascript」のURLを開いて、設定画面を直接表示することもできます。ブラウザー全体でJavaScriptの有効/無効を切り替えることも、サイト単位で設定することもできます。

図3:Microsoft EdgeでJavaScriptの有効/無効を設定する画面
図3:Microsoft EdgeでJavaScriptの有効/無効を設定する画面

 このサンプルをインターネット上に公開する方法を、以下で説明していきます。

次のページ
静的ファイルを生成してWebサーバーで公開する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/13422 2021/01/29 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング