JavaScriptの構文チェックが出来るオンラインツールを紹介!

この記事では、JSの構文チェックができるオンラインツールを紹介しています。
ブラウザ上でコードをペーストするだけで構文チェックをしてくれるので、JSの開発をより効率的に進めることができます。
2つ紹介しているので、用途に合わせて使い分けてみてください!

コンテンツ [表示]

  1. 1JavaScriptの構文チェック・文法チェックを手軽にしたい
  2. 2JavaScriptの構文チェックが出来るオンラインツール
  3. 2.1JSHint
  4. 2.2JSFIDDLE

JavaScriptの構文チェック・文法チェックを手軽にしたい

プログラムを書いていて、スペルミスや定義忘れなど構文、文法ミスがあるとうまく実行できませんよね。
通常は実行してみて、エラーが出たら誤っている箇所を探し、直してまた実行してみて...という流れで開発をしていくかと思いますが、時間がかかってしまうこともあります。
本質的ではない文法ミスなどで時間をかけるのはもったいないですよね。
そこで、コードをコピー&ペーストするだけで構文・文法などのエラーチェックを手軽に行うことができるツールを紹介します。

JavaScriptの構文チェックが出来るオンラインツール

JSHint

JSHint
https://jshint.com/

JavaScriptのコードを貼り付けると、エラーチェックを行いエラー箇所とその理由を教えてくれます。
試しに、以下のコードを貼り付けてみます。

エラーのあるコード

function main() {
  return 'Hello, World!'
  return a;
}

main();

1つ目のreturnのあとの;(セミコロン)がないのと、定義されていないaという変数を使っていますね。
このコードをJSHintのページへペーストしてみます。すると、このように表示されます!

JSHint画面スクショ

小さくて見えづらいかと思いますが、右の部分にこのように表示されています。

エラー箇所

One warning
13	Missing semicolon.
One undefined variable
14	a

「13行目(1つ目のreturn)でセミコロンがないですよ」と「14行目のaが定義されていないですよ」という2つのエラーを指摘してくれていますね!
貼り付けるだけで文法チェックを行い、エラーの内容と場所を瞬時に指摘してくれるので、直してすぐその場で確認できます。

JSFIDDLE

JSFIDDLE
https://jsfiddle.net/cuz7k6a1/2/

HTML、CSSと組み合わせてJavaScriptを使っている場合に便利なサイトです。
HTMLとCSS、そしてJavaScriptを書いて「Run」ボタンを押すとそのページがどのように表示されるかを見ることができます。
今回は、以下のようなコードを書いてみました。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
  </head>
  <body>
    <p>
    Hello worldが表示されます
    </p>
  </body>
</html>

JSコード

document.write("Hello world!!");

このように正しく書けていると、このように表示されます。

実行できた時

次に、JSのコードをこのように変更しています。
documentdocmentとスペルミスしてしまっていますね。

エラーのあるJSコード

docment.write("Hello world!!");

これでもう一度「Run」ボタンを押すと、このようになります。

実行できなかった時

実行結果にはHello worldは表示されず、コンソールにエラーメッセージが表示されています。

エラーメッセージ

"<a class='gotoLine' href='#51:1'>51:1</a> Uncaught ReferenceError: docment is not defined"

長々と書いてありますが、要するに「docmentが定義されていないですよ」という内容ですね。

GeekHive採用サイト

関連記事