東京Node学園祭 2015 で Electron について話した - はやくプログラムになりたい

発表について

11/7 にあった東京 Node 学園祭 2015 で Electron の発表した．

周りすごい人達ばかりで，明らかに今年の6月ぐらいに初めた自分よりも，JavaScript も Node.js もフロントエンドも書ける人達に囲まれての発表だったので，正直どうしようかなと思ったけれど，自分が Electron で Web フロントエンド&Node.js に入門することになった経緯と，その過程で得た知見を共有する感じにしようとなってこんな感じの資料になった．

色々詰め込もうとして25分に対して42ページになったものの，一応発表練習しておいたのもあって，時間通り喋れてよかった．ただ，スライド内で紹介した僕が書いたアプリのコードはまだかなり汚くて設計もいけてないと思うので，awesome-electron にある他のアプリのほうが参考になるかもしれない…

本当は <webview> についても少し載せようとしたけど，時間がなかったのでここで追記します．

<webview> はレンダラプロセス上でさらに別のプロセスを生成し別権限で WebContents を描画できるタグで，レンダリング元とのやり取りは ipc 経由になる．でも，外部ページを表示する場合は node integration を有効にすると jQuery がロードできなくなったり，セキュリティ的にも完全にアウトなので node integration は無効にする．それだと require('ipc') できなくなるので困る！となるけれど，実は <webview> には preload というプロパティがあって，それが解決してくれる．node integration を無効にしていても preload で読み込まれたスクリプト内では node の API が使えるらしい．よって大雑把には下記のような順でスクリプトが読まれる．

preload で指定したスクリプトが読まれる（require() など使用可）
node 関連の API が削除される
<webview> のコンテンツがロードされる

よって，レンダリング元と ipc で通信しつつ node integration をコンテンツ内では無効にできる．

また，懇親会でいくつか質問をいただいたので，それについてもここにメモしておきます．

メニューは OS によって微妙に異なるが，その差異はどうするのか

例えば OS X ではメニューアイテムの一番最初にアプリ名の項目があって，Windows や Linux には無い．Electron にはこれをサポートする仕組みは特に無いので，テンプレートを出し分けるしかない．

import {buildFromTemplate, setApplicationMenu} from 'menu';

const osx_template = {...};
const other_template = {...};

const template = process.platform === 'darwin' ? osx_template : other_template;

const menu = buildFromTemplate(template);
setApplicationMenu(menu);

アプリのアイコンはどうしてるのか
- Shiba → いらすとやさんのを使わせてもらった．ここの絵は中毒性があっておすすめです．
- Trendy → Yosemite 風アイコンジェネレータを使わせてもらった．困ったらとりあえずこれで生成しておけば問題なさそう．
- Tilectron → Chrome のロゴを参考にしつつ Inkscape でポチポチ描いた

他の発表の感想

The State of JavaScript

僕の知らない JavaScript がいっぱい出てきた．個人的には WebAssembly が気になっていて，LLVM IR を吐くコンパイラフロントエンドがブラウザで動くコードを吐けるようになったりするのかなと思うと楽しみ．

技術文書をソフトウェア開発する話

文書を正しくソフトウェアエンジニアリングしていてすごい．コード片とかは裏ではテストできる形でフルで持っておいて，書籍には一部だけ載せるみたいなことができると良いなぁと思った．用語の統一とか口調の統一とかは複数人で書くとかなりブレが出てしまうみたいなので，ツール使って CI 回すのはかなり効果ありそう．

"npm":">=3"

npm3 は node_modules 以下がフラットになるのとインストール状況が表示されるぐらいしか知らなかったので色々参考になった．shrinkwrap も知らなかった… npm のロードマップも面白そうなことがいっぱい書いてあって，特にフロントエンドモジュールが気になる…

Electroknit! - Pixel to sweater with Node.js

編み物…？と思ったけれど，正しく Node.js で編み物していた．画像処理とか問題を表層的にでなくちゃんと中身まで理解して進めていて，（本人は色々謙遜されていたけれど）正しくエンジニアリングして進めていてすごい．

ESDoc - ES6時代のドキュメンテーション ツール -

とりあえずまずは手元の小さいモジュールにドキュメントつけてみるぞ！と思ったら，今まで書いた node モジュールは全部 TypeScript 製だった… TypeScript の型定義ファイル読み込んで反映出来たり，assertion の条件を反映出来たりするとコードで書かれた仕様がそのままドキュメントに落ちてきて良さそうだなと思った．

フロントエンドに秩序を取り戻す方法〜はてなブログ編集画面をリニューアルするためにやったこと〜

すごくパワフルな発表だった．継続的に改善し続けるしかなくて体力が要ると思うし，ひたすらやっていく💪しかない．あと，フロントエンド界隈はやっぱり捨てられるかどうかが大きいんだなぁと思って聞いていた．

懇親会

知り合いと話したり，知り合いの知り合いの方と話したり，発表を聞いていただいた方に声をかけてもらって話したりしていた．特にこの界隈に顔なじみの人もあまりいないので，声をかけてもらえるのはありがたかった．:sushi: :pizza: :beer: 最高だった．

全体の感想

Electron や Node.js を触り始めてぼちぼち東京 Node 学園とか React meetup とかに出かけて行って感じていたけれど，やっぱり JavaScript 界隈は熱量がすごいなと思った．勉強会はどこも大盛況だし，スポンサーも IBM とか Microsoft はじめでかいところとか有名なところがついてる．その分流れてくる情報量もすごく多いので，ガンガン吸収していきたい．

運営の方々，素晴らしいイベントをありがとうございました．

あと，「ウェブの人になるんですか？」と最近たまに聞かれますが，今までどおり C++ も Vim もやっていく気持ちです．