Vue.jsの練習①

プログラミング

『忍者コード』というプログラミングスクールのサイト内に練習問題があったので、実践してみました。

練習サイト：https://skblogwp.com/practice/javascript/article_004/

今回学習したことを以下にまとめます。

Vue.jsとは？

Vue.jsはJavascriptのフレームワーク（※1）のことです。
Vue.jsに似たフレームワークにReact、Angularがあって、これら3つのフレームワークのことを3種の神器と呼ぶようです。

Vue.jsはSPA（シングルページアプリケーション）を効率的に構築するためのフレームワークです。
SPAは一つのページでコンテンツを切り替えをするwebアプリケーションのことで、ページ遷移が高速になります。その反面、SEOが弱いという側面もあり、検索順位がなかなか上がらないという課題もあります。

※1フレームワークとは
JavaScriptフレームワークは、JavaScriptでの開発において、Webアプリケーションの土台となる部分を指します。完成品のWebアプリケーションに対して、フレームワークはWebアプリケーションのひな形です。
一方、jQueryはJavaScriptの定番ライブラリです。
フレームワークであるVue.jsはWebアプリケーションの土台部分で、それに対してライブラリであるjQueryは自由に使用できる部品といえます。

引用：https://career.levtech.jp/guide/knowhow/article/388/

Vue.jsの環境構築方法は？

以下の方法があります。

1. CDNを使用する（簡易的な方法）
2. Vue CLIを使用する（公式推奨）
3. Viteを使用する
4. 手動でセットアップ（高度なカスタマイズ向け）

・初心者や小規模プロジェクト
　⇒CDNやViteを使用。
・中規模〜大規模プロジェクト
　⇒Vue CLIまたはViteが推奨。
・高度なカスタマイズが必要な場合
　⇒手動でセットアップ。

CDNを読み込む位置と、jsファイルを読み込む位置

CDNは<head>タグ内、jsファイルは<body>タグの中に記述する必要があります。
外部JavaScriptファイルは基本的に<head>タグ内で読み込むべきではありません。

▼HTMLファイル<head>タグ（CDNの読み込み）

<!--Vue.jsCDN読み込み-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.11"></script>
</head>

▼HTMLファイル<body>タグ（外部JSファイルの読み込み）

<section>
 <h2>Vue.jsで文字列を表示させるエリア</h2>
   <div class="section_inner">
    <div id="app">
　　　　{{ message }}
    </div>
　　<!-- 外部JavaScriptファイル -->
    <script src="/practice/common/js/vue_app.js"></script>
   </div>
</section>

なぜ外部JSファイルを<head>内に書くべきではないのか
⇒JavaScriptの実行タイミングの問題

<head>内でスクリプトを読み込むと、HTMLが完全に読み込まれる前にJavaScriptが実行される可能性があります。
その結果、Vue.jsで操作しようとしているDOM要素（※1）がまだ準備されておらず、エラーが発生します。

jQueryはCDNも外部JSファイルも<head>タグ内に記述していますが、外部JSファイルの$(function(){…})の記述により、JSの処理を一旦予約状態で止めておいて、HTMLの読み込みが全て完了した後にJSの処理が実行されるため、動作します。

※1DOM要素って何。
「HTMLの構造をプログラムで操作できるようにしたもの」です。
もう少し具体的に言うと、DOM（Document Object Model）は、ウェブページのHTMLやXMLをツリー状の構造に変換したものを指し、その中の1つ1つの「ノード」（例えばタグやテキスト）がDOM要素と呼ばれます。

例えば、以下のHTMLファイルがあるとします。

<!DOCTYPE html>
<html>
<head>
  <title>ページタイトル</title>
</head>
<body>
  <div id="app">こんにちは！</div>
</body>
</html>

このHTMLはブラウザで解析され、以下のようなDOMツリーに変換されます。

html
├── head
│   └── title
├── body
    └── div#app
        └── テキストノード ("こんにちは！")

<div id=”app”>はDOM要素です。この要素は、Vue.jsのapp.mount(‘#app’)で指定されるターゲットになります。
「こんにちは！」はテキストノードです。（DOMツリーの一部ですが要素ではありません）。

CDNはどれを読み込むべきなのか？

サイトによっていくつかあるので、何が違うのか整理しました。

A.
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>

B.
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11"></script>

C.
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

D.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
CDNバージョンビルド種別用途
A（公式サイトより）明示的開発用ビルド特定バージョンを開発で使う
B（公式サイトより）明示的本番用ビルド特定バージョンを本番で使う
C（他の方のブログ）明示的（古い）開発用ビルド古いバージョンを開発で使う
D（※忍者コードでの紹介）最新開発用ビルド常に最新バージョンを開発で使う

結局Bを選択しました。

公式サイトのリンクはこちらです。
https://v2.ja.vuejs.org/v2/guide/installation#CDN

ただし、バージョンの違い（Vue.js 2.xやVue.js 3.x）で利用できる構文が異なるようなので、注意が必要です。

例
Vue.js 2.xで使用される構文（例: new Vue()やelオプション）はそのまま使えます。
Vue.js 3.xの構文（例: Vue.createApp）はこのバージョンでは使えません。

JSファイル（vue_app.js）の記述方法

const vm = new Vue({
    el: "#app",
    data: {
      message: "Hello 忍者Code!",
    },
});

Vueは “new Vue” でVueインスタンス（実体化したもの）が生成できます。
‘el:’でターゲットを決めて、そのターゲットに’data:’ の ‘message’ の値を出力しているという流れです。
Vueインスタンスの値は ‘{{ 値 }}’ としなければ表示することができません。

なお、当初間違えて、以下のようなコードを記述してしまいましたが、外部JavaScriptファイルに<script>タグを記述する必要はありません。<script>タグはHTML内でJavaScriptを記述するためのものであり、外部ファイルでは不適切です。

<script>　//間違い！
  const vm = new Vue({
    el: "#app",
    data: {
      message: "Hello 忍者Code!",
    },
  });
</script>　//間違い！

コメント

タイトルとURLをコピーしました