【Angular】連打防止ディレクティブを作ろう！【使いまわし可能！】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回は連打防止ディレクティブの作成について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

オリジナルのディレクティブが作成できる
連打防止ディレクティブが作成できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

実行環境

連打防止ディレクティブを作ってみよう！
GitHubのサンプルコード
まとめ

連打防止ディレクティブを作ってみよう！

連打防止するために必要となる処理は以下の3つです。

クリックイベントを受け取る
要素にdisabled属性をtrueとし、操作不可能とする
一定時間経過後、disabled属性をfalseに戻し操作可能とする

ちなみにJavaScriptのみでも実装できるよ！

ディレクティブとは

ディレクティブとは、HTML要素に属性として記述する事でDOMの操作を可能とするクラスです。

連打防止のように汎用性の高いディレクティブを作成して使い回すことで
同じ処理を複数のファイルで記述する必要がなくなるので、
コードがスッキリして処理も統一されます。

使いまわしできるのが最大のメリットだよ！

初期設定

ng new my-app
cd my-app
ng generate directive directive/preventDoubleClick
ng serve -o

ng generate directive directive/prevent-double-click
でdirectiveが作成できるよ！

prevent-double-click.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appPreventDoubleClick]',
})
export class PreventDoubleClickDirective {
  /**disabledを解除するまでの時間※ミリ秒 */
  TIMER: number = 3000;

  // DI(依存性の注入)
  // ホスト要素のDOMへのアクセスが可能となる
  constructor(private element: ElementRef) {}

  @HostListener('click') public onClick() {
    console.log('要素をdisabledにします');
    // 受け取ったHTML要素のdisabled属性をtrueにして、非活性にする
    this.element.nativeElement.disabled = true;

    // 指定した時間が経過したら処理を実行
    setTimeout(() => {
      // disabled属性をfalseにして活性状態に戻す
      this.element.nativeElement.disabled = false;
    }, this.TIMER);
  }
}

appPreventDoubleClickをHTMLの属性として付与することで機能するよ！

app.component.html

<button appPreventDoubleClick>クリック！</button>

<!-- ↓divタグには作用しない -->
<div appPreventDoubleClick>クリック！</div>

divタグなどdisabled属性を持たない要素には作用しないよ！

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { PreventDoubleClickDirective } from './directive/prevent-double-click.directive';

@NgModule({
  declarations: [
    AppComponent,
    PreventDoubleClickDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

動作確認

■初期表示

■ボタンをクリック

■3秒後

これで使いまわし出来る連打防止ディレクティブができたよ！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-Directive-prevent_double_click

Contribute to same-hack/Angular-Directive-prevent_double_click development by creating an account on GitHub.

まとめ

ディレクティブとは、HTML要素に属性として記述する事でDOMの操作を可能とするクラス
要素に一時的にdisabled属性を付与することで連打防止機能が作成出来る

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram