omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


vuejsとvuexでWEBアプリを作成 はじめに

vuejs2.0とvuexを使ってちょっとしたWEBアプリを作る機会があり、初めてvuejsを使ったのですが、とても実装がしやすく他のフレームワークと比べて使い方を覚えるのがとても簡単でした。

この先、自由にフレームワークを使えるとしたらvuejsを使うと思います。

ただ、公式のドキュメントもとてもわかりやすく充実しているのですが、日本語での実装例はあまり見当たらなかったので、自分が学習した手順で実装方法をまとめていこうと思います。

環境環境

vuejsでWEBアプリを実装するための開発環境としてnodejsとnpmがインストールされていることを前提とします。vuejsに限らず、javascriptのフレームワークを使う場合はnpmを使ってパッケージ・モジュールの管理を行うので、基本的なことだけでも予備知識として学習しておく必要があります。

コマンドで上記2つのプログラムがインストールされているか確認します。下記のバージョンと差異があっても特に問題はないと思います。

$ node -v
v6.6.0
$ npm -v
v3,10.3

ES6

vuejsは通常ES6(ECMAScript6)で実装します。ES6とは次世代のjavascriptで、クラスを宣言できたりその他いろいろと便利な機能が追加されています。

従来のjavascriptでも開発は可能ですが、公式のドキュメントを含めてネット上のほとんどのサンプルがES6で実装されています。なので従来のjavascriptで開発していると、ネット上のサンプルをそのまま貼り付けても何故か動かないといったことになってしまうので、ES6で実装することをおすすめします。

ビルド

ES6で実装したコードは最新のブラウザでも完璧に動かすことはまだできません。なので現在のブラウザが認識できるようにES6のコードを従来のjavascriptに変換する必要があります。変換方法は別のセクションで紹介します。

紹介が前後してしまいましたが、このためにnodejsやnpmを使用します。javascriptの変換だけでなく、ファイルを一つにまとめたり、古いブラウザでも動かせるようにコードを補完(polyfill(ポリフィル))したりいろいろなことができるので、やはりWEBアプリの開発にはnodejsとnpmは欠かせないかもしれません。

次回 vuejsの開発環境を構築する はvueの開発環境をインストールします。





3
次へ

  • vuejsとvuexでWEBアプリを作成 はじめに

    vuejs2.0とvuexを使ってちょっとしたWEBアプリを作る機会があり、初めてvuejsを使ったのですが、とても実装がしやすく他のフレームワークと比べて使い方を覚えるのがとても簡単でした。ただ、公...


  • vuejsの開発環境を構築する

    vuejs2.0の開発環境を構築する手順を紹介します。最初にnodejs(javascript)のパッケージ管理をするためにpackage.jsonというファイルを作成します。以下の内容でpackag...


  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


3
次へ