Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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

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

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

メイン.jpg

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

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

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

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

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

アプリケーション構成

アプリケーション構成.png

処理は全て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です。

HelloElectoronVue.jpg

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

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

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

Electronとは?

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

2つのプロセス

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

そして、こちらはElectron(旧称:Atom Shell)の構成です。
AtomShell構成.jpg
Practice on embedding Node.js into Atom Editor by Cheng Zhao

  • 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
The Progressive Framework

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

その2に向けて

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

参考

Electron(日本語)
Vue.js(日本語)
electron-vue(日本語)
Vue.js入門 ―最速で作るシンプルなWebアプリケーション
Practice on embedding Node.js into Atom Editor by Cheng Zhao
The Progressive Framework
ElectronでVue.jsを始める
ChromiumからElectronを眺める

kurimeg
デザインもわかるフロントエンドエンジニアになりたい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away