JavaScriptの構文チェックが出来るオンラインツールを紹介！
この記事では、JSの構文チェックができるオンラインツールを紹介しています。
ブラウザ上でコードをペーストするだけで構文チェックをしてくれるので、JSの開発をより効率的に進めることができます。
2つ紹介しているので、用途に合わせて使い分けてみてください！
JavaScriptの構文チェック・文法チェックを手軽にしたい
プログラムを書いていて、スペルミスや定義忘れなど構文、文法ミスがあるとうまく実行できませんよね。
通常は実行してみて、エラーが出たら誤っている箇所を探し、直してまた実行してみて...という流れで開発をしていくかと思いますが、時間がかかってしまうこともあります。
本質的ではない文法ミスなどで時間をかけるのはもったいないですよね。
そこで、コードをコピー＆ペーストするだけで構文・文法などのエラーチェックを手軽に行うことができるツールを紹介します。
JavaScriptの構文チェックが出来るオンラインツール
JSHint
JavaScriptのコードを貼り付けると、エラーチェックを行いエラー箇所とその理由を教えてくれます。
試しに、以下のコードを貼り付けてみます。
エラーのあるコード
function main() {
return 'Hello, World!'
return a;
}
main();１つ目のreturnのあとの;(セミコロン)がないのと、定義されていないaという変数を使っていますね。
このコードをJSHintのページへペーストしてみます。すると、このように表示されます！
小さくて見えづらいかと思いますが、右の部分にこのように表示されています。
エラー箇所
One warning
13 Missing semicolon.
One undefined variable
14 a「13行目(１つ目のreturn)でセミコロンがないですよ」と「14行目のaが定義されていないですよ」という２つのエラーを指摘してくれていますね！
貼り付けるだけで文法チェックを行い、エラーの内容と場所を瞬時に指摘してくれるので、直してすぐその場で確認できます。
JSFIDDLE
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のコードをこのように変更しています。
documentがdocmentとスペルミスしてしまっていますね。
エラーのあるJSコード
docment.write("Hello world!!");これでもう一度「Run」ボタンを押すと、このようになります。
実行結果にはHello worldは表示されず、コンソールにエラーメッセージが表示されています。
エラーメッセージ
"<a class='gotoLine' href='#51:1'>51:1</a> Uncaught ReferenceError: docment is not defined"
長々と書いてありますが、要するに「docmentが定義されていないですよ」という内容ですね。
