ゼロから始めるtoio.js 買ったばかりのMacbook Proでサンプルを動かすまで


これは「toio™(ロボットトイ | toio(トイオ)) Advent Calendar 2019」の18日目の記事になります。

はじめに

先日記事に書いたtoio.jsの作例は全てwindows PC上で開発しました。
ソフトウェア初心者がtoio.jsで作ってみた 5つの作例紹介

最近別件でiOS App開発を始めたいなと思い、新しくMacbook Proを購入しました。
せっかくなので、Macでもtoio.jsを動かしたいということで、環境構築を行いました。
備忘録も兼ねて、サンプルを動かすまでを記録に残しておきます。

使用機種とmacOSバージョン

  • Macbook Pro 13インチ 2019年モデル (A2159)
  • macOS 10.15.1

1.Node.js環境のインストール

toio.js公式によると、Node.js version 8以降が必要なようです。

今回はバージョン依存の問題にはまった時のことを考えて、
Node.jsのバージョンを自由に変更できるように、nodebrewを入れます。

homebrew -> nodebrewの順にインストールを行った後、
所望のバージョンのNode.jsをnodebrewを使ってインストールします。

1-1 homebrewのインストール

homebrewはmacOS用パッケージマネージャーです。
homebrew 公式HP

公式HP上にあるインストール用コマンドを一行打つだけで、インストールが完了します。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※更新がかかるかもしれないので、公式HPのコマンドを参照してください。

途中でログイン用のpasswordが求められるので入力して進めます。

1-2 nodebrewのインストール

次はnodebrewのインストールを行います。
nodebrewを使うと、nodeのバージョンを細かく選択して使用することができます。

参考にした記事 NodebrewでNodeをインストールする

上記サイトに従い、インストールと環境変数の追加を行ってください。

!!重要!!
環境変数のPATHを通さないと以降の手順でNode.jsのインストールに失敗します。

1-3 Node.jsのインストール

nodebrewを使ってNode.jsのインストールを進めます。
今回は公式でサポートしている最小バージョンの8を入れてみます。

インストールできるNode.jsのバージョンは以下のコマンドで確認できます。

$ nodebrew ls-remote

たくさんのバージョンが出てきますが、今回はバージョン8の中の最新版、v8.16.2を入れてみます。
nodebrew installというコマンドもありますが、nodebrew install-binaryの方が早いという記事があったので、こちらのコマンドを使用します。

$ nodebrew install-binary v8.16.2

インストールしただけでは、使用する状態になっていません。
試しに現状のnodeのバージョンを調べるために、"nodebrew ls"というコマンドを打ってみます。
current: none となっており、これは現状使用するバージョンが指定されていないことを示しています。
"node -v"というNode.jsのコマンドでバージョン確認してみても、そもそもnodeのコマンド自体が認識できない状態です。

$ nodebrew ls
v8.16.2

current: none

$ node -v
-bash: node: command not found

使うバージョンを以下のコマンドで指定します。

$ nodebrew use v8.16.2
use v8.16.2

改めて確認してみると、
current: v8.16.2
となっており、使用するバージョンが正しく設定できていることがわかります。
"node -v"で確認しても、正しくバージョンが帰ってきてます。これでNode.jsの準備は完了です。

$ nodebrew ls
v8.16.2

current: v8.16.2

$ node -v
v8.16.2

2 toio.jsのインストール

toio.js公式情報に従い、以下のコマンドを打っていきます。
たったこれだけで見事、toio.jsの環境構築が完了しました。

npm install -g yarn
git clone https://github.com/toio/toio.js.git   # clone repository
cd toio.js                                      # move to repository root
yarn install                                    # install dependencies
yarn build                                      # build @toio/* packages
yarn example:<name of example>                  # start sample application (see below)

最後に

windowsでの環境構築に比べ、とても簡単に環境構築が完了して感無量でした。
ここまで設定が完了したら、前回の記事の作例中のコードを動かすことができますので、是非試してみてください。
ソフトウェア初心者がtoio.jsで作ってみた 5つの作例紹介

私の作ったサンプル実行手順

  • toio.js/examplesの中にディレクトリを作る(名前は任意)
  • index.jsの名前でソースコードを保存する
  • 以下コマンドを打って、実行する
$ node index.js