概要: 本記事では、JavaScriptを用いた画面操作の基本から応用までを解説します。画面遷移、画像表示、nth-childや疑似要素を使った要素の操作、行の追加・取得、そして座標の取得・移動・変換、改行処理まで、具体的なコード例を交えて分かりやすく説明します。
JavaScriptを用いたWebページの画面操作は、ユーザー体験を向上させる上で不可欠な技術です。特に、座標の取得・操作、疑似要素の制御、そして動的な行追加は、インタラクティブなWebアプリケーション開発において重要な要素となります。
本記事では、これらの技術に関する最新の正確な情報と、ブログ記事の参考資料として活用できる情報をまとめました。これを読めば、あなたのWebアプリケーションがさらに一歩進化すること間違いなしです。
JavaScriptで画面遷移と画像表示をマスターしよう
URL操作でページを切り替える
Webアプリケーションにおいて、画面遷移はユーザーエクスペリエンスの根幹をなします。JavaScriptを使って画面遷移を行う最も基本的な方法は、`window.location.href`プロパティを操作することです。例えば、ボタンクリックで特定のURLへ移動させたい場合、`window.location.href = “新しいページのURL”;`と記述するだけで実現できます。この方法はシンプルですが、ページ全体のリロードを伴うため、画面が一度真っ白になるなど、ユーザーに一瞬の途切れを感じさせてしまう可能性があります。
よりスムーズな遷移を実現したい場合は、History API（`history.pushState()`や`history.replaceState()`）を利用するのが効果的です。これらを使うと、URLを変更しながらもページの再読み込みなしにコンテンツを切り替える、いわゆるシングルページアプリケーション（SPA）のような体験を提供できます。例えば、`history.pushState(null, ”, ‘新しいパス’);`とすることで、ブラウザの履歴に新しい状態を追加しつつ、URLバーの表示だけを変更することが可能です。これにより、ユーザーはWebページ内をスムーズに移動しているかのように感じられます。
ただし、History APIを使用する際は、ブラウザのリロード時にそのURLに対応するコンテンツがサーバー側で提供されるよう、ルーティングの設定が必要になる点に注意が必要です。例えば、`/products/1`というURLに直接アクセスした場合でも、JavaScriptだけでなくサーバーサイドでも適切なコンテンツが返されるように設計する必要があります。
DOM操作で画像を動的に表示・非表示
Webページに表示される画像は、静的なものだけではありません。JavaScriptを使うことで、ユーザーの操作や特定のアクションに応じて画像を動的に切り替えたり、表示・非表示を制御したりすることが可能です。例えば、ギャラリーサイトでサムネイルをクリックすると大きな画像が表示される、あるいは特定の条件を満たしたときにアイコン画像が表示されるといった機能は、このDOM操作によって実現されます。
最もシンプルなのは、既存の``要素の`src`属性をJavaScriptで変更することです。`document.getElementById(“myImage”).src = “新しい画像のパス.jpg”;`と記述すれば、表示される画像が瞬時に切り替わります。また、画像を一時的に隠したい場合は、その要素の`style.display`プロパティを`’none’`に設定するか、あるいは`classList.add(‘hidden’)`のようにCSSクラスを切り替えることで、簡単に表示・非表示を制御できます。後者の方法では、CSSで事前に非表示用のスタイル（例: `.hidden { display: none; }`）を定義しておくため、JavaScriptのコードがよりシンプルになり、再利用性も高まります。
動的に画像を生成して追加することも可能です。`document.createElement(‘img’)`で新しい``要素を作成し、`src`や`alt`などの属性を設定した後、`appendChild()`メソッドを使って既存のHTML要素に追加します。例えば、ユーザーがファイルをアップロードした際に、そのプレビュー画像を動的に表示するといったインタラクティブな機能に応用できます。
アニメーションを伴うスムーズな画面変化
単にコンテンツを切り替えるだけでなく、アニメーションを加えることで、ユーザー体験は格段に向上します。フェードイン・フェードアウト、スライドイン・スライドアウト、拡大・縮小など、様々なアニメーションをJavaScriptで制御することが可能です。これは、CSSのトランジションやアニメーションプロパティとJavaScriptを組み合わせることで、非常に効果的に実現できます。
例えば、要素をフェードアウトさせる場合、JavaScriptで要素に`opacity: 0;`と`transition: opacity 0.5s ease-out;`といったスタイルを適用するクラスを追加し、一定時間後に`display: none;`を適用するといった手順が考えられます。より高度なアニメーションでは、Web Animations APIや`requestAnimationFrame`といったAPIを活用します。特に`requestAnimationFrame`は、ブラウザの描画サイクルに合わせてアニメーションを実行するため、非常に滑らかでパフォーマンスの良いアニメーションを実現できます。参考情報にも「requestAnimationFrameを用いたアニメーション処理は、DOM操作による再描画（リフロー・リペイント）の回数を減らし、パフォーマンスを向上させます。」（参考情報より）と述べられているように、これは推奨される手法です。
CSSアニメーションとJavaScriptアニメーションの使い分けも重要です。シンプルな状態変化や短いアニメーションであればCSSアニメーションが推奨されます。なぜなら、ブラウザが直接アニメーションを最適化するため、JavaScriptによるインラインスタイル操作よりも高速で効率的だからです（参考情報より）。複雑な計算を伴うアニメーションや、ユーザーインタラクションに密接に連動するアニメーションの場合には、JavaScriptがより柔軟な制御を可能にします。
nth-childや疑似要素を使った要素の特定と操作
`nth-child`で特定の要素を狙い撃ち
Webページには、同じ種類の要素がリストのように並んでいることがよくあります。例えば、テーブルの行やリストの項目などです。このような場合、特定の順番にある要素だけをJavaScriptで操作したいときに非常に便利なのが、CSSセレクタの`:nth-child()`を応用する方法です。JavaScriptの`querySelector()`や`querySelectorAll()`メソッドは、CSSセレクタを引数として受け取ることができるため、このテクニックが利用できます。
例えば、`document.querySelector(‘ul li:nth-child(2)’)`と記述すれば、`
- `要素内の2番目の`
- `要素を正確に取得できます。これにより、特定のリストアイテムのテキストやスタイルを変更したり、イベントリスナーを追加したりといった操作が簡単になります。また、偶数番目の要素だけを選択したい場合は`li:nth-child(even)`、奇数番目なら`li:nth-child(odd)`といった表現も可能です。さらに、`li:nth-child(3n+1)`のように、複雑なパターンで要素を選択することもできます。
この手法の大きな利点は、JavaScript側で要素のインデックスを自分で計算する必要がない点です。CSSセレクタの強力な選択能力を借りることで、コードがより簡潔になり、意図が明確になります。複数の要素を一度に取得したい場合は`querySelectorAll()`を使用し、取得した`NodeList`を`forEach`などでループ処理することで、まとめて操作することも可能です。
疑似要素をJavaScriptで賢く操るテクニック
CSSの疑似要素（`::before`、`::after`など）は、HTML要素の特定の部分にスタイルを適用したり、コンテンツを追加したりする際に非常に強力なツールです。しかし、参考情報にもあるように、「これらの疑似要素は直接DOMとして扱えないため、JavaScriptから直接操作することはできません。」（参考情報より）という制約があります。これは、疑似要素がDOMツリーの一部として認識されないためです。
では、JavaScriptから疑似要素を制御するにはどうすれば良いでしょうか。その鍵は、間接的な操作にあります。最も一般的なアプローチは、JavaScriptで親要素のクラスを切り替え、そのクラスに紐づくCSSルールで疑似要素のスタイルを定義する方法です。例えば、ボタンにホバーした際に`::after`でアイコンを表示したい場合、JavaScriptでボタンに`active`クラスを追加・削除し、CSSで`.button.active::after { content: ‘✨’; }`のようにスタイルを記述します。
この方法であれば、JavaScriptはDOMクラスの操作に専念し、スタイリングのロジックはCSSに委ねることができます。これにより、コードの分離が図られ、保守性が向上します。
クラスやカスタムデータ属性で疑似要素を制御する具体例
疑似要素をJavaScriptで動的に制御する具体的な例を見てみましょう。前述のクラス切り替えの他、CSS変数（カスタムプロパティ）を利用することも非常に効果的です（参考情報より）。JavaScriptで親要素のカスタムプロパティの値を変更すると、その値がCSS側で疑似要素のスタイルに適用されるように設定できます。
例えば、進捗バーの`::after`要素の幅を動的に変えたい場合、HTMLに`
`と記述し、CSSで`.progress-bar::after { width: var(–progress); }`のように定義します。JavaScriptからは`document.querySelector(‘.progress-bar’).style.setProperty(‘–progress’, ‘75%’);`とすることで、疑似要素の幅を動的に変更できます。この方法は、色やサイズなど、様々なCSSプロパティの値を動的に制御するのに適しています。
また、`content`プロパティの値を動的に変更したい場合は、カスタムデータ属性と`attr()`関数を組み合わせる方法が有効です（参考情報より）。例えば、`要素`というHTMLがあった場合、CSSで`.tooltip::after { content: attr(data-tooltip); }`とすることで、`data-tooltip`属性の値が疑似要素のコンテンツとして表示されます。JavaScriptから`element.dataset.tooltip = “新しい情報”;`と変更すれば、疑似要素の表示内容もリアルタイムに更新されます。これらのテクニックを駆使することで、JavaScriptの柔軟性とCSSの表現力を最大限に引き出すことが可能になります。
JavaScriptで行の追加・削除・取得・行番号の特定
テーブルに行を動的に追加する方法
Webアプリケーションでは、データのリストをテーブル形式で表示し、それをユーザーの操作に応じて動的に更新するニーズが頻繁に発生します。JavaScriptでHTMLテーブルに行を動的に追加する最も標準的な方法は、`insertRow()`メソッドと`insertCell()`メソッドを組み合わせることです（参考情報より）。
まず、対象となる`
`要素を取得します。次に、`table.insertRow()`メソッドを呼び出すことで、新しい`
`（行）要素がテーブルの末尾に追加されます。このメソッドは、引数にインデックスを指定することで、特定の行の前に新しい行を挿入することも可能です。例えば、`table.insertRow(0)`とすれば一番最初の行として追加されます。新しい行が作成されたら、その行に対して`newRow.insertCell()`メソッドを必要な回数だけ呼び出し、各セルに` `要素を追加します。各セルには`textContent`や`innerHTML`プロパティを使ってデータを挿入します。 具体例:
<table id="myTable"> <thead> <tr><th>名前</th><th>年齢</th></tr> </thead> <tbody> <tr><td>田中</td><td>30</td></tr> </tbody> </table> <script> const table = document.getElementById('myTable').getElementsByTagName('tbody')[0]; const newRow = table.insertRow(); // 新しい行を末尾に追加 const cell1 = newRow.insertCell(); const cell2 = newRow.insertCell(); cell1.textContent = '山田'; cell2.textContent = '25'; </script>このコード片は、既存のテーブルに「山田」と「25」のデータを持つ新しい行を追加するものです。このように、JavaScriptを使えば、HTMLを直接編集することなく、ユーザーインターフェースを動的に更新できるのです。
既存の行を削除・取得する実践テクニック
行の追加と同様に、既存のテーブルの行を動的に削除したり、特定の行のデータを取得したりすることもJavaScriptで容易に行えます。行を削除するには、対象となる`
`要素を取得し、その親要素（通常は` `）の`removeChild()`メソッドを使用します。または、より直接的に`row.remove()`メソッドを呼び出すことも可能です。例えば、ユーザーが特定の行の「削除」ボタンをクリックした際に、その行をテーブルから消したい場合、イベントリスナーを設定し、クリックされたボタンの親要素の親要素（`
`の親が` `）を特定して削除する、というロジックを実装します。 既存の行からデータを取得する場合は、まず目的の`
`要素を取得し、次にその中の` `要素（セル）を`getElementsByTagName(‘td’)`などで取得します。取得した` `要素の`textContent`プロパティを読み取ることで、セル内のテキストデータを抽出できます。例えば、テーブルの全データを抽出してJavaScriptの配列に格納する、といった処理も可能です。 行番号の特定:
テーブル内の行番号を特定したい場合は、`rowIndex`プロパティが便利です。``要素は`rowIndex`プロパティを持っており、これによりテーブル内でのその行のインデックス（0から始まる）を直接取得できます。例えば、クリックされた行が何番目の行であるかを特定したい場合に、イベントオブジェクトの`target`から` `要素をたどり、`event.target.closest(‘tr’).rowIndex`のようにすることで、簡潔に行番号を取得できます。 `要素）に追加します。大量データ操作時のパフォーマンス最適化
テーブルに行を追加・削除する操作は、特にデータ量が多い場合にパフォーマンス上の問題を引き起こす可能性があります。DOM操作はブラウザにとってコストの高い処理であり、頻繁なDOM変更はページの再描画（リフロー・リペイント）を誘発し、ユーザーインターフェースの応答性を低下させる原因となります。
この問題を解決するための重要なテクニックの一つが、`DocumentFragment`の活用です（参考情報より）。`DocumentFragment`は、軽量な「ドキュメントの断片」であり、通常のDOMツリーとは異なり、直接ブラウザに描画されることはありません。新しい行やセルを多数追加する際、まず`DocumentFragment`内にそれらの要素を作成し、すべての要素の準備が整ってから、その`DocumentFragment`を一度だけ実際のDOM（例: `
`DocumentFragment`の利用例:
<script> const tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0]; const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { // 1000行を追加する場合 const newRow = fragment.appendChild(document.createElement('tr')); const cell1 = newRow.insertCell(); const cell2 = newRow.insertCell(); cell1.textContent = `データA-${i}`; cell2.textContent = `データB-${i}`; } tbody.appendChild(fragment); // 最後にまとめてDOMに追加 </script>このようにすることで、DOMへのアクセスと再描画の回数を最小限に抑え、パフォーマンスを大幅に向上させることができます。参考情報にも「DocumentFragmentを使用すると、メモリ上でDOMの変更をまとめてから一括で実際のDOMに追加できるため、パフォーマンスの向上が期待できます。」（参考情報より）と明確に述べられており、これは大量のDOM操作を行う際の必須テクニックと言えるでしょう。
JavaScriptでの座標取得と画面上の位置指定・移動
`getBoundingClientRect()`で要素の座標を正確に取得
Webページ上の要素をJavaScriptで動的に配置したり、ドラッグ＆ドロップ機能を実装したりするには、まずその要素が画面上のどこに位置しているかを正確に知る必要があります。この目的のために最も信頼性が高く、広く使われているメソッドが`element.getBoundingClientRect()`です（参考情報より）。
このメソッドは、要素のビューポート（ブラウザの表示領域）に対する相対的なサイズと位置を示すDOMRectオブジェクトを返します。返されるオブジェクトには、以下のプロパティが含まれています。
- `top`: 要素の上端からビューポートの上端までの距離
- `right`: 要素の右端からビューポートの左端までの距離
- `bottom`: 要素の下端からビューポートの上端までの距離
- `left`: 要素の左端からビューポートの左端までの距離
- `width`: 要素の幅
- `height`: 要素の高さ
これらの値は、スクロール位置に影響されず、常にビューポートの左上を原点（0,0）とした相対座標を返します。例えば、`const rect = element.getBoundingClientRect();`とすれば、`rect.left`で要素の左端のX座標、`rect.top`で要素の上端のY座標がピクセル単位で取得できます。これにより、ページのスクロール状況に関わらず、画面上の絶対的な位置を把握することが可能です。これは、要素が他の要素と重なっていないかを確認したり、特定の領域内に要素を配置したりする際に非常に強力なツールとなります。
取得した座標をもとに要素を自在に移動させる
`getBoundingClientRect()`で要素の現在の位置を把握したら、次はその要素をJavaScriptで目的の場所へ移動させる方法です。要素の移動には、主にCSSの`position`プロパティ（`absolute`や`fixed`）と、`top`、`left`などのプロパティを組み合わせるのが一般的です。
例えば、ある要素をX座標100px、Y座標50pxの位置に移動させたい場合、その要素のCSSスタイルを`position: absolute; left: 100px; top: 50px;`のように設定します。JavaScriptからこれを操作するには、`element.style.left = ‘100px’;`や`element.style.top = ’50px’;`のように直接スタイルプロパティを更新します。
しかし、これらの直接的なスタイル操作は、頻繁に行うとパフォーマンスに影響を与える可能性があります。特にアニメーションを伴う移動の場合、`transform`プロパティの`translate()`関数を使用することが推奨されます。`transform`プロパティはGPUによるアクセラレーションが効きやすく、レイアウトの再計算（リフロー）を発生させずに要素を移動できるため、より滑らかなアニメーションを実現できます。例えば、`element.style.transform = ‘translate(100px, 50px)’;`と記述すれば、現在の位置から相対的に要素を移動させることができます。
これらの座標操作は、メニューやツールチップの動的な配置、あるいはモーダルウィンドウの表示位置調整など、さまざまな場面で活用できます。
ドラッグ＆ドロップ機能の実装への応用
座標の取得と移動の技術は、Webアプリケーションにおけるドラッグ＆ドロップ（DnD）機能の実装において中心的な役割を果たします。DnD機能は、ファイルをアップロードする際や、リストの並び替え、キャンバス上での要素配置など、ユーザーインタラクションを豊かにするために広く利用されています。
基本的なドラッグ＆ドロップの流れは以下のようになります。
- ドラッグ開始（`mousedown`または`touchstart`イベント）:
- ドラッグ対象となる要素の現在の座標（初期位置）と、マウスカーソルの座標を取得します。
- 要素をドラッグ可能状態にするためのフラグを設定します。
- ドラッグ中（`mousemove`または`touchmove`イベント）:
- マウスカーソルまたは指の現在の座標を取得し、ドラッグ開始時からの移動量を計算します。
- この移動量を使って、ドラッグ対象要素の新しい座標を計算し、`element.style.left`や`element.style.top`、あるいは`transform: translate()`を使って要素を更新します。`requestAnimationFrame`を利用して、スムーズな動きを実現することが重要です（参考情報より）。
- ドラッグ終了（`mouseup`または`touchend`イベント）:
- ドラッグ可能フラグを解除し、要素を最終的な位置に固定します。
- 必要であれば、ドロップされた領域を判定し、それに応じた処理（例: ファイルアップロード、リストの並び替えデータの更新など）を実行します。
DnD機能は、複雑なUIを持つアプリケーションにおいて、ユーザーが直感的に操作できるインターフェースを提供するための強力な手段です。`getBoundingClientRect()`による正確な位置特定と、`transform`プロパティによる効率的な移動を組み合わせることで、高性能なドラッグ＆ドロップ機能を実装することが可能になります。
改行を正しく表示するためのJavaScriptテクニック
テキストコンテンツの改行を保持する基本的な方法
Webページ上でテキストコンテンツを扱う際、ユーザーが入力した改行（エンターキーによる改行）や、プログラム的に挿入された改行が、ブラウザで期待通りに表示されないという問題に直面することがよくあります。HTMLでは、単なる改行コード（`\n`）は空白文字として扱われ、表示上は一つのスペースになるか、無視されてしまいます。改行を視覚的に表示するには、HTMLの`
`タグを用いるのが基本です。JavaScriptでテキストエリアから取得した改行を含むテキストをHTML要素に表示する場合、まずテキスト内の改行コード（`\n`）を`
`タグに置換する必要があります。これは、文字列の`replace()`メソッドと正規表現を組み合わせることで簡単に行えます。具体例:
<script> const userInput = "こんにちは\nJavaScriptの世界へようこそ。\n改行が反映されます。"; const formattedText = userInput.replace(/\n/g, '<br>'); // 全ての\nを<br>に置換 // これをHTML要素に挿入する場合 document.getElementById('outputArea').innerHTML = formattedText; </script>このコードは、`userInput`に含まれるすべての改行文字を`
`タグに変換し、それをHTMLとして`outputArea`に挿入します。これにより、ユーザーが入力した通りにテキストが複数行にわたって表示されるようになります。`innerHTML`と`innerText`の使い分けと注意点
JavaScriptでHTML要素にテキストやマークアップを挿入する際、`innerHTML`と`innerText`（または`textContent`）のどちらを使用するかは非常に重要です。それぞれ異なる特性を持ち、用途に応じて使い分ける必要があります。
- `innerHTML`:
- このプロパティを使用すると、要素のHTMLコンテンツ全体を設定または取得できます。
- 文字列としてHTMLタグを含めることができ、そのタグはブラウザによってパースされ、実際のDOM要素として描画されます。
- 前述の`
`タグを使った改行の表示のように、HTML構造を動的に変更したい場合に非常に便利です。 - 注意点: ユーザーからの入力など、信頼できない文字列を`innerHTML`に直接設定すると、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。悪意のあるスクリプトが挿入され、実行されてしまう可能性があるため、セキュリティには最大限の注意が必要です。
- `innerText` / `textContent`:
- これらのプロパティは、要素内の生のテキストコンテンツのみを設定または取得します。
- 設定する文字列に含まれるHTMLタグは、エスケープされて単なる文字列として表示され、DOM要素としては解釈されません。
- `innerText`は要素の視覚的なテキストのみを考慮し、非表示の要素やCSSで隠されたテキストは取得しません。一方、`textContent`は要素内のすべてのテキストコンテンツを、CSSの表示状態にかかわらず取得します。
- セキュリティ面では`innerHTML`よりも安全であり、単にテキストのみを表示したい場合に推奨されます。
改行を正しく表示させたい場合は、テキストを`
`に変換してから`innerHTML`を使用するか、または後述するCSSの`white-space`プロパティを使用するのが一般的です。CSSの`white-space`プロパティとの連携
JavaScriptで明示的に`
`タグを挿入する代わりに、CSSの`white-space`プロパティを利用することで、HTML要素内の改行や空白文字の扱いを制御できます。これは、特にユーザー入力など、ソーステキストの改行構造をそのまま表示したい場合に非常に強力な方法です。`white-space`プロパティにはいくつかの値がありますが、改行を保持するために特に有用なのは以下の二つです。
- `white-space: pre;`: テキストエディタのように、ソースコード中の空白と改行をそのまま表示します。長い行は折り返されません。
- `white-space: pre-wrap;`: `pre`と同様に、空白と改行をそのまま表示しますが、必要に応じて長い行を折り返して表示します。これが最も一般的なユースケースに適合しやすいでしょう。
例えば、ユーザーのコメントや投稿内容を`
`要素に表示する際に、JavaScriptで取得したテキストをそのまま`textContent`で設定し、その``に`white-space: pre-wrap;`を適用することで、改行を自動的に表示させることができます。具体例:
<div id="commentOutput" style="white-space: pre-wrap;"></div> <script> const commentText = "これはユーザーが入力したコメントです。\n複数の改行や\n インデントも\nそのまま表示されます。"; document.getElementById('commentOutput').textContent = commentText; </script>この組み合わせは、DOM操作を最小限に抑えつつ、プレゼンテーションをCSSに委ねるため、パフォーマンスと保守性の両面でメリットがあります。適切な`white-space`プロパティを使用することで、JavaScript側での文字列操作を減らし、よりクリーンなコードを維持することが可能になります。
まとめ
JavaScriptを使えば、Webページの画面操作をよりリッチでインタラクティブなものにすることができます。今回ご紹介した画面遷移、画像表示、要素操作、行操作、座標操作、改行処理のテクニックを習得し、あなたのWebサイト開発に役立ててください。よくある質問
Q: JavaScriptで画面遷移する方法は？
A: JavaScriptでは、`window.location.href`に遷移先のURLを代入することで画面遷移が可能です。`window.location.replace()`や`history.pushState()`なども状況に応じて使用できます。
Q: JavaScriptで画像を表示するにはどうすればいい？
A: HTMLの`
`タグの`src`属性に画像のパスを指定することで表示できます。JavaScriptから動的に`src`属性を変更することで、画像の差し替えや表示・非表示を制御できます。
Q: nth-childと疑似要素で要素を取得する際の注意点は？
A: `nth-child`は親要素内の子要素の順番で指定しますが、同じタグ名以外もカウントされます。疑似要素（`::before`, `::after`）はDOMツリー上に存在しないため、直接取得することはできません。CSSでスタイルを適用する際に利用されます。
Q: JavaScriptでテーブルに行を追加するには？
A: DOM操作を用いて、`
`要素の中に`
`（行）要素を作成し、さらにその中に` `（セル）要素を追加していくことで行を追加できます。`element.appendChild()`メソッドなどがよく使われます。 Q: JavaScriptで座標を取得・指定する際の基本的な考え方は？
A: 画面上の座標は、通常、左上を原点(0,0)としてX軸（横方向）とY軸（縦方向）で表されます。`element.getBoundingClientRect()`で要素の座標やサイズを取得したり、`element.style.left`や`element.style.top`で絶対座標を指定して要素を移動させたりします。
