目次

はじめに

対象読者
本書の構成
サンプルコードについて
免責事項

第1章 Moddable 概説

1.1 IoTなWebエンジニアがつまづく「ふたつの問題」
1.2 Moddableとは
1.3 Moddableの特徴
1.4 Moddableの仕組み
1.5 Moddableの情報源

第2章 Moddableをはじめよう

2.1 開発環境のセットアップ

第3章 サンプルで理解するModdable

3.1 モジュール一覧
3.2 カウンターアプリ:文字を表示する
3.3 ボンゴキャット:画像を表示する/音を鳴らす
3.4 ポモドーロタイマー:タイマー機能を使う
3.5 Neoチカ:LED(NeoPixel)を光らせる
3.6 温湿度計:I2Cでセンサの値を読み取る(1)
3.7 カラーピッカー:I2Cでセンサの値を読み取る(2)
3.8 にゃーんボタン:Webクライアントを使う
3.9 スマートライト:Webサーバーをたてる
3.10 QRコードジェネレータ:BLE(Bluetooth Low Energy)とWeb Bluetoothで通信する

付録A Moddable を他プラットフォームとくらべてみた

A.1 JavaScriptでIoT開発できるプラットフォーム
A.2 比較するポイント
A.3 Moddableをいつ使うべきか

付録B JavaScriptの開発支援ツールをModdableで使う

B.1 TypeScriptを使って型付きで開発する
B.2 ESLintとPrettierを使ってコードの書き方を統一する
B.3 npm script でビルドコマンドを簡略化する
B.4 Dockerを使って開発環境を一瞬で構築する

はじめに

 本書は、組み込み向けJavaScriptアプリ開発プラットフォーム「Moddable」の使い方を解説する、世界初の技術書です。

 IoT全盛期。さまざまなIoTプラットフォームの登場によって、Webエンジニアの方でも簡単にIoT開発を始められる環境が整いつつあります。IoTでの物作りを始める環境として、特にArduino(アルドゥイーノ)やM5Stack(エムファイブスタック)などの開発ボードはチュートリアルや日本語の情報が充実しており、初心者にやさしいといわれています。

 しかし、Web系の人がArduinoで物作りを始めても、必ずある問題に突き当たります。

 ・「CやC++を覚えないといけなくて疲れる」

 ・「用意されているサンプルをちょっといじっただけでなぜか動かなくなる。そして原因もわからない」

 ・「黒画面に白文字ばかりで、思うようなUIが作れない」

 これらの問題は、少なくとも趣味開発のモチベーションを削ぐのには十分です。本書を手に取った方の中にも、Arduinoのサンプルを動かしただけで「次の一歩」が踏み出せずに、買ったばかりのガジェットを押し入れに積んでしまっている人も多いのではないでしょうか。

 「マイコンでもJavaScriptでアプリが書けたら…」

 それは、Webエンジニアだれもが抱く夢。

 私もその夢を抱くWebエンジニアの一人でした。私が趣味の電子工作をはじめた2年前には、すでに「JavaScriptでマイコン向けプログラムを書けるプラットフォーム」は複数ありましたが、使いやすさや機能面で「決定打」といえる存在はまだありませんでした。ArduinoやESP-IDFを使いながら、慣れないC/C++と格闘する日々。そんな中、私が出会ったのが「Moddable」です。

 Moddableは、さまざまなマイコン向けのアプリケーションをJavaScriptで開発できるプラットフォームです。

 Moddableのサンプルアプリケーションを見た私は衝撃を受けました。見栄えのよいUI、画像や音声の再生、そしてセンサやモータの駆動、さらにはWebSocketやBLE、MQTTを含むネットワーク通信の機能まで、IoT機器に求められる機能が網羅されています。なによりこれらの機能が、私が見慣れたJavaScriptで、それもわずか数十行のコードで書かれているのです。

 それから私はModdableを使った「組み込みJavaScript」の世界にすっかり魅了されました。「最推しプラットフォーム」として、Moddableを使った開発とコントリビューションを1年半にわたり行ってきました。しかし、Moddableの仕組みや使い方についての日本語情報が少ないために、まだまだ日本の開発者に存在自体を知られていないのが現状です。

 本書はModdableを使った開発方法を紹介する、世界初の技術書です。環境構築とサンプルアプリを使ったハンズオン、そして「JavaScriptでIoT」な他のプラットフォーム達との比較を通じて、Moddableの魅力をお伝えします。

 あなたもModdableと一緒に「JavaScriptでIoTアプリ開発」をはじめましょう!

対象読者

 本書は「趣味や業務でIoTアプリケーション開発を始めてみたいWeb開発者」を対象読者として想定しています。特に次のような条件に当てはまるあなたには、本書を全力でお勧めします。

 ・JavaScriptは分かるけど、C/C++は知らない。

 ・TwitterでM5Stackなどの電子工作がバズっているのを見て、自分も始めてみたいけど、何から手を付ければいいか分からない

 ・M5Stackを買ってはみたけど全然触ってない。積んで(スタックして)しまっている。

 もちろん逆に、「JavaScriptでの開発をしてみたい組み込み開発者」の方にも満足いただける内容になっています。ただし本書のサンプルコードでは、特に断りなくES2015以降の「モダンJavaScript」と呼ばれるJavaScriptの文法を使用する点にご留意ください。

 また、本書では「IoTアプリケーション」を、次の特徴をもつアプリケーションと位置づけています。

 ・実世界のデータのセンシング

 ・LEDやモータを使った出力

 ・ネットワーク通信(字義どおりインターネットとの通信も、LAN接続も含む)

本書の構成

 本書は3つの章とふたつの付録から構成されます。順番に読み進めることでModdableの基本的な使い方を把握できます。

第1章 Moddable概説

Moddableの特徴や、JavaScriptをマイコン上で動かす仕組みを説明します。また開発コミュニティへの案内や情報源なども載せています。

第2章 Moddableをはじめよう

Moddableの環境構築方法を説明します。ツールチェインをインストールして、最初のアプリケーションを実行するまでの手順を理解できます。

第3章 サンプルで理解するModdable

ModdableのSDKには豊富なサンプルコードが付属していますが、数が多いので読むのが大変です。本書では筆者オリジナルのサンプルアプリケーションを紹介しながら、Moddableの主な機能を把握できます。

付録A Moddable を他プラットフォームとくらべてみた

他の「組み込み向けJavaScriptプラットフォーム」との比較を通じて、Moddableの特徴を分析します。

付録B JavaScriptの開発支援ツールをModdableで使う

ModdableをTypeScriptやESLintと組み合わせて開発する方法を紹介します。

サンプルコードについて

 本書に登場するサンプルコードは、すべてGitHubのリポジトリーで公開しています。

サンプル集(第3章で使用)

https://github.com/meganetaaan/moddable-examples

Moddableのプロジェクト雛形(付録Bで使用)

https://github.com/meganetaaan/moddable-boilerplate

 本書執筆時点でのサンプルの動作確認環境は次のとおりです。

 ・Ubuntu 18.04.2

 ・Moddable 79b50f51

 ・M5Stack Core Basic (2018年12月購入)

 ・M5StickC (2019年4月購入)

免責事項

 本書に記載のサンプルや手法を用いた開発は、必ずご自身の責任と判断に基づいて行ってください。その結果について、著者はいかなる責任も負いません。

1. Moddableは2020年6月現在バージョニングされていないため、代わりにpublicブランチのコミットIDを掲載しています。

第1章 Moddable 概説

1.1 IoTなWebエンジニアがつまづく「ふたつの問題」

 「IoT(物のインターネット)」という言葉が生まれて久しいです。スマートスピーカーを筆頭にしたさまざまなWebサービスと連携可能なプロダクトを、個人でも気軽に使ったり、作ったりできるようになりました。

 企業におけるソリューション開発はもちろんのこと、個人開発でも気軽に使える開発プラットフォームが次々登場しています。また、M5Stackユーザーグループ1やIoTLT2など、ものづくり系の人が集まるコミュニティが活発に活動しています。技術書典に足を運んだWebエンジニアの方にも「IoTなものづくりがしたい!」と思う方は多いのではないでしょうか。

 筆者の体験では、IoTな物作りを始めたWebエンジニアがつまづく「ふたつの問題」があります。

 ひとつ目の問題は「C/C++なにもわからない問題」です。

 IoTプラットフォームの多くは、その機能にアクセスするためのWebAPIやJavaScriptライブラリーを提供しています。一方、デバイス側でうごくコードはArduino(C++)やCで書くことが多いのです。センサやモータを制御したり、デバイス上の液晶に情報を出したりしたいときに、「組み込み開発の知識」に加えて「C/C++の文法とベストプラクティス/アンチパターン」も同時に学ばないといけなくなり、とてもつらいです。

 もちろん、Arduinoには豊富なライブラリーが用意されているので、サンプルコードのコピペと改変を駆使すれば、そこまで深く理解しなくてもなんとなく動くものは作れるでしょう。しかし、そこから一歩凝ったことをしようとした途端に手が止まったり、原因不明のバグに悩まされることになります。

 ふたつ目の問題は「UI適当になりがち問題」です。

 たとえば、M5Stackには小さい液晶とボタンが付いています。小さいながらもデバイスで完結するUIを構築できるのです。ならばESP32の処理能力をフル活用して、イケてるUIを作りたくなってきますね?特にあなたが日頃からUX向上に勤しむフロントエンドエンジニアやデザイナーであれば、なおさらでしょう。そうでなくとも、「業務でPoCのデモを作る時」「コンテストに出品する作品を作るとき」「Twitterでバズりたいとき」などは、機能面だけでなく「映え」を狙いたくなるのが人の業です。

 しかし、あなたが手にしたのは円や三角形などの基本的な図形描画と、文字描画の関数だけ。がんばってアプリを書けども、その画面は夜の砂漠のように荒涼としており、理想とのギャップに苦しむことになります。UIをもっと作り込みたい。けどそこは本質じゃない、本質じゃないんだけど…映えがほしい…

 これらふたつの問題を解決できる!と筆者が注目しているのが「Moddable」です。

1.2 Moddableとは

図1.1: Moddableのウェブサイト(https://moddable.com)

 ModdableはJavaScriptでマイクロコントローラー(マイコン)向けのアプリケーションを構築できるプラットフォームです。Moddableを使えば、リッチなUIやネットワーク通信、センサやモーターの駆動などの機能をもつIoTアプリケーションを、慣れ親しんだJavaScriptで書けるようになります。

試し読みはここまでです。
この続きは、製品版でお楽しみください。