SublでJavascriptコンソールを作成する簡単な方法

ページ名:SublでJavascriptコンソールを作成する簡単な方法

Javascriptのコンソールは、スクリプトのデバッグやライブ結果を得るのにとても便利です。Sublime Textには他の多くのスクリプト言語のビルドシステムが付属していますが、Javascriptのビルドシステムは組み込まれていません。多くの情報源は、.jsファイルへのリンクを含む.htmlページを作成し、ウェブブラウザのコンソールを使ってコードの結果を確認するように教えてくれます。これでは、ウィンドウの切り替えやブラウザのリロードを繰り返すことになり、フラストレーションや心痛、ひいては非効率につながります。幸いなことに、Sublime Text用に独自のJavascriptビルドシステムを構築するのは、素早く簡単です!

知っておくべきこと

  • Sublime Textを起動し、新しいシステムを構築します。
  • 既存のコードをここにあるコードに置き換えて保存し、デバッグのために保存ファイルとして実行します。
  • または、Node.jsを開き、Sublime Textで新しいシステムを構築します。
方法1

JSCを使う(Mac OS X)

セットアップ
  1. Sublime Textを起動する。
    • JSCはコマンドラインのJavascriptランナーで、Mac OS Xに直接組み込まれています。ほとんどのMacにはスクリプトを実行するのに必要なものがすべて入っているので、Sublime Textでビルド・システムを作るのは驚くほど簡単です。
    • Windowsコンピューターを使っている場合は、以下のNode.jsの手順を参照してほしい。
  2. トップバーの Tools > Build System > New Build System を開く。
  3. Sublime Textが開いた新しいタブにこのコードを貼り付ける。その中にある他のものはすべて置き換えてください:
    {cmd":"cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"], "selector":"source.js" }.
  4. このファイルをJSC.sublime-buildとして、デフォルトの "user "フォルダに保存します。これでビルド・システムができました!
コンソールを使う
  1. 実行したいJavascriptファイルをSublime Textで開きます。
  2. スクリプトではconsole.log()の代わりにdebug()を使ってください。
  3. トップバーの Tools > Build System を開き、JSC を選択します。これが先ほど作成したビルドシステムです。
  4. Javascriptファイルをビルドします。ショートカット(Windowsの場合はCtrl+B、Macの場合は⌘ Cmd+B)を使うか、ツールメニューからビルドを選択します。ウィンドウ下部のペインにコンソールが表示され、スクリプトの結果が表示されます!
方法2

Node.jsを使う

セットアップ
  1. からNodeインストーラーをダウンロードして実行する。デフォルトの設定を使用する。
    • Node.js(ノード)は、Javascriptをサーバー上で実行できるように構築されたプラットフォームです。しかし、ローカル・コンピューターにインストールすることもでき、ブラウザーを使わずにJavascriptを実行し、結果を得る比較的簡単な方法を提供します。
  2. トップバーの Tools > Build System > New Build System を開きます。
  3. Sublime Textが開いた新しいタブにこのコードを貼り付ける。その中にある他のものはすべて置き換えてください:
    {cmd":cmd": ["node", "$file"], "selector":"source.js" }.
    • Errno 2]」エラーが表示される場合は、上記のコードのnodeをnodeがあるパスに変更する必要があります。これを行うには、ターミナルを開き、どのnodeを実行するか。すると、nodeバイナリのパスが出力されます。
  4. このファイルをnode.sublime-buildとしてデフォルトの "user "フォルダに保存します。これでビルド・システムができました!
コンソールを使う
  1. 実行したいJavascriptファイルをSublime Textで開きます。
  2. トップバーのツール > ビルドシステムに移動し、ノードを選択します。これが先ほど作成したビルドシステムです。
  3. Javascriptファイルをビルドします。ビルドのショートカット(Windowsの場合はCtrl+B、Macの場合は⌘ Cmd+B)を使うか、ツールメニューからビルドを選択します。ウィンドウ下部のペインにコンソールが表示され、スクリプトの結果が表示されます!
この記事はCC BY-NC-SAの下で公開された " Simple Ways to Create a Javascript Console in Sublime Text " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン: このページをSNSに投稿するのに便利です。

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する

NG表示方式

NGID一覧