【実録】Electronアプリを作れるようになるまでの2ヶ月

この記事はElectronに挑戦する人のために書きます。

とある組み込みエンジニアです。
お仕事ではC言語を使い、エクセルの資料やチェックリストに囲まれてる。そんな感じです。
他人のスピーチ動画を見るが好きです。

まとめ

1. ひょんなことからElectronでアプリを作ろうと思った（先輩の勧め）
2. 動画を見て、手を動かした（Udemy, YouTube, ドットインストール）
3. 思い出せるように、記録を書いた（Dropbox, Qiita）
4. 成果や過程を、仲間にたびたび公開した（Slack）
5. Electronアプリを作れた

個人的勝利の方程式　=　動画(Udemy, YouTubeなど)　+　メモサービス(Dropbox, Qiitaなど)　+　Chat(Slackなど)

まとめはこんな感じ。
コード等はありませんが、私がElectronのアプリ作成にチャレンジした実録が誰かの役に立てばいいなと思います。

黎明編

2018年11月末頃。社内のChatにて。

私「例えばプライベートでWindows Form +C#でアプリを作っても、家のMacで動かない。クロスプラットフォームアプリを作るなら、Xamarinなの？Electronなの？」
先輩「Electron + React + Redux楽しいです。」
私「へー。じゃあ、やるか！」

この時の私は、
HTML, CSS, JavaScriptは未経験。
Electronは、AtomやVisual Studio Codeとかで使われているやつという認識。
ReactとReduxは、知りません。
英語は、TOEIC300点台？
んー、ポケモンに例えるとコイキングって感じですかね！

一方、先輩は社外の公式のカンファレンスにも登壇したことのある人。
公式のカンファレンスに登壇したことのあるとか...強い。主人公すぎる。
ポケモンに例えると600族のガブリアスでしょうか。
ガブ先輩が言うならきっと正しいのだろうと思い、そのうちElectronでアプリを作ろうと思った。
当時、Windows Formで作っていたのは、自作のポモドーロタイマーでした。

そんな時、プライベートで使っているSlackに一つの投稿があった。

obiwan師匠「udemy black friday sale」

Udemy修行編

Udemy

オンライン学習サービスは、「ドットインストール」や「Progate」とかなら知っていた。やったことないけど。「Udemy」は存在すら知らなかった、すまんな、Udemy！
簡単にNetで調べてみると、Udemyは頻繁にセールをやっていて、セールで買うのが定石らしい。
この点については、正直うーんどうなんだろうとは思います。当然、Netにもネガティブな意見はあるようです。

obiwan師匠が教えてくれた「black friday sale」では、下限っぽい価格で各コースを購入できるようになっていました。
なので、人柱的にいくつか購入してみました。

その中で、まずGitのコースをやってみました。
もう怖くないGit！チーム開発で必要なGitを完全マスター

なぜなら、プライベートで開発するためにソースコードを管理する仕組みが必要だと思ったからです。
ちなみに、現在会社ではGitもGitHubも使っていません。

1つ目のGitのコース

ヨカッタ＼(^o^)／。
家から一歩も出ないで講師が体系的に教えてくれる、便利な時代になったなー。
講師を雇って直接教えてもらうことに比べれば、動画は安いもんである。
とりあえず、もう怖くないわ。Git。

いやでも待てよ？落ち着け。
世の中に知の高速道路・学習の高速道路という言葉があるけれど、もうこれ「知のリニアモーターカー」じゃね？
え？高速よりすっごく早いよ？？
これから将来、自分よりも若い人たちがこれに乗ってくるの？？？
やっぱ怖いわ。((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ

Dropbox Paper

Udemyのコースで学んだことは、後でざっと見返せるように「Dropbox Paper」に書き留めました。

Udemyの「動画で見ることができる」という点は、分かりやすいというメリットでもあり、一覧性が悪いというデメリットでもある。私はそう思いました。
そのデメリットを補うために、QiitaやDropbox Paperなどのメモサービスを使うのはとても有効だと思います。

人それぞれ好みや環境が異なると思うので、自分に合うサービスを探すと良いでしょう。
自分用メモができるクラウドサービスを比較してみた

他にも、最近知りましたがQrunchというサービスもあるみたいですね。
もっと気軽にアウトプットできる技術ブログサービス「Qrunch（クランチ）」をリリースした【個人開発】

Dropboxの創業者 Drew Houston

Dropboxが話に挙がったので、参考までにYouTubeへのリンクを置いておきます。
私がスピーチ動画好きだからです。
Dropboxの創業者のMITでの講演の動画です。
「勉強して準備万端になってから、何かを始めようと思っている人」は見た方が良いかもしれません。私自身ですね。

2つ目のElectronのコース

Electron for Desktop Apps: The Complete Developer's Guide

結論としては、これもヨカッタ＼(^o^)／
Udemyで『「BEST SELLER」のようなバッヂを持っているコース』や、『4.5以上くらいのスターを持ってる、かつ、レビュー数・受講者数が多いコース』は、それなりに信頼できそうな気がしてきました。

言語は英語です。
「スターとレビュー数の多い英語コンテンツ」と「スターとレビュー数の少ない日本語コンテンツ」とを天秤にかけて前者を選びました。
最初、完遂できるかどうか不安でした。私には、字幕とイラストとCodeが頼りでした。
ちなみに、字幕は自動翻訳のため精度はソレナリ。なのでちょっと時間はかかりました。

しかし、時間がかかっても継続できたのは理由があります。
それは、先程も登場したSlackです。

Slack

こんな風に、Slack上でUdemyの進捗・成果報告をしていました。
画像の左にちっちゃく写ってる(rocketのアイコン)は、obiwan師匠が飛ばしてくれています。
このように、一人っきりの学習ではなく、誰かにゆるく見守ってもらえていました。
なので、途中で挫折はしませんでした。感謝です。

海外出張時や帰省時に、荷物が少なくて済む

以前、長期で家を離れる際には「本」を持って行き学習していました。
しかし、「動画」で学習する場合は、スマートデバイスにダウンロードさえしておけば、どこでだって学習できました。
荷物が少なくすむので、これはホントに楽ちんだなと思いました。

Electronのコースを終えて

このElectronのコースのおかげで、いい感じのHTMLとCSSとJavaScriptさえ用意できれば、Electronアプリを作れるようになりました。

ん？ちょっと待てよ。
私ってばHTML, CSS, JavaScriptは未経験＼(^o^)／

でも、もうUdemyのセール、終わってる。
ならば、無料で学習できるところを探そうか。

無料学習編

ドットインストール

私が作ろう思っているのは、自作のポモドーロタイマーでした。
カウントダウンするタイマーのサンプルさえあれば、多少は自力で改良できる気がしました。
ですので、Webで探しました。

ありました。ドットインストールに。
JavaScriptでカウントダウンタイマーを作ろう (全12回)

レッスン一覧を見ると、この次の講座からPREMIUMってなってます。
つまり、ギリギリFreeでした。
プログラミングのレッスン一覧

もはや、私のためにドットインストールさんがカウントダウンタイマーの講座をFreeにしておいてくれたとしか思えません。
Thank you ドットインストール.

カウントダウンタイマーの講座の成果物を、自力で変えたりして遊びはじめました。

• Electron化してみたり
• CSSで見た目を変更したり
• ポモドーロタイマーらしく、指定の時間からカウントダウンするように変更したり

サンプルを元に、自力で変更してみるのはとても有効ですね。
この時期から、サンプルをいじりつつ徐々にポモドーロタイマーもどきの形に変えていく作業を続けました。

YouTube

２つ目のElectronのコースを受講した時に、１つ気づいたことがあります。
それは「Udemyで講師をしている人がYouTubeにChannelを開設している場合がある」ということでした。
外国人講師のプロフィール欄にYouTubeのリンクがあったので、気が付きました。

仮説ですが、YouTubeに英語圏向けの学習コンテンツを供給すると一定の収入が得られる、または、いい宣伝になるのかもしれませんね。パイがでかいので。
実際、外国人講師がYouTubeやってる率は、日本人講師より高いように感じました。

まー詳しくは分かりませんが、これを利用しない手はないなと思いました。
以下の条件で、捜索を開始しました。

• Udemyで『「BEST SELLER」のようなバッヂ付きのコース』を持っている
• Udemyでのコースの評価が高い
• YouTubeでの登録者数が多い
• YouTubeでのコンテンツが多い

結果、以下の動画を見つけて、実際に手を動かしてみました。
Web Development In 2019 - A Practical Guide
HTML Crash Course For Absolute Beginners
CSS Crash Course For Absolute Beginners
CSS Grid Layout Crash Course
Flexbox CSS In 20 Minutes
もしより良いChannelや動画を知ってるよって方がいらっしゃったら、教えてください

これで、
「HTMLとCSS、なんもわかんない／(^o^)＼」から、
「HTMLとCSS、雰囲気はわかった＼(^o^)／」くらいにはなりました。

結果、ポモドーロタイマーもどきに対しては、Flexboxを適用してみるとか、ボタンを角丸にしてみるとかやりました。

GitHubやElectron公式Webpage

ElectronのGitHubリポジトリにも参考になりました。
https://github.com/electron/electron

特に、Resources for learning Electronの中にあるリンクが参考になりました。

• Electron Documentation
  このDocs以外にも、Electron公式には「Apps」のページがあります。
  ここで「pomodoro」と検索すると、いくつかヒットします。
  https://electronjs.org/apps?q=pomodoro
  他の人が公開しているElectron製ポモドーロタイマーを、実際に知り触ることができます。

• Electron Fiddle
  簡単にElectronでHello Worldしたり、Codeをお試しすることができる。

• Electron API Demos
  ElectronにどのようなAPIがあるのか、実際に動かせるdemoとcodeをみることができる

そんな模索をしている最中に、あるニュースが飛び込んできました。

GitHubプライベートリポジトリ無料公開

GitHub、無料ユーザーもプライベートリポジトリを使い放題に

Gitのコースで学んだコマンドをVisual Studio CodeのTerminalに打ち込んで、
溜まっていた成果物をあらかたプライベートリポジトリに格納しました。その日の内に。

ちょうどGitHubにプライベートリポジトリが欲しいなーと思っていたので、
もはや、私のためにNat FriedmanさんがにプライベートリポジトリをFreeにしてくれたとしか思えません(ジョークです)
Thank you Nat.

Electronアプリ制作編

他の人のElectron製ポモドーロタイマーを触ってみた経験を生かして、自分はどういうものを作ろうかを考えました。
そして、現在の自分の力量もふまえつつ、達成したい機能を考えました。

できました

Feature

• TrayアプリではなくWindowアプリ
  とりあえず、Windowアプリにしました。
  Macで開発していますが、メインの使用はWindowsを想定しています。
  いずれMac用にTray modeも作りたいです。

• ショートカットキーで操作できる

  • Toggle Preferences: Cmd+,
  • Start/Stop: Cmd+S
  • Work/Break: Cmd+D

• 起動時のWindowを表示を、前回の位置とサイズにする
  electron-storeを使わせていただきました。
  https://github.com/sindresorhus/electron-store
  JavaScript界隈は、いろいろ便利なライブラリがありそうですね。

• 日付更新時にインターバルをリセットする機能
  前回起動時の日付と今回の起動時の日付とを比べて、インターバル（右側の数字）をリセットをします。

などなど。
あえて、休憩時間を0分にして作業だけの設定もできます。
これを私と師匠とでは「HELLモード」とよんでいます。

これから

そういえばガブ先輩は、

「Electron + React + Redux楽しいです。」

って言ってたな。
Electron版ポモドーロタイマーづくりが一段落ついたので、Reactを触ってみるのもいいかもしれない。
JavaScriptもまだ勉強途中です。

私が伝えたかったこと

正直、この記事を書き始めたきっかけは以下のイベントです。
【Qiita×Udemy特別企画】学習応援イベント開催中（参加締切：2/28まで）

けれど、1月21日の深夜に見たジャバ・ザ・ハットリさんのBlog記事がとても印象に残りました。
ブログは独自ドメインにしておけ。あとで後悔するぞ、私のように
お布団に入りながら、もしかしたら私も「都合のいい」存在なのかもしれないなと思いました。

独自ドメインはありません。まだやり方も分かりません。
だからせめて、イベントとは関係なく、実体験を元に自由に書いてみました。
伝えたいのは、要するに、現在は様々な学習手段があってすぐ始められるんだなって言うことです。そして、どのツールやサービスを選ぶのかというのは、みなさんの自由だということです。
書きたかったのは「Udemy学習応援」ではなく、「みんなの学習応援」記事でした。
その試みに成功していることを願います。

Thank you for your reading.
最後まで読んでくれてアリガトー＼(^o^)／