An example of a note application using django and vue.js (with vuex)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
note_client
note_server
.gitignore
.travis.yml
LICENSE
README.md
Vagrantfile
note-app.png

README.md

ノートアプリケーション

Build Status

ノート

これは何ですか?

テキストを編集、保存できるシンプルなウェブアプリケーションです。

バックエンドとなるAPIサーバーにはDjangoフレームワーク(Python)、フロントエンドにはVue.js(JavaScript)を使っています。

DjangoフレームワークとJavaScriptでアプリケーションを作るサンプルコードとして作成しました。

note-app-django-vue-javascriptのVuex対応版になります。

よろしければGitHubでStarをつけてください!

以下の要素を含んでいます:

  • バックエンド
    • Python3
    • venv
      • プロジェクトで使うPython環境を作成します
    • Djangoフレームワーク
      • Django REST Framework
        • REST APIを作るのに便利な機能がたくさん含まれるモジュール
      • django-debug-toolbar
        • 各種デバッグ情報をサイドバーで表示します
  • フロントエンド
    • Babel
      • 最新の言語仕様の構文で書いたコードは、そのままだと古いブラウザなどで動かないので、Babelを使ってトランスパイルして動かせるようにします
    • webpack
      • JavaScriptコードやCSSなど、アプリケーションを構成するファイル群を配備用にまとめます
      • webpack.config.jsでビルドルールを設定します
        • loaderの仕組みによりいろいろな処理ができます(babelで変換したりとか)
    • Vue.js
      • データバインディングとコンポーネントの仕組みを提供するJavaScriptフレームワークです
    • Vuex
      • Vue.jsアプリケーションの状態管理の仕組みを提供するライブラリ(実質フレームワーク)です
    • Bootstrap
      • HTMLのUI部品(ナビゲーションやボタンなどいろいろ)を提供するUIフレームワークです
      • CSSと動きのある部分に必要なJavaScriptコードが提供されます
      • jQuery部分をVue.jsに置き換えたBootstrapVueと組み合わせて使っています
    • Font Awesome
      • Webフォント、CSSが提供されるので、HTMLでクラスを指定すれば使えます
    • axios
      • REST APIクライアントです
    • ユニットテスト
      • mocha
        • ユニットテストのフレームワークです(describe, itで記述)
      • power-assert
        • アサーション関数
      • Sinon.JS
        • モック
      • moxios
        • axiosに対応したモック(スタブ)

構成

  • note_server
    • バックエンド(Pythonで動作するAPIサーバー)
  • note_client
    • フロントエンド(webpackでビルドし、Djangoフレームワークのstaticfilesモジュールから配信される)
    • CSS(Sass)も含む

動かしてみる

  1. note_client をビルドする
  2. note_server を起動してブラウザでアクセスする

設計について

note-app-django-vue-javascriptとの差分のみ記載します。

アーキテクチャとモジュール構成に関して考えた点など:

  • Vuexを使う
    • Vueコンポーネント側の記述を減らせる
    • テストコードは書きやすくなる
      • テストしやすいが、冗長に感じることもある
    • Vuex自体はフレームワークのようなもので、学習コストがかかる点には注意が必要
    • アプリケーションの構造は Shopping Cart Example を参考にしました。
  • Vueコンポーネントのテストはがんばらない
    • Vuexを使うことで、VueコンポーネントのUI側のコードを減らせるので、ほとんどやらなくてもよい
    • 変更されやすい部分はがんばらない

Vagrant

開発にはVagrantを使用しています。VirtualBoxとVagrantをインストールしていれば、同様の環境を用意できます。

vagrant up
vagrant ssh