こんにちは、ライターのマサトです！
今回は、jQueryで特定のHTML要素を簡単に非表示にすることができる「hide()」メソッドについて学習していきましょう！
この記事では、
・「hide()」とは？
・「hide()」の使い方
という基本的な内容から、
・「hide()」のアニメーション
・表示・非表示の活用
などの応用的な使い方に関しても解説していきます。
この記事で、「hide()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「hide()」とは？
それでは、まず最初に「hide()」メソッドについての基本的な知識を学習しましょう！
「hide()」は、特定のHTML要素を非表示にすることが可能です。
また、単純に非表示にするだけでなくアニメーション効果を付与してゆっくり消えていくような演出も簡単に実現できるのが特徴です。
対象となるHTML要素は、テキスト・画像・リンク・ボタン…などほとんどの要素を指定可能です。
本記事では、「hide()」の基本から類似メソッドとの使い分けなどの応用編まで幅広く学べますので、ぜひ参考にしてみてください！
「hide()」の使い方
この章では、「hide()」の基本的な使い方について学習をしていきましょう！
一般的な構文から実際のプログラミング手法、および引数に関数を設定する方法について学んでいきます。
基本的な構文と書き方について
まずは、「hide()」の基本的な構文から見ていきましょう！
「hide()」は、非表示にしたいHTML要素を画面から非表示にできるメソッドになります。
次の構文を見て下さい！
対象要素.hide( ミリ秒, 関数 );
対象となるHTML要素にhide()を実行するだけなので簡単です。
引数の「ミリ秒」と「関数」は省略可能で、設定することでアニメーションや複雑な処理を実行することができます。（詳細は後述します）
対象となる要素はもちろんのこと、複数の要素をまとめて非表示にすることもできます。
HTML要素を非表示にする方法
ここからは、実際に「hide()」メソッドを使ったプログラミング手法を学んでいきましょう！
一般的な記述方法としては、【 対象要素.hide( ) 】 のように対象となる要素にそのまま「hide()」を実行するだけです。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
$('p').hide();
</script>
</body>
この例では、単純なp要素が配置されています。
このp要素に対して「hide()」を実行することで、画面にはp要素が表示されなくなるわけです。
ただし、実際にはユーザーがクリックなど何らかのアクションをした時に非表示を行うことが多いでしょう。
以下のサンプルでは、ボタンをクリックした時に「hide()」を実行する例です。
<body>
<p>サンプルテキスト</p>
<button>ボタン</button>
<script>
$('button').click(function() {
$('p').hide();
})
</script>
</body>
先ほどのp要素の下にボタンを配置しました。
そして、このボタンをクリックした時に「hide()」が実行されるようにイベント処理を記述していますね。
これにより、例えばドロップダウンメニューなどの実装へ発展させていくことが可能になります。
「hide()」のアニメーション
引数にミリ秒を指定する方法
「hide()」メソッドには引数を指定することも可能です！
引数に数値（ミリ秒単位）を与えることで、指定時間内に合わせて要素が消えるようになります。
つまり、引数なしだと瞬時に非表示となりますが、時間を指定することでゆっくり消えるようになるというわけです。
例えば、2秒間かけて非表示にするには次のように記述します。
<body>
<p>サンプルテキスト</p>
<script>
$('p').hide(2000);
</script>
</body>
対象となるp要素に、「hide(2000)」と記述することで2秒間（2000ミリ秒）かけて要素を非表示にしています。
結果的に要素はゆっくり時間をかけて消えていくので、アニメーション効果を付与したような演出が期待できるわけです。
注意点としては、指定できる数値はミリ秒なので「1秒 ＝ 1000ミリ秒」ということを忘れないようにしておきましょう！
引数にコールバック関数を使う方法
「hide()」メソッドの引数には「コールバック関数」を使用することも可能です。
これにより、hide()を実行して要素が非表示になった瞬間に何らかのアクションを実行することが出来るようになるのです。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
$('p').hide(2000, function() {
$('p').show();
});
</script>
</body>
この例では、p要素に対してhide()を使い2秒間かけて要素を非表示にしています。
ただし、関数を使って非表示になった瞬間にshow()メソッドで再び要素を表示させています。
そのため、p要素はゆっくりと消えていきますが、すぐにまた表示されるというアニメーションを行うわけです。
このように、特定のHTML要素を「表示・非表示」するのはとても簡単なのでぜひ覚えておきましょう！
引数に文字列（イージング）を設定する方法
「hide()」の引数には数値を指定する以外に、文字列（イージング）を設定することでアニメーション効果を付与できます。
利用できる文字列（イージング）としては次のとおりです。
・【 fast 】：素早く非表示にする
・【 slow 】：ゆっっくり非表示にする
・【 swing 】：デフォルトの非表示スタイル
・【 linear 】：一定の速度で非表示にする
上記内容を踏まえて、次のサンプル例を見てください！
<body>
<p id="one">サンプルテキスト１</p>
<p id="two">サンプルテキスト２</p>
<button>非表示</button>
<script>
$('button').click(function() {
$('#one').hide('fast');
$('#two').hide(2000, 'linear');
})
</script>
</body>
この例では、2つのp要素が配置されておりボタンをクリックすることで非表示になるようにしています。
1つ目のp要素には「hide(‘fast’)」を記述しており、素早く要素が非表示になるように設定しています。
2つ目のp要素には「hide(2000, ‘linear’)」を記述しており、一定の速度で2秒間かけて非表示になるように設定しています。
ボタンをクリックすると、1つ目のp要素が先に非表示となり続けてゆっくりと2つ目のp要素が非表示になりますね。
このように、数値だけでなく文字列を指定することでも同じようにアニメーション効果を付与できるわけです！
表示・非表示の活用
「show()」でHTML要素を表示する方法
「hide()」と一緒によく使われる類似メソッドとして「show()」があります。
「hide()」が要素を非表示にするメソッドなのに対して、「show()」は要素を表示することができます！
次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
$('p').hide();
$('p').show();
</script>
</body>
この例では、p要素をhide()で最初に非表示としています。
しかし、そのあとに「show()」を実行することで非表示だったp要素を表示させています。
つまり、「hide()」と「show()」をペアで活用することで、簡単に要素の「表示・非表示」を実現できるというわけです！
「toggle()」で表示・非表示を繰り返す方法
「toggle()」は、「hide() / show()」を1つにまとめた便利なメソッドとして知られています。
つまり、「toggle()」メソッドだけで特定の要素を「表示・非表示」することができるわけです！
次のサンプル例を見てください
<body>
<p>サンプルテキスト</p>
<button>非表示</button>
<script>
$('button').click(function() {
$('p').toggle();
})
</script>
</body>
この例では、p要素とボタンが配置されており、ボタンをクリックすることでtoggle()が実行されるようにしています。
注目すべきは「toggle()」の記述です！
p要素に対して「toggle()」としか記述していませんよね？
しかしながら、たったこれだけの記述で実行されるたびに要素を「表示・非表示」に切り替えることができるのです！
つまり、ボタンをクリックするたびにp要素が表示されたり、非表示になったりを繰り返すというわけです。
もちろん、hide()と同じように数値や文字列によるアニメーション効果も付与できます。
$('p').toggle(2000, 'linear');
これは2秒間かけてp要素を一定の速度で表示させたり、非表示にさせたりを繰り返す例です。
以上のことから、単純に「表示・非表示」を繰り返すだけなら「toggle()」メソッドが便利でしょう。
「toggle()」メソッドについての基本から応用までは、次の記事で詳しくまとめているのでぜひ参考にしてみてください！
まとめ
今回は、jQueryで特定の要素を非表示にできる「hide()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・hide()の引数に数値を指定することでアニメーション効果を付与できる
・hide() / show()の組み合わせで要素を「表示・非表示」できる
・hide()の引数に数値ではなく文字列を指定することでもアニメーション効果を付与できる
・toggle()メソッドだけで、hide() / show()の機能を実現することができる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
