search
LoginSignup
14

More than 5 years have passed since last update.

posted at

sublime text3でjavascriptを実行する

みなさんこんばんは

突然ですが、javascriptの勉強したいときどうしてますか?

エディタで保存→ブラウザを見る→リロード

みたいな手順で確認してませんか?

めんどくさいですね!今編集してるエディタでそのまま実行結果が見れたらいいのに!

調べてみるとsublime textというエディタでjavascriptが実行できるようなのでやり方をまとめました!
ちなみにsublime textは>>ここからダウンロードできますよ!

※nodejsをインストールしておく必要がありますので、まだnodejsをインストールしてない人は下のリンクを参考にインストールして下さい。

5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】

さぁ!nodejsの準備は出来ましたか?
それではsublimeの設定をやっていきましょう!

【ステップ1】sublime-build fileを追加

まずsublime textを起動します。

1.png

真っ黒ですね!まだ何も開いてないのでそのままで大丈夫です!

ステップ1に書いてあったsublime-buildファイルを作成します。

下の写真のようにメニューバーの中から

Tools > Build System > New Build Systemを選択します。

2.png

すると下の画像のようになります。

3.png

まずこのファイルを編集します。

上記ファイルの中身を全て消して以下を貼り付けて下さい。

{
  "cmd": ["node", "$file"],
  "selector": "*.js"
}

これで保存します。
保存するときの名前はなんでもいいのですが僕は「node.sublime-build」としました。
(拡張子の.sublime-buildは必要です。xxxxxxxx.sublime-buildみたいな感じです。)

これでstep1は完了です。

ちなみに今作ったファイルを編集したい場合は

/Users/[あなたのPCのユーザー名]/Library/Application Support/Sublime Text 3/Packages/User

に先ほど作ったファイルがあるはずです。

僕の場合はここに先ほど作成したnode.sublime-buildがあります。

さぁ次に行きましょう!

ステップ2:sublimeのuser settingを変更

次はsublime textの設定ファイルをいじります!

メニューバーの

Sublime text > Preference > Settings-Userを開きましょう!

4.png

Settings-Userを開くと

{
  xxxxx: yyyyyy,
  xxxxx: yyyyyy,
  ... 
  aaaaa: bbbbbb
}

{}で囲まれた文字が出てくると思います!

実はこの中にsublime textの設定が書いてあるんです!

xxxx:yyyyの量は個人の設定によって違います!
ちなみに僕の場合は

5.png

この位書いてあります!

これはググっちゃえばいくらでも出てくるので「sublime text おすすめ 設定」とかでググるとこのファイルを編集したりすると思います!

機会があったら調べてみてください。

さてここにある文章を追加しないといけないのですが、そのために「nodejsがどこにインストールしてあるか」調べる必要があります。

でも簡単です。

ターミナルを開きます。

macの人は右上の虫眼鏡マークを押して「terminal」と調べましょう!

6.png

ターミナルが開きましたね!
なんかプログラムやってる感が出る画面ですね!

さぁ、ここに一行打つだけでnodejsがどこにインストールされているかわかります。
それがこれです。

which node

ターミナルにwhich nodeと打ってエンターを押します。
すると/で区切られた文字が出てくると思います。

僕の場合はこんな感じで

999.png

/usr/local/bin/node

が出ました。

さぁこの文章をsublime textの設定に書きます!

先ほど

{
  xxxxx: yyyyyy,
  xxxxx: yyyyyy,
  ... 
  aaaaa: bbbbbb
}

これをサンプルで出したのでこれを下の用に編集します。

{
  xxxxx: yyyyyy,
  xxxxx: yyyyyy,
  ... 
  aaaaa: bbbbbb,
  "build_env":
  {
    "PATH": "/usr/local/bin/" ※さっきターミナルでwhich nodeって打った結果からnodeを削除したもの
  }
}

ここで注意点が2つあります。
①「,」を忘れないように!
“build_env”: …と書いてありますが、その上の「bbbbbb」のあとに「,」が入ってます。
これを忘れないで下さいね!

②注釈にも書いてますが、”PATH”: のあとに続くのはwhich nodeと打ったあとに出た文字列から最後のnodeを削除したものです。
僕の例で言うと

//which nodeして出たもの
/usr/local/bin/node
//PATH: のあとに書いたもの
/usr/local/bin/

最後のnodeという文字を消してます!
ここは気をつけて下さい!

実行してみよう!

さぁここまでできたらsublime textでjavascriptを実行してみましょう!

メニューバーのFile > New Fileから新規ファイルを作成します。
ファイルを作成したら

console.log('hello world!');

と打って保存します!

名前はなんでもいいんですが、test.jsという名前で保存しましょう!

7.png

さぁ保存できたらあとは実行するだけです!

sublime textでtest.jsを開いた状態で(おそらく今の状態)command + bを押します!

そうすると以下の画像のようになったのではないでしょうか?

8.png

ちゃんと「hello world!」と出てますね!
しっかりjavascriptを実行できている証拠です!

あとはファイルを編集するたびにcommand + bを押せば実行されます!
これで毎回ブラウザをリロードしなくてよくなりましたね!

僕もこれでバリバリ勉強したいと思います!

みなさんの参考になれば!

ありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
14