JavaScriptを使った画面遷移を実装～ChatGPTと一緒に一問一答アプリを開発した話⑩～

【PR】この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

「一問一答アプリ × ChatGPT」

先日、ChatGPTを活用して一問一答アプリケーション「情報1 一問一答トレーニングGYM」を開発したことをお伝えしました。

▶︎こちらの記事で紹介しています。

2023年6月2日【ChatGPTと開発】高校「情報1」一問一答アプリ

私が開発したこのアプリは、ChatGPTの力を借りながら、実装していきました。

この記事では、一問一答アプリ × ChatGPTの開発の舞台裏や、実際の活用方法について詳しく解説します。

今回は

JavaScriptを使った画面遷移

という機能を実装するにあたって、どのように役立ったのか、その様子を紹介します！

ぜひこのシリーズの記事をチェックして、一問一答アプリの新たな魅力とChatGPTとの相乗効果を体感してください！

目的

ユーザーが使用する一問一答画面を装飾していくにあたって、選択肢を設置する位置と、正解不正解が表示される位置に少し距離があると感じ、わざわざユーザーが画面をスクロールするのは申し訳ない、自動で正解不正解が表示される位置まで画面が遷移するようにしたいと考えました。

この機能はJavaScriptを使えば実装できそうです。

この機能自体は珍しいものでもなく、驚くようなものでもありません。

ただ、どのように実装するのかを少し忘れていたため、chatGPTに相談しました。

コトゼニ

<%= button_to ” エ “, “/questions/result”, {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: “btn btn-outline-secondary buttons” }%>というコードをクリックしたとき、同じページの中の「 <div id=”result” class=”h4″></div> 」という箇所まで画面が遷移するコードを教えてください

【プロンプト】

<%= button_to ” エ “, “/questions/result”, {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: “btn btn-outline-secondary buttons” }%>

というコードをクリックしたとき、同じページの中の「 <div id=”result” class=”h4″></div> 」という箇所まで画面が遷移するコードを教えてください

chatGPT

以下はJavaScriptを使って、クリックされたときにページ内スクロールで「#result」まで移動する方法です

<%= button_to "  エ  ", "/questions/result", {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: "btn btn-outline-secondary buttons", onclick: "scrollToResult()" }%>

...

<script>
function scrollToResult() {
  // #result要素の位置を取得
  var resultElement = document.querySelector('#result');
  var resultPosition = resultElement.getBoundingClientRect().top + window.pageYOffset;
  
  // スクロールする
  window.scrollTo({ top: resultPosition, behavior: 'smooth' });
}
</script>

これを元に実装した結果がこちら▼