Moddableが切り開くフロントエンドの新境地：書籍『実践Moddable』発売によせて
2020年9月11日（金）、書籍『実践Moddable』をインプレスR&D様より発売開始しました。
この書籍は昨年の技術書典7で頒布した同人誌を大幅に加筆修正した、商業出版になります。Amazon Kindleなどの電子書籍とPOD（プリントオンデマンド）でお買い求めいただけます。本屋さんの店頭には並ばないのでご注意ください！
書籍の発売によせて、私のブログを初めて見る方でもModdableに興味を持っていただけるように紹介したいと思います。
まずはこちらのツイートをご覧ください！
AH YEAH IT'S BONGO TIME#bongocat #M5Stack #ModdableSDK pic.twitter.com/k92F9a8jVm
— ししかわ/Shinya Ishikawa (@meganetaaan) 2019年4月2日
息子に「ロボット作って！」って言われて、なんか設計図？をもらったので、
— ししかわ/Shinya Ishikawa (@meganetaaan) 2020年4月27日
作ってみた。 pic.twitter.com/3LBAXUnyB5
どちらも、私が子供と楽しむためにM5Stackで作ったおもちゃです。 ロボットが首を振ったり、ボタンを押したら音が鳴ったり。 動きはごく単純ですが、なんとこれらのアプリはすべて JavaScript で書かれています！
Moddableとは
Moddableは組み込み機器のためのJavaScriptアプリケーション開発プラットフォームです。
ESP32というマイコンに対応しており、M5Stackシリーズを含むさまざまな開発ボードでアプリを作ることができます。
私がModdableに初めて触れたのは2年近く前。「慣れ親しんだJavaScriptで、M5Stackのアプリが書ける」と知った時の衝撃を今でも覚えています。
「Moddableはもっと評価されるべき。もっと多くのエンジニアに知られなくてはならない…」
そう確信した私は熱に浮かされるようにQiitaに投稿し、当時から所属している技術同人サークル「北南書房」で技術書の執筆を始めたのでした。
そして1年前の技術書典7で『実践Moddable』の初版を頒布しました。 結果、95部を頒布し、その場でM5Stackに書き込む形で配布したサンプルアプリケーションも好評でした。 「組み込み向けJavaScript」は確かに関心を引くテーマなのだと自信を持ちました。 当日の様子はブログ記事から見られます。
初版の頒布からさらに1年の間に、国内でもTwitterやブログ等でModdableを使った作例が公開されたり、 Moddableのコミッターとして複数の方が開発に参加するなど、徐々に盛り上がりを見せてきています。
台風通りすぎたので、デバッグ再開して湿度も取得出来た😁原因はI2Cで読み出したbyte配列をパースする際に、符号付きを意識してなかった事。Javascriptでbyte配列を扱う時は注意が必要💦 #実践Moddable 3.5 ｢I2Cセンサーの値を読み取る」完了🎵 次はWebかBLEかな pic.twitter.com/ytO7DISEWy
— StupidDog (@StupidDog) 2019年10月12日
直った！
— たいりょーくん (@Tiryoh) 2020年8月22日
Big EndianでデータをパースしてるつもりがずっとLittle Endianとしてパースしてた😇😇😇 pic.twitter.com/DR0fMJKzWf
では、そんなModdableの良さってなんでしょうか？この記事ではWebエンジニアと組み込みエンジニアの視点から説明を試みます。
Webエンジニアから見たModdableの良さ
私は前職で約5年ほどWebフロントエンド技術の研究開発に従事してきました。 そんな私＝Webエンジニアから見たModdableの良さは、やはり JavaScriptという馴染みのある言語で、マイコンでの開発ができること にあります。
私がM5Stackを手に入れた当初は、ArduinoやESP-IDFを使って開発していました。 しかし最初がとにかく大変で、
などの 「組み込みシステムの知識」の学習 に加えて、
などの 「組み込みシステムを書くための言語」の習得 も同時にやらないといけない点が特にしんどかったです。 一応、Arduinoでは使うライブラリ毎に豊富なサンプルコードがあったりするので最初は事足りるのですが、 例えばそのコードがM5Stackで動かないときの原因究明とか、ちょっと発展的なことをしたくなったときにとたんに手が止まります。
特に、 スマホからWebBluetoothなどを介してM5Stackと連携するアプリ を作ろうとした時は、Web側のJavaScript（Node.js）と、マイコン側のC/C++を行ったり来たりでてんやわんやでした！
Moddableを使えばWeb側とマイコン側の使用言語をJavaScriptに統一できますので、開発者はアプリのロジックに注力できて非常にはかどります。
例えばこの記事を読んでいるWebエンジニアの中にも、IoTの勉強のためにM5Stackを買ってはみたものの、 アイディアが浮かばずあまり触れていない方もいるかと思います。そんな方にこそModdableを試してみてほしいのです。
私の個人開発の経験上、 ものつくりのアイディアは実装の最中にひらめくことが多いです 。 その実装の時間がプログラム言語的にわからないことだらけになってしまうと、その解決のほうに脳のリソースを取られてひらめきが妨げられてしまう…そんな感じがするのです。 JavaScriptでゴリゴリプログラムを書いてバンバン動かすサイクルが完成してくると、開発スピードもひらめきの数も、2倍、3倍になること請け合いです。
Webの方向けにもう少しアピールすると、Moddableは最新のECMAScriptの文法に対応していて、 Promiseとasync/awaitはもちろん、プライベートフィールドなどの最新機能もトランスパイラを介すること無く動作します。 いわゆる「モダンJavaScript」と呼ばれる範囲は完全に網羅していますので、安心して始められるでしょう。 さらには最近（まだ実験段階ですが）TypeScriptによる型定義も公式にサポートされ始めています。
組み込みエンジニアから見たModdableの良さ
そんなわけで『実践Moddable』は終始、私＝Webエンジニア目線で書いたのですが、私がModdableを知るきっかけとなった @kimio_kosaka 氏から「IoTアプリの開発を始めてみたい「ハードウェア技術者」にも最適と思う」という書評をいただきました（身に余る光栄です！）。
「実践Moddable」（ししかわ @meganetaaan
— Kimio Kosaka (@kimio_kosaka) 2019年9月22日
さん著） を入手！
読者対象が「趣味や業務でIoTアプリケーション開発を始めてみたいWeb技術者」だそうですが「IoTアプリの開発を始めてみたいハードウェア技術者」にも最適と思う。M5Stack単体で遊んでいるハード屋さんWebアプリまで作りましょう。 pic.twitter.com/HCLf3pWcXK
私自身も昨年ロボットの会社に転職してから、組み込み開発もちょっとずつ守備範囲にしてきましたが、 小坂氏の感想に私が共感できることとして「C言語でUIを書くのがそもそも辛いな？」というのがあります。
C言語を習得し、ハードウェアのドライバが書ける組み込みエンジニアの方達から見ても、Moddableの「 複雑なUIを簡単に構築できる 」点は強みかなと思っています。 Moddableのモジュールの1つである「piu」は コンポーネント指向 のUIフレームワークです。 UIの見た目や振る舞いをコンポーネントとして部品化し、それらを階層的に組み合わせて画面を構築することができます。 画像の表示や音声再生、タッチ操作機能などがモジュールとして統合されており、従来の組み込み開発では難しかったリッチな画面を自在に作れます。 例えば次のWifi設定画面のように「スクロール」「ソフトウェアキーボード」「インジケータ」を備えたアプリもModdableでできています。
WiFiに接続だってできる！#M5Stack_CORE2 #ModdableSDK pic.twitter.com/QXCaTWfnyu
— ししかわ/Shinya Ishikawa (@meganetaaan) 2020年9月5日
最初は自分でメモリ管理できない点にもやもやを感じたり、パフォーマンスが気になったりするかも知れませんが、 Moddableは省メモリ指向の設計でリソースに優しいですし、 速さが必要なモジュールはC言語で記述してJavaScriptから呼び出せる機能も備わっています。 またJavaScriptの習得に関しては、最近はJavaScript Primerなど非常に良質な入門書もあります。 Moddableを使いこなせるようになれば強力な武器になるはずです。
Moddableが切り開くフロントエンドの新境地
ところでこの表紙を見てくれ
『実践Moddable』の表紙は 16号さん（@homunculus016）に描いていただきました。とてもかわいくて気に入っています！
表紙絵は「組み込みエンジニアとWebエンジニアが一緒に仲良くプロダクトを開発しているようす」をイメージしました。 （Macだけの机に座っているのがWebエンジニアさん、3Dプリンタやはんだごてのある作業台の前にいるのが組み込みエンジニアさんです）
Moddableは私のような趣味の個人開発だけでなく、商用プロダクトでも通用する品質を備えています。 Moddableという「Webと組み込みをつなぐ共通言語」の登場によって「仕様に則ってデバイスやネットワークのドライバを書く、組み込みエンジニア」 「実装されたドライバを使ってロジックや画面を作る、フロントエンドエンジニア」のようなコラボレーションが実現できるかもしれません。
と、ここであなたが手練のアーキテクトであれば「急にチーム開発の話が出たけど飛躍しすぎでは？そもそも個人の趣味開発ならともかく、 業務利用に耐えるの ？」という疑問を持たれるかもしれませんね。 そこで もう2つの興味深い話 を紹介します。
洗濯機でJavaScriptが動く時代
1つ目。Moddableは商用での適用実績が、すでに複数あります。
次の動画はOpenJS Foundationが主催するカンファレンスでのModdable開発チームによる発表の動画です。 その発表の中で、Moddableの適用事例として「紫外線殺菌装置の制御」「家庭用洗濯機のUI」が紹介されています。
（この発表、めっちゃ面白いのでお時間ある方は全部見てみてほしいです！日本語翻訳字幕もあります）
2020年現在、Web界隈で「ユーザインタフェース」という言葉を使うとどうしてもPC、タブレット、スマホの3択になりがちですが、広義の「ユーザインタフェース」はもっと広く、あらゆるシステムとユーザの界面に存在しています。
JavaScriptがブラウザやモバイルアプリの境界を越えて、物理ボタンやダイヤル、ブザー、サーボモータをもコントロールする能力を手に入れた暁には、 あるユーザ体験を実現するためにフロントエンドが取れる選択肢は無限に広がっていきます。
もちろん2次元の画面と物理デバイスではUI設計に関するノウハウや制約（特に安全設計面）が大きく異なります。 急にJavaScript駆動の自動車が発売！とか出てきても、怖くて乗りたくないですよね。
ここからは私の予想ですが、おそらく最初は、ユビレジにおけるタブレットのような「あるWebサービスに紐ついた決済/事務専用端末」とか、 一部の産業機器における組み込みLinuxを用いた操作画面などの代替案として、Moddableを選定する企業が登場するはずです。 なぜなら量産コストや、単機能化することによるセキュリティ向上など、明らかなメリットがあるからです。 次に携帯ゲーム機にクランクを付けたPlayDateのように「ディスプレイ＋専用の物理インタフェース」の組み合わせが試行されていき、 いずれは「IoT時代のフロントエンド」はWebからロボットまで、様々なインタフェースを網羅するようになるでしょう。
というか、難しい話は抜きにしても、 JavaScriptのアプリが動く洗濯機、控えめに言ってめちゃくちゃ面白くないですか？？？ 洗濯乾燥をawaitしたい人は、今すぐModdableやりましょう！
ECMA標準としての「組み込みJavaScript」
2つ目。ModdableはECMA標準としての策定が進められています。
ModdableのAPIは単なる一企業のOSS実装にとどまらず、 国際標準化団体ECMA Internationalによる仕様「TC53（組み込みシステム向けJavaScriptモジュール）」として議論されています。 *1
現在、マイコン向けの開発プラットフォームは各マイコンのベンダ側が独自に定めたインタフェースで提供されていますが、 このことはユーザ側にとって習得に時間がかかるだけでなく、特定プラットフォーム向けに書いたコードの移植を難しくしています。
TC53が正式勧告されて、ベンダがその標準に準拠したドライバを提供するようになれば、ベンダとユーザ双方がECMA標準の名のもとに共通のAPIで開発を進められるようになります。 翻って、こうした状況下ではいちエンジニアの生存戦略としても標準に準拠した開発ができることは強みになるでしょう。
もちろんTC53過渡期には、かつてのブラウザ戦争のような、ベンダのパワーバランスと独自実装をめぐる混乱も予想されますが、その過程で揉まれるほど標準としての完成度が高まることは歴史が証明しています。
2020年。UIフレームワーク同士の血で血を洗う激戦を経て「Webフロントエンド」は確実に成熟してきています。 そのUIの設計論や開発を支えるツール群、そして全世界1220万人のJavaScript開発者の使用に耐えうるべく洗練されたECMAScriptの標準仕様。 これらがすべて組み込みシステムに横展開できるとしたら、なんだかわくわくしてきませんか？
私はModdable、もとい「組み込みJavaScript」の概念が普及した先に 「フロントエンドエンジニアの新境地が開ける」 と信じています。
Moddable開発をはじめよう
ここまで読んでくださってありがとうございます！ まだタブを閉じていないということは、あなたはModdableの開発を始めたくてしかたないはずです。やったね！ そんなあなたのためにModdableで開発を始めるためのリソースを紹介させてください。
本家GitHubリポジトリ
まず、自分で本を書いておいてなんですが、 本家のドキュメントがいちばん充実しています 。
前述のUIフレームワークpiuの使い方や、サンプルアプリケーションの数も150個以上あります。 ただし英語なのと、量が膨大でどの順に読んでいけばよいか、迷子になるかもしれません。
書籍
Moddable開発チームから公式ガイド「IoT Development for ESP32 and ESP8266 with JavaScript: A Practical Guide to XS and the Moddable SDK (English Edition)」が発刊されています。オライリーのSafari（技術書読み放題サービス）でも読めます。
本家は英語のみで、日本語の情報はまだ少ないです。 日本語でひととおりの使い方をおさらいしたい方 は、ぜひ拙著『実践Moddable』を読んでみてください！
日本Moddableユーザコミュニティ
日本Moddableユーザコミュニティを、Discordで運営しています。いまのところオンラインが~10人くらいの規模で、進捗自慢や技術的な質問など、ワイワイやっています。下記のリンクからぜひご参加ください！
結び：キャズムを越えて
InfoQが実施したリサーチ「JavaScriptとWeb開発 InfoQ トレンドレポート2020」によると、 Moddableは普及曲線でいう「アーリーアダプター」のステージにあるそうです。つまり眼前にキャズムを控えています。
本記事ではModdable良い面をたくさん紹介してきましたが、もちろん、まだプラットフォームとして発展途上の部分もあります。 Moddableがこのキャズムを越えられるか、つまりTC53が無事策定されて、私の予想どおりJavaScriptで今よりもっと自由にユーザインタフェースを構築できる時代が来るかは、まだ分かりません。でもそんな未来がきたらいいなと思います。
私達と一緒に未来をのぞいてみませんか？
最後になりましたが、なんとか技術書典9に間に合うように商業出版のサポートをしてくださったインプレスR&D様に感謝申し上げます。そしてM5Stackという神プロダクトを世に出してくれたJimmyはじめM5Stack社の皆さんと、組み込み開発の経験少ない私に、JavaScriptを通じて示唆に満ちたアドバイスをくださるModdable開発チームの皆さんに感謝申し上げます。
*1:ちなみに、コミッターにはJohnny-Fiveで有名なBocoupも名を連ねています。 先程組み込みシステムのUIの例としてロボットを挙げたのもここからきてます。
