みなさんこんばんは
突然ですが、javascriptの勉強したいときどうしてますか？
エディタで保存→ブラウザを見る→リロード
みたいな手順で確認してませんか？
めんどくさいですね！今編集してるエディタでそのまま実行結果が見れたらいいのに！
調べてみるとsublime textというエディタでjavascriptが実行できるようなのでやり方をまとめました！
ちなみにsublime textは>>ここからダウンロードできますよ！
※nodejsをインストールしておく必要がありますので、まだnodejsをインストールしてない人は下のリンクを参考にインストールして下さい。
5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】
さぁ！nodejsの準備は出来ましたか？
それではsublimeの設定をやっていきましょう！
【ステップ1】sublime-build fileを追加
まずsublime textを起動します。
真っ黒ですね！まだ何も開いてないのでそのままで大丈夫です！
ステップ1に書いてあったsublime-buildファイルを作成します。
下の写真のようにメニューバーの中から
Tools > Build System > New Build Systemを選択します。
すると下の画像のようになります。
まずこのファイルを編集します。
上記ファイルの中身を全て消して以下を貼り付けて下さい。
{
"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を開きましょう！
Settings-Userを開くと
{
xxxxx: yyyyyy,
xxxxx: yyyyyy,
...
aaaaa: bbbbbb
}
{}で囲まれた文字が出てくると思います！
実はこの中にsublime textの設定が書いてあるんです！
xxxx:yyyyの量は個人の設定によって違います！
ちなみに僕の場合は
この位書いてあります！
これはググっちゃえばいくらでも出てくるので「sublime text おすすめ 設定」とかでググるとこのファイルを編集したりすると思います！
機会があったら調べてみてください。
さてここにある文章を追加しないといけないのですが、そのために「nodejsがどこにインストールしてあるか」調べる必要があります。
でも簡単です。
ターミナルを開きます。
macの人は右上の虫眼鏡マークを押して「terminal」と調べましょう！
ターミナルが開きましたね！
なんかプログラムやってる感が出る画面ですね！
さぁ、ここに一行打つだけでnodejsがどこにインストールされているかわかります。
それがこれです。
which node
ターミナルにwhich nodeと打ってエンターを押します。
すると/で区切られた文字が出てくると思います。
僕の場合はこんな感じで
/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という名前で保存しましょう！
さぁ保存できたらあとは実行するだけです！
sublime textでtest.jsを開いた状態で（おそらく今の状態）command + bを押します！
そうすると以下の画像のようになったのではないでしょうか？
ちゃんと「hello world!」と出てますね！
しっかりjavascriptを実行できている証拠です！
あとはファイルを編集するたびにcommand + bを押せば実行されます！
これで毎回ブラウザをリロードしなくてよくなりましたね！
僕もこれでバリバリ勉強したいと思います！
みなさんの参考になれば！
ありがとうございました！