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

11
いいね
0
コメント

2017年05月13日に更新

あいさつ

はじめまして。アメリカ人のhxiiです。

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

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

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

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

はじめに

これは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（分光法）です。

ルール

原則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したい
┃　　┗ お気に入りを作りたい
┣ 例外設計を知る
┣ 国際化対応を知る
・・・

さいごに

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

#あいさつ
はじめまして。アメリカ人のhxiiです。
> 言語文化をテーマとしたシンポジウムで、アメリカ人のパネリストが次のように話を切りだした。
>> 日本人はお詫びで話を始め、アメリカ人は冗談で始めると言います。みなさん期待なさっているかもしれませんが、今日の私の話には冗談はありません。初めにお詫びしておきます。

> [ココロの話法 ―― アイロニー・ユーモア・諷刺を中心に](http://d-tsuji.com/paper/p10/index.htm#s2) より

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

#はじめに
これは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（分光法）です。

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

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

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

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

┳ __[Electron](https://electron.atom.io/)の概要を知る__ (Electronとは？でググる)
┃　　┣ [@IT Electronとは？ アーキテクチャ／API／インストール方法／初期設定](http://www.buildinsider.net/enterprise/electron/01)
┃　　┗ [Electronプログラミング入門 — インストールからミニブラウザ構築まで](https://html5experts.jp/yosuke_furukawa/20841/)
┣ __Hello Worldを作る__
┃　　┣ インストールする → 公式サイトの[Quick Start](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md)とRe:ゼロに書いてあった。
┃　　┣ 開発環境を整える → Node.jsとnpmが必要。
┃　　┗ Hello Worldを作る→Quick Start
┣ __とにかく動くサンプルをコピーする__
┃　　┣ [公式デモ]がGet Started->Explore the Electron APIsにあるようだ。
┃　　┗ [Qiita-Electronでアプリケーションを作ってみよう](http://qiita.com/Quramy/items/a4be32769366cfe55778)は大変参考になりそう。
┣ __Electronの仕組みを最低限学ぶ__
┃　　┣ アーキテクチャを知る→「概要を知る」の２つの記事をしっかり読む。
┃　　┗ Electronの公式デモのコードを見る→実際に動かす。
┣ __IDE(開発環境、デバッグ環境)を揃える__ (Electron IDEでググる)
┃　　┣ [HTML5開発に適したIDEを探す（その9）](https://blog.htmlhifive.com/2015/06/09/visual-studio-code/)に一覧がある。
┃　　┗ Visual Studio CodeはElectron製エディタらしい。
┣ __ビルドを自動化する__ (electron ビルドでググる)
┃　　┣ [Qiita-Electronの手習い〜Electron環境からパッケージ化まで〜](http://qiita.com/tagosaku324/items/c720499080d523bbe1d7)は丁寧。
┃　　┗ electron packagerでビルドできる。->ついでに[公式Docの日本語訳](https://github.com/electron/electron/tree/master/docs-translations/jp)があった。
┃　　┗ grunt, gulp, babelというのもある。
┣ __テストを自動化する__
┃　　┣ [Qiita-Spectron で Electron アプリのテストをする](http://qiita.com/yuya-oc/items/9e6d8f347c924b10edfc) は参考になりそう。
┃　　┗ 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)についてのまとめ](http://qiita.com/tuno-tky/items/74ca595a9232bcbcd727)が参考になりそう。

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

###IDE （詳細未調査）
[HTML5開発に適したIDEを探す（その9）](https://blog.htmlhifive.com/2015/06/09/visual-studio-code/)参照。
- 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環境からパッケージ化まで〜](http://qiita.com/tagosaku324/items/c720499080d523bbe1d7)
- 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](http://qiita.com/advent-calendar/2014/reactjs)
- JSX ... React用に書くXMLライクなJavaScript
- Flux ... フレームワークの概念。
- Redux ...  ↓を参考にし、後で調べる。  
  [Qiita-Redux入門【ダイジェスト版】10分で理解するReduxの基礎](http://qiita.com/kiita312/items/49a1f03445b19cf407b7)  
  [Qiita-React+Redux未経験者のプロジェクト受入](http://qiita.com/nabepon/items/22ec2f486f9543b0dd52)
- Vue.js, Angular.js ... Reactに似たフレームワーク？

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

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

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

tashxii

14Contribution

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

あいさつ

はじめに

Electronとは

ルール

目指すもの

目指すためのタスク

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

Electron

Script言語

IDE （詳細未調査）

ビルド

React

テスト・デバッグ（未使用）

その他

さいごに

Popular Posts

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

あいさつ

はじめに

Electronとは

ルール

目指すもの

目指すためのタスク

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

Electron

Script言語

IDE （詳細未調査）

ビルド

React

テスト・デバッグ （未使用）

その他

さいごに

Popular Posts

問題がある投稿を報告する

ご意見

テスト・デバッグ（未使用）