twitter client for electronを写経してみた
WEB+DB PRESS vol.94の "作って学ぶElectron Webの技術でデスクトップアプリ！” を実践したコードをgithubで公開しました。
ソースコードはgihyo.jpの記事サポートページに公開されています。
コメントが書かれてないので、記事を読まないと初心者には理解できないと思います。
このプロジェクトもほぼ同じコードとなっていますが、自分なりのコメントを追加しています。
作って学ぶElectron Webの技術でデスクトップアプリ！
Electronを利用すると，JavaScript，HTML，CSSなどWebの技術を利用してデスクトップアプリを作成できます。 GitHubが開発していて，Atomエディタに使われているほか，Visual Studio Codeなどにも利用されています。 本特集では，実際にElectronを使ってアプリを開発しているエンジニアにより，Electronの基礎知識からはじめ，実際にサンプルアプリを作成して主要なAPIの使い方，デバッグ／テスト手法，そしてアプリを配布するための手順まで解説します。
Build
Node.jsと、デスクトップ・アプリケーションを作成できるNode.jsフレームワークElectronを使って作成します。
Electronは、JavaScriptとHTMLで実装します。 HTMLコンポーネントを作成するReactフレームワークも使います。
Dependencies
- "babel-plugin-transform-react-jsx": "^6.8.0",
- "babel-register": "^6.14.0",
- "photon": "git+https://github.com/connors/photon.git",
- "react": "^15.3.1",
- "react-dom": "^15.3.1",
- "twit": "^2.2.4"
パッケージのversionに"^"が入っている場合は、最新にアップデートされるらしいです。
実際に開発して公開などする場合は、固定のバージョンを指定するようにしたほうが良さそうです。
Build command
npmで依存パッケージをDLできます。 docpressも依存に追加しているのでDLされます。
npm i
実行コマンド
package.jsonに記述していますが、npmのscripts設定からelectronを起動しています。
npm run start
Document
ついでにdocpressというMarkdownで書くwebsite generatorが紹介されていたので、ドキュメントに使ってみました。
https://clashm45.github.io/electron-twitter-clientclashm45.github.io
Impressions
ちょうど個人的にElectronを勉強してたところでした。
この記事は、Node.jsとそのパッケージ管理ソフトnpmも、React.jsも実践できるのでいい教材です。
Electronはそう難しくなく、むしろReactの挙動を理解するまでが大変。
以上
