YeomanとかVisual Studio Codeとか

TypeScript書くならMSのエディタでしょ

　TypeScriptを書くにあたって、環境構築しようということで、Macの老舗エディタmiに設定作ってみました。
　コマンドラインで書くよりはずいぶん快適ではあるんだが、コード補完も貧弱で、すこぶる快適というほどでもない。
　…モード作り、結構大変だったのに。

　なお、私の環境はOS X10.10.3で、いわゆるYosemite。
　miというのはOS X用のテキストエディタだ。Windows版も作られているらしいけど。

　TypeScript用のエディタはWebStormがよろしいという話だが、TypeScriptはMicrosoftが音頭をとって作られてる言語なのだから、お膝元のVisual Studio Codeを使ってみましょうか、無料だし。
　てなわけでインストール。特に問題なくインストールできた。

　ターミナルから直接呼び出せる方が便利なので、次のスクリプトを、.bash_profileに追加しておく。
　Visual Studio Codeのサイトにあったコードそのまま。

code () {
    VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $*
}

　インストール自体は簡単にできたけど、コンパイルができない…なんかエディタ本体以外に色々とインストールする必要があるみたい。
　コンパイラのtscは既にインストールしているから、サクッとコンパイルできて良さそうなんだけど。

Yeoman入れときますか

　Visual Studio Code関連の記事を読んでると、YeomanというWeb開発環境を入れておくと何かと便利だぜ、とある。
　Yeomanのサイトによると、次の一行をコマンドライン(ターミナル)に打ち込めば、インストールOKらしい。

npm install -g yo

　しかし、インストールできない。ルート権限が必要かと思ってsudoつけてみたけど、やっぱり無理。

　YeomanではじめるHTML5 – (1) 環境構築 | tenpu開発ブログとか、[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] ｜ Developers.IOを参考にインストール。
　…やはり、上手くいかん。

　Yeomanのmacへの導入とチュートリアル - tanaka's Programming Memoを読むと、sudoでインストールしてもダメだよ、とある。
　tanaka's Programming Memoの記述に従って、なんとかYeomanをインストール。
　散々インストール、アンインストールを繰り返し、設定を書き換えまくったので、もはや綺麗な手順が分からん。

Yeomanのインストール手順

　ここに書いたこと以外にもいろいろやってしまってるので、何が正しいんだかわからなくなっているけど、一応今回やったことをメモがてら残しておく。
　先に書いた参考にしたページを読んで、それでうまくいかなかった時だけ読んだほうがいいかもしれない。

　Xcodeを入れてるんで既に入ってるはずだけど、最新のにアップデート。
　次のコマンドを入れて出てくるダイアログで[インストール]を選択。Xcodeのアップデートはまた今度。

xcode-select --install

　ついでに、CSSを書きやすくしてくれるSass(Syntactically Awesome Stylesheets)の一種Compassも入れとく。

gem install compass

　gemってのは…なんだったっけ? rubyとかのパッケージ管理ツールだったっけな。RubyGems - Wikipediaを見ると、そうらしい。
　rubyのパッケージに含まれるらしいので、多分最近のOS Xなら最初から入ってる。

　それからOS X用のパッケージ管理ツールのHomebrewをインストール。
　gitとrubyで動いているらしいので、この時点でgitもインストールされるのか?
　gitを前にインストールしているから、よくわからない。

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

　Homebrewを使って、Node.js用の管理ツールnodebrewをインストールする。

brew install nodebrew

　インストールしたところで、パスを追加しなさい的なことが書いてあったので、~/.bash_profileにnodebrewのパスを追加。

export PATH=$HOME/.nodebrew/current/bin:$PATH

　Node.jsのインストールの前に、OS Xにプリインストールされているバージョンを一応アンインストールしておく。
　環境によっては悪さすることがあるらしいので。
　ただ、自分の環境では、特に削除する必要もなかったような…、もうやっちゃったんでいいけど。

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*

　npm(Node Packaged Modules)も削除。

sudo rm -rf ~/.npm

　今気づいたんだが、バージョンマネージャ(nodebrew)でアンインストールできたんじゃないか?
　ううむ。まぁしょうがない。

　そして、Node.jsの安定版をインストール。

nodebrew install-binary stable

　インストールされたnodeのバージョンを確認。

node -v

　確認したバージョンを使用バージョンに設定。

nodebrew use v0.12.4

　…道のりが長い。長すぎる。
　気を取り直して、nodeをインストールした際にnpmもインストールされている。
　しかしまー、いくつパッケージマネージャをインストールするんだ。ひとつにまとめてくれ、と言いたい。
　そう遠くなく、まとまってくれると信じたい。

　いよいよ目的のYeomanのインストールだが、これがなんども失敗する。
　どうもユーザ権限しか持たないアカウントで、管理者権限のある場所にインストールしようとしているのがよろしくないらしい。
　てなわけで、ユーザディレクトリ(HOME)にインストール用のディレクトリを掘る。

mkdir ~/.npm-packages

　~/.bashrcに次のスクリプトを追加。

NPM_PACKAGES="${HOME}/.npm-packages"
NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"
export PATH="$NPM_PACKAGES/bin:$PATH"
# Unset manpath so we can inherit from /etc/manpath via the `manpath`
# command
unset MANPATH # delete if you already modified MANPATH elsewhere in your config
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"

　~/.npmrc に次のスクリプトを追加。

prefix=${HOME}/.npm-packages

　で、スクリプトを実行。

source .bashrc

　んで、yoとその関連コマンド( bower grunt-cli)をインストール。

npm install --global yo bower grunt-cli

　標準的テンプレートをインストール。

$ npm install -g generator-webapp

　適当な名前のディレクトリを作って、そこでyoを実行。
　サイトをビルドする。

mkdir tmpWeb
cd tmpWeb
yo webapp

　どういう環境を付加しておくか選択が求められるので、適当に選ぶ。
　ビルドが完了したら、次のコマンドを入れてサーバを立ち上げる。
　HTMLをぽいっとブラウザに放り込まないで、このコマンドからサイトの確認すると、Yeomanの色々な機能が使えるらしい。

grunt server

　設定のスクリプトの置き場所とか、もろもろ考え直さなきゃいけない気がするけど、とにかく動いた。

そして当初の目標は達成されず

　…で、Visual Studio Codeだけど、コンパイルとかGitが使えるようにとかなってなくて、単なるコードエディタ状態。
　開発環境と言えるぐらいまで持っていきたい。