Javascriptのコンソールは、スクリプトのデバッグやライブ結果を得るのにとても便利です。Sublime Textには他の多くのスクリプト言語のビルドシステムが付属していますが、Javascriptのビルドシステムは組み込まれていません。多くの情報源は、.jsファイルへのリンクを含む.htmlページを作成し、ウェブブラウザのコンソールを使ってコードの結果を確認するように教えてくれます。これでは、ウィンドウの切り替えやブラウザのリロードを繰り返すことになり、フラストレーションや心痛、ひいては非効率につながります。幸いなことに、Sublime Text用に独自のJavascriptビルドシステムを構築するのは、素早く簡単です!
知っておくべきこと
- Sublime Textを起動し、新しいシステムを構築します。
- 既存のコードをここにあるコードに置き換えて保存し、デバッグのために保存ファイルとして実行します。
- または、Node.jsを開き、Sublime Textで新しいシステムを構築します。
JSCを使う(Mac OS X)
-
Sublime Textを起動する。
- JSCはコマンドラインのJavascriptランナーで、Mac OS Xに直接組み込まれています。ほとんどのMacにはスクリプトを実行するのに必要なものがすべて入っているので、Sublime Textでビルド・システムを作るのは驚くほど簡単です。
- Windowsコンピューターを使っている場合は、以下のNode.jsの手順を参照してほしい。
-
トップバーの Tools > Build System > New Build System を開く。
-
Sublime Textが開いた新しいタブにこのコードを貼り付ける。その中にある他のものはすべて置き換えてください:{cmd":"cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"], "selector":"source.js" }.
-
このファイルをJSC.sublime-buildとして、デフォルトの "user "フォルダに保存します。これでビルド・システムができました!
-
実行したいJavascriptファイルをSublime Textで開きます。
-
スクリプトではconsole.log()の代わりにdebug()を使ってください。
-
トップバーの Tools > Build System を開き、JSC を選択します。これが先ほど作成したビルドシステムです。
-
Javascriptファイルをビルドします。ショートカット(Windowsの場合はCtrl+B、Macの場合は⌘ Cmd+B)を使うか、ツールメニューからビルドを選択します。ウィンドウ下部のペインにコンソールが表示され、スクリプトの結果が表示されます!
Node.jsを使う
-
からNodeインストーラーをダウンロードして実行する。デフォルトの設定を使用する。
- Node.js(ノード)は、Javascriptをサーバー上で実行できるように構築されたプラットフォームです。しかし、ローカル・コンピューターにインストールすることもでき、ブラウザーを使わずにJavascriptを実行し、結果を得る比較的簡単な方法を提供します。
-
トップバーの Tools > Build System > New Build System を開きます。
-
Sublime Textが開いた新しいタブにこのコードを貼り付ける。その中にある他のものはすべて置き換えてください:{cmd":cmd": ["node", "$file"], "selector":"source.js" }.
- Errno 2]」エラーが表示される場合は、上記のコードのnodeをnodeがあるパスに変更する必要があります。これを行うには、ターミナルを開き、どのnodeを実行するか。すると、nodeバイナリのパスが出力されます。
-
このファイルをnode.sublime-buildとしてデフォルトの "user "フォルダに保存します。これでビルド・システムができました!
-
実行したいJavascriptファイルをSublime Textで開きます。
-
トップバーのツール > ビルドシステムに移動し、ノードを選択します。これが先ほど作成したビルドシステムです。
-
Javascriptファイルをビルドします。ビルドのショートカット(Windowsの場合はCtrl+B、Macの場合は⌘ Cmd+B)を使うか、ツールメニューからビルドを選択します。ウィンドウ下部のペインにコンソールが表示され、スクリプトの結果が表示されます!
コメント
最新を表示する
NG表示方式
NGID一覧