フロントエンド開発初心者がelectron-vueでアプリをつくってみた　その１～概念編～

# はじめに
[SC（非公式） Advent Calendar 2017](https://qiita.com/advent-calendar/2017/syscon) 16日目です！
そして、記念すべきQiita初投稿です！

今までは…
主に製造業のお客様の業務Webアプリケーションの開発に関わってきました。
言語としては、Java、C#、VBなどサーバーサイドが中心です。

最近は…
「フリーアドレス制が導入されるので、リアルタイムな座席表がほしい！」という社内の要望に応え、SC5年目以下のメンバーでこのようなデスクトップアプリを作りました(｀･ω･´)！

![メイン.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/0e3d78fc-02ef-1d31-8ccf-9080c9710a3d.jpeg)

個人情報のためモザイクをかけていますが、座席がボタンになっていて、名前が表示されています。
座席をクリックして登録/解除をするといったシンプルなアプリです。

期間としては、要件定義からリリースまで約1ヶ月！
私は主に、ElectronとVue.jsによるフロントエンド開発を担当していました。
ですが、今まで触ったことがあるのはjQueryぐらい、デスクトップアプリも初めてでした。

ということで、
フロントエンド開発初心者の私が、リリースに至るまで学んだことを、
2回に分けてまとめたいと思います
その１では、環境構築からElectronとは、Vue.jsとはといった概念について、
その２では、その概念に基づいて、具体的にどう実装したのかについて書きたいと思います。

# アプリケーション構成と主な機能
本題に入る前に、アプリについての説明をしたいと思います。
## アプリケーション構成
![アプリケーション構成.png](https://qiita-image-store.s3.amazonaws.com/0/163867/4e9a6f5a-1bac-88ba-8113-4cb12de56f7d.png)

処理は全てWeb APIになっています。
サーバー側は全てAzureで、
データベースはSQL Databaseを使用し、APIサーバーはC#で開発しています。
ソース管理はGitHubを使用しています。
今後、通知サーバー（Node.js/socket.io）を増やす予定です。

## 主な機能
- 座席の登録/解除
- 座席の検索
- 自動アップデート

以下は今後実装予定…

- 伝言メモ/通知
- 行動予定表（離席中/外出中などステータス管理）

# 環境構築
[electron-vue](https://github.com/SimulatedGREG/electron-vue) というボイラープレートを使用しました。
フロントの構成がElectronとVue.jsになったのも、このボイラープレートがあったことが大きな要因でした。

- vue-cli
- vue-loader
- webpack
- electron-builder
- vue-router
- vuex
- axios

など開発から自動デプロイまで様々な設定が含まれています。
詳しい環境構築方法は[electron-vue（日本語ドキュメント）](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/) をご覧ください。

インストールが完了し、 `npm run dev` を実行すると、もうHello Worldです。

![HelloElectoronVue.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/3eaf55a1-9884-1bf5-7d17-8eb230d1e6be.jpeg)

詳しいバージョンなどはこちらです。
OS：Windows 8.1
Electron：1.7.9
Vue.js：2.5.3
Node.js：7.9.0
開発にはVisual Studio Codeを使用しました。

デフォルトのディレクトリ構成はこのようになります。
![ディレクトリ.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/4b46e9f0-59e0-cd3f-c7f6-9041bc11a1c0.jpeg)


環境が整ったところで`src`以下をいじっていくわけですが、`main`？`renderer`?と謎のフォルダが(´・ω・｀)
ということで、やっと本題です(｀･ω･´)
# Electronとは？
Mac/Linux/Windowsで動作するデスクトップアプリケーションを作るためのフレームワークです。
HTML/JavaScript/CSSといったWebの技術で開発できることが特徴です。
このアプリもデスクトップver.とブラウザver.を同一ソースでリリースしています。

## 2つのプロセス
Chromiumをベースとしているので、以下の2つのプロセスから構成されます。
そして、それぞれのプロセスにNode.jsが埋め込まれています。
こちらがChromiumの構成です。
![Chromium構成.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/7574096c-354b-d1e0-2d03-d57eb61ada41.jpeg)
※[Practice on embedding Node.js into Atom Editor by Cheng Zhao](https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor)



そして、こちらはElectron（旧称：Atom Shell）の構成です。
![AtomShell構成.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/5ca7a3c2-ac0b-3ea7-42e7-d88c976060c6.jpeg)
※[Practice on embedding Node.js into Atom Editor by Cheng Zhao](https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor)

- Main Process（1つのみ）  
ウィンドウの表示などバッグエンド
- Renderer Process（複数）  
レンダリング  
※今回はここにVue.jsを使用しています。

# Vue.jsとは？
インタラクティブなインタフェースを作るためのJavaScriptライブラリです。

## Progressive Framework
Vue.jsの大きな特徴の1つがこのProgressive Frameworkです。

フロントエンドには様々なフレームワークがあり、アプリケーション開発の複雑性を解決しようとしていますが、そのフレームワーク自身にも複雑性があります。

開発当初、適切なフレームワークを採用したとしても、アプリケーションはProgressive（進歩的）であり、どんどん変化していきます。

この変化に対して、フレームワークもProgressiveであろうとするのが、Progressive Frameworkの考え方です。

Vue.js自体はデータバインディングやリアクティブなレンダリングといった単純なライブラリであり、そこにその他のライブラリ（vue-router、vuexなど）を組み合わせることで、アプリケーションの規模に応じたフレームワークを作っていくことができます。

Vue.jsではその組み合わせる領域を6つのレイヤーに分けています。
アプリケーションが小規模であれば第1、2階層のVue.jsとして提供する機能のみを、規模が大きくなるにつれ、第3階層のルーティングや、第4階層の状態管理を組み合わせていきます。
このアプリでは、第5階層まで全て含めています。

![ProgressiveFramework.jpg](https://qiita-image-store.s3.amazonaws.com/0/163867/0fd5b097-cfcb-9880-5157-9e229f95e496.jpeg)
※[The Progressive Framework](https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p)

1. Declarative Rendering：Vue.js  
データバインディング、リアクティブなレンダリング
1. Component System：Vue.js  
UIのモジュール化
1. Client-side Routing：vue-router  
シングルページアプリケーションの構築
1. Large-scale State Management：vuex  
コンポーネント間での状態の集中管理
1. Build System：vue-cli、webpack、vue-loader  
プロジェクトの環境構築や構成管理
1. Client-server Data Persistence：今後提供予定…  
アプリケーションの複雑なデータ構造の永続化

# その２に向けて
その１～概念編～はいかがでしたでしょうか？
その２ではProgressive Frameworkの階層ごとに、データバインディングってどうやるの？、状態管理ってどうやるの？といった具体的な実装についてまとめたいと思います。
学び始めたばかりですので、誤りなどありましたらご指摘頂ければ幸いです。

# 参考
[Electron（日本語）](https://electronjs.org/)
[Vue.js（日本語）](https://jp.vuejs.org/index.html)
[electron-vue（日本語）](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/)
[Vue.js入門 ―最速で作るシンプルなWebアプリケーション](http://gihyo.jp/dev/serial/01/vuejs)
[Practice on embedding Node.js into Atom Editor by Cheng Zhao](https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor)
[The Progressive Framework](https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p)
[ElectronでVue.jsを始める](https://qiita.com/SatoTakumi/items/fd79672d7eb8a9b4a0bb)
[ChromiumからElectronを眺める](https://qiita.com/seihmd/items/8caf3af3b7a612b3c628)