JavaScript コードを説明する

JavaScript コードブロックの確認

モデルにクエリを直接実行して、返された結果をテストできます。その場合、Cloud コンソールでさまざまなパラメータ値を使用することも、Vertex AI API を直接呼び出すこともできます。
システム指示

あなたは JavaScript のエキスパート コード アシスタントです。常にユーザーに挨拶してから、すぐに要点に進みます。

自由形式のプロンプト

このコードの機能と仕組みを説明してください？

let currentSlide = 0;

function showSlide(index) {
  const slidesWrapper = document.querySelector('.slides-wrapper');
  const slides = document.getElementsByClassName("slide");

  if (index >= slides.length) currentSlide = 0;
  if (index < 0) currentSlide = slides.length - 1;

  slidesWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() {
  currentSlide++;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;
  showSlide(currentSlide);
}

window.onload = function() {
  showSlide(currentSlide);
  setInterval(nextSlide, 3000);
};

レスポンス

こんにちは。この JavaScript コードは、シンプルなスライドショーを作成します。詳しく見ていきましょう。

  1. currentSlide = 0;: 現在のスライドをトラッキングする変数を初期化します。0（最初のスライド）から始まります。

  2. showSlide(index): これはコア関数です。表示するスライドを表す index を受け取ります。

    • document.querySelector('.slides-wrapper'): すべてのスライドのコンテナ要素（slides-wrapper クラスの <div>）を取得します。
    • document.getElementsByClassName("slide"): クラスが slide のすべての要素（個々のスライド）を取得します。
    • if (index >= slides.length) currentSlide = 0;: インデックスが範囲外（スライド数以上）の場合、最初のスライド（インデックス 0）に戻ります。
    • if (index < 0) currentSlide = slides.length - 1;: 同様に、インデックスが 0 未満の場合、最後のスライドに移動します。
    • slidesWrapper.style.transform =translateX(-${currentSlide * 100}%);: ここがキーラインです。CSS 変換を使用して、slides-wrapper 要素を水平方向に移動します。各スライドは、コンテナの幅の 100% であることを前提としています。currentSlide に 100% を掛けると、コンテナが左に移動し、適切なスライドが表示されます。

  3. nextSlide(): この関数は currentSlide をインクリメントし、showSlide() を呼び出して次のスライドを表示します。

  4. prevSlide(): この関数は currentSlide をデクリメントし、showSlide() を呼び出して前のスライドを表示します。

  5. window.onload = function() { ... }: ページ全体が読み込まれた後にコードが実行されます。

    • showSlide(currentSlide);: 最初のスライドが表示されます。
    • setInterval(nextSlide, 3000);: nextSlide() を自動的に呼び出す間隔を 3,000 ミリ秒（3 秒）に設定し、自動スライドショーの効果を作成します。

基本的に、このコードは CSS 変換を使用してスライドをスムーズに切り替え、ラップアラウンド動作とスライドの自動進行を処理します。コンテナ要素とスライド要素を含む特定の HTML 構造を前提としています。HTML は次のようになります。

<div class="slides-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
モデル: gemini-1.5-flash-002
温度: 0.2
最大出力トークン: 8192
トップ K 40.0
トップ P 0.95