sublime text3でjavascriptを実行!

みなさんこんばんは

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

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

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

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

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

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

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

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

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

まずsublime textを起動します。

スクリーンショット 2015-08-17 20.53.24

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

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

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

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

スクリーンショット 2015-08-17 20.53.47

そうする下の画像のようになると思います。

スクリーンショット 2015-08-18 0.20.03

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

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

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

これでstep1は完了です。

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

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

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

さぁ次に行きましょう!

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

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

メニューバーの

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

スクリーンショット 2015-08-17 21.41.00

Settings-Userを開くと

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

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

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

スクリーンショット 2015-08-17 21.43.25

この位書いてあります!

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

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

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

でも簡単です。

ターミナルを開きます。

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

スクリーンショット 2015-08-18 0.37.10

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

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

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

僕の場合はこんな感じで

スクリーンショット 2015-08-17 21.45.02

が出ました。

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

先ほど

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

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

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

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

実行してみよう!

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

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

と打って保存します!

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

スクリーンショット 2015-08-18 0.53.56

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

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

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

スクリーンショット 2015-08-18 0.56.10

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

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

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

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク