electron-vueでToDoデスクトップアプリをつくりました

前提

  • electronって何?って状態
  • Vue.jsチョットサワッタコトアル状態
  • electronで簡単にデスクトップアプリできるの?やってみたい!
  • さらにVue.jsも使えるelectron-vueってのがあるの?やってみよう!

何つくろう

とりあえず上記のような流れでelectron-vueを触ってみようと思い立ったものの、何をつくろうか悩んだ。 考えた結果、普段僕は仕事でWindows標準搭載の「付箋」を結構良く使っていることに気がついた。(Windows10ではSticky Notes)ちょっとしたメモとかをパッと取りたいときにはすごく便利だと思います。ですが、「ちょっとしたメモ」の数が増えると画面がえらいこっちゃになる。

なので、デスクトップで「ちょっとしたメモ」を取るためのアプリとか良いんじゃないかと思って作ることにしました。

完成

とりあえず完成したものを

f:id:OrionB312:20180704223112g:plain

こんな感じです!

できること

  • ToDoを入力してAddボタン押下でToDoを登録
  • Doneボタン押下でToDo削除
  • All Clearボタン押下でToDoの一括削除
  • AddしたToDoは終了して立ち上げなおしても残る(DoneやAll Clearするまでは)

使用技術について

ほぼ前提条件に書いてあるものがすべてなのですが一応

electron-vue

下記公式日本語ドキュメントから引用

vue で構築された electron アプリケーションを作成するためのボイラープレートです(名前から分かるように)

Vue.jsとelectronを使ってアプリケーションを作成できるやつです(名前から分かるように)

electron-vue日本語ドキュメント

2017年度版 electron-vueで始めるVue.js

Electron

そもそもElectronとは…

JavaScript, HTML, CSSを用いてクロスプラットフォームなデスクトップアプリを開発

Node.js + Chromiumをランタイムとしており、JavaScript、HTML、CSSでアプリを作れるよってことです。そして配布まで簡単にできます。

Electron公式ドキュメント

Electronでアプリケーションを作ってみよう

Vue.js

ReactやAngularと並ぶJavaScriptフレームワークです。その特徴は双方向データバインディングや単一ファイルコンポーネントとか様々あり、SPA(Single Page Application)の構築に向いていると言われています。詳しくはドキュメントをご覧ください。

Vue.js公式ドキュメント

LocalStorage

アプリを終了して再起動してもToDoが残るようにしたかったので、その実現のために使用しています。HTML5のWebStorageという技術の1つです。

HTMLクイックリファレンス

Element

見た目にはVue.jsのコンポーネントライブラリのElementを使用しました

Element

Vue.jsで高品質なUIライブラリElementを使ってみる

他にも

他にも詳細まで書くとNode.jsであったりnpmであったりするのですが、そのあたりは割愛します。

ソースコード

GitHubにあげました。

OrionB312/electron-todolist

要所について自分用メモも兼ねて解説します。

ボタン押下時のメソッド

// Add押下時
addTodo () {
  var todoObj = {}
  todoObj.todo = this.todo

  var todoList = getLocalStorage()

  todoList.push(todoObj)
  setLocalStorage(todoList)

  this.todoList = getLocalStorage()
  this.todo = ''
},
// Done押下時
deleteTodo (index) {
  deleteLocalStorage(index)
  this.todoList = getLocalStorage()
},
// All Clear押下時
allClearTodo () {
  deleteAllLocalStorage()
  this.todoList = getLocalStorage()
}

特に難しいことはしていません。templateからの引数を渡して、LocalStorage操作用のメソッドを呼び出したり、値を詰めて返却しているだけです。

LocalStorageの操作

上記のボタン押下時のメソッドから呼び出しています。

// LocalStorage取得
var getLocalStorage = function () {
  var todoList = []
  if (localStorage.getItem('todoList') != null) {
    todoList = localStorage.getItem('todoList')
    todoList = JSON.parse(todoList)
  }
  return todoList
}
// LocalStorage保存
var setLocalStorage = function (todoList) {
  var jsonData = JSON.stringify(todoList)
  localStorage.setItem('todoList', jsonData)
}
// LocalStorage削除
var deleteLocalStorage = function (index) {
  var todoList = getLocalStorage()
  todoList.splice(index, 1)
  setLocalStorage(todoList)
}
// LocalStorage全削除
var deleteAllLocalStorage = function () {
  var todoList = getLocalStorage()
  todoList.splice(0)
  setLocalStorage(todoList)
}

ここでは基本的にドキュメント通りにLocalStorageに保存したり取得したりしているだけです。ドキュメントにもありますが、保存時にはJSONに変換で、取得時にはJSONから変換し忘れないようにすることです。

参考

下記ブログに大変お世話になりました。ToDoアプリ全体の構築にはbitA Tech Blogさんを参考に、LocalStorageの操作関連はThe sky is the limitさんの記事を参考にして組み合わせてみました。あとは自分なりに好きなように変えたりしています。

electron-vueでToDoアプリを作成してみた

【Vue.js】Vue.jsでToDoアプリ作成【LocalStorage】


以上です。electronって何?オプティマスの仲間?サイバトロンなの? っていうレベルからなんとかToDoアプリ作成までいけました。

他にも自分用ツールみたいな感じで作ってみたいです。