USBメモリで持ち運びできる開発環境の構築(検討編)

note javascript

月一でお手伝いに行っている CoderDojo 岡山岡南 では、主に Scratch を使ったプログラミングが主流なのですが、少しずつやりたいことが増えてコーディングに興味を持つ Ninja が出てくるようになりました。

https://www.coderdojo-konan.jp/

実際にプログラミング言語を使ってアプリケーションを作るためには様々な知識が必要となるわけで、すべてを一朝一夕に教えることはできません。ただ、とっかかりとしてある程度の導きは可能なんじゃないかとも思っているので、まずは Dojo で使えるそこそこリッチ？な開発環境の構築について考えてみました。

満たしたい要件

参加者によって年齢やプログラミングのスキルは異なり、使っているPCのスペック、OSなどもバラバラだったり、 また、公民館でお借りしているノートPCはソフトウェアのインストールが禁止されているので、ざっくりと以下の条件は満たすように気を付けました。

  1. Windows10 と Mac 環境で動作する
  2. 開発環境一式はインストール不要 （作品の持ち帰りにUSBメモリ持参は割と周知されているので、すべてポータブル対応がベスト）
  3. 日本語の情報が充実している
  4. コード補完に対応している

まぁ、今どきのIDEやエディタはクロスプラットホーム対応されていることが大半で、プラグイン拡張できるものであれば、ざっと見渡した感じ大抵は要件を満たせそうです。

※ 番号振ってないですが、大前提として無料で揃う環境をイメージしています(^^;)

開発言語・環境

聞いている限りでは興味を持ち始めただけで、実際にコーディングを必要とするプログラミング経験者は居ないとのことだったので、色々悩んだ結果、対象とする言語は JavaScript にしました。

一応、(1)～(3)の条件を満たしているし、まぁ妥当かなと。ブラウザがあれば概ね同じように実行できるのも周知の通りですしね。

フレームワーク・ライブラリ

素のJSでアプリケーションを作るのも流石にしんどいというか、作りたいものを聞くと概ねみんな"ゲーム"なので、 これについても少し調べてみました。

結果、いくつか候補はあったんですが、ここはいい意味で枯れている enchant.js で行こうかなと思います。

http://enchantjs.com/

2016年以降開発は止まっているようですが、初学者が必要とするサンプルやドキュメントがネット上に多く存在し、書店で探せばまだ何冊かはゲーム開発の入門書でも取り扱われているので、情報を得やすいかなということで。

開発環境

クロスプラットホームかつUSBメモリで持ち運びできるエディタについても、メジャーどころは大体何かしらの手段が提供されてはいたのですが、公式にポータブルなバイナリを提供していて、アドインも含めてちゃんと対応していそうなのは Atom だけでした（深追いしていないので頑張ればできるとか、最新ではできるのがあるかもですが...）

https://atom.io/

DLしてざっと触ってみた感じ、メニューを日本語化してしまえば小中学生でも特に不自由はしないだろうということで採用。

コード補完

で、思ったより大変そうだったのがコード補完の対応。

私は普段、VisualStudio + TypeScript で開発しているので、基本的にすべてのJSのライブラリはコード補完の対象という快適なコーディングライフを送っているのですが、このすべてのJSライブラリをというのがかなり難しそうな印象でした。。

ここからは Atom を中心に調べたのですが、標準でインストールされているコード補完（autocomplete-plus）は、JavaScriptの言語構文のみをサポートしています。なので、例えば jQuery を参照していたとしても、jQueryで拡張されたメソッドなどは候補に現れません。

※ちなみに、jQueryくらいメジャーなライブラリであれば、特別にjQueryのコード補完に対応したアドインがそれぞれのエディタ向けに作成されていることもあるようです。

ただ、今回は enchant.js を使いたいので、enchant.js のモジュールやメソッドを補完したいのです・・。

で、これを実現するのに 今回は atom-ternjs をインストールすることにしました。

https://qiita.com/s-shin/items/33bdfc5b819dab320808

このパッケージは、JSのコードを静的解析しつつ、その結果をコード補完の候補として提供してくれるパッケージで、標準ではブラウザやnodeに対応したコードの補完が提供されています。

※ ternjs はatom専用ではなく、JavaScriptのコードを静的解析するエンジンだそうです。

http://ternjs.net/

このパッケージに外部ライブラリを読み込んでもらえばコード補完の対象になるはずと色々と試した結果、 設定ファイルの loadEagerly に補完対象にしたいjsファイルのパスを指定しておけば、使っているライブラリのコードを補完したいという目的は達成できそうでした。

これで最小限の環境が揃いました。

かなり長くなったので、実際の環境構築については別エントリにします。