シンプルなVueプロジェクト

📢 この記事は gemini-2.5-flash によって翻訳されました

昔はフロントエンドとバックエンドが混在した開発だったよね。コミュニケーションコストが高くて、分業もあいまい、管理も保守拡張もやりにくかったんだ。

今の主流はフロントエンドとバックエンドを分離した開発で、インターフェースドキュメントを使うんだ。

フロントエンド・バックエンド分離開発

フロントエンドはインターフェースドキュメントに従ってパラメータを送信し、レスポンスデータを解析する。バックエンドはインターフェースドキュメントに従ってパラメータを受け取り、レスポンスを返すってわけ。

開発フローはこんな感じ：要件分析 -> インターフェース定義 (APIインターフェースドキュメント) -> フロントエンド・バックエンド並行開発 (仕様を遵守) -> テスト -> フロントエンド・バックエンド結合テスト。

インターフェース開発が終わる前に、 YApi でテストできるよ。

フロントエンドエンジニアリング

企業規模のフロントエンドプロジェクト開発で、フロントエンド開発に必要なツール、技術、プロセス、経験などを標準化・規範化することだよ。

モジュール化：JS、CSS
コンポーネント化：UI構造、スタイル、振る舞い
規範化：ディレクトリ構造、コーディング、インターフェース
自動化：ビルド、デプロイ、テスト

Vue CLI

Vue-cliはVue公式が提供してるスキャフォールド（足場）で、Vueプロジェクトのテンプレートをサクッと生成できるんだ。NodeJSが必要だよ。

Vue-cliはこんな機能を提供してるよ：

統一されたディレクトリ構造
ローカルデバッグ
ホットデプロイ：コードを変更しても再実行不要で、最新のプログラムを読み込めるんだ
単体テスト
統合パッケージングとデプロイ

NodeJS

公式サイトからインストールして、npmパッケージの場所を設定するんだ。

1
2
3
npm config set prefix "path"
# 位置を取得
npm config get prefix

npmのタオバオミラーに切り替えるよ。

1
npm config set registry https://registry.npm.taobao.org

Vue-cliをインストールするよ。

1
npm install -g @vue/cli

ちゃんとインストールできたか確認だ。

1
vue --version

Vueプロジェクト

コマンドラインとGUIの2種類があるよ。

1
2
3
4
# コマンドライン
vue create project-name
# GUI
vue ui

ディレクトリ構造

ルートディレクトリ：

node_modules：プロジェクト全体の依存パッケージが格納されてる
public：プロジェクトの静的ファイル
src：プロジェクトのソースコード
package.json：モジュールの基本情報、プロジェクト開発に必要なモジュール、バージョン情報
vue.config.js：Vueの設定を保存するファイル。プロキシやポートの設定などだね。

srcフォルダのディレクトリ

assets：静的リソース
components：再利用可能なコンポーネント
router：ルーティング設定
views：ビューコンポーネント（ページ）
App.vue：エントリページ（ルートコンポーネント）
main.js：エントリJSファイル

プロジェクトの実行

VS Codeを使えば、下部で直接実行できるよ。

コマンドラインで実行するならこれ。

1
npm run serve

ポートの変更

vue.config.jsファイルで設定するよ。

1
2
3
4
5
6
7
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7589 // ポート番号
  }
})

開発フロー

エントリファイルは src/main.js で、デフォルトはこんな感じだよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App) // インポートしたAppから仮想要素を作成
}).$mount('#app') // #appにマウント

上にある import キーワードはコンポーネントのインポートを意味するんだけど、それと対になる export はコンポーネントのエクスポートを意味するんだ。

上記のVueオブジェクトのコードはこんな感じにも書けるよ。

1
2
3
4
5
6
new Vue({
    el: "#app",
    // router: router,
    router, // 値とキーが同じなら省略可能
    render: h => h(App)
})

Vueのコンポーネントファイルは .vue で終わるんだけど、各コンポーネントは <template、script、<style> の3つの部分で構成されてるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <!-- HTMLタグ -->
    </div>
</template>

<script>
    // JS
    export default{
        data(){
            return{
                // データモデル
            }
        },
        methods:{
            // メソッド
        }
    }
</script>

<style>
    /* CSS */
</style>