【ITニュース解説】Can You Even Use Jump Links in Angular? (Yes… Here’s How)
2025年09月12日に「Dev.to」が公開したITニュース「Can You Even Use Jump Links in Angular? (Yes… Here’s How)」について初心者にもわかりやすく解説しています。
ITニュース概要
Angularでページ内ジャンプリンクを実装する方法を解説する。HTMLでの単純な実装では機能しないため、`routerLink`ディレクティブと`fragment`を使い、`[routerLink]="[]"`でルートを維持する。ルーター設定でアンカースクロールを有効化し、CSSでスムーズな動きを実現する手順を紹介。
ITニュース解説
システムエンジニアを目指す初心者の皆さん、Webページ内で特定の場所へ瞬時に移動できる「ジャンプリンク」、いわゆるページ内リンクの作成は、Web開発においてよく使う技術だ。これは、例えば長い記事の目次をクリックすると、その記事の対応する見出しまで自動的にスクロールするような機能である。HTMLだけであれば、非常に簡単に実装できる。具体的には、移動したい先の要素にid属性を設定し、リンク元の<a>タグのhref属性に#とそのid名を記述するだけで実現できる。
しかし、現在多くのモダンなWebアプリケーション開発で使われるフレームワーク、特にAngularでは、このシンプルなHTMLの仕組みだけでは期待通りに動作しない場合がある。Angularは、ルーティングという仕組みを使って、URLの変更に応じて表示するコンポーネントを切り替えるため、通常のジャンプリンクの方法では問題が生じることがあるのだ。この記事では、Angularアプリケーションで、このジャンプリンクを正しく、そしてユーザーにとって使いやすい形で実装する方法を解説する。
まず、Angularでジャンプリンクがなぜそのままでは機能しないのかを理解することから始めよう。典型的なAngularアプリでは、目次のようなリンクを作成しても、クリックしても何も起きないという状況がある。これは、リンクがまだ具体的な移動先を指していないためだ。HTMLの<a>タグをただ配置しただけでは、Angularのルーティングシステムとは連携しない。
Angularでジャンプリンクを実装するためには、Angularのルーティング機能と連携する特別な方法を用いる必要がある。その鍵となるのが、routerLinkディレクティブとfragment入力という機能だ。まず、コンポーネントのテンプレート内でリンクを記述する際、通常のhref属性の代わりにrouterLinkディレクティブを使用する。そして、移動先の要素のidをfragment入力として設定する。
例えば、id="links"という見出しへ移動したい場合、リンクは<a routerLink="" fragment="links">...</a>のように記述する。ここで、routerLink=""としているのは、現在のルート（URLパス）を変更したくないためだ。もしrouterLink="adding-links"のように記述すると、これは別のルートへの移動を意味する。ジャンプリンクは通常、現在のページ内で移動するため、ルート変更は望ましくない。
ところが、routerLink=""と記述しても、依然として問題が発生することがある。この設定だと、現在のURLパスが意図せず変更されてしまうことがあるのだ。例えば、現在のURLが/homeだった場合、リンクをクリックすると/（ルートパス）に変わってしまうことがあった。これは、routerLink=""が「空のルート」を指すと解釈されるためだ。
この問題を解決するには、routerLinkに空の配列をバインドする、[routerLink]="[]"という少し奇妙に見える構文を使う。これはAngularに対して「どこにもルーティングしない、現在のルートに留まる」という明確な指示を与える方法だ。この設定を施すことで、URLパスが変わることなく、#fragmentだけがURLに追加されるようになる。<a [routerLink]="[]" fragment="links">...</a>のように変更することで、URLのパス部分が固定され、正しくフラグメントが追加される。
しかし、ここまで設定しても、まだリンクをクリックしても実際にはスクロールしないという次の問題に直面することがある。URLには#linksのようなフラグメントが正しく追加されているにもかかわらず、ブラウザは自動的にその場所までスクロールしてくれないのだ。これは、Angularアプリケーションでは、アンカー（フラグメント）に基づいて自動的にスクロールする機能がデフォルトで無効になっているためだ。
この「アンカースクロール」機能を有効にするには、Angularのルーター設定を変更する必要がある。通常、アプリケーションのルーター設定が含まれるmain.tsファイル（またはそれに準ずるファイル）で、provideRouter()関数にwithInMemoryScrolling()関数を追加し、そのオプションとしてanchorScrolling: 'enabled'を設定する。これにより、AngularルーターはURLにフラグメントが存在する場合、そのIDを持つ要素まで自動的にスクロールするようになる。具体的には、provideRouter([...], withInMemoryScrolling({ anchorScrolling: 'enabled' }))のように記述する。この設定を加えることで、ようやくジャンプリンクが機能し、指定したセクションまでスクロールするようになる。さらに、ブラウザの「戻る」ボタンを押した際にも、URLの履歴とスクロール位置が正しく復元されるようになる。
最後に、ユーザー体験をさらに向上させるための追加の改善点がある。上記の設定でジャンプリンクは動作するようになるが、スクロールが一瞬で完了するため、画面の切り替わりが唐突で少し不自然に感じられることがある。これを滑らかで自然な動きにするために、「スムーズスクロール」という視覚効果を追加できる。
このスムーズスクロールは、CSSのプロパティを一つ追加するだけで簡単に実現可能だ。一般的に、Webページの縦方向のスクロールは<html>要素で行われることが多い。そのため、グローバルなCSSファイル（例えばglobal_styles.cssやstyles.cssなど）を開き、htmlセレクタに対してscroll-behavior: smooth;というCSSプロパティを追加する。これにより、ジャンプリンクがクリックされたとき、目的のセクションまでアニメーションしながらゆっくりとスクロールするようになり、アプリケーション全体がより洗練された印象を与える。
以上のステップを踏むことで、Angularアプリケーション内で、標準的なHTMLのジャンプリンクが持つ機能と、Angularのルーティングシステムが提供する柔軟性を両立させた、プロフェッショナルなジャンプリンクを実装できる。具体的には、routerLinkディレクティブとfragment入力を使ってリンクを作成し、[routerLink]="[]"でルート変更を防ぎ、ルーター設定でwithInMemoryScrolling({ anchorScrolling: 'enabled' })を有効にしてスクロールを制御し、最後にCSSでscroll-behavior: smooth;を追加してスムーズなアニメーションを実現する。これらの小さな工夫が、ユーザーが快適に感じる高品質なAngularアプリケーションを作る上で非常に重要となる。