プログラミング

【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法

ESLint JavaScript jQuery Toastr
【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法

 

ESLintはシステム全体で見れば便利なツールと言えますが、ライブラリなどを読み込む際に通常紹介されているような方法では使えなかったり、慣れていない人からするとどうしても躓くポイントが多くなるのも事実です。

ですが使いこなせるようになれば、開発がスムーズになることはもちろん、保守性やコードの可視性が良くなりますし、システムによって書き方が変わってしまうようなことを防ぐことができるようになります。

 

今回は初心者が躓きやすい「ESLintでのグローバル変数宣言の方法」をToastrを使用してご紹介します。

 

 

ESLintとは

 

JavaScriptの検証ツールの1つです。複数人で開発する際に記述方法を統一させたり、エラーチェックに役立つため、よりシステム要素の強い開発をする際には多く採用されています。

 

 

グローバル変数の宣言

 

多くの人が最初に躓くポイントがグローバル変数を使用するタイミングでしょう。今回はJavaScriptのライブラリ「Toastr(トースト)」を例にご紹介します。

 

toastr.jsjQueryを利用しているのでライブラリと一緒に読み込む必要があります。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が宣言されておらず、構文エラーとなります

toastrtoastr.jsで宣言されていますが、記述しているjsファイル上では宣言されていませんし、var toastrのように定義しても上書きされてしまいトースターそのものが使えません。

 

それを回避するために、以下のようにコメントでグローバル変数を定義しましょう。

/* globals toastr */

 

toastrを使用するより前に記述しておくことで、グローバル変数だと認識してくれ構文エラーとならずトースターを使用することができます。

/* globals toastr */

toastr.success(‘トースト成功);

 

 

まとめ

 

いかがだったでしょうか。

今回は「ESLint下でToastr(グローバル変数)を使用する方法」をご紹介しました。

TypeScriptESLintなど、便利なものを採用すればその恩恵は大きく、致命的エラーを回避したり記述が簡潔にできたりとスムーズな開発ができるようになります

ESLintに挑戦している人は、ぜひ参考にしてくださいね。

 

注目の記事

フレンドリィショップ編 開店準備 PHPポケモン 75
プログラミング
PHP,PHPポケモン,ポケモン
フレンドリィショップ編 開店準備 PHPポケモン 75

アイテム(どうぐ) PHPポケモンもバトル機能が一通り揃ってきたので、新機能として「アイテム」の実装に取り掛かります。 アイテムにも色々ありますが、技やポケモンのクラス同様に、初代で登場したアイテムから順番に取り揃えていきましょう。   キズぐすりの実装 ポケモンのどうぐ、一番手は「キズぐすり」...

有料ノートが公開停止!?プラットフォーム依存の危険性とは
雑記
note,YouTube,ブログ
有料ノートが公開停止!?プラットフォーム依存の危険性とは

  「いままでのnoteがいきなり公開停止になった」 「YouTubeであげていた人気動画が削除された」   規約変更、違反などを理由にこういった被害は年々増えています。自覚して悪意あるコンテンツを作っているユーザーであれば当然の結果だと言ってしまえば済むことですが、努力して収益化する糸口を見つけ...

バトルステータス可視化編 PHPポケモン 70
プログラミング
PHP,PHPポケモン,ポケモン
バトルステータス可視化編 PHPポケモン 70

バトルステータスの可視化 現在のポケモンでは、バトルステータスの現状を可視化できるようになっており、どれぐらいのランク補正がかかっているか、フィールドがどういう状態になっているかがわかるようになっています。 初代、第2世代等では確認できなかった内容ではありますが、システムとしては便利な要素でも...

未経験からWeb系エンジニアとしてフリーランスになる現実的な方法教えます【軌道に乗れば起業も可能】
フリーランス
エンジニア,フリーランス,プログラミング学習,独立,起業
未経験からWeb系エンジニアとしてフリーランスになる現実的な方法教えます【軌道に乗れば起業も可能】

  セカンドキャリアとしてプログラミングやデザインを学習したい   そう考えてスクールを受講したり、独学で始める人が増えていますが、そのほとんどが実らずに挫折してしまいます。 ですが、学習方法と経験の積み方や職の選び方さえ間違えなければ、技術を身につけてフリーランスとして活動することも難しく...

引き継ぎ考慮のメッセージID重複回避編 PHPポケモン 58
プログラミング
PHP,PHPポケモン,ポケモン
引き継ぎ考慮のメッセージID重複回避編 PHPポケモン 58

今回のPHPポケモンでは内部の作り込みをしていきます。見た目への反映は無いので、プレイを楽しみにしている人や、ポケモンが好きで毎日チェックしてくれているような人は、ブラウザをバックしてもらって問題ありません。   それでは、前々回辺りから保留にしていた「メッセージIDに重複回避対策」についてです。 &...

わざマシン編 作成 PHPポケモン104
プログラミング
PHP,PHPポケモン,ポケモン
わざマシン編 作成 PHPポケモン104

わざマシンとは ポケモンはレベルアップ以外でも技を習得することができます。それが「わざマシン」というアイテムです。  わざマシン(ポケモンwiki) https://wiki.ポケモン.com/wiki/わざマシン   最新世代では「技レコード」というものが有り、使い切りとなっています。初代ではわざマシン自体も使い...

PHPポケモン「技クラス実装編」14
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「技クラス実装編」14

  前回せっかくBootstrapを使って見た目を整えたにも関わらず、ビューポートの記述が抜けているという凡ミスが発覚したので修正しています。 サーセン。   今回のPHPポケモンでは本格的な技システムを実装していきます。技システムが整えば、皆さん期待のバトルシステムも間近です。セキュリティ面やファイル構成...

アウトプットのための3つの習慣【3対7を成立させよう】
雑記
アウトプットのための3つの習慣【3対7を成立させよう】

  インプットとアウトプットの比率は3対7がベストだと言われています。 しかし、簡単にできるインプットに比べて、アウトプットは習慣化させておくことが大切です。それができていない人の多くが、膨大に本を読んだり学習に取り組んでも身につかず、趣味のレベルで終わってしまうのです。   今回は、そんな...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力