NATSUMIこんにちは!コーダーの平原です!Webサイトのグローバルナビゲーションなどで、現在ページのカレント表示をしているサイトをよく見ますよね。このカレント表示の機能の作り方は色々あり、参考サイトも数多くあるのですが、作りたい仕様が実現できないプログラムだったりします。今回作成した、現在ページのカレント表示の仕様をご説明します。現在ページのURLのパス名の第1階層と、href属性の第1階層の値を比較し、同じ値であればカレント表示がされるという仕様になっています。動作する条件は以下の通りです。ナビゲーションのa要素に指定した、href属性の値が相対パス、又はルート相対パスであること。//ルート相対パス第2階層がある場合は、第1階層のディレクトリに該当するナビゲーションにカレントを付けること。現在ページのカレント表示機能こちらが1の仕様で作成した、現在地のカレント表示機能のプログラムです。location.pathnamelocationオブジェクトのpathnameプロパティでは、現在ページのパス名を参照します。取得したパス名は変更することもでき、それによりページ遷移をさせることもできます。locationオブジェクトには、pathnameプロパティの他にも多数のプロパティがあり、URL全体や、ホスト名、アンカーなどを取得することも可能です。splitsplitは引数に指定した文字列で、文字列を分割して配列として返すメソッドです。今回の場合は、取得したパスを「/」で分割して、配列から第1階層に該当する文字列を取得しています。splitメソッドはその他にも、改行コードで分割したり、取得する個数を制限したりすることもできます。まとめ現在ページのカレント表示機能の実装は、どのような仕様を実現したいかによって変化します。href属性のパスの指定方法や、グローバルナビゲーションに表示する階層、そして実際にあるページの階層の深さなどを理解した上で、その仕様に合った機能である必要があります。使用頻度の高い機能の為、使い回してしまいそうになりますが、実装漏れにならない為にもサイトの仕様をきちんと理解することが大切ですね。