本文へジャンプ

Sublime TextでJavaScriptを実行する

Posted by Namio Araki

Sublime TextでJavaScriptを実行する

ちょっとしたエディタに最適なSublime Text

今更Sublime Textの紹介はしませんが、ちょっとしたメモやjson、XMLなどの確認には軽いしお手軽、多機能と本当に最適なエディタだと思います。
もちろんがっつり開発にも使えるスペックだと思いますし、使っている方も多いと思います。

JavaScriptの実行確認

IDEを立ち上げるまでもないJavaScriptのメモや、ちょっとしたテストなど、今まではブラウザのコンソールやnodeコマンドから実行していたりしていたのですが、JavaScriptが一行しか書けなかったり、保存してコマンドを叩いて確認して、、など面倒。
そこでせっかくローカルにJSがあるんだし、Sublime TextからJavaScriptで実行出来るように設定してみました。

Sublime TextでJavaScriptを実行する準備

Sublime Textをコンソール替わりにJavaScriptを実行するには、ローカルでJavaScriptが動く環境が必要となります。つまりNode.jsの出番です。
Ken.Otsukaも紹介の記事を書いていますし、もう数えられないくらい参考情報は出回っていますので、インストールについての解説は割愛させていただきます。

僕はWindowsなので、コマンドラインを立ち上げて下記コマンドを打ってバージョンが確認できればOKです。

C:\Users\araki>node -v
v0.10.13

Node.jsがインストールされていてもパスが通っていない場合は実行できませんので注意が必要です。
パスが通っていなければ、コントロールパネルのシステムのプロパティ、詳細設定タブの環境変数からパスを通します。

Sublime TextでJavaScriptを実行するBuild Systemを追加する

ついに本題です。
Sublime Textを立ち上げて、Tools>Build System>New Build Systemを選択します。
すると、

{
    "cmd": ["make"]
}

と書かれた新規ファイルが立ち上がりますので、それを下記に変更します。

{
    "cmd": ["node","$file","file_base_name"],
    "working_dir":"${project_path:${folder}}",
    "selector":"*.js"
}

たったこれだけ。
カラクリは簡単でSublime Textからnodeコマンドをたたいてしまうということです。

これを「Ctrl+S」で、node.sublime-buildなどと名前を付けて保存をすると、再度、
Tools>Build Systemを確認すると、「node」が追加されていると思います。「node」を選択します。

JavaScriptの実行確認

新規ファイルでtest.jsファイルを作成します。
その中に、

console.log("Run JavaScript in Sublime Text!");

と記述して
「Ctrl+B」(Tools>Build)を実行すると、Consoleに

Run JavaScript in Sublime Text!
[Finished in 0.1s]

と出力されると思います。
※どこにも保存していないファイル(拡張子がjsと確認できないファイル)は、実行してもJavaScriptの動作確認は出来ないので注意ください。

これで、関数の確認など複数行にわたるJavaScriptプログラムの確認がSublime Textで可能になります。
便利ですねー。

よきJavaScriptタイムを。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr