Javascriptのファイルを単体で実行する方法

Question

初心者にJavascriptを教える機会があるのですが。
jsファイル単体で動作させる方法はないでしょうか？

ブラウザで走らせるにはいつもhtmlファイルに

<script> console.log("hello"); </script>

のような形を取っていてちょっと面倒です。
jsファイルを直接ブラウザに読ませるとソースが表示されてしまい、ソースが走りません。
直接走らせる方法があれば教えてください。

あくまで、jsファイルを動作させたいのでurl欄にソースを書き込んで実行させる方法は使えません。いい方法があればよろしくお願いします。

Answer 1

JSが動けば良いのであればjsFiddleやrunstant、jsDoItのようなサービスを利用するのもありでは無いでしょうか？

Comments

[Mr_Roboto]

おー！その手がありましたね！

[k.tada]

コードが簡単にシェア出来るのと、jQueryやReactのようなライブラリも簡単に追加できるのが強いですよね。

Answer 2

おはようございます

こんなの見つかりましたけど
今すぐ使えるJavaScriptを実行する環境まとめ

単体のイメージがよく分かりませんが、console.log の出力が出る場所が必要なので
ターミナルなりコマンドプロンプトなり、ブラウザなり結局必要になると思いますよ。

Answer 3

ChromeのデベロッパーツールのConsoleを使うという手もあります。
ファイルの読み込みは出来なそうですが、コピペすれば複数行でも実行できそうです。

Answer 4

ブラウザ上ではないので若干仕様が違いますが JScript というのが WSH 上で動きます。
コマンドラインから wscript <ファイル名.js> で起動します。

Answer 5

自分はFirefoxのスクラッチパッドを使ってますね。

スクラッチパッドは、JavaScript の実験環境を提供します。Web ページと対話するコードの記述、実行、結果の確認ができます。

一度に 1 行のコードを実行するよう設計されている Web コンソールとは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。
スクラッチパッド - 開発ツール | MDN

ブックマークレットが使えないようなページでもスクラッチパッドのコードは実行できるので、ちょっとした自動化とかにも使ってたりします。

Answer 6

単純にロード用のHTMLを作ってそこからjsを呼び出してはいかがでしょう。

<script src="hello.js"></script>

別案としてはドラッグ＆ドロップでファイルを受け取ってFile APIでjsの中身を読んでscript要素として追加するとか。

【[HTML5]ドラッグ&ドロップを実装するのに参考になった記事まとめ - Qiita】
http://qiita.com/okmttdhr/items/d72980730977bc272085

【JavaScript でのローカル ファイルの読み込み - HTML5 Rocks】
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

【HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB】
http://tokidoki-web.com/2013/08/file-apiでローカルファイル情報取得してやんよ/

【HTML5 File API を使ってファイル読み込み | TM Life】
http://tmlife.net/programming/javascript/html5-file-api-file-read.html

Answer 7

<script src="hoge.js"></script>

上の書き方でhoge.jsをロードするのが一般的だと思います。これはもうどんな開発に携わっても、htmlに書いてある定番なので覚えてしまいましょう。

F12ボタンを押せば、開発者ツールが出ますので、そこでjsがきちんと読まれているか確認してください。

ただjsの実行がしたいならみなさんのおっしゃるとおり、jsFiddleなどのクラウドサービスが手っ取り早いと思います。

Comments

[kuniatsu]

それだと、index.htmlとhoge.jsが必要で単体で動かせませんよ。

Answer 8

paiza.IOというのが最近出来ているようです（またbeta版みたいですうが）。ブラウザ上で即動かせるようです。対応言語はjavascriptも含めて24言語。

Answer 9

ちょっと環境限定の回答になってしまいますが、
コードエディタにVisual Studio Codeを使用していれば、拡張機能のCode Runnerがとても便利です。
選択範囲のみの実行も可能となります。
VSCodeは最近のアップデートでコンソール画面を右側に置けるようになったので、更に重宝しています。

Visual Studio Codeにてコードを実行することができる拡張機能

Answer 10

自分はmacのcoderunnerっていうデスクトップアプリ使ってます。いろんな言語を実行できます。