paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者でもフロントエンドの知識が身につくフレームワークElectronでアプリ開発してみた

f:id:paiza:20180712154450j:plain
高村です。

paizaの開発部門はサーバサイド開発に強いエンジニアが多いのですが、逆にフロントエンド周りの知識はそこまで…な傾向にあります。

そのため、先日自分のスキルアップ目的でElectronを使って開発したアプリをネタに、社内勉強会を開いてみました。

今回は、そこで発表した内容(実際にElectronでアプリ開発してみて得られた知見)をざっくり紹介したいと思います。

Electronを採用したのは、フロントエンド全般だけに集中できて(※サーバサイドの余計なことには気を取られずに済む…という意味において)かつ、実践的な知見が得られそう…という判断をしたからです。

私と同じような、フロントエンド専門のエンジニアではないけど、業務上フロント周りの知識も多少必要になってくるからちょっとは知っておきたいなぁ…って人の参考になればと思います。


※このブログは、paiza(ギノ)の社内で開催した「非フロントエンドエンジニアのための、非フロントエンジニアによる、フロントエンド力底上げ講座(このキーワードは、最近のフロント界隈では頻出なので知っておこうねの会)」の内容をブログ化したものです。
元ネタスライド:Electronで学ぶフロントエンド

■ Electronを使って開発したアプリ

reveal.jsで表示するプレゼン資料を簡単に作成できる、httpサーバつきmarkdownエディタ「reveal_lightning」を作りました。
github.com

動機としては、reveal.jsを使っていて地味に不便だと感じていたところを解消したかったため

  • 画像をドラッグアンドドロップで入れられる(URLの記述不要!)
  • アイコンをクリックするだけでアニメーションが作られる(reveal.jsの独自記法を暗記しなくてよい!)
  • オフライン状態でも使える(電波悪いとこでも使える!)
  • GitHub Pagesを利用して、作った資料を簡単に全世界に公開できる
  • Dropboxなどのフォルダ共有サービスを利用して、簡単に資料を同期できる

などといった機能を実現しました。

見た目はこんな感じ。
f:id:paiza:20180403152707g:plain

■Electronとは何か?

GitHubが開発した、Windows、Mac、Linuxのすべてで動くデスクトップアプリを開発するためのフレームワークです。

Webアプリ開発の知識(HTML,CSS,JavaScript)でクロスプラットフォームのデスクトップアプリが作れるのが利点ですが、今回のように、フロントエンドの実践的なスキルを身につけたい場合にも適しています。

たとえばRailsなどを使ってアプリを作ろうとすると、サーバサイドの処理に時間がとられがちですが、Electronを使えばフロントエンドにしっかり集中できます。

その上、Electronを使って一通りアプリ開発ができれば、CSSだけ、JavaScriptだけ…といった断片的な知識だけでなく、フロントエンド全般における知識が身につきます。

◆構成要素

Electronは、「chromium + node.js + native APIs」で構成されています。

f:id:paiza:20180712151302j:plain

表示を担当するのがChromiumというブラウザ(オープンソースのブラウザで、Google Chromeの元になっているものです)なので、ブラウザ依存を気にしなくてよい状態でWebアプリを作っているような感覚でデスクトップアプリを作ることができます。


【参考・出展】
Essential Electron : Electronの簡潔・平易な概要 | POSTD

◆構成要素の関係性

Webアプリで言うところのサーバサイドは、Node.jsが担っており、ブラウザで表示するためのプロセス(レンダラープロセス)と、Node.jsが処理するプロセス(メインプロセス)が別々になっています。

f:id:paiza:20180712151332j:plain

フロントエンドのスキルアップという目的では、メインプロセスの処理は最小限に抑えると、よりフロント部分に集中してスキルを身につけられるかな~といった感触でした。

Electronを使ってアプリを作ると、「フロントエンドエンジニアだったら絶対に知っているようなライブラリやエコシステム(※後述します)」に必然的に触れることになります。私も実際にこのアプリを作るまで、聞いたことしかなかったものも多かったため、非常に勉強になりました。


【参考・出展】
Desktop App Development with Electron – nishantsblog – Medium

■npm

npmはNode.js標準のパッケージ管理ツールです。rubyで言うところのbundlerみたいなものですね。

◆ とりあえず試してみよう

たとえばElectron本体や、JavaScriptのテストフレームワークであるMocha、テストにおけるアサーションの機能を提供してくれるChaiなどは、以下のようにすればインストールできます。

ちなみにこうした作業を簡単に試してみたい場合は、ブラウザさえあれば使えるクラウド型開発環境PaizaCloudを使うのが便利です。

mkdir sample
cd sample
npm init # npmで管理するアプリの初期化
# 対話形式で入力を求められるのでとりあえずひたすらEnter
npm install electron --save
npm install mocha --save-dev
npm install chai --save-dev

npm init で作成するアプリケーションの初期化をしたあと、 npm install xx --save で実際にアプリが必要とするライブラリのインストールを行います。

開発用にしか使わないもの(たとえばテストフレームワークなど)は、 npm install xx --save-dev といった感じでインストールしましょう。

こうしてインストールした情報は、package.json(npmの依存関係を表したファイル)に書き込まれていきますから「このアプリが何に依存しているのか?」も一目瞭然となります。

また、package.jsonがある場所で

npm install

とすると、必要なライブラリをインストールできます。(package.jsonは依存関係以外のことも表現できますが、ここでは割愛します)

インストールされたライブラリ群は node_modules/ に格納されます。


【参考】
フロントエンド開発の3ステップ(npmことはじめ)

■yarn

yarnもnpmと同じようなパッケージマネージャーで、npmと同様package.jsonで依存性を管理してくれます。

npmとの違いは、並列にダウンロードしてくれるから、インストールする対象が多い場合はとっても速い!ということですね。

◆ とりあえず試してみよう

mkdir yarn_sample
cd yarn_sample
yarn init
yarn add electron
yarn add mocha --dev
yarn add chai --dev

npmと同じような感じで、yarn addで必要なライブラリをインストールしていきます。

また、package.jsonが既にある場合は、yarn install とすれば必要なライブラリをすべてインストールしてくれます。


【参考】
Yarn
Yarnとnpmの違い:JavaScriptパッケージマネジャーを比較する - WPJ

■Ttravis CI

今回は、ElectronのパッケージをGitHubのReleases機能を使って配布したかったため、OSSでは無料で使えるCIサービスであるTravis CIを使ってみました。

実際のビルド結果は、以下で確認できます。
Travis CI - Test and Deploy Your Code with Confidence


今回は

  • travis encrypt を使った機密情報の暗号化
  • Appleのコード署名の組み込み(Mac向けの自動更新機能を実装するため)
  • Electronのlinux,mac,win用のパッケージング
  • パッケージングしたものをGitHub Releasesに自動的にアップロードする

などの目的で使いました。

GitHubなどでOSSを漁っていると、circle.ymlやtravis.ymlなどのCI環境の設定ファイルがコミットされています。「どのようにビルドしているのか」「どんな環境でテストしているのか」などが見られて、非常に勉強になるのでおすすめです!

ちなみにこのアプリのビルドの設定は以下にあります。
github.com

■ webpack

webpackはJavaScript, CSS, imageのモジュールバンドラーで、JavaScript, CSS, imageを一つにまとめてくれるツールです。

まとめあげる際には、Minifyしたりトランスパイルしたりといった処理も挟めるため、いまどきのフロントエンドをやる上で非常に重要なツールとなってきています。

Railsでは5.1からyarnと合わせてサポートされるということで、今まで無理矢理Gemで管理していたフロントエンドライブラリ(jQuery-Railsとか…)をフロント系のエコシステムで管理できるようになるので非常にうれしいですね!

webpackを活用することでTypeScriptやSCSSなど、いわゆるAltJS・AltCSSを簡単に使えるようになりますから、今からフロントエンドを学ぶなら必須と言えるレベルのツールです。

◆ とりあえず試してみよう

それほど旨味のないごく簡単な例ではありますが、実際に試してみましょう。

まずはインストールしないと始まりませんから、実行に必要になるwebpackとwebpack-cliを入れましょう。

npm install webpack -g
npm install webpack-cli -g

次に、サンプルとしてバンドルされる対象となるJavaScriptのファイルを作ってみましょう。

簡単ですが、足し算をするfunctionが書かれたjsファイルと、掛け算をするfunctionが書かれたjsファイルを作ってみました。

mkdir ~/webpack_sample
cd ~/webpack_sample
cat << EOS > module_add.js
export function add(op1 ,op2) {
  return op1 + op2;
}
EOS
cat << EOS > module_mul.js
export function mul(op1 ,op2) {
  return op1 * op2;
}
EOS

さらに、上記の足し算と掛け算のファイルを読み込んで利用するJavaScriptを作ります。

cat << EOS > app.js
import add from './module_add';
import mul from './module_mul';

console.log(add(3, 4));
console.log(mul(3, 4));
EOS

上記で作ったjsファイルに対してwebpackを実行してみると、dist/main.jsというファイルができあがるかと思います。

webpack -d app.js
cat ./dist/main.js

この中身を見てみると、app.js 及びそこから参照されている module_add.js と module_mul.js が、すべて一つのファイルにまとまっているのがわかるかと思います。

実際に使う場合は app.js,module_add.js,module_mul.js ではなく main.js だけを読み込めばよいので、読み込みのコストが減ってWebページが軽くなるというメリットがあります。

上記はすごく簡単な例として、複数のjsファイルを一つにまとめる…ということを試してみました。実際はトランスパイルしたり、最終的なファイルを目的に応じて複数生成したりできますので、webpack用の設定ファイルを作成するのが一般的です。


【設定例】
reveal_lightning/webpack.config.js at development · yukimura1227/reveal_lightning · GitHub

■JavaScriptのUnitテスト

JavaScriptのテストについても、学ぶことができます。

Mocha・Jasmine・JestといったJavaScriptのテストフレームワークがありますから、学びたいものをチョイスして実際にやってみるといいでしょう。

◆ ちょっと試してみよう

試しに、Mocha(と power-assert)を使って、簡単なJavaScriptのテストを実行してみましょう。

mkdir ~/test_sample
cd ~/test_sample
yarn add mocha --dev
yarn add power-assert --dev
mkdir test

cat << EOS > test/sample_test.js
var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});
EOS

node_modules/mocha/bin/mocha test

【参考】
一から始めるJavaScriptユニットテスト 2017年JavaScriptのテスト概論

■まとめ

というわけでElectronアプリを作る中で、いろいろ勉強になった内容を紹介してみました。

開発エンジニアの仕事は、実際にものを作ることで得られる知見がとても重要ですから、ぜひ何か作って学んだ内容をアウトプットしてみてください。

また、環境構築などがうまくいかなくてモチベーションが落ちてしまうのもよくないので、PaizaCloudのようなすぐに実践できるサービスを活用してみるのもおすすめです。


モノ作りって初心者だとハードルが高く感じるかもしれませんが、paizaラーニングだとプログラミング未経験者から始められる「Ruby入門編」「Java入門編」などから、実際に動くWebアプリが作れる「Webアプリ開発入門」まで公開していますので、興味のある方はぜひごらんください。



「[PaizaCloud](https://paiza.cloud/)」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
https://paiza.cloud




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud