Stimulusを使ったRailsアプリケーション開発では、コントローラーのライフサイクルを理解することが重要です。
この記事では、Stimulus公式ドキュメントの「Lifecycle Callbacks」の内容を日本語でわかりやすく解説します。
目次
ライフサイクルコールバックとは？
Stimulusのライフサイクルコールバックとは、StimulusコントローラーがHTML要素に接続されたり、切り離されたりするタイミングで自動的に呼び出される特別なメソッドのことです。
Stimulusでは、以下の3つのライフサイクルコールバックが用意されています。
- initialize()
- connect()
- disconnect()
これらのメソッドを活用することで、コントローラーの初期化処理や後処理を適切に行うことができます。
initialize()
initialize()メソッドは、Stimulusコントローラーのインスタンスが作成された直後に呼び出されます。
この時点では、まだコントローラーはHTML要素に接続されていません。
使用例
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
initialize() {
console.log("コントローラーが初期化されました。")
}
}使いどころ
- コントローラーの初期状態を設定する
- インスタンス変数を初期化する
connect()
connect()メソッドは、StimulusコントローラーがHTML要素に接続されたときに呼び出されます。
具体的には、ページ読み込み時や、要素がDOMに追加されたときに実行されます。
使用例
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("コントローラーがHTML要素に接続されました。")
}
}使いどころ
- DOM要素に対するイベントリスナーを設定する
- 外部ライブラリを初期化する
- 要素の初期表示を調整する
disconnect()
disconnect()メソッドは、StimulusコントローラーがHTML要素から切り離されたときに呼び出されます。
具体的には、要素がDOMから削除されたときに実行されます。
使用例
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
disconnect() {
console.log("コントローラーがHTML要素から切り離されました。")
}
}使いどころ
- イベントリスナーを解除する
- 外部ライブラリの後処理を行う
- メモリリークを防ぐためのクリーンアップ処理を行う
ライフサイクルコールバックの実行順序
Stimulusコントローラーのライフサイクルコールバックは、以下の順序で実行されます。
- コントローラーのインスタンスが作成される
initialize()が呼ばれる- コントローラーがHTML要素に接続される
connect()が呼ばれる- （要素がDOMから削除されると）
disconnect()が呼ばれる
ライフサイクルコールバックのベストプラクティスと注意点
initialize()では、HTML要素に依存しない初期化処理を行いましょう。- DOM要素に依存する処理は、必ず
connect()で行いましょう。 - イベントリスナーや外部ライブラリを使用する場合は、
disconnect()で必ず後処理を行いましょう。 - ライフサイクルコールバックを適切に使うことで、メモリリークや予期しない挙動を防ぐことができます。
まとめ
Stimulusのライフサイクルコールバックを理解することで、コントローラーの初期化処理や後処理を適切に行うことができます。
initialize()：コントローラーのインスタンス作成直後に呼ばれるconnect()：コントローラーがHTML要素に接続されたときに呼ばれるdisconnect()：コントローラーがHTML要素から切り離されたときに呼ばれる
Stimulusのライフサイクルコールバックを活用して、Railsアプリケーションのフロントエンド開発をより効率的に進めましょう。
