ゼロから始めるElectron - 1週目

  • 26
    いいね
  • 0
    コメント

はじめに

これはElectronを使ったアプリケーション開発の学習記録のためのものです。ゼロから初めて1週間たったので、記録します。
今回は、情報の洪水の整理と、参考サイトのまとめです。

Electronとは

テキストエディタであるAtomエディタ(*1)の開発元(GitHubの創業者)が開発した、マルチプラットフォームで動作するディスクトップアプリケーションをWeb技術(with JavaScript, HTML, and CSS)で開発できるフレームワーク(*2)です。
*1 https://blog.codecamp.jp/atom_utility
*2 http://www.buildinsider.net/enterprise/electron/01

ちなみに、Atom(原子)→Electron(電子)です。またElectronのテストツールの名前はSpectron(分光法)です。

あいさつ

言語文化をテーマとしたシンポジウムで、アメリカ人のパネリストが次のように話を切りだした。

日本人はお詫びで話を始め、アメリカ人は冗談で始めると言います。みなさん期待なさっているかもしれませんが、今日の私の話には冗談はありません。初めにお詫びしておきます。

ココロの話法 ―― アイロニー・ユーモア・諷刺を中心に より

私もお詫びから始めたいと思います。
タイトルを決めた後に検索したら、かぶりました。すみません。
  Qiita Re:ゼロから始めるElectron開発生活
そして、もう一つお詫びします。ゼロから始めていますので誤り等もありえます。
誤りは、適宜追記する形にしたいと思います。

ルール

  • 原則1週間に一度、用語や勉強結果をまとめようと思います。
  • 無目的で行っても(内容的にももちろん、モチベーション的にも)学習効果は薄いため、チュートリアル的にアプリケーションを開発していきたいと思います。
  • まったくゼロからなので、失敗しても繰り返し行えばよい(早くなんども死ねばよい)という思想の元、正確性より速度を重視したいと思います。
  • 誤りは適時修正していきます。

初心者ですので、補足や間違い等がございましたらご指摘ください。
(C++,C#でのディスクトップアプリ、JavaでのStruts,JSFの経験はあり。)

目指すもの

ディスクトップアプリケーションを実際に作りたいと思います。
Do it(GTD,Get Things Doneのツール)のようなToDoタスク管理ツールか、WindowsのExplorerのようなツールのどちらか、あるいは両方を作りたいと考えていますが、
まずはExplorerかなと考えています。

目指すためのタスク

現場で使えるところまで作りたいので、テスト、ビルドの自動化までやります。
CI環境がないので、別にしておきます。

Electronの概要を知る (Electronとは?でググる)
┃  ┣ @IT Electronとは? アーキテクチャ/API/インストール方法/初期設定
┃  ┗ Electronプログラミング入門 — インストールからミニブラウザ構築まで
Hello Worldを作る
┃  ┣ インストールする → 公式サイトのQuick StartとRe:ゼロに書いてあった。
┃  ┣ 開発環境を整える → Node.jsとnpmが必要。
┃  ┗ Hello Worldを作る→Quick Start
とにかく動くサンプルをコピーする
┃  ┣ [公式デモ]がGet Started->Explore the Electron APIsにあるようだ。
┃  ┗ Qiita-Electronでアプリケーションを作ってみようは大変参考になりそう。
Electronの仕組みを最低限学ぶ
┃  ┣ アーキテクチャを知る→「概要を知る」の2つの記事をしっかり読む。
┃  ┗ Electronの公式デモのコードを見る→実際に動かす。
IDE(開発環境、デバッグ環境)を揃える (Electron IDEでググる)
┃  ┣ HTML5開発に適したIDEを探す(その9)に一覧がある。
┃  ┗ Visual Studio CodeはElectron製エディタらしい。
ビルドを自動化する (electron ビルドでググる)
┃  ┣ Qiita-Electronの手習い〜Electron環境からパッケージ化まで〜は丁寧。
┃  ┗ electron packagerでビルドできる。->ついでに公式Docの日本語訳があった。
┃  ┗ grunt, gulp, babelというのもある。
テストを自動化する
┃  ┣ Qiita-Spectron で Electron アプリのテストをする は参考になりそう。
┃  ┗ karma, mochaというのもあるらしい。
Explorerを作ってみよう
┃  ┣ JavaでのPrimefaces, Richfacesのようなコンポーネントがあるといいな。
┃  ┃ → React, Flux, Reduxというキーワードが散見。
┃  ┣ ツリーを出したい
┃  ┣ メニューを出したい
┃  ┣ リストを出したい
┃  ┣ ファイル操作したい
┃  ┣ ドラッグ&ドロップしたい
┃  ┣ コピー&ペーストしたい
┃  ┣ Undo&Redoしたい
┃  ┗ お気に入りを作りたい
例外設計を知る
国際化対応を知る
・・・

関連しそうな用語と今の理解

Electron

  • "Build cross platform desktop apps with JavaScript, HTML, and CSS"
    と公式ページにあるように、Web技術を使ったクロスプラットフォームエンジン
  • Node.js上で動作。
  • npmで関連モジュールのインストールができる。npmはNode.jsと一緒にインストール。
  • JavaScript, HTML5, CSSで開発できる。

Script言語

  • JavaScript以外にも、
  • CoffeeScript ... Ruby, Pythonに似た拡張JavaScript
  • TypeScript ... Microsoft製の拡張JavaScript
  • EMCAScript=ES5,ES6(ES2015) ... JavaScript の標準であり、Ecma Internationalのもとで標準化手続きなどが行われている
    1年に一度リリースされる。
    文法は、Qiita-ES2015 (ES6)についてのまとめが参考になりそう。

とりあえず、ES2015(ES6)にします。

IDE (詳細未調査)

HTML5開発に適したIDEを探す(その9)参照。
- Visual Studio ... MicrosoftのIDE。有償と無償あり。
- WebStorm
- Google Chrome Workspaces
- NetBeans ... OracleのJavaのIDEなのになぜ?
- Aptana Studio
- Brackets
- Orion
- Visual Studio Code ... Electron製

とりあえずElectron製らしい後発のVisual Studio Codeにしようと思います。
「これがさいきょうおすすめのIDEだ。」というものがあれば教えていただきたいです。

ビルド

  • electron-packager ... Electronのコードをビルドしてexeまで作るパッケージャー。
    アイコンやexe名も変更できる。
    Electronの手習い〜Electron環境からパッケージ化まで〜
  • grunt ... ビルドツール
  • gulp ... ビルドツール
  • babel ... ESをJavaScriptにするトランスパイラ
  • Webpack ... ビルドツール (Reゼロ記事に書いてあった)
  • CSS Modules ... React向けのCSSフレームワーク (Reゼロ記事に書いてあった、React+Redux未経験者のプロジェクト受入にも。)
  • ESLint ... JS構文チェックツール(Reゼロ記事に書いてあった)
  • Flow ... 静的型付けの導入とチェック(Reゼロ記事に書いてあった)

試行錯誤が発生してWebpackにする方針。

React

テスト・デバッグ (未使用)

  • Spectron ... Electronのテストフレームワーク
  • Devtron ... Electronのデバッグツール
  • Karma ... Javascriptのテストランナー
  • mocha ... Javascriptのテストフレームワーク。アサーションライブラリは提供してない。

その他

  • SPA ... Single Page Application。
  • boilertemplate ... プロジェクトのひな型。ダウンロードしてすぐビルドや開発できる構造。
  • Livereload ... メインプロセス以外のプロセスだと開発中でもロードできる

さいごに

参考にさせてもらったサイトや記事には感謝しています。ありがとうございました。
ご指摘等がありましたら、気軽にコメントください。