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

Last updated at 2017-12-22Posted at 2017-12-16

はじめに

SC（非公式） Advent Calendar 2017 16日目です！
そして、記念すべきQiita初投稿です！

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

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

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

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

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

アプリケーション構成と主な機能

本題に入る前に、アプリについての説明をしたいと思います。

アプリケーション構成

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

主な機能

座席の登録/解除
座席の検索
自動アップデート

以下は今後実装予定…

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

環境構築

electron-vue というボイラープレートを使用しました。
フロントの構成がElectronとVue.jsになったのも、このボイラープレートがあったことが大きな要因でした。

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

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

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

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

デフォルトのディレクトリ構成はこのようになります。

環境が整ったところでsrc以下をいじっていくわけですが、main？renderer?と謎のフォルダが(´・ω・｀)
ということで、やっと本題です(｀･ω･´)

Electronとは？

Mac/Linux/Windowsで動作するデスクトップアプリケーションを作るためのフレームワークです。
HTML/JavaScript/CSSといったWebの技術で開発できることが特徴です。
このアプリもデスクトップver.とブラウザver.を同一ソースでリリースしています。

2つのプロセス

Chromiumをベースとしているので、以下の2つのプロセスから構成されます。
そして、それぞれのプロセスにNode.jsが埋め込まれています。
こちらがChromiumの構成です。

※Practice on embedding Node.js into Atom Editor by Cheng Zhao