SHOEISHA iD

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

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

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

「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう

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

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

 本連載では、Webページのユーザーインタフェース(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsとNuxt.jsの概要を説明しました。今回はNuxt.jsでUI構築に利用するVue.jsについて、基本的な利用方法を説明します。

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

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)フレームワークであるVue.jsに、Webページの作成に必要なUI以外の機能を追加して、まとめて提供するフレームワークです。そのため、Nuxt.jsの機能を使いこなすためには、まずVue.jsの利用方法を知っておく必要があります。

 Vue.jsでは、データとWebページの表示を関連付けるデータバインディングやイベント処理、条件分岐や繰り返しなど、動的なWebページを作成するための機能が提供されます。本記事では、こういったVue.jsの基本的な利用方法を説明します。

対象読者

  • Nuxt.jsを何から始めていいかわからない方
  • Vue.js未経験の方
  • ひとまずVue.jsやNuxt.jsで動的なWebページを作ってみたい方

必要な環境

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

  • Windows 10 64bit版 
    • Node.js v10.16.2 64bit版
    • Nuxt.js 2.8.1
    • Vue.js 2.6.10
    • Microsoft Edge 44.18362.1.0

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

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

Webページとデータを関連付けるVue.jsのデータバインディング(1)

 動的なWebページでは、ユーザーの入力をデータに反映したり、データをWebページに表示したりする処理が必要となります。Vue.jsではこういった処理を、Webページとデータを関連付ける「データバインディング」で実現します。

データバインディングの基本

 Vue.jsでデータバインディングを行う基本的な方法を、図1のサンプルで説明します。テキストボックスに入力されたURLを、ハイパーリンクの文言とリンク先に反映します。

図1:基本的なデータバインディングのサンプル(p001-binding-basic)
図1:基本的なデータバインディングのサンプル(p001-binding-basic)

 図1のWebページを実装したファイルの内容を、リスト1に示します。

[リスト1]基本的なデータバインディングの記述(p001-binding-basic/pages/index.vue)
<template>
  <div class="container">
    <h1>基本的なデータバインディング</h1>
      <input v-model="url" placeholder="URL"> <!--(1)-->
      <a v-bind:href="url" target="_blank"> <!--(2)-->
        {{ url }}へのリンク <!--(3)-->
      </a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: 'https://codezine.jp/' // (4)
    }
  }
}
</script>
(以下略)

 ロジックを記述する<script>で、URLの文字列を格納するurl変数(4)を定義します。表示内容のテンプレートを記述する<template>では、(1)~(3)の3種類の方法でurl変数を参照しています。(1)の「v-model」はテキストボックスのような入力部品の内容、(2)の「v-bind」はhrefなどのタグ属性、(3)の{{ }}(2重の中カッコ)はWebページの表示内容に、変数内容を関連付け(データバインディング)します。このうちv-modelは、入力部品の内容と変数の内容を双方向に同期する、いわゆる双方向データバインディングを実現します。

 v-modelやv-bindのように「v-」から始まってHTMLタグに設定するVue.jsの属性を「ディレクティブ」と呼びます。以下では、v-modelとv-bindディレクティブについて補足説明していきます。

次のページ
Webページとデータを関連付けるVue.jsのデータバインディング(2)

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

  • 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/11694 2019/09/02 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング