第5章-3節: 実践！ドラッグモーダル操作練習アプリ

ツールチップ作成、モーダル開閉と、実践トレーニングも順調に進んでいるね！これまでの練習で、HTML、CSS、JavaScriptがどのように連携してインタラクティブな動きを生み出すのか、少しずつ感覚が掴めてきたんじゃないかな？

今回のトレーニングは「ドラッグ可能なモーダルウィンドウ」だ！第3章6節で学んだ、モーダルをマウスで掴んで自由に移動させる機能を、実際に試せるアプリを用意したよ。マウスの動きに合わせて要素がついてくる、あのダイナミックな動きを体験してみよう！

🖐️ モーダルを掴んで動かしてみよう！

下のボタンをクリックすると、ドラッグできる練習用モーダルが開くよ。
モーダルのヘッダー部分（濃い灰色の帯）をマウスで掴んで動かしてみてね！

{/* */}

💡 練習のポイント

  • まずはモーダルを開いて、ヘッダー部分をマウスで掴んでみよう。カーソルの形が「移動」を示す形に変わるかな？
  • そのままマウスを動かすと、モーダルがついてくることを確認しよう。フィードバックエリアには、ドラッグ中の座標などが表示されるかもしれないよ。
  • マウスのボタンを離すと、ドラッグが終了してモーダルがその場に固定されることを確認しよう。
  • モーダルを画面の端まで持っていこうとすると、どうなるかな？（このアプリでは、画面外に完全にはみ出さないように簡単な制御が入っているよ。）
  • 第3章6節で学んだ、mousedown, mousemove, mouseupの3つのイベントが、このドラッグ操作の裏側でどのように連携しているか想像してみよう。特に、mousemoveとmouseupのイベントリスナーをdocumentに設定する理由を思い出してみると、理解が深まるはずだ。

この練習で、マウスイベントを使ったダイナミックなUI操作の基本を掴んで、プログラミングの楽しさをさらに感じてくれたら嬉しいな！

🇬🇧英語の豆知識コーナー

ドラッグ操作や座標に関する言葉だよ！

  • Drag Handle

    意味：ドラッグハンドル（要素をドラッグするために掴む特定の部分）

    Original: The modal's header often serves as its drag handle.

    意訳：モーダルのヘッダーは、しばしばそのドラッグハンドルとして機能します。

  • Cursor Property

    意味：カーソルプロパティ（マウスカーソルの形状を指定するCSSのプロパティ）

    Original: Set the 'cursor' property to 'move' for draggable elements.

    意訳：ドラッグ可能な要素には、「cursor」プロパティを「move」に設定します。

  • Coordinate Tracking

    意味：座標追跡（マウスカーソルなどの位置情報を追跡すること）

    Original: Real-time coordinate tracking is necessary for smooth dragging.

    意訳：スムーズなドラッグのためには、リアルタイムの座標追跡が必要です。

  • Real-time Feedback

    意味：リアルタイムフィードバック（ユーザーの操作に対して即座に反応を返すこと）

    Original: Displaying the coordinates provides real-time feedback during the drag operation.

    意訳：座標を表示することは、ドラッグ操作中にリアルタイムフィードバックを提供します。

まとめ

今回は、ドラッグして移動できるモーダルウィンドウの操作を練習するアプリを使ってみたね！

  • モーダルのヘッダーを掴んで、自由に動かせることを体験できた。
  • マウスのボタンを押す(mousedown)、動かす(mousemove)、離す(mouseup)という一連の動作が、ドラッグ機能の基本になっていることを実感できた。
  • （フィードバックがあれば）ドラッグ中の座標の変化など、裏側の動きも少し垣間見れたかな？

これで第5章「実践トレーニング」は一区切りだ！ツールチップの作成、モーダルの開閉、そしてドラッグ可能なモーダルと、実際に手を動かして試すことで、これまでの学習内容がより深く身についたことと思う。

さあ、いよいよこのサイトの学習も最終章に近づいてきたよ。次の第6章では、これまでに出てきた大切な「用語」をまとめて復習し、最後に楽しい「用語確認クイズ」に挑戦だ！

目次に戻る