・「prepend()」のアニメーション・「prepend()」の類似メソッド・Callback関数の設定方法などの応用的な使い方に関しても解説していきます。まとめ「prepend()」とは?それでは、まず最初に「prepend()」メソッドについて基本的な知識から学習をしていきましょう!「prepend()」メソッドは、指定の要素内に文字列やHTML要素を追加することができるメソッドになります。<li>リスト</li></ul>この例では、リスト要素が配置されているのが分かります。この時に「li要素」が持つすべてのテキスト「リスト」の先頭に文字列やHTMLを追加したい時に「prepend()」は役に立つわけです。「リスト」というテキストの前に「サンプル」を挿入して「サンプルリスト」にしたり、リンク要素を追加するなど活用範囲は広いでしょう。本記事では、「prepend()」の基本的な使い方から応用技まで体系的に学べるように解説していきますので、ぜひ参考にしてみてください!「prepend()」の使い方ここからは、prepend()の基本的な使い方を学習していきましょう!主に、文字列・HTMLの追加方法や削除の方法について学んでいきます。】のように引数へ文字列を設定するだけです。次のようなp要素があるとします。<p>こんにちは!</p>この例は、単純に「こんにちは!」というテキストが表示されるだけですね。それでは「prepend()」を使って、任意の文字列を追加してみましょう!$('p').prepend('太郎さん、');このようにprepend()の引数へ文字列を設定することで、「太郎さん、こんにちは!」というテキストに変更されるわけです。次に、文字列ではなく「HTML要素」を追加する方法について見ていきましょう!HTML要素の場合も同じようにprepend()の引数へ指定するだけなので簡単です。<li><strong>ユーザー名:</strong>三郎</li></ul>このように引数へHTMLタグをそのまま文字列として記述することで、対象要素の先頭に追加されるのです。今回の場合であれば、すべての「li要素」の先頭に「strong要素」が追加されます。今度は、複数のHTML要素を一度に追加する方法について見ていきましょう!実は、「prepend()」の引数には複数の要素を指定できるように設計されています。)】のように繋げていけば良いわけです。空のdiv要素があるとします。a」の3種類のHTML要素を指定していますね。実行後のHTMLを見てみると、空のdiv要素内に3種類の要素が追加されていることが確認できます。「prepend()」は要素を追加するだけなので、追加した要素を削除するには別のメソッドを利用する必要があります。一般的にHTML要素の削除でよく使われるメソッドとして「remove()」があります。次のようなHTMLがあるとします。<p>こんにちは、太郎さん!</p></div>div要素内に任意のテキストを記述したp要素が配置されています。このdiv要素を対象にして、prepend()でh1要素を追加したあとにそのまま削除してみましょう!$('div').prepend('<h1>タイトル</h1>');$('h1').remove();この例では「h1要素」をdiv要素内に配置したあとに、remove()メソッドを使ってその要素を削除していますね。「prepend()」のアニメーションこの章では、「prepend()」で追加された要素にアニメーション効果を付与する方法を見ていきましょう。「animate()」の使い方および実際のサンプル事例について学んでいきます。「animate()」で要素にアニメーションを追加する方法まずは、アニメーション効果を付与できる「animate()」メソッドの使い方から見ていきましょう。「animate()」は、CSSのプロパティやduration(秒数)を指定するだけで簡単にHTML要素をアニメーションさせることが出来ます。)アニメーションさせたい要素を対象にして「animate()」を実行させるのが基本となります。「CSSプロパティ」はオブジェクト形式で指定するのが特徴的で、「-(ハイフン)」は省略して記述します。40」のようにキャメルケースで記述するわけです。「duration」はアニメーションする時間をミリ秒で設定します。「easing」は、「linear」か「swing」を文字列で指定することで動きを変えることができます。「prepend()」で追加した要素をアニメーションさせる方法それでは、「animate()」を活用したアニメーション効果の付け方を見ていきましょう!まずは次のような空のdiv要素を用意します。<div></div>このdiv要素内にp要素を追加して、同時にアニメーション効果を付与するには次のように記述します。2000);この例では、div要素に対して「prepend().animate()」のように2つのメソッドをチェーンで繋いで実行しています。これにより、prepend()で要素を追加したあとにanimate()が実行されるようになるわけです。animate()の引数には「font-size」が設定されており、durationは2秒に指定しています。実行結果を見ると、追加されたp要素が2秒間かけて40pxのフォントサイズに変化していくアニメーションになります。prepend()の類似メソッドここからは、prepend()によく似た機能を持っているメソッドについて見ていきましょう!初心者の方がよく混乱しがちな「append()」「before()」について学んでいきます。「append()」で要素内の末尾に追加するまずは、「append()」メソッドについて見ていきましょう!「append()」は、簡単に言えばprepend()の完全な逆バージョンと言えます。対象要素内の先頭ではなく「末尾」に文字列やHTML要素を追加するメソッドになるわけです。$('p').append('太郎さん<strong>!!</strong>');</script></body>実行後のHTML<p>こんにちは、太郎さん<strong>!!</strong></p>この例では単純なp要素が1つ配置されており、append()を使って文字列・HTML要素を追加しているのが分かります。「prependTo()」で要素内の先頭に追加する次に、「prependTo()」メソッドについて学習しましょう!基本的に「prepend()」「prependTo()」は同じ用途に使われるメソッドなのですが指定方法が少し異なります。】のように引数に対象となる要素を指定します。prependTo()それぞれでp要素のテキストへHTML要素を追加しています。それぞれ結果はまったく同じになりますが、ポイントは記述方法がそれぞれ逆になっていることです!対象要素である「p要素」を先に決めいているのが「prepend()」で、最後に決めているのが「prependTo()」になります。「prependTo()」は文字列だけを追加することができない点も忘れないようにしましょう!「prepend()」と「before()」の違い今度は、「before()」メソッドについて見ていきましょう!「before()」も「prepend()」も対象要素の先頭に文字列やHTML要素を追加するというのは同じです。「prepend()」は対象要素内の先頭に追加するのに対して「before()」は対象要素よりも先頭に追加されます。別の言い方をすると、「before()」は対象要素の直前に追加されると言った方が分かりやすいかもしれませんね。次のようなHTML要素があるとします。<p>こんにちは</p></div>div要素内に1つのp要素が配置されています。<p>こんにちは</p></div>実行後のHTMLに注目してください!「before()」で追加されたp要素は、div要素よりも先頭に追加されていますよね?(直前に追加)対して「prepend()」はdiv要素内の先頭に追加されています。「div要素」を対象にして、中と外で追加の方法が異なるので注意しておきましょう!Callback関数の設定方法これまで「prepend()」の引数に文字列やHTML要素を指定してきましたが、実は「Callback関数」を設定することも可能です!関数の引数として対象要素の「index番号」を取得できるので、複数の要素を一気に処理したい場合に便利です。<li>ジュース</li></ul>3つの「ジュース」と記述されたli要素が配置されていますね。<li>イチゴジュース</li></ul>この例では、prepend()の引数に関数を設定して配列データをreturnしているのが分かります。この関数は対象要素を1つずつ処理することができるので、「index」番号を利用することで配列を1つずつ返しているわけです。最終的に実行後のHTMLのように、ジュースの名前がそれぞれ追加されることになります!まとめ今回は、対象要素内に文字列やHTML要素を追加することができる「prepend()」を学習しました!最後に、もう一度ポイントをおさらいしておきましょう!・prepend()は文字列・HTML要素を対象要素内の先頭に追加することができる・追加した要素を削除するには「remove()」を使う・アニメーションを適用させるには「animate()」を使う・prepend()の引数にはCallback関数を指定することもできる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。