作成日：2021/04/12　更新日：2022/01/27

#3 Veu.jsをCDNで読み込み画面表示させる

Vue.jsの使い方

前回、「応用2」で簡単なWebアプリケーションを作りました。
PHPを使ってデータベースに接続し、取得されたデータを配列として変数に入れ、その配列変数をforeach文で回し、 echoを使ってHTMLとして表示させていました。
それをVue.jsを使って表示することも可能です。

Vue.jsを使うことで、その後の操作が同じ言語のJavaScriptで済みますので、 ページの移動や再読み込みが少ない、ユーザーの利便性を高めたWebサイト＊1を作るのに適しています。 また、データベースから取得したデータをJSONジェイソン形式＊2にするのがポイントです。
＊1）ユーザーの使い勝手が良く、操作ストレスが少ないサイトを作ることを「UI/UX設計」「UI/UXデザイン」と呼ばれています。
＊2）JSONの名称はJavaScript Object Notationジャバスクリプト　オブジェクト　ノーテーションの頭文字を取ってます。
データの集まり（Object）を扱うための表記法（Notation）となり、書き方のルールとして{"キー" : 値}となってるものをJSON形式と呼びます。

今回は動的なサイトをつくるというより、PHPで実装した内容をVue.jsを使ってみようという趣旨ですので、 本来のVue.jsの機能は十分に発揮されませんが、まずはVue.jsアプリケーションを体感してみましょう。

#4 PHP(echo)の代わりにVue.jsでHTML表示

Vue.jsのインストール

まず応用2で作った名前移動アプリ[sortable3]をコピーして[sortable4]を作ります。
※ファイルがない場合はダウンロード

Veu.jsをCDNで読み込みます。

    <head>
    ・・・
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    </head>
<head>タグの中にスクリプトタグを記述します。Veu.js使う準備はこれだけです。

データベースから取得したデータをJSON形式に変換してvue.jsにデータをわたす

応用2で作ったアプリケーションでは、データの取得と表示を以下のように書きました。
index.php

<div id="drag-area">


<?php
$sql = '
  SELECT
    t1.*,
    genders.gender
  FROM
    sortable AS t1
  LEFT JOIN `genders` ON t1.gender_id = genders.id
';
$result = $select->select($sql);

foreach ($result as $val){
  echo '  <div class="drag gender'.$val['gender_id'].'" data-num="'.$val['id'].'" style="left:'.$val['left_x'].'px; top:'.$val['top_y'].'px;">'.PHP_EOL;
  echo '    <p><span class="name">'.$val['id'].' '.$val['name'].' ('.$val['gender'].')</span></p>'.PHP_EOL;
  echo '  </div>'.PHP_EOL;
}
?>

</div>

これを以下のように追加・変更します。

<div id="drag-area">


<?php
$sql = '
  SELECT
    t1.*,
    genders.gender
  FROM
    sortable AS t1
  LEFT JOIN `genders` ON t1.gender_id = genders.id
';
$result = $select->select($sql);

/* PHPで取得したデータをJSON形式に変換 */
$json_data = json_encode( $stmt, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

/* 表示はvue.jsにまかせます。
foreach ($result as $val){
  echo '  <div class="drag gender'.$val['gender_id'].'" data-num="'.$val['id'].'" style="left:'.$val['left_x'].'px; top:'.$val['top_y'].'px;">'.PHP_EOL;
  echo '    <p><span class="name">'.$val['id'].' '.$val['name'].' ('.$val['gender'].')</span></p>'.PHP_EOL;
  echo '  </div>'.PHP_EOL;
}
*/
?>


<div
  v-for="item in jsonData"
  v-bind:key="item.id"
  class="drag"
  v-bind:class="'gender' + item.gender_id"
  v-bind:data-num="item.id"
  v-bind:style="'left:' + item.left_x + 'px; top:' + item.top_y + 'px;'"
>
  <p><span class="name">{{item.id}} {{item.name}} ({{item.gender}})</span></p>
</div>
</div>


<script>
/* PHPのデータをからJSにJSONデータとして変換させる */
let jsonData = JSON.parse('<?= $json_data; ?>');
new Vue({
    el  : '#drag-area',
    data: {jsonData}
  });
</script>
PHPはデータ取得のみの機能になり、データを表示するVue.jsの設定と、表示させるHTMLタグが登場しました。
解説
その① データベースからデータの取得
取得したデータをJSON形式に変換 

$json_data = json_encode( $stmt, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
データ取得部分のSQL文は同じですが、データ取得後にJSON化させて$json_data変数に格納しています。
json_encode()関数を使って、連想配列をJSON化（エンコード）します。
○第一引数には、対象となる変数$stmtを指定します。
○第二引数には、文字をエスケープさせるオプションを4つ指定します。
　JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
エスケープされたJSONデータの内容は以下のような文字列になります。print_r()関数で確認してみましょう。
{"id":9, "name":"\u5c71\u7530\u5b5d\u4e4b", "left_x":37, "top_y":273, "gender_id":1, "gender":"\u7537\u6027"},{...
データベースの内容が "id":9 のように {"キー名" : 値} の関係で取得されます。
日本語はエスケープされているので、見慣れない文字列になっているのが確認できます。
その② Vue.jsの出力部分

<div
  v-for="item in jsonData"
  v-bind:key="item.id"
  class="drag"
  v-bind:class="'gender' + item.gender_id"
  v-bind:data-num="item.id"
  v-bind:style="'left:' + item.left_x + 'px; top:' + item.top_y + 'px;'"
>
  <p><span class="name">{{item.id}} {{item.name}} ({{item.gender}})</span></p>
</div>
データ表示部分です。Vue.jsを使って表示（レンダリング）させています。
見慣れない属性タグや、Vue.jsテンプレート構文の{{ }}でデータを出力しているのが特徴的ですね。 属性タグは見やすいように改行していますが、1行で書いてもかまいません。
○属性タグ
①v-for ブイ フォー ディレクティブと呼ばれるもので、 "エイリアス名 for データ"の書き方で、 jsonData に入っている配列データの中からひとつづつのデータを指すために、itemという名前の”エイリアス”を作り、反復処理させるものです。
phpのforeachのようなものです。ディレクティブとは（命令する）という意味です。Vue.js独自の属性タグのことです。

②v-bind ブイ バインドディレクティブと呼ばれており、 html属性タグで出力・更新するときに使います。 固定されたclassがある場合は、上記のように分けて記載しましょう。
また、文字のあとにデータをバインドさせる場合は 文字列を' 'で囲って+でつなぎます。

③属性タグの属性値はエイリアス.キーでJSONデータの値をバインドさせます。
上の例では、itemというエイリアスのなかにあるキー「gender_id」を指定してありその値が出力されます。v-bind:keyは必ず必要です。

○テンプレート
④HTML内にテキスト表示させる場合は、{{ }}（マスタッシュタグ）にいれて、{{エイリアス.キー}}で出力。 ユーザーの操作に合わせて内容が変更されるため、データバインディング（データを紐付ける）と呼ばれています。
その③ Vue.jsの設定部分

<script>
/* PHPのデータをJavaScriptへ渡す処理です。 */
let jsonData = JSON.parse('<?= $json_data; ?>');

/* vueインスタンスを作成 */
new Vue({
    el  : '#drag-area',
    data: {jsonData}
});
</script>

JSON.parseジェイソン パース() メソッドを使うと、文字列（PHPでechoしたJSON形式の文字列）を、{ }で囲われているデータの集まりである、 JavaScriptオブジェクトに変換します。parseとは「解析する」という意味です。
jsonDataという名前の変数に入れておきます。

new Vue()のところはVueの設定部分です。

new Vue()でインスタンスを作成するときは、オプションの Vue()関数で Vue インスタンスを作成して新しいオブジェクトを作り、{ }内にオプションを付けていきます。
オプションdataプロパティにはPHP→jsで変換取得したjsonDataを入れます。データは連想配列なので{ }の中に入れます。

注）new Vue()でインスタンスを作成する場合は、elプロパティに設定している要素（ここでは #drag-area）が読み込まれたあと（下部）に記述しなければなりません。

※配列を展開してみた場合

<script>
new Vue({
  el  : '#drag-area',
  data: {
    jsonData:[
      {id:1, gender:"男性", gender_id:1, name:"下北太郎", left_x:10, top_y:15},
      {id:2, gender:"男性", gender_id:1, name:"下北次郎", left_x:20, top_y:12},
      {id:3, gender:"女性", gender_id:2, name:"下北三郎", left_x:43, top_y:82},
      {id:4, gender:"男性", gender_id:1, name:"下北四郎", left_x:56, top_y:47},
      {キー：値, キー：値,  ...    }
    ]
  }
});
</script>
仮にdata: {jsonData}の部分が展開された場合は、このような内容になります。
実際の表示

新規登録、移動時の座標登録のロジックはそのままですので、 見た目も機能も全く同じものになります。

#5 vueコンポーネントでHTML表示させる

Vue.jsにはcomponentコンポーネントという考え方があり、 簡単にいえばコンポーネントとよばれる部品を作り、HTMLのなかで出力する方法です。
表示させる内容をコンポーネント化して、いろんなページで使い回す事ができますので、便利ですね。

今回のサンプルプログラムには向いていませんが、複数の同じようなレイアウトの画面を作る際に適しています。 ここでは、コンポーネントのさわりをやってみましょう。
index.phpをコピーしてtest.phpを作り、以下のように、データを変更してみましょう。


<div
  v-for="item in jsonData"
  v-bind:key="item.id"
  class="drag"
  v-bind:class="'gender' + item.gender_id"
  v-bind:data-num="item.id"
  v-bind:style="'left:' + item.left_x + 'px; top:' + item.top_y + 'px;'"
>
  <p><span class="name">{{item.id}} {{item.name}} ({{item.gender}})</span></p>
</div>
index.phpのこの部分を

<child-component
  v-for="item in jsonData"
  v-bind:key="item.id"
  v-bind:item="item"  
></child-component>
新しくこのように変えてみましょう

htmlではdivではなく、独自に作ったHTMLタグ（テンプレートタグ）を入れます。
一部のv-bind設定は記述していくと長くなるので、コンポーネント設定のtemplete:側に移動しています。
また、v-bind:itemと宣言し、 データを参照しているエイリアス名を入れ、vueインスタンスで設定したdataプロパティの内容をバインド（連動）させています。


<script>
new Vue({
    el  : '#drag-area',
    data: {jsonData}
  });
</script>
この部分を以下の内容に変更 

<script>
/* コンポーネント変数の設定 */
let ComponentData = {
  props: ['item'],
  template: `
    <div class="drag"
      v-bind:class="'gender' + item.gender_id"
      v-bind:data-num="item.id"
      v-bind:style="'left:' + item.left_x + 'px; top:' + item.top_y + 'px;'"
    >
      <p><span class="name">{{item.id}} {{item.name}} ({{item.gender}})</span></p>
    </div>
  `
}

/* Vueインスタンス設定 */
new Vue({
  el  : '#drag-area',
  data: {jsonData},
  /* コンポーネント変数の登録 */
  components: {
    'child-component': ComponentData
  }
});
</script>
Vue.jsの方では、let 変数名 = {}でコンポーネントを作ります。
props: プロパティにプロパティを登録します。 template: テンプレートで記述したコンポーネントが、HTMLに挿入されます。

Vue()関数の中に、あらたにcomponents: コンポーネントプロパティを追加します。
components: {'コンポーネント名' : コンポーネント変数} とし、コンポーネント表示部分にコンポーネントデータを渡します。

このようにコンポーネントを用いても表示されることが確認できます。

コンポーネントを理解する

試しに以下のような画面表示になるものを作ってみたとします。
表示　　 htmlコード index3.phpの完成型

<!DOCTYPE html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
  <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


<div id="app">
  <user-list
    v-for="list in obj"
    v-bind:key="list.id"
    v-bind:list="list"
  >
  </user-list>
</div>

<script>
/* データ */
let obj =
[
  {id:1, age:"26", name:"下北太郎"},
  {id:2, age:"32", name:"大橋次郎"}
];

/* コンポーネント設定 */
let Component = {
  props: ['list'],
  template: `
    <div>
      <span>{{list.name}} {{list.age}}歳</span>
    </div>
  `
}

/* vue インスタンス作成 */
new Vue({
  el:#app,
  data:{ Obj },
  components: {
    'user-list': Component
  }
})
</script>

</body>
</html>

解説

コーディングを図解するとこのようになります。
コンポーネントやデータを準備をしたのちに、vueインスタンスに登録します。
同じファイルに記述する、かんたんなコンポーネント設定方法。

★別の書き方
コンポーネントの登録方法をグローバルにしたときの記述のしかた。
インスタンスにcomponentsを記述しない。特に理由がなければこちらではなく、ローカル設定でコンポーネントを作るほうが良いです。
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. Homebrewのインストール
  3. Gitでファイルのバージョン管理
  4. Gitを視覚的に確認
  5. Gitでファイルを共有する
  6. Gitでファイルの取り込み

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで。誰でも無料でできます
cbc-study.slack.com 質問の仕方はこちらをごらんください
powerd by logo