プログラミング

【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ポケモン「オートローダー編」16
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートローダー編」16

  今までは技やタイプを一括requireという荒業で対応していましたが、フシギダネ系列の技を実装した際に「こんなん全部読み込んでられるか!」と流石になったので、簡易ながらオートローダーを実装していきます。 そして、実装したらしたで色々と問題も浮かび上がってきたので、このあたりは回を進めて行きなが...

get_template_partで引数を渡す方法(WordPress5.5以降)
プログラミング
PHP,WordPress
get_template_partで引数を渡す方法(WordPress5.5以降)

WordPress5.5へのバージョンアップで、大きく機能が追加されました。中には変更に戸惑っている人もいるかも知れませんが、個人的にはエンジニアの要望を大きく取り入れて自由度がアップした印象があります。 今回はその中でも、多くの方が待ち望んでいた「get_template_part」の変更点についてご紹介します。 ge...

CSSとの意外な関係「よくわかるSEO対策」スタイルシート編
SEO対策
CSS,スタイルシート,レンダリング
CSSとの意外な関係「よくわかるSEO対策」スタイルシート編

   今回の「よくわかるSEO対策」はスタイルシート(CSS)編です。   多くの人が 「SEO対策なのに、CSSの説明をするの?」 と思うかも知れませんが、これには意外な関係性があったのです。   現在CSSを学んでいる人、そしてCSSの書き方ならマスターしているといった人でも、SEOのことまでを考慮した記述ができて...

PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化

  前回実装したオートローダーの使い方が盛大に間違っていたので、今回その間違いの説明をしながら、正しい実装方法をご紹介します。 申し訳ありません。(誠意)    オートロードについて(再)  必要なタイミングで必要なファイルをrequireまたはincludeするあれです。   前回spl_autoload_reg...

プログラミングとは?現役システムエンジニアが教える裏事情
プログラミング
システムエンジニア,プログラマー
プログラミングとは?現役システムエンジニアが教える裏事情

  プログラミングってよくわからない? 実際に何をやっているの?   最近注目されているSE(システムエンジニア)やPG(プログラマー)という職業ですが、「そもそもプログラミングとは?」といった疑問を抱えている方も多いですね。 今回は、そういった方へ向けて「プログラミングの基礎知識と裏事情」...

HPバーアニメーション 後編 フロント側の対応 PHPポケモン 44
プログラミング
PHP,PHPポケモン,ポケモン
HPバーアニメーション 後編 フロント側の対応 PHPポケモン 44

HPバーアニメーション それでは前回に続き、HPバーのアニメーションづくりをしていきましょう。前回、メッセージに合わせてレスポンスを返却するというサーバー側の仕組みを作成しました。なので、今回はそれをフロント側で受け取り、タイミングよくアニメーションで再現します。   フロント側(js)の処理 前回...

知らなきゃ損!表記ゆれに強いSEO対策とは「オーガニック検索ユーザーを増やそう」
SEO対策
description,keyword,meta,title
知らなきゃ損!表記ゆれに強いSEO対策とは「オーガニック検索ユーザーを増やそう」

  「なかなかオーガニック検索の割合が増えない」 「どういったSEO対策をすればいいかわからない」   ブログやサイト運営者の方で、思うように成果が出ないと悩んでいる人は、まだまだSEO対策が十分ではない可能性があります。そして、SEO対策の中でも知らないと損する一つが「表記ゆれ」への対応です。 ...

できるやつの「雑学力」
雑記
勉強法,雑学力
できるやつの「雑学力」

  テレビのコメンテーター、討論番組の出演者で活躍するほとんどの人は物知りだ。 あなたも「よくそんなことまで知っているな」と思ったことはあるだろう。 現代で起業して成功し続ける人のほとんどが、常に新しい情報を取り入れている。 そして得た情報に対して、歴史情報と照らし合わせ、自分なりの意見や解釈を...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力