はじめまして。2014年度新入社員の湯浅です。

対象読者:これからCoffeeScriptを触ってみようと思う方。
手軽に始めるので、一般的に広まっているOSとしてWindows7を選択し、コンソールで書くのは大変なのでSublimeText2というエディタを使用します。

研修でJavaScriptを学び、画面周りについて興味を持ったのでもっとJavaScriptの事を学ぼうと思いました。今回はSublimeText2というエディタを使用してCoffeeScriptが実行できるまでの環境構築手順を書こうと思います。

今回の環境はOSがWindows7の64bitです。使用するものは3つです。

・Node.js
・CoffeeScript
・SublimeText2

インストール

まずNode.js、CoffeeScript、SublimeText2をインストールします。

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

Node.jsの公式サイト(http://nodejs.org/)より、真ん中に表示されている「INSTALL」からDLして下さい。

top

インストーラーを実行します。特に細かな設定はないのでそのままインストールします。

確認のため「スタートメニュー」>「ファイルを指定して実行」または「プログラムとファイルの検索」から「cmd」と入力してコマンドプロンプトを開きます。 コマンドプロンプトで「node -v」と入力実行してバージョンが出力されればインストール成功です。

もし出力されない場合は解決策が2つあります。

1つ目はWindowsの再起動を行う。
コマンドプロンプトを再起動しても環境変数が適応されないのでWindowsを再起動することでパスを適用させます。
2つ目は管理者権限でコマンドプロンプトを起動する。

2.CoffeeScriptのインストール

 Node.jsをインストールするとnodeとnpmというコマンドがインストールされます。今回はnpmコマンドの様々な追加packageをインストールできるという機能を使い、CoffeeScriptをインストールします。

Node.jsのコマンドプロンプトをスタートメニューから開きます。(必要に応じて管理者権限で実行して下さい)

コマンドプロンプトに「npm install -g coffee-script」と入力して実行します。

インストールに多少時間がかかるかもしれないので最後まで待って下さい。

このコマンドの「-g」はグローバルインストールを意味します。もし「-g」を付けなかった場合はローカルインストールと呼ばれます。

インストールが完了したら確認のためコマンドプロンプトで「coffee -v」と入力実行してバージョンが出力されればインストール成功です。

こちらも出力されない場合は再起動か管理者権限で実行して下さい。

3.SublimeText2のインストール

SublimeText2の公式サイト(http://www.sublimetext.com/2)で自分の環境にあったものをDLして下さい。今回の環境はWindows7の64bitなのでそれをDLします。

SublimeText2本体をインストール


インストーラーを実行します。特に細かな設定はないのでそのままインストールします。

インストールに成功するとスタートメニューにSublimeText2が追加されています。もし確認出来ない場合はインストール先に保存されているのでそこから起動して下さい。

SublimeText2のプラグイン導入

ここからはSublimeText2の基本的なプラグインを導入します。

プラグインの導入には多少時間がかかり導入中にSublimeText2を閉じたりすると上手く導入されないおそれがあるので画面の左下を見て終わったかどうかを判断して下さい。

1.Packageのインストール

Package ControlはSublimeText2でプラグインをインストールするのに必要なものです。

SublimeText2を起動したら「ctrl + `」でコンソールを開きます。

※「’」シングルクォートではなく「`」バッククォートです。 「Shift + @」で「`」バッククォートが打てます。

もし、「ctrl + `」でコンソールが開かない場合は「ctrl + @」でコンソールが開けます。

インポートスクリプトをコマンドパレットにコピペして実行します。

インポートスクリプトはhttps://sublime.wbond.net/installationからコピペして下さい。今回はSublimeText2の方をコピペして実行します。これはすぐ終わると思うので終わった事を確認したらSublimeText2を再起動して下さい。

PackageControl成功


これでPackage Controlが使用可能です。

確認の方法として「Ctrl + Shift + P」でコマンドパレットが起動します。スクロールできるのでその中にPackage Controlの項目があれば成功です。 もしない場合はSublimeText2を再起動してからもう1度インポートスクリプトを実行してみて下さい。

PackageControl成功2


2.SublimeText2の日本語化

このままでは英語表記で見づらいので日本語化します。

「Ctrl + Shift + P」でコマンドパレットを起動します。

スクロールさせて「Package Control:Install Package」を実行します。

この時クリックしてからInstall Packageが起動するまでが遅いですが左下を見ると読み込んでいるのがわかるので待って下さい。

「japanize」と検索し「Japanize」を選択するとインストールされます。 これでメニューバー等が日本語化されます。

japanizeインストール

メニューバー等が日本語になりますがメニューを開くと日本語にはなっていないので次にその部分を日本語化します。

日本語化1

以下ではJapanizeフォルダの中にある日本語のファイルをDefaultフォルダにコピーして置き換える事で英語のファイルから日本語のファイルに変更しています。メニューの中身に日本語化を適応させるのためにUserフォルダに日本語ファイルをコピーすることで適応されます。

「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\Japanize」の中にある「.jp」ファイルを「.jp」の部分を削除してリネームし、そのリネームしたファイルを 「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\Default」にコピーして置き換えます。(上書き) その後「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\Japanize」の中の元「.jp」ファイルを安全のため「.org」とリネームします。 ※Japanizeフォルダの中には「Main.sublime-menu」と「Main.sublime-menu.jp」が存在します。「.jp」ファイルをリネームすると名前が被ってしまい不都合なので「Main.sublime-menu.jp」だけはリネームせずにそのままDefaultフォルダにコピーします。次にDefaultフォルダの中に元々ある「Main.sublime-menu」は「Main.sublime-menu.org」にリネームして、コピーした「Main.sublime-menu.jp」は「.jp」を削除してリネームして下さい。その後Japanizeフォルダの中にある「Main.sublime-menu.jp」を「Main.sublime-menu.org」にリネームして下さい。
「C:\Users\ユーザー名\AppData\Roaming\Sublime Text2\Packages\Japanize\Main.sublime-menu(.jpがついていない方)」を「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\User」にコピーします。
これで日本語化終了です。

日本語化2

3.IMESupportで日本語入力のインライン化

日本語入力すると入力時に別窓が立ち上がるのでインライン化します。

「Ctrl + Shift + P」でコマンドパレットを起動します。

スクロールさせて「Package Control:Install Package」を実行します。

この時クリックしてからInstall Packageの起動が遅いですが左下を見ると読み込んでいるのがわかるので待って下さい。

「IMESupport」で検索し、「IMESupport」を選択するとインストールされます。

インライン化

4.インライン化で「あ」や「A」と表示されてしまったら

インライン化してカーソル位置に「あ」や「A」と表示されてしまうのはGoogle日本語入力の機能のせいなので、その機能を止めます。

png;base643c0434bb6bb33fed

Google日本語入力の隣のスパナのマークからプロパティをクリックします。

google1

入力補助にある「カーソル周辺に入力モードを表示する」のチェックを外してOKをクリックします。

google2

SublimeText2を起動しているなら再起動して下さい。 これで直ります。

 CoffeeScriptのプラグイン導入

1.CoffeeScriptをシンタックスハイライトする

初期状態だとシンタックスハイライトがされずビルドが出来ないので「CoffeeScript」というプラグインをインストールします。

シンタックスハイライト1

「Ctrl + Shift + P」でコマンドパレットを起動します。

スクロールさせて「Package Control:Install Package」を実行します。

この時クリックしてからInstall Packageの起動が遅いですが左下を見ると読み込んでいるのがわかるのでお待ち下さい。

「coffee」で検索し、「CoffeeScript」を選択するとインストールされます。

シンタックスハイライト2

SublimeText2を再起動します。

この時点でシンタックスハイライトになっていない場合は画面の右下がPlainText となっていると思うので、そこをクリックするとCoffeeScriptが選択できるので選択して下さい。これでシンタックスハイライトが成功します。

シンタックスハイライト3

ビルド実行

実行する前に保存してください。保存したら拡張子が「.coffee」になっている事を確認して下さい。

ビルドだけする場合は「Ctrl + B」、これにより「.coffee」ファイルがあるフォルダと同じ場所に同名の「.js」ファイルが作られます。ビルドして実行は「Ctrl + Shift + B」で、これだけだとjsファイルが作られない可能性があるので注意して下さい。

今のままだとエラーが発生するはずです。なので次のエラー修正に修正方法を書きました。

 エラー修正

おそらくビルドして実行しても下記のようなエラーが出ると思います。

[Decode error - output not utf-8]

このようなエラーが出るので以下の手順で修正します。
SublimeText2の上にある基本設定からPackageフォルダを選択します。
ウィンドウが開くのでそこにあるCoffeeScript>CoffeeScript.sublime-build
CoffeeScript.sublime-buildを展開すると下記のようになっていると思います。

{
    "cmd": ["cake", "sbuild"]
,   "path": "/usr/local/bin:$PATH"
,   "selector": "source.coffee"
,   "working_dir": "$project_path"
,   "variants":
    [
        {
           "name": "Run",
           "cmd": ["coffee", "$file"]
        }
    ]
}

これを下記のように変更します。
{
    "cmd": ["coffee","-c", "$file"]
,   "path": "$PATH"
,   "selector": "source.coffee"
,   "working_dir": "$project_path"
,   "shell": true
,   "variants":
    [
        {
           "name": "Run",
           "cmd": ["coffee", "$file"]
        }
    ]
}

※「,(カンマ)」と「:(コロン)」を忘れないように注意して下さい。


変更内容は3つ

・1番始めのcmdを変更

ここではCoffeeScriptのファイルをどこにコンパイルするかを指定しています。

・shellを追加

shellを追加することでcmdが実行出来ます。 Windowsの環境だとshellがtrueでないとSublimeText2のコマンドを受け付けてくれません。

・pathを修正

Windowsには適さない記述がされているので修正します。

これでビルドして実行するとコンソールにhelloWorldと表示されます。

コンソールのエラー修正

まとめ

 今回Windowsで環境構築をしていて出てくる情報にMacが多く苦戦したので、これはMacを買ったほうがいいかもしれないと思いました。また、初めて1から情報を集め環境構築をしてみて、わかりやすい環境構築手順書を作るのがとても大変な事だと感じましたが、大変な分、知らないことを多く学べたので楽しく出来ました。

ご閲覧いただき有難うございました。