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

note javascript

作成するものがある程度決まってしまえば、ネットで多くの情報が見つかると思うので、今回作ってみた環境について簡単にまとめておきます。

Atom のポータブル化

https://qiita.com/kimrin/items/2df2628150474df6ff27#windows%E7%94%A8%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89atom

上記の記事を参考にしました。一応、流れだけ書くとこんな感じです。

  • atom（インストーラじゃないバイナリ）をDLして展開する
  • 展開したフォルダをUSBメモリにまるっとコピー
  • atom.exeを実行する。
  • 動くのを確認したら atom を終了
  • ユーザーフォルダに .atomフォルダができているので、USBメモリに移動（※移動先のフォルダ階層に注意。atom.exe を"含む"フォルダと同じ階層）
  • 再度 atom.exe を起動。ユーザーフォルダに.atomフォルダができていなければポータブル化できている（はず）

導入するパッケージ

今のところ、以下の３つがあれば割と快適にコードが書けるんじゃないかと思います。

  • japanese-menu … メニューを日本語化
  • browser-plus … HTMLのプレビューが可能
  • atom-ternjs … コード補完を強化

プロジェクトテンプレートの作成

（まだ作っていないのですが）あとは、enchant.js を使って開発するようのテンプレートプロジェクトがあれば、環境で躓くことなく始めれるのではないかなと。

とりあえず手間を省くなら、enchant.js のサンプルの beginner/hellobear をコピーして、コード補完が有効になるように 設定ファイル（.tern-project） を追加すればいいと思います。

ternjsの設定ファイルは、プロジェクトフォルダ直下に ".tern-project" の名前で作成します。 中身はこんな感じで書いてみました。

{
  "libs": [
    "browser"
  ],
  "loadEagerly": [
    "./enchant.min.js"
  ],
  "plugins": {
    "doc_comment": {
      "fullDocs": true,
      "strong": true
    },
    "complete_strings": {},
    "node": {},
    "es_modules": {}
  }
}

enchant.js 本体はコピーしてきたものをカレントに置いて、それを読むように設定しています。 あと、libsに "browser" を書いておくと、ブラウザでサポートされているイベントやオブジェクトが補完対象になります。

まとめ

ここまでで、一通り JavaScript で開発できるポータブルな環境が構築できたと思います。

実際に配って使う時にはソースを置くフォルダを整理したり、プロジェクト作成からの流れを決めてみたり、なるべくコーディング以外のことで詰まらないように工夫したいですね。