paiza開発日誌paiza開発日誌IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。開発ネタTweet高村です。paizaの開発部門はサーバサイド開発に強いエンジニアが多いのですが、逆にフロントエンド周りの知識はそこまで...な傾向にあります。そのため、先日自分のスキルアップ目的でElectronを使って開発したアプリをネタに、社内勉強会を開いてみました。今回は、そこで発表した内容(実際にElectronでアプリ開発してみて得られた知見)をざっくり紹介したいと思います。Electronを採用したのは、フロントエンド全般だけに集中できて(※サーバサイドの余計なことには気を取られずに済む...という意味において)かつ、実践的な知見が得られそう...という判断をしたからです。私と同じような、フロントエンド専門のエンジニアではないけど、業務上フロント周りの知識も多少必要になってくるからちょっとは知っておきたいなぁ...って人の参考になればと思います。※このブログは、paiza(ギノ)の社内で開催した「非フロントエンドエンジニアのための、非フロントエンジニアによる、フロントエンド力底上げ講座(このキーワードは、最近のフロント界隈では頻出なので知っておこうねの会)」の内容をブログ化したものです。Electronを使って開発したアプリreveal.jsで表示するプレゼン資料を簡単に作成できる、httpサーバつきmarkdownエディタ「reveal_lightning」を作りました。Pagesを利用して、作った資料を簡単に全世界に公開できるDropboxなどのフォルダ共有サービスを利用して、簡単に資料を同期できるなどといった機能を実現しました。■Electronとは何か?GitHubが開発した、Windows、Mac、Linuxのすべてで動くデスクトップアプリを開発するためのフレームワークです。Webアプリ開発の知識(HTML,CSS,JavaScript)でクロスプラットフォームのデスクトップアプリが作れるのが利点ですが、今回のように、フロントエンドの実践的なスキルを身につけたい場合にも適しています。Railsなどを使ってアプリを作ろうとすると、サーバサイドの処理に時間がとられがちですが、Electronを使えばフロントエンドにしっかり集中できます。その上、Electronを使って一通りアプリ開発ができれば、CSSだけ、JavaScriptだけ...といった断片的な知識だけでなく、フロントエンド全般における知識が身につきます。APIs」で構成されています。POSTD◆構成要素の関係性Webアプリで言うところのサーバサイドは、Node.jsが担っており、ブラウザで表示するためのプロセス(レンダラープロセス)と、Node.jsが処理するプロセス(メインプロセス)が別々になっています。フロントエンドのスキルアップという目的では、メインプロセスの処理は最小限に抑えると、よりフロント部分に集中してスキルを身につけられるかな~といった感触でした。Electronを使ってアプリを作ると、「フロントエンドエンジニアだったら絶対に知っているようなライブラリやエコシステム(※後述します)」に必然的に触れることになります。Medium■npmnpmはNode.js標準のパッケージ管理ツールです。rubyで言うところのbundlerみたいなものですね。試してみようたとえばElectron本体や、JavaScriptのテストフレームワークであるMocha、テストにおけるアサーションの機能を提供してくれるChaiなどは、以下のようにすればインストールできます。ちなみにこうした作業を簡単に試してみたい場合は、ブラウザさえあれば使えるクラウド型開発環境PaizaCloudを使うのが便利です。実際にアプリが必要とするライブラリのインストールを行います。いった感じでインストールしましょう。してインストールした情報は、package.json(npmの依存関係を表したファイル)に書き込まれていきますから「このアプリが何に依存しているのか?」も一目瞭然となります。installとすると、必要なライブラリをインストールできます。【参考】フロントエンド開発の3ステップ(npmことはじめ)■yarnyarnもnpmと同じようなパッケージマネージャーで、npmと同様package.jsonで依存性を管理してくれます。npmとの違いは、並列にダウンロードしてくれるから、インストールする対象が多い場合はとっても速い!ということですね。addで必要なライブラリをインストールしていきます。すれば必要なライブラリをすべてインストールしてくれます。CIを使ってみました。実際のビルド結果は、以下で確認できます。Releasesに自動的にアップロードするなどの目的で使いました。GitHubなどでOSSを漁っていると、circle.ymlやtravis.ymlなどのCI環境の設定ファイルがコミットされています。「どのようにビルドしているのか」「どんな環境でテストしているのか」などが見られて、非常に勉強になるのでおすすめです!ちなみにこのアプリのビルドの設定は以下にあります。imageを一つにまとめてくれるツールです。まとめあげる際には、Minifyしたりトランスパイルしたりといった処理も挟めるため、いまどきのフロントエンドをやる上で非常に重要なツールとなってきています。Railsでは5.1からyarnと合わせてサポートされるということで、今まで無理矢理Gemで管理していたフロントエンドライブラリ(jQuery-Railsとか...)をフロント系のエコシステムで管理できるようになるので非常にうれしいですね!webpackを活用することでTypeScriptやSCSSなど、いわゆるAltJS・AltCSSを簡単に使えるようになりますから、今からフロントエンドを学ぶなら必須と言えるレベルのツールです。試してみようそれほど旨味のないごく簡単な例ではありますが、実際に試してみましょう。インストールしないと始まりませんから、実行に必要になるwebpackとwebpack-cliを入れましょう。-g次に、サンプルとしてバンドルされる対象となるJavaScriptのファイルを作ってみましょう。簡単ですが、足し算をするfunctionが書かれたjsファイルと、掛け算をするfunctionが書かれたjsファイルを作ってみました。op2;}EOSさらに、上記の足し算と掛け算のファイルを読み込んで利用するJavaScriptを作ります。4));EOS上記で作ったjsファイルに対してwebpackを実行してみると、dist/main.jsというファイルができあがるかと思います。すべて一つのファイルにまとまっているのがわかるかと思います。読み込めばよいので、読み込みのコストが減ってWebページが軽くなるというメリットがあります。上記はすごく簡単な例として、複数のjsファイルを一つにまとめる...ということを試してみました。実際はトランスパイルしたり、最終的なファイルを目的に応じて複数生成したりできますので、webpack用の設定ファイルを作成するのが一般的です。GitHub■JavaScriptのUnitテストJavaScriptのテストについても、学ぶことができます。Mocha・Jasmine・JestといったJavaScriptのテストフレームワークがありますから、学びたいものをチョイスして実際にやってみるといいでしょう。power-assert)を使って、簡単なJavaScriptのテストを実行してみましょう。■まとめというわけでElectronアプリを作る中で、いろいろ勉強になった内容を紹介してみました。開発エンジニアの仕事は、実際にものを作ることで得られる知見がとても重要ですから、ぜひ何か作って学んだ内容をアウトプットしてみてください。環境構築などがうまくいかなくてモチベーションが落ちてしまうのもよくないので、PaizaCloudのようなすぐに実践できるサービスを活用してみるのもおすすめです。モノ作りって初心者だとハードルが高く感じるかもしれませんが、paizaラーニングだとプログラミング未経験者から始められる「Ruby入門編」「Java入門編」などから、実際に動くWebアプリが作れる「Webアプリ開発入門」まで公開していますので、興味のある方はぜひごらんください。「[PaizaCloud](https://paiza.cloud/)」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。記事内に記載している情報は、記事公開時点でのものとなります。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。