ESLintはシステム全体で見れば便利なツールと言えますが、ライブラリなどを読み込む際に通常紹介されているような方法では使えなかったり、慣れていない人からするとどうしても躓くポイントが多くなるのも事実です。
ですが使いこなせるようになれば、開発がスムーズになることはもちろん、保守性やコードの可視性が良くなりますし、システムによって書き方が変わってしまうようなことを防ぐことができるようになります。
今回は初心者が躓きやすい「ESLintでのグローバル変数宣言の方法」をToastrを使用してご紹介します。
ESLintとは
JavaScriptの検証ツールの１つです。複数人で開発する際に記述方法を統一させたり、エラーチェックに役立つため、よりシステム要素の強い開発をする際には多く採用されています。
グローバル変数の宣言
多くの人が最初に躓くポイントがグローバル変数を使用するタイミングでしょう。今回はJavaScriptのライブラリ「Toastr（トースト）」を例にご紹介します。
toastr.jsはjQueryを利用しているのでライブラリと一緒に読み込む必要があります。headタグへ以下を追加しましょう。
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
トーストの基本的な記述は以下の通りです。
toastr.info(‘お知らせメッセージ用トースト);
toastr.success(‘成功メッセージ用トースト);
toastr.warning(‘警告メッセージ用トースト);
toastr.error(‘エラーメッセージ用トースト);
通常であればこれで問題なく表示されますが、ESLintを使用している場合はtoastrが宣言されておらず、構文エラーとなります。
toastrはtoastr.jsで宣言されていますが、記述しているjsファイル上では宣言されていませんし、var toastrのように定義しても上書きされてしまいトースターそのものが使えません。
それを回避するために、以下のようにコメントでグローバル変数を定義しましょう。
/* globals toastr */
toastrを使用するより前に記述しておくことで、グローバル変数だと認識してくれ構文エラーとならずトースターを使用することができます。
/* globals toastr */
toastr.success(‘トースト成功);
まとめ
いかがだったでしょうか。
今回は「ESLint下でToastr（グローバル変数）を使用する方法」をご紹介しました。
TypeScriptやESLintなど、便利なものを採用すればその恩恵は大きく、致命的エラーを回避したり記述が簡潔にできたりとスムーズな開発ができるようになります。
ESLintに挑戦している人は、ぜひ参考にしてくださいね。
