初めまして。
都内でエンジニアをしているみっちーです🙋
今回は住所の自動入力にYubinbangoを使用して行き詰まったので、そのことについてまとめていきます。
内容
「郵便番号を入力したら住所が自動入力されるライブラリYubinbangoを導入した。
ドキュメント通りに導入したが、なぜか自動入力が反応しない。困ったもんだ」
という内容です。
原因
フォームが動的な挙動をしていることが原因です。
ライブラリを見るとわかりますが、自動入力の関数はDOMContentLoaded時に呼び出されます。
動的なページの場合はhtmlの読み込みが完了しないため、（もしくは対象の要素が表示されていないため）関数が発火されない可能性があります。
DOMContentLoaded :
最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。
対策
別で関数を呼び出してあげましょう。
住所の自動入力をしたいページでライブラリを読み込んだ後に
new YubinBango.MicroformatDom();
を実行すると動的なフォームでも動作します。
ですが、ライブラリの直変更はやめましょう🈲
さいごに
住所の自動入力はとても便利です。
住所の入力がめんどくさくて離脱するユーザーを減らすことができますので自動入力ライブラリの導入は必須かと思います🙆
しかし、後から変更する場合はDBの変更が必要になったり、バリデーションの修正が必要になったりと影響範囲が大きくなりますので最初の段階でしっかり考えて実装することが大事だと感じました。
以下、参考記事です。
https://pinzolo.github.io/2017/03/15/yubinbango-with-turbolinks.html
https://github.com/yubinbango/yubinbango/issues/15