カテゴリーアーカイブ Vue

著者:杉浦

【Vue.js】スプレッド構文と外部定義によるコンポーネントファイルの縮小化

　Vue.jsの単一ファイルコンポーネントはコンポーネントを構成するHTMLテンプレート、JavaScript、CSSを一ファイルにまとめる仕組みです。コンポーネントの構成要素全体を把握しやすい点で優秀なのですが、コンポーネントの構成要素全体を含むが故にファイルの肥大化を招きがちです。よくある肥大化を防ぐ方法の一つはコンポーネントに分割する粒度を細かくしていく方法です。理解しやすい方法なのでこれができるならこちらの方がいいでしょう。しかし分割困難かつ複雑なロジックを持つコンポーネントが現れる時があります。この状況に対応するため、ロジックを外部ファイルに定義、コンポーネントはロジックを呼び出すのみ、呼び出し方はスプレッド構文で安全に簡単に記述、という方法を考えます。
　スプレッド構文はJavaScriptの記法の一つです。正直滅多に使いません。
スプレッド構文 – JavaScript ｜ MDN
　ここではObjectに関するスプレッド構文を扱います。動作は次の通り。public property限定の継承のといってもそう間違っていない印象があります。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals
// スプレッド構文 - JavaScript ｜ MDN#Object リテラルで使う

　注意点として浅いコピーなためコピーしたObjectとコピー元Objectの両方がネスト先の参照を共有する点があります。まあ不変な対象をコピーするならばshallow copyもdeep copyも変わらないのでそういう時は何も気にせず記述して大丈夫です。
　スプレッド構文を利用してVue.jsのコンポーネント中で定義を呼び出します。例えば、VuexのmapHoge系です。

computed: {
  // オブジェクトスプレット演算子で、外のオブジェクトとこのオブジェクトを混ぜる
  ...mapState({
    // ...
  })
  // コンポーネント個別のcomputedメソッド
  localComputed () { /* ... */ },
}
// https://vuex.vuejs.org/ja/guide/state.html#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%BC%94%E7%AE%97%E5%AD%90
// ステート ｜ Vuex

　Vuexのステート参照用メソッドを返すmapState関数の結果をスプレッド構文でコピーして、コンポーネント独自のcomputedメソッドと混ぜ合わせます。これでcomputedの中は次のように書いたのと同じになり楽できます。

computed: {
  // mapStateの結果が展開
  storeComputed1 () { /* ... */ },
  storeComputed2 () { /* ... */ },
  storeComputed3 () { /* ... */ },
  // コンポーネント個別のcomputedメソッド
  localComputed () { /* ... */ },
}
// https://vuex.vuejs.org/ja/guide/state.html#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%BC%94%E7%AE%97%E5%AD%90
// ステート ｜ Vuex

著者:杉浦

【Vue.js】定義を外から注入することでコンポーネントのコードを減らす

　Vue.jsはJavaScriptのフレームワークでページを部品単位で切り分けて定義することが得意です。一方、何かしらのモデル定義を作ったり、Vue.js用状態管理ツールVuexの定義する状態ストアの様にVue.jsの定義するコンポーネントの外に集約が存在するコードを書くこともあります。後者のパターンに入りながらもコンポーネントに囚われていると共通化すべき部分を個々のコンポーネントに重複して記述してしまう場合が出てきます。この記事ではそういった外部で共通化されたコードを注入する方法を紹介します。
　コードは次です。

// AppConfigStore.ts
/** 状態定義を記述したコードを省略 **/
export const lineColor = {
    // 簡素なsetter, getterを持つObjectを定義。このstoreに密に関わる部分のためstoreの役割にも合っている。
    /**
     * @return {number}
     */
    get() {
        return store.state.AppConfigStore.lineColor;
    },
    /**
     * @param {string} newColor
     */
    async set(newColor: string) {
        await store.dispatch('AppConfigStore/setLineColor', newColor);
    },
};
// Hoge.vue
import {lineColor} from '@/store/MapStore';
import Vue from 'vue';

Vue.extend({
    computed: {
        lineColor: lineColor, // importから読み込んだsetter,getterをあてはめ
    }
});

　コンポーネント外に定義を書いてコンポーネント内でimportするのみです。例ではcomputedですがpropsなど他にも色々使えます。注意点はコンポーネントを指すthisを外に持ち出そうとしないことです。これは難解になってミスが起きやすい上、外部コードに責務外のことまで任せることになりがちだからです。
　

著者:杉浦

【Vue.js】Vuexで情報の永続化と読み込み

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。
Vuex とは何か？ ｜ Vuex

　Vuexは状態管理パターン + ライブラリであり複数のコンポーネント間を横断する状態を示すデータが多くあるような状況で真価を発揮します。Vuexを使った場合、状態の表現はコンポーネントから分離されます。そのためVuexを使っているとコンポーネントとは違った単位で状態をまとめることを考えやすくなります。例えばアプリの設定です。この記事ではアプリの設定の保存、読み込みを例にしてVuexで情報の永続化と読み込みの楽なやり方を紹介します。
　情報の永続化と読み込み管理で主となるVuexの機能はプラグインです。
プラグイン ｜ Vuex
　プラグインはstoreとのやり取りが発生した時に発火するイベント内容を定義する関数を追加する機能です。これによってVuex初期化時に設定ファイルからデータ読み込み、データ更新時に設定ファイルを更新、をします。コードは以下になります。

// プラグイン定義
const repositoryPlugin = async (store:Store<any>) => {
    try {
        // アプリ設定のモジュールに設定ファイルからデータ読み込み
        const content: AppConfigStoreState = JSON.parse(
            fs.readFileSync(path.join('./app.conf'), {encoding: 'utf8'})
        );
        // 解釈した設定ファイルに基づいて状態を更新. 値がundefinedの場合は更新しない
        content.LineColor && await store.dispatch('AppConfigStore/setLineColor', content.LineColor);
        content.updateIntervalMilliSec && await store.dispatch('AppConfigStore/setUpdateIntervalMilliSec', content.updateIntervalMilliSec);
    } catch (e) {
        if (!(e.toString().match(/ENOENT: no such file or directory/g))) {
            // 設定ファイルが存在しない以外のエラーの場合は握りつぶさずに上へ投げる
            throw e;
        }
    }
    // 更新が起きるたびにイベント発火
    store.subscribe((mutation, state) => {
        if (mutation.type.match(/AppConfigStore/g)) {
            // 更新が起きた状態が設定モジュールの時のみ外部の設定ファイルに出力
            fs.writeFileSync(path.join('./app.conf'), JSON.stringify(state.AppConfigStore), {encoding: 'utf8'});
        }
    });
};
// store.ts Vuexインスタンス化コード部
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        AppConfigStore,
        HogeStore,
    },
    plugins: [repositoryPlugin], // プラグイン登録
});

　上のコードでは外部ファイルに吐き出すようにしましたが、実際はデータベースでもローカルストレージでも自由です。重要なのはプラグインでストアの初期化時、更新時に任意の動作を簡単に仕込めるという点です。

著者:杉浦

【Vue.js】vue-cliでElectronとVueによるデスクトップアプリを作る

　Electronはweb開発に同様のコードでデスクトップアプリを作成するためのプラットフォームです。もともとweb系の開発者ならば新たな言語を増やさずにデスクトップアプリを作ることができます。Electronは便利なのですがただ使うだけでもそれなりに設定が必要になります。vue-cliとつなげるとVue用のボイラープレートがそろった段階で開発を始められます。
　Electron ｜ Build cross platform desktop apps with JavaScript, HTML, and CSS.
　vue-cliはVue.js回りの開発を行うための様々なものが詰め込まれたツールです。GUIが備わっているのでなんとなく色々触るだけでも結構使い方がわかります。
Vue CLI
用意されている中で特に便利なのがプラグインです。Vueと何か他の抽象的な大がかりなパッケージ（TypeScript、ESLint、Jestなどなど）を組み合わせる時に面倒になる周辺設定をパパっと済ませてくれます。Electronもこれに含まれます。
　まずはVue.jsが含まれているプロジェクトを開きます（npm i -g @vue/cliでインストール。vue uiでGUIに移動。新しいプロジェクトの作成でもインポート[既存のvueコード読み込み]でもOK）。後はプロジェクトプラグインからvue-cli-plugin-electron-builderを選んでインストールするだけです。

　するとElectronを扱うのに必要な環境設定コードと実行スクリプトがダンプされます。


vue uiの画面を使えばビルドの設定もUIでできます。これでビルドスクリプトを実行すればデスクトップアプリの完成です。

　

著者:杉浦

【Vue.js】@vue-cliのuiコマンドが便利

　@vue-cliは主にVue.jsプロジェクトのひな型を生成するためのプログラムです。npm install -g @vue/cliでグローバル下にインストール、vue create [プロジェクトのパス]と命令して対話式にプロジェクトの内容を設定する方法が基本の使い方です。
　Vue CLI

　基本の使い方でも上画像の様に扱いやすいのですが、uiコマンドはそれ以上に便利で継続的に扱えます。

vue ui

と命令すると徐にローカルサーバが立ち上がり次のwebページを開きます。

　作成から新規プロジェクトの作成、インポートから既存プロジェクトのインポートができます。
　uiコマンドが特に便利なのがここからでnpmやyarnと組み合わさってCLIから行う何があるかもわからない機能の内、重要なものをわかりやすく分類し詳しく説明した上でUI化してくれます。Vueの拡張パッケージをプラグイン、npmリポジトリにある任意のパッケージを取り扱う依存、各設定ファイルの詳細をUI化した設定、package.json中のscriptを走らせるタスクが用意されています。


　
　IDEもコードと直結して即座に使う分にはなかなか便利なのですが、専用機能というだけあってvue-cliのuiはリッチで便利です。設定次第でちょっとしたCI（継続的インテグレーション）としても使えます。