JavaScriptのアプリ実装パターン~要素拡大・縮小~

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、要素の拡大・縮小の実装パターンを学習します。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

開発

ページの作成

最初にページの作成をしましょう。index.htmlに以下を記述してください。

このHTMLをブラウザ上で表示すると以下のようになります。

画像は、「imgIX」というサイトから取ってきているようです。

他にもQiita記事で紹介されている「lorempixel 」というサイトも面白そうですね。

スタイルの追加

次にスタイルをstyle.cssに記述してきましょう。

ここまで実装すると以下のようになります。

スタイルって難しいですよね。JavaScriptより難しいかも^^;

JavaScriptの学習なのでコピペでOKです。また、Bootstrapを使えば、もっと楽できると思います。

JavaScriptの実装

さて、いよいよJavaScriptを実装しましょう。

要素を拡大・縮小するには、activeクラスを操作すればOKです。

このactiveクラスを付け替えることで、要素を広げたり縮めたりすることができます。

要素を広げる

まずは、要素を広げる処理をscripts.jsに書きましょう。

querySelectorAllでは、HTMLに定義したpanelクラスが付いている全ての要素を取得します。そして、forEachで要素を回し、addEventListenerにてclickイベントを各要素に付与しています。

clickイベントでは、クリックした要素に対してactiveクラスを追加しているので、クリックすることで、要素が広がります。

要素を縮小する

次は、要素を縮小してみましょう。activeクラスを削除することでそれを可能にします。

実は、activeクラスを削除することはとても簡単です。querySelectorAllで取得した要素にはclassListパラメータがあり、そのパラメータはremoveメソッドを持っています。このremoveメソッドに削除したいクラス(ここではactive)を指定することで、クラスを削除できます。

おわりに

実際の現場でも要素の拡大・縮小処理を実装することはよくあります。その場合もcssと組み合わせて行われますので、このサンプルはとても有用だと思います。

cssの勉強にもなりますしね^^

それでは、また!

JavaScriptまとめ

コメントを残す