Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】The Trials and Tribulations of Counting Visitors in the Cloud Resume Challenge

2025年09月15日に「Dev.to」が公開したITニュース「The Trials and Tribulations of Counting Visitors in the Cloud Resume Challenge」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

Cloud Resume ChallengeでAWSサービスを使いWebサイト構築。訪問者カウンター実装に苦戦した。ページリロードでカウントが増える問題を解決するため、IPアドレス記録や外部ツールを検討するも却下。最終的にlocalStorageで訪問履歴を記録し、ユニーク訪問者をカウントする方法を採用した。完璧ではないが、個人プロジェクトには最適と判断した。

ITニュース解説

Cloud Resume Challengeは、AWS(Amazon Web Services)などのクラウドサービスについて、実践的な知識とスキルを身につけるためのプロジェクトである。この挑戦を通じて、ストレージサービスであるS3、コンテンツ配信を高速化するCloudFront、ウェブサイトのドメイン管理を行うRoute 53、サーバーレスでコードを実行するLambda、高速なキーバリューストアを提供するデータベースのDynamoDB、そしてAPIの作成・公開・管理を行うAPI Gateway、さらにこれらのサービスを効率的にデプロイするためのSAM(Serverless Application Model)といった多様なAWSサービスと概念を実際に手を動かしながら学ぶことができる。この記事では、この挑戦の中で特に難しかった部分として、ウェブサイトの訪問者カウンターの実装について詳しく説明している。

訪問者カウンターの実装では、大きく三つの要素が必要だった。一つはユーザーがウェブサイトを閲覧する際に利用するフロントエンドのJavaScriptプログラム、二つ目はデータベースへのアクセスを管理するバックエンドの処理、そして三つ目は訪問者数を記録するためのデータベースである。この三つの要素を独立させて構築することは、セキュリティを強化する上で非常に重要である。もしフロントエンドから直接データベースにアクセスするような構造にしてしまうと、ウェブサイトはデータ改ざんやSQLインジェクションといった攻撃に対して脆弱になり、APIキーのような重要な情報が外部に漏洩するリスクも高まる。そのため、フロントエンドとデータベースの間には、Lambda関数のようなサーバーレスのコンピューティングサービスを挟み、API Gatewayを通じて安全にデータを受け渡しする仕組みを構築する必要があったのだ。

最初のステップとして、フロントエンドのJavaScriptプログラムからLambda関数を通じてバックエンドのデータベースにデータを送信し、そこからデータを取得する方法を確立した。これは比較的スムーズに進んだ部分である。この基本的なデータ連携ができた後、ウェブサイトの訪問者数をインクリメントするロジックを実装し、その機能をAPI Gateway経由でAPIとして公開した。これにより、ウェブサイトが読み込まれるたびに訪問者数が増えるシンプルなカウンターが完成したかに見えた。

しかし、数日後、このカウンターには重大な欠陥があることに気づいた。作成したカウンターは、ウェブページが訪問されるたびに、たとえ同じユーザーがページを再読み込みした場合でも、常にカウントを増やしてしまう仕組みになっていたのだ。これでは真の「ユニークな訪問者数」を正確に反映しているとは言えず、意図したカウンターとは異なる結果を示すことになる。そこで、新規のユニークな訪問者のみを確実にカウントするための信頼性の高い方法を見つけることに頭を悩ませることになった。様々な方法を検討したが、どの方法にもそれぞれ課題があった。

最初のアイデアは、データベースにユーザーのIPアドレスと訪問者数の値を一緒に記録することだった。しかし、この方法は二つの理由から最終的に採用しなかった。一つ目の理由は、IPアドレスだけではユーザーのユニーク性を確実に判断できないことである。たとえば、複数のユーザーが同じIPアドレスを共有するケース(企業や学校のネットワークなど)や、同じユーザーが時間帯によって異なるIPアドレスを使用するケース(モバイルネットワークの切り替わりなど)が存在するため、IPアドレスを記録してもユニーク訪問者を正確にカウントできるとは限らない。二つ目の理由は、IPアドレスのような個人を特定しうる情報を収集することは、個人的な簡単なプロジェクトとしては過剰であり、データのプライバシー保護の原則にも反すると感じたからである。

次に検討したのは、外部の専門ツールを利用する方法だった。しかし、これも個人のシンプルなプロジェクトには大袈裟すぎると判断した。また、可能な限りAWSのサービスに限定してプロジェクトの範囲を保ちたいという思いもあったため、外部ツールの導入は見送ることにした。

最終的にたどり着いたアイデアは、ウェブブラウザのlocalStorageという機能を利用する方法だった。これは、ウェブサイトがユーザーのブラウザにデータを保存できる仕組みである。具体的には、ユーザーがウェブサイトを初めて訪れた際に、localStorageに「visited=true」といったパラメーターを設定する。そして、以降の訪問では、このパラメーターがすでに存在するかどうかを確認し、存在しない場合(つまり、初めての訪問の場合)にのみ訪問者カウンターをインクリメントするというロジックにした。この方法も完璧な解決策ではない。なぜなら、ユーザーがブラウザのキャッシュや履歴をクリアする際にlocalStorageのデータも削除してしまえば、再度カウントされてしまう可能性があるからだ。しかし、今回の個人のシンプルなプロジェクトの目的を考えると、このlocalStorageを利用する方法が最も現実的で適切な解決策であると判断した。

このユニーク訪問者カウンターの実装は、Cloud Resume Challengeの中で最も苦労し、何日も解決策を考えるのに時間を費やした部分だった。この経験を通して、ウェブサイトのユニーク訪問者を信頼性高くカウントするというテーマが、多くの研究者にとっても関心の高い課題であることを知ったため、将来的にはこのテーマについてさらに深く掘り下げ、様々な方法を比較検討してみたいと考えている。

この記事で紹介された訪問者カウンターの実装は、Forrest Brazeal氏が考案した素晴らしいCloud Resume Challengeの一部に過ぎない。クラウドコンピューティングについてより深く学びたいと考える人には、この挑戦にぜひ参加することを強く勧める。この挑戦はAWS版だけでなく、GCP(Google Cloud Platform)やAzure(Microsoft Azure)といった他の主要なクラウドサービス版も用意されているため、誰もが自身の興味に合わせて参加できる。

筆者は現在、自身のウェブサイトを公開しており、そのサイトのソースコードも個人のGitHubリポジトリで公開しているため、興味がある読者は参照することができる。

関連コンテンツ

関連IT用語