#はじめに
これは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の仕組みを最低限学ぶ
┃ ┣ アーキテクチャを知る→「概要を知る」の２つの記事をしっかり読む。
┃ ┗ 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
- React ... Facebookが作成したMVCのV担当フレームワーク。
Component指向がなんたら、renderがほにゃらら、DataFlowは一方向で、stateとpropが・・・ うむ。わからん。
↓の記事たちを後で読む。
[Qiita-なぜ仮想DOMという概念が俺達の魂を震えさせるのか]
(http://qiita.com/mizchi/items/4d25bc26def1719d52e6)
Qiita-一人React.js Advent Calendar 2014 - JSX ... React用に書くXMLライクなJavaScript
- Flux ... フレームワークの概念。
- Redux ... ↓を参考にし、後で調べる。
Qiita-Redux入門【ダイジェスト版】10分で理解するReduxの基礎
Qiita-React+Redux未経験者のプロジェクト受入 - Vue.js, Angular.js ... Reactに似たフレームワーク？
###テスト・デバッグ （未使用）
- Spectron ... Electronのテストフレームワーク
- Devtron ... Electronのデバッグツール
- Karma ... Javascriptのテストランナー
- mocha ... Javascriptのテストフレームワーク。アサーションライブラリは提供してない。
###その他
- SPA ... Single Page Application。
- boilertemplate ... プロジェクトのひな型。ダウンロードしてすぐビルドや開発できる構造。
- Livereload ... メインプロセス以外のプロセスだと開発中でもロードできる
#さいごに
参考にさせてもらったサイトや記事には感謝しています。ありがとうございました。
ご指摘等がありましたら、気軽にコメントください。